/* =========================================================================
   pages.css — Unterseiten (Leistungen, Finance & Freedom, Copytrading,
   Ueber Celestin, Recht). Getrennt von main.css, damit an Startseite und
   Unterseiten parallel gearbeitet werden kann.
   Laedt NACH main.css: alle Grundbausteine (.h1 .h2 .lede .btn .card
   .eyebrow .muted, die Farb-Token) sind hier bereits verfuegbar.

   Regeln fuer alles hier drin:
   - Jede Farbe kommt aus einem Token. Kein hartes #fff, kein rgba(255,...),
     sonst bricht der Dunkelmodus.
   - Keine farbigen Linksbalken an Karten. Wo Farbe auftaucht, ist sie ein
     INDEX (die acht Segmente der Hausmarke) und liegt als Haarlinie oben.
   - Kein Kasten, wo eine 1px-Linie reicht.
   - Ausrichtung: alle Inhalte liegen in .section > .wrap, damit sie ab
     1360px automatisch den --spine-pad der senkrechten Navigation erben
     (main.css) und mit Fussleiste und CTA-Band buendig stehen.
   ========================================================================= */

/* ---------- 1. Seitenkopf ---------- */

/* Die Kopfleiste liegt fest ueber der Seite (78px hoch) — der erste
   Abschnitt einer Unterseite bringt seinen eigenen Abstand dafuer mit. */
.pg-top { padding-top: calc(78px + var(--sp-6)); }
@media (min-width: 1024px) { .pg-top { padding-top: calc(78px + var(--sp-7)); } }

.pg-head { max-width: none; margin-bottom: var(--sp-6); }
.pg-head .lede { margin-top: var(--sp-3); }

/* Zwei Gewichte in einer Zeile, wie die Abschnittstitel der Startseite:
   die Haelfte, die den Punkt traegt, steht fett. */
.pg-title { max-width: 26ch; }
.pg-title em { font-style: normal; font-weight: 700; color: var(--ink); }

/* ---------- 2. Inhaltsverzeichnis (Leistungen) ---------- */

.pg-index { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (min-width: 700px) { .pg-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 1200px) { .pg-index { max-width: 52rem; } }

.pg-index__item {
  display: block;
  min-height: 48px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-strong);
  transition: border-top-color .25s ease-out;
}
.pg-index__item:nth-child(1) { border-top-color: var(--s2); }
.pg-index__item:nth-child(2) { border-top-color: var(--s5); }
.pg-index__item:nth-child(3) { border-top-color: var(--s7); }
.pg-index__item:nth-child(4) { border-top-color: var(--s8); }

.pg-index__no {
  display: block;
  font-size: .625rem; letter-spacing: .14em;
  color: var(--ink-mute); margin-bottom: .4rem;
}
.pg-index__label {
  display: block;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.3;
  color: var(--ink-soft);
  transition: color .25s ease-out;
}
.pg-index__item:hover .pg-index__label,
.pg-index__item:focus-visible .pg-index__label { color: var(--ink); }
.pg-index__text { margin-top: .45rem; font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.6; }

/* ---------- 3. Nummerierte Bausteine (Finance & Freedom) ----------
   Kein Kasten, nur eine Haarlinie oben. Ihre Farbe ist die Position im
   Achtel-Kreis der Hausmarke — Farbe als Index, nicht als Dekoration. */

.pg-blocks { display: grid; gap: var(--sp-4); }
@media (min-width: 760px)  { .pg-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); } }
@media (min-width: 1200px) { .pg-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }

.pg-block { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.pg-block:nth-child(1) { border-top-color: var(--s1); }
.pg-block:nth-child(2) { border-top-color: var(--s2); }
.pg-block:nth-child(3) { border-top-color: var(--s3); }
.pg-block:nth-child(4) { border-top-color: var(--s4); }
.pg-block:nth-child(5) { border-top-color: var(--s5); }
.pg-block:nth-child(6) { border-top-color: var(--s6); }
.pg-block:nth-child(7) { border-top-color: var(--s7); }
.pg-block:nth-child(8) { border-top-color: var(--s8); }

.pg-block__no { font-size: .625rem; letter-spacing: .14em; color: var(--ink-mute); margin-bottom: .75rem; }
.pg-block__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; margin-bottom: .55rem; }
.pg-block__text { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.65; }

/* ---------- 4. Redaktionelle Zeilen (Copytrading) ----------
   Dieselbe Ruhe, andere Bewegung: Nummer und Titel links, Erklaerung
   rechts, dazwischen nichts als eine Linie. */

.pg-rows { border-top: 1px solid var(--line); }

.pg-row {
  display: grid; gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .pg-row {
    grid-template-columns: 3.5rem minmax(0, .9fr) minmax(0, 1.25fr);
    gap: var(--sp-4);
    align-items: start;
    padding-block: var(--sp-5);
  }
}

.pg-row__no {
  font-size: .625rem; letter-spacing: .14em;
  color: var(--ink-mute);
  transition: color .25s ease-out;
}
.pg-row:nth-child(1):hover .pg-row__no { color: var(--s1); }
.pg-row:nth-child(2):hover .pg-row__no { color: var(--s3); }
.pg-row:nth-child(3):hover .pg-row__no { color: var(--s5); }
.pg-row:nth-child(4):hover .pg-row__no { color: var(--s7); }
.pg-row:nth-child(5):hover .pg-row__no { color: var(--s8); }

.pg-row__title { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); font-weight: 500; line-height: 1.3; }
.pg-row__text { color: var(--ink-soft); line-height: 1.65; max-width: 38em; }

/* ---------- 5. Ruhiges Grafikband ----------
   Volle Breite, ruhiger Grund, darin gross und allein eine freigestellte
   Grafik aus seinem eigenen Achtel-Spektrum (Muenzen auf Finance & Freedom,
   Lichtsaeulen auf Copytrading). Reines Atemholen zwischen zwei Textteilen —
   deshalb dekorativ und aus dem Vorlesefluss genommen.
   EINE Datei traegt hell wie dunkel: die Grafiken haben echtes
   Straight-Alpha, es aendert sich nur die Deckkraft. */

.pg-artband {
  --band-a: var(--s1);
  --band-b: var(--s7);
  position: relative;
  /* sichtbar, damit die Grafik oben aus der Flaeche herausragen kann */
  overflow: visible;
  display: grid; place-items: center;
  min-height: clamp(18rem, 30vw, 26rem);
  /* Oben knapper: die Grafik soll dicht unter der Linie stehen. */
  padding-block: var(--sp-1) var(--sp-5);
  background: transparent;
}
/* Die eingefaerbte Flaeche ist nur die untere Haelfte des Bandes — die Grafik
   steht mittig im Band und schaut dadurch oben darueber hinaus.
   Sie laeuft an beiden Enden UND nach oben ins Transparente aus, statt mit
   harter Kante quer durchs Bild zu schneiden. Zwei Masken werden dafuer
   verschnitten: eine waagerechte und eine senkrechte. */
.pg-artband::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 54%;
  background: var(--surface-2);
  z-index: 0; pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(180deg, transparent, #000 26%);
  mask-image:
    linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(180deg, transparent, #000 26%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Die beiden Haarlinien sitzen an der Ober- und Unterkante der hellen Flaeche
   und liegen UNTER der Grafik (z-index 0 gegen deren 1) — das PNG laeuft also
   darueber hinweg. Eingerueckt und an den Enden ausgelaufen wie alle Linien. */
.pg-artband__rules { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pg-artband__rules::before,
.pg-artband__rules::after {
  content: ""; position: absolute;
  left: var(--rule-pad); right: var(--rule-pad);
  height: 1px; background: var(--line-strong);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.pg-artband__rules::before { top: 46%; }
.pg-artband__rules::after  { bottom: 0; }

/* Ab 1360px steht die senkrechte Navigation links ueber der Seite. Das Band
   laeuft ueber die volle Breite, seine Mitte laege also hinter ihr — deshalb
   rueckt der Inhalt um denselben Betrag nach rechts wie ueberall sonst. */
@media (min-width: 1360px) { .pg-artband { padding-left: var(--spine-pad); } }

/* Weiches Farbfeld aus zwei seiner acht Toene, wie im Hero: es gibt der
   Grafik einen Ort, ohne dass eine Flaeche eingefaerbt wird. */
.pg-artband::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 54%; pointer-events: none;
  background:
    radial-gradient(40% 66% at 46% 38%, color-mix(in srgb, var(--band-a) 34%, transparent), transparent 70%),
    radial-gradient(36% 58% at 58% 68%, color-mix(in srgb, var(--band-b) 24%, transparent), transparent 72%);
  filter: blur(38px);
  opacity: .5;
}
html.site-dark .pg-artband::before { opacity: .32; }

/* HARTE REGEL: nur EINE Dimension im CSS, die andere auto — sonst zieht das
   width/height-Attribut das Bild aus dem Verhaeltnis. */
.pg-artband__img {
  position: relative; z-index: 1;
  width: min(58vw, 29rem); height: auto;
  opacity: .94;
  transform: scale(.96);
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.pg-artband.is-seen .pg-artband__img { transform: none; }
html.site-dark .pg-artband__img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pg-artband__img { transform: none; transition: none; }
}

/* Die Saeulen sind ein breites Motiv und stehen auf ihrer Spiegelung —
   sie vertragen etwas mehr Raum als der Muenzstapel. */
.pg-artband--saeulen { --band-a: var(--s2); --band-b: var(--s8); }
.pg-artband--saeulen .pg-artband__img { width: min(66vw, 31rem); }

/* ---------- 6. Portraet + Text (Ueber Celestin) ---------- */

.pg-about { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) {
  .pg-about { grid-template-columns: minmax(0, .68fr) minmax(0, 1fr); gap: var(--sp-6); }
}

.pg-portrait { margin: 0; }
/* Schwarzweiss im Ruhezustand, beim Ueberfahren kommt die Farbe zurueck.
   Gleiches Verhalten in beiden Schemata, im Dunkeln nur etwas gedaempft. */
.pg-portrait__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  filter: grayscale(1);
  transition: filter .5s cubic-bezier(.22, .9, .28, 1);
}
.pg-portrait:hover .pg-portrait__img { filter: grayscale(0); }
html.site-dark .pg-portrait__img { filter: grayscale(1) brightness(.9); }
html.site-dark .pg-portrait:hover .pg-portrait__img { filter: grayscale(0) brightness(.95); }
@media (prefers-reduced-motion: reduce) { .pg-portrait__img { transition: none; } }

.pg-portrait__caption {
  margin-top: var(--sp-2);
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
}

.pg-body .prose + .prose { margin-top: var(--sp-3); }
.pg-body__facts { margin-top: var(--sp-5); }
.pg-body__facts .eyebrow { margin-bottom: var(--sp-2); }

/* ---------- 7. Kurz gefasst (Faktenzeilen) ---------- */

/* dl/dt/dd bringen eigene Browser-Abstaende mit — main.css setzt nur ul zurueck. */
.pg-facts, .pg-fact dt, .pg-fact dd { margin: 0; }

.pg-facts { border-top: 1px solid var(--line); max-width: 46rem; }
.pg-fact {
  display: grid; gap: .3rem;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .pg-fact { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; }
}
.pg-fact__k {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pg-fact__v { color: var(--ink); }

/* ---------- 8. Abschluss einer Unterseite ----------
   Ein letzter Gedanke, kein zweites Werbebanner: das CTA-Band der
   Fussleiste kommt direkt danach. */

.pg-close { max-width: 44rem; }
.pg-close__text { margin-top: var(--sp-3); }
.pg-close__actions {
  margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3);
}

/* ---------- 9. Preistafel ----------
   Die Programmkarten kommen unveraendert aus main.css (.programmes /
   .programme). Hier steht nur, was die Unterseite zusaetzlich braucht. */

.pg-note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-mute); max-width: 44rem; }

/* ---------- 10. Netzkugel auf der Kontaktseite ----------
   Die linke Spalte endet nach den drei Kontaktzeilen; darunter stand bisher
   ein leeres Feld neben dem Formular. Dort liegt jetzt die Netzkugel: das
   Bild fuer das Netz, um das es hier geht — gross, ruhig, mit weichem Rand,
   damit sie nichts vom Formular wegzieht.
   Unter 960px steht das Formular direkt unter dem Text; dort waere sie nur
   ein Umweg zum Absenden und ist deshalb ausgeblendet. Sie traegt keine
   Information, es geht nichts verloren. */

.contact__art { display: none; }
@media (min-width: 960px) {
  .contact__art {
    display: block;
    /* HARTE REGEL: eine Dimension, die andere auto. */
    width: min(100%, 23rem); height: auto;
    margin-top: var(--sp-4);
    margin-left: calc(-1 * var(--sp-2));
    /* Hell traegt die Kugel weniger als dunkel: dort stehen ihre hellen
       Linien fast auf dem Grund. Deshalb hier die hoehere Deckkraft. */
    opacity: .92;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 96%);
            mask-image: radial-gradient(closest-side, #000 62%, transparent 96%);
  }
}
html.site-dark .contact__art { opacity: .85; }

/* Zwei Muenzen nebeneinander im Band. */
.pg-artband__pair {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 6vw, 5rem);
  width: min(78vw, 40rem);
}
.pg-artband__pair .pg-artband__img { width: auto; }
.pg-artband__img--links  { height: clamp(9rem, 17vw, 15rem); }
.pg-artband__img--rechts { height: clamp(11rem, 21vw, 18.5rem); }
@media (max-width: 640px) { .pg-artband__pair { gap: 1rem; } }

/* Dieselbe ruhige Bewegung wie auf der Startseite. Sie ersetzt hier die
   Einblend-Skalierung: zwei Regeln auf demselben transform wuerden sich
   gegenseitig ueberschreiben. */
.pg-artband__img { animation: schweben 8.5s ease-in-out infinite; transform: none; transition: none; }
.pg-artband__img--rechts { animation-duration: 10.4s; animation-delay: -2.6s; }
.pg-artband.is-seen .pg-artband__img { transform: none; }
@media (prefers-reduced-motion: reduce) { .pg-artband__img { animation: none; } }