/* =============================================================
   KI mit Plan, kimitplan.de: die drei Produktseiten
   Dünne Schicht auf style.css, wird immer NACH style.css eingebunden.
   ============================================================= */

/* =============================================================
   Bewusst ohne Regel: .dark-section, .grid-paper-dark, .grid-paper
   ============================================================= */

/* =============================================================
   Kopf der Produktseite: Zurück-Weg statt Navigation
   ============================================================= */

.site-header .nav-toggle { display: none; }

.zurueck-leiste {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  min-width: 0;
}
.zurueck-leiste .lang-switch { margin-left: auto; }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--black);
  color: #14161a;
  font-family: var(--font-cond);
  font-size: var(--t-karte);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
/* Der Pfeil kann aus zwei Richtungen kommen: als Zeichen im Markup oder aus
   dieser Regel. Steckt schon einer im Markup, bekommt er nur die Farbe. */
.zurueck > span[aria-hidden] {
  font-family: var(--font-mono);
  font-size: 1.05rem;   /* Ausnahme, siehe Kommentar oben */
  line-height: 1;
  color: var(--red-dark);
  flex: none;
}
.zurueck:not(:has(> span))::before {
  content: "\2190";
  font-family: var(--font-mono);
  font-size: 1.05rem;   /* Ausnahme wie oben, Bediensymbol */
  line-height: 1;
  color: var(--red-dark);
  flex: none;
}
.zurueck:hover { border-color: var(--red); background: #ffffff; color: #14161a; }

@media (max-width: 620px) {
  /* Sobald die Kopfzeile umbricht, ist sie höher als min-height und
       align-items:center hat nichts mehr zu zentrieren. Der Innenabstand
       holt den Abstand nach oben zurück. */
  .site-header .wrap { flex-wrap: wrap; gap: 0.6rem 0.75rem; padding-block: 1.1rem; }
  .zurueck-leiste { gap: 0.5rem 0.8rem; }
  .zurueck { padding: 0.4rem 0.75rem 0.4rem 0.65rem; font-size: var(--t-karte); gap: 0.45rem; }
}

.site-header .wrap > .btn {
  padding: 0.6rem 1.05rem;
  font-size: var(--t-knopf-fein);
  min-width: 12.5rem;
  justify-content: center;
  text-align: center;
  flex: none;
}

body > .progress {
  position: fixed;
  top: 0;
  bottom: auto;
  z-index: 101;
}

/* =============================================================
   Produktnamen: PLUS und MAX
   ============================================================= */
.teilname { color: var(--red-dark); letter-spacing: 0.04em; }
/* Auf der schwarzen Fläche hält das dunkle Rot die Lesbarkeit nicht.
   Gleiches Hellrot wie im Kopf der Rezeptkarte. */
.price-panel-head .teilname,
.recipe-head .teilname { color: #ff8a88; }

/* =============================================================
   Hero der Produktseite
   ============================================================= */

/* min-width:0 nötig: eine lange Kopfzeile bläst sonst die Rasterspalte auf und schiebt das Bild aus dem Fenster */
.hero-copy { min-width: 0; }

.hero { padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 2.5rem); }

/* Das Hero-Bild beginnt am ersten Absatz, nicht an der Vorzeile.
   Die Mechanik dazu steht in style.css bei --bild-zeile, hier nur die Zahl. */
.hero .wrap { --bild-zeile: 3; }

.beweis { padding-top: clamp(2rem, 4vw, 2.75rem); }

/* 4 zu 3 bleibt, auf allen drei Produktseiten gleich.
   height:auto MUSS hier stehen: style.css setzt für .hero-figure img das
   Porträtformat der Hauptseiten, sonst stünde jedes Produktbild hochkant. */
.hero-figure img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-position: 50% 50%;
}

.hero-facts {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Bleibt Mono: im Kopf der Produktseiten stehen Zahlen */
.hero-facts li {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  border: 1px solid var(--line-strong);
  background: var(--card);
  padding: 0.4rem 0.75rem;
  color: var(--text-soft);
}
.hero-facts li strong { color: var(--text); font-weight: 600; }
.hero-facts li.hot { border-color: var(--black); }
.hero-facts li.hot strong { color: var(--red-dark); }

/* Der Nachsatz unter den Knöpfen bekommt eine eigene Zeile, sonst liest er
   sich wie die Beschriftung des zweiten Knopfs. */
.hero-ctas .note { flex: 1 0 100%; margin: 0.35rem 0 0; }

/* =============================================================
   Passt / passt nicht
   ============================================================= */
/* Aufteilung D, der einzige belegte Fall für 1:1: der Vergleich */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
}
@media (max-width: 900px) { .fit-grid { grid-template-columns: 1fr; gap: 2rem; } }

.fit {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.75rem;
}
/* Die Absage liegt eine Fläche tiefer statt auf der weißen Karte */
.fit.fit-no { background: var(--ground-deep); }
/* Steht der Abschnitt selbst auf der tieferen Fläche, braucht die Absage
   eine Fläche darunter: die Absage liegt immer eine Fläche unter ihrem Abschnitt. */
.alt .fit.fit-no { background: var(--ground-tiefer); }

.fit h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-size: var(--t-h3);
}
.fit h3 .sign {
  font-family: var(--font-mono);
  width: 1.7rem;
  height: 1.7rem;
  display: inline-grid;
  place-items: center;
  /* Bediensymbol in einer 1,7-rem-Fläche, bewusste Ausnahme von der Schrift-Skala */
  font-size: 1rem;
  line-height: 1;
  flex: none;
}
.fit-yes h3 .sign { background: var(--card); border: 1px solid var(--red); color: var(--red-dark); }
.fit-no h3 .sign { background: var(--card); border: 1px solid var(--line-strong); color: var(--muted); }

.fit .zeichen {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 2.6rem;   /* Bediensymbol auf seine Zielfläche gesetzt, siehe oben */
  line-height: 1;
  margin-bottom: 0.8rem;
}
.fit-yes .zeichen { color: var(--red-dark); }
.fit-no .zeichen { color: var(--muted); }

.fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.fit li { padding-left: 1.4rem; position: relative; font-size: var(--t-karte); }
.fit-yes li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
}
/* U+2212 als Escape, nicht der Bindestrich: sitzt auf gleicher Höhe wie das Plus */
.fit-no li::before {
  content: "\2212";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--muted);
}
.fit-no li { color: var(--text-soft); }

/* =============================================================
   Zweispalter: Text links, Karte oder Bild rechts
   ============================================================= */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 544px) minmax(0, 1fr);
  gap: 3rem;
  align-items: stretch;
}
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 2rem; } }

/* Kein toter Rand unter dem letzten Element einer Spalte: beide Spalten sind
   gleich hoch, der vorletzte Block schiebt den Rest nach unten. Die Einschränkung
   auf .pillars und p gehört dazu, sonst trifft die Regel auch die Rezeptkarte. */
.duo > div { display: flex; flex-direction: column; }
.duo > div > .pillars:nth-last-child(2),
.duo > div > p:nth-last-child(2) { margin-bottom: auto; }
.duo .zitat:last-child { margin-bottom: 0; }

/* Die Notiz unter einer Rezeptkarte ist so breit wie die Karte, unter der sie steht */
.duo .recipe + .note.fliess { max-width: var(--kartenbreite); }

/* Die drei Säulen schalten in style.css ab 620 Pixeln FENSTERbreite auf drei
   Spalten; im Zweispalter steht ihnen nur die halbe Seite zur Verfügung. */
.duo .pillars { grid-template-columns: 1fr; }

/* =============================================================
   Rezept-Schau (Rezepte-Datenbank): drei Karten mit echtem Inhalt
   ============================================================= */
/* 3 rem Rinne, wie in jedem anderen Raster */
.rezept-schau {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  align-items: stretch;
}
@media (max-width: 1199px) { .rezept-schau { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .rezept-schau { grid-template-columns: 1fr; gap: 2rem; } }
/* In der Reihe zählt die Spaltenbreite, nicht die Kartenbreite. Die Fußzeile
   wird nach unten gedrückt, damit die drei Karten auf einer Linie abschließen. */
.recipe.schau {
  max-width: none;
  display: flex;
  flex-direction: column;
}
.recipe.schau .recipe-body { flex: 1 1 auto; }
.recipe.schau .recipe-foot { margin-top: auto; }

.recipe.schau .recipe-head {
  background: var(--card);
  color: var(--black);
  border-bottom: 2px solid var(--red);
}
.recipe.schau .recipe-head .tag,
.recipe.schau .recipe-head .teilname { color: var(--muted); }

/* Gleiche Bauform wie .prompt-block pre in style.css, nur in der Karte.
   Wer eine der beiden Regeln anfasst, fasst die andere mit an. */
.recipe.schau .prompt-block { margin-top: 0.25rem; }
.prompt-mini {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--ground-deep);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-mono-block);
  line-height: 1.6;
  color: var(--text);
  /* Wie im großen Prompt-Block: ein Zeilenumbruch trägt hier Bedeutung,
     deshalb umbrechen statt seitwärts rollen. */
  white-space: pre-wrap;
  word-break: break-word;
}

/* =============================================================
   Wochenplan (KI-Workshop): vier Wochen an einer roten Route
   ============================================================= */
.week-plan { position: relative; max-width: 860px; }
/* Die gestrichelte Führungslinie ist der ungegangene Weg, die rote Route
   darüber der gegangene. Sie wächst beim Lesen mit. */
.week-plan::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 7px, transparent 7px 14px);
}
.week-plan .route {
  position: absolute;
  top: 0;
  left: 11px;
  width: 2px;
  height: 100%;
  background: var(--red);
  transform-origin: top center;
  transform: scaleY(0);
}
@supports (animation-timeline: view()) {
  .week-plan .route {
    animation: route-grow linear both;
    animation-timeline: view();
    animation-range: entry 10% exit 90%;
  }
  @keyframes route-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
/* Ohne JavaScript und bei reduzierter Bewegung steht die Route sofort,
   sonst wäre sie unsichtbar. */
.no-js .week-plan .route,
.reduced-motion .week-plan .route { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .week-plan .route { transform: scaleY(1) !important; }
}

.week { position: relative; padding: 0 0 3rem 3.5rem; }
.week:last-child { padding-bottom: 0.5rem; }
/* Quadratische Wegmarke: die Mitte des Quadrats liegt auf der Mitte der Linie */
.week::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.35rem;
  width: 16px;
  height: 16px;
  background: var(--card);
  border: 3px solid var(--red);
  z-index: 1;
}
.week-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.week h3 { font-size: var(--t-h3-gross); margin-bottom: 0.5rem; }
.week > p { color: var(--text-soft); max-width: var(--lesebreite); }

/* Was zwischen zwei Sessions passiert. Gestrichelte Kante, weil es die
   Zeit dazwischen ist und nicht der Termin selbst. */
.week .between {
  margin: 1rem 0 0;
  max-width: 56ch;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 2px dashed var(--line-strong);
  font-size: var(--t-fein);
  color: var(--muted);
}
.week .between strong {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* =============================================================
   Sessionbogen (Sparring MAX): acht Termine über zwei Monate
   ============================================================= */
/* Die Linien zwischen den Phasen bleiben: ohne sie fielen die dreispaltigen
   Phasen auseinander. */
.arc { border-top: 1px solid var(--line); }

.arc + .note.fliess { max-width: var(--lesebreite-lead); }
.arc-phase {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) minmax(0, 40rem) minmax(120px, 2fr);
  gap: 1.5rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.arc-phase h3 { margin-bottom: 0.4rem; font-size: var(--t-h3); }
.arc-phase p { margin: 0; color: var(--text-soft); max-width: var(--lesebreite); }
/* Bleibt Mono: die Mengenspalte des Bogens */
.arc-phase .arc-sessions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--muted);
  text-align: left;
}
.arc-phase .arc-sessions .ticks { display: flex; gap: 0.35rem; }
/* Ein Kästchen je Termin, quadratisch wie alles andere. */
.arc-phase .tick {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--red);
}
@media (max-width: 800px) {
  .arc-phase { grid-template-columns: 1fr; gap: 0.5rem; }
  .arc-phase .arc-sessions {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.75rem;
  }
}

/* =============================================================
   Das gehört danach dir
   ============================================================= */
/* 3 rem Rinne, wie in jedem anderen Raster */
.owns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
@media (max-width: 1199px) { .owns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .owns { grid-template-columns: 1fr; } }
.own {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  align-items: start;
  /* align-items richtet den Inhalt in seiner Zeile aus, align-content die Zeilen
       im Raster. Ohne die zweite Angabe verteilt das Raster die Resthöhe auf seine
       zwei auto-Zeilen, und die Überschrift hängt in kürzeren Karten tiefer. */
  align-content: start;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.75rem;
}
.own h3 { font-size: var(--t-h3-klein); margin-bottom: 0.3rem; }
.own p { margin: 0; color: var(--text-soft); font-size: var(--t-karte); }

/* =============================================================
   Preis-Panel
   ============================================================= */

/* Gleiche Bauart wie die hervorgehobene Stufe der Angebotstreppe auf der
   Startseite. Kein overflow:hidden, sonst schneidet es später angesetzte
   Schnittmarken ab. */
.price-panel {
  max-width: none;
  background: var(--card);
  border: 2px solid var(--black);
  position: relative;
}
/* Kopfleiste der Preistafel: Produktname links, Wortmarke rechts. Beides sind
   Namen, keine Werte, deshalb Grotesk. Preis und Beisatz bleiben Mono. */
.price-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.8rem 2rem;
}
/* Dasselbe helle Rot wie im Kopf der Rezeptkarte: reines Markenrot hält auf
   Schwarz die 4,5 zu 1 nicht. */
.price-panel-head .tag { color: #ff8a88; font-weight: 500; }
.price-panel-body { padding: 2.25rem 2rem; }
@media (min-width: 900px) {
  .price-panel-body {
    display: grid;
    /* Die dritte Spalte ist gedeckelt, nicht auto: mit auto wird sie so breit wie
           ihr breitester Inhalt und drückt die Mittelspalte zusammen. */
    grid-template-columns: minmax(0, 544px) minmax(0, 1fr) minmax(0, 18rem);
    column-gap: 3rem;
    align-items: start;
  }
  .price-panel-body > * { grid-column: 1; }
  .price-panel-body > .includes {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    margin-top: 0;
  }
  .price-panel-body > .price-row {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    text-align: right;
    margin-bottom: 0;
  }
  .price-panel-body > .price-row .price-big small { display: block; margin-top: 0.35rem; }
  .price-panel-body > .price-cta {
    grid-column: 3;
    grid-row: 2;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.2rem;
  }
}
/* Der Deckel für alles, was im Panel ein Satz ist. Namentliche Klassen statt
   einer Ausschlussliste: ein Absatz ohne Klasse ist Fließtext, ein Absatz mit
   Klasse bringt sein Maß mit. */
.price-panel-body > p,
.price-panel .note,
.price-panel .plus-hinweis { max-width: var(--lesebreite); }

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
}
.price-big {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--black);
}
.price-big small {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.price-panel-body .includes {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.28rem 2rem;
  font-size: var(--t-karte);
  color: var(--text-soft);
}
.price-panel-body .includes li { padding-left: 1.1rem; position: relative; }
.price-panel-body .includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--listenstrich);
  width: 6px;
  height: 1px;
  background: var(--line-strong);
}

/* Die Bonus-Rechnung: liegt eine Fläche tiefer, weil sie eine Nebenrechnung
   ist und nicht der Preis. Nur die Summenzeile ist rot. */
.bonus-math {
  margin-top: 1.75rem;
  /* So breit wie ihr Inhalt, nicht so breit wie die Kachel: Lesebreite plus
       Innenabstand plus die zwei Kanten. */
  max-width: calc(var(--lesebreite) + 3rem + 2px);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line-strong);
  background: var(--ground-deep);
  font-size: var(--t-karte);
}
/* Die Bonus-Rechnung ist der eine Ort, an dem dieses Etikett in Mono bleibt:
   darunter steht eine Tabelle mit Beträgen. */
.bonus-math .recipe-label {
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 400;
}
/* Ausser auf der Rezepte-Seite: dort trägt derselbe Kasten einen Namen statt
   eines Werts, deshalb Grotesk. */
.bonus-math .recipe-label.wortmarke { font-family: var(--font-sans); }
.bonus-math table { border-collapse: collapse; width: 100%; max-width: 420px; }
.bonus-math td { padding: 0.25rem 0; }
.bonus-math td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.bonus-math tr.sum td {
  border-top: 1px solid var(--line-strong);
  padding-top: 0.5rem;
  font-weight: 600;
}
.bonus-math tr.sum td:last-child { color: var(--red-dark); }

.price-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
.price-panel .note { margin: 1.25rem 0 0; }

@media (max-width: 640px) {
  .price-panel-body { padding: 1.75rem 1.25rem; }
  .price-cta .btn { width: 100%; }
  /* Der Beisatz steht hier auf einer eigenen Zeile und darf darin umbrechen.
       Innerhalb der Preiszeile bleibt nowrap richtig. */
  .price-big small { display: block; margin-top: 0.5rem; white-space: normal; }
}

/* =============================================================
   Garantie
   ============================================================= */
.guarantee {
  margin-left: 0;
  margin-right: auto;
}

.plus-hinweis { font-style: italic; }

/* =============================================================
   Über mich, je Produktseite eine eigene Fassung
   ============================================================= */
/* 5 zu 7, gleicher Ausschnitt wie auf den Hauptseiten */
.mini-about img {
  width: 100%;
  aspect-ratio: 5 / 7;
  height: auto;
  object-fit: cover;
  object-position: var(--ausschnitt, 50% 50%);
  border: 1px solid var(--line);
}
.mini-about figcaption {
  margin-top: 0.8rem;
  font-family: var(--font-sans);
  font-size: var(--t-label-fein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Die Überschrift ist im Markup ein h2, soll aber nicht so laut sein wie eine
   Abschnittsüberschrift: der Block stützt den Verkauf, er eröffnet kein Kapitel. */
.mini-about h2 { font-size: var(--t-h3-gross); margin-bottom: 0.7rem; }
.mini-about .lead { font-size: var(--t-lead); font-weight: 500; color: var(--black); }
.mini-about p { color: var(--text-soft); max-width: var(--lesebreite); }
.mini-about p:last-child { margin-bottom: 0; }

/* =============================================================
   Zitat-Band
   ============================================================= */
.quote-band {
  background: transparent;
  border: 0;
  padding: 0;
}
.quote-band > .wrap-content {
  max-width: 800px;
  margin: 6rem auto;
  padding: 0 var(--edge);
  text-align: center;
}
.quote-band blockquote {
  margin: 0;
  font-family: var(--font-cond);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-zitat-gross);
  line-height: 1.25;
  color: var(--black);
}
.quote-band cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-sans);   /* Zuschreibung in Grotesk */
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 700px) {
  .quote-band > .wrap-content { margin: 3.5rem auto; }
  .quote-band blockquote { font-size: var(--t-zitat); }
}

/* =============================================================
   Abschluss der Seite: der letzte Weg
   ============================================================= */
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 544px) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-grid .btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
/* Der Textweg neben einem Knopf ist ein Bauteil und hat eine Fassung, nicht
   eine je Elternelement. */
.alt-way { margin-top: 1.5rem; font-size: var(--t-karte); color: var(--text-soft); }

.cta-photo { margin: 0; }
.cta-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.cta-photo figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-sans);   /* Bildunterschrift, siehe style.css bei .hero-figure figcaption */
  font-size: var(--t-label-fein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =============================================================
   Sprachschalter
   ============================================================= */

.lang-switch .divider { display: none; }

/* =============================================================
   Druck
   ============================================================= */
@media print {
  .price-panel-head {
    background: none !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .price-panel-head .tag { color: var(--text) !important; }
  /* Der Weg zurück ist eine Bedienung, auf Papier sagt er nichts. */
  .zurueck-leiste { display: none !important; }
  .price-panel, .own, .fit,
  .week, .arc-phase, .recipe, .mini-about { break-inside: avoid; }
}


/* ---------- Störer: die Termine der nächsten Reihe ----------
   Liegt schräg über der Ecke des Hero-Bildes. Er trägt bewusst kein Rot:
   Im Hero stehen schon der Preis, die Auszeichnung in der Überschrift und
   zwei Schnittmarken, und die Rot-Regel erlaubt zwei Stellen je
   Bildschirmhöhe. Auffällig wird er durch die Drehung und die Überlappung. */
.hero-figure { position: relative; }

.stoerer {
  position: absolute;
  left: -1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  width: 15.5rem;
  transform: rotate(-2.5deg);
  background: var(--white);
  border: 1px solid var(--black);
  /* Die rote Kante oben ist dieselbe Rolle wie an den Karten der Seite:
     sie zeigt, dass hier etwas Neues steht. Dazu die Kennzeile in Text-Rot.
     Zwei rote Stellen, damit bleibt der Störer innerhalb der Rot-Regel. */
  border-top: 3px solid var(--red);
  padding: 0.85rem 1rem 0.9rem;
}
/* Nur der untere Abstand wird zurückgesetzt, den die Grundregel für p setzt.
   Der obere gehört den Bauteilen darunter, sonst schlägt diese Regel deren
   margin-top per Spezifität. */
.stoerer p { margin-bottom: 0; }

/* Die Karte dreht sich beim Klick auf "Details" und zeigt hinten die vier
   Sessions. Ohne JavaScript stehen beide Seiten untereinander, dann fehlen
   nur die zwei Knöpfe.

   Jede Seite bekommt ihre eigene Höhe, nicht beide die der höheren, sonst
   steht unter der kürzeren leeres Weiß. Aufgeklappt richtet die Karte sich
   gerade und wird breiter, sonst kreuzt ihre rote Oberkante die Schnittmarke
   am Bildrahmen und die Rückseite wird zu hoch. Alle Bewegungen laufen in
   derselben Dauer, damit es eine Geste bleibt. */
.stoerer-innen { display: grid; gap: 1rem; }
.stoerer-knopf { display: none; }

/* width und min-height laufen hier bewusst mit, obwohl Layout-Eigenschaften
   sonst nicht animiert werden. Beide sind tragend, ein Ersatz über transform
   verzerrt Text. Die Ausnahme gilt diesem Bauteil, nicht der Datei. */
html:not(.no-js) .stoerer {
  perspective: 1400px;
  transition: width 0.42s var(--ease), transform 0.42s var(--ease);
}
html:not(.no-js) .stoerer[data-offen] {
  width: 20.5rem;
  transform: rotate(0deg);
}
html:not(.no-js) .stoerer-innen {
  display: block;
  position: relative;
  transform-style: preserve-3d;
  min-height: var(--h-vorn, 0px);
  transition: transform 0.42s var(--ease), min-height 0.42s var(--ease);
}
html:not(.no-js) .stoerer[data-offen] .stoerer-innen {
  transform: rotateY(180deg);
  min-height: var(--h-hinten, 0px);
}
/* Während das Skript beide Seiten ausmisst, darf nichts laufen. Die Klasse
   hängt nur einen Bildlauf. */
html:not(.no-js) .stoerer.stoerer-misst,
html:not(.no-js) .stoerer.stoerer-misst .stoerer-innen { transition: none; }
/* Die abgewandte Seite wird ausgeblendet, nicht nur weggedreht:
   backface-visibility versteckt sie für das Auge, nicht vor Layout, Tastatur
   und Vorlesewerkzeug. Der Wechsel sitzt in der Mitte der Drehung, wo die
   Karte hochkant steht. */
html:not(.no-js) .stoerer-seite {
  backface-visibility: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.21s;
}
html:not(.no-js) .stoerer:not([data-offen]) .stoerer-vorn,
html:not(.no-js) .stoerer[data-offen] .stoerer-hinten { visibility: visible; }
html:not(.no-js) .stoerer.stoerer-misst .stoerer-seite { transition: none; }
html:not(.no-js) .stoerer-hinten {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
html:not(.no-js) .stoerer-knopf {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--black);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
html:not(.no-js) .stoerer-knopf:hover { background: var(--red); border-color: var(--red); }

.stoerer-plan { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.stoerer-plan li {
  font-size: var(--t-label);
  line-height: 1.45;
  color: var(--text-soft);
  padding-left: 1.4rem;
  position: relative;
  /* Sonst steht das letzte Wort allein in der Schlusszeile. */
  text-wrap: pretty;
}
/* Kein Rot: Die Ziffern stehen mehrfach untereinander, wie bei den
   Prozess-Schritten. Sie zählen, sie zeichnen nichts aus. */
.stoerer-plan span {
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}
/* Gleicher Aufbau wie Zeitangabe und Knopf auf der Vorderseite: Trennstrich,
   darunter die Handlung. */
.stoerer-frage {
  margin-top: 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
  font-size: var(--t-label);
}
.stoerer-frage a { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .stoerer,
  html:not(.no-js) .stoerer-innen { transition: none; }
}
.stoerer-kennung {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-dark);
}
.stoerer-datum {
  font-family: var(--font-cond);
  font-size: var(--t-h3-gross);
  font-weight: 600;
  line-height: 1.15;
  margin-top: 0.2rem;
}
.stoerer-thema {
  font-size: var(--t-fein);
  color: var(--text-soft);
  margin-top: 0.15rem;
}
.stoerer-termine {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
}
.stoerer-termine span { color: var(--muted); }
.stoerer-zeit {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--muted);
  margin-top: 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

/* Der Störer liegt nur über dem Bild, solange das Bild ihn tragen kann.
   Unterhalb dieser Breite schrumpft die Figur mit und die aufgeklappte Karte
   passt nicht mehr zwischen Schnittmarke und Bildmarke; sie fällt deshalb
   unter die Figur, wo sie die volle Spaltenbreite hat, und bleibt schräg.

   Dort verlängert sie die Figur, an deren Unterkante die Bildmarke klebt.
   Bild und Marke teilen sich deshalb eine Rasterzelle, der Störer bekommt die
   darunter, wie bei .band und .head-figure in style.css.

   ACHTUNG: Über der Schnittmarke bleibt wenig Luft, rund eine Textzeile. Wer
   auf der Rückseite etwas ergänzt, misst nach. */
@media (max-width: 1399px) {
  .stoerer {
    position: static;
    width: auto;
    max-width: 20rem;
    margin: 1.5rem auto 0;
    transform: rotate(-1.5deg);
  }
  .hero-figure:has(> .stoerer) { display: grid; }
  .hero-figure:has(> .stoerer) > .figure-frame,
  .hero-figure:has(> .stoerer) > figcaption.bildmarke { grid-area: 1 / 1; }
  .hero-figure:has(> .stoerer) > .stoerer { grid-area: 2 / 1; }
  .hero-figure:has(> .stoerer) > figcaption.bildmarke {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: end;
    align-self: end;
    margin: 0 0.9rem 0.9rem 0;
  }
}