/* Startseite (index.html), seit Fassung 0.8 neu gesetzt.
 *
 * Nur fuer die Startseite: style.css bleibt unberuehrt, damit keine andere
 * Seite sich mitveraendert. Farben und Schriften kommen ausschliesslich aus
 * den Marken von style.css (hell und dunkel), hier wird keine Farbe erfunden.
 *
 * Aufbau: Titelblatt (erster Bildschirm, ohne Textprobe), eine Kennzahlenzeile,
 * die Bandliste (Lesen und TEI in einer Zeile), dann die Begruendung, die
 * Genauigkeit, der Ausblick als Zeitleiste und Mac-App/TEI nebeneinander.
 * Eine Schrift (Source Serif 4 mit optischen Groessen); Cormorant nur im Namen.
 * Keine runden Schaltflaechen, keine Einblendungen beim Rollen. */

.st{display:block;color:var(--text-body);font-variant-numeric:oldstyle-nums proportional-nums}
.st-wrap{max-width:72rem;margin-inline:auto;padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}
.st-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.st h2,.st h3{font-family:var(--font-body);font-optical-sizing:auto;color:var(--text-ink);text-wrap:balance;margin:0}
.st h2{font-size:clamp(1.65rem,2.6vw,2.25rem);font-weight:600;line-height:1.15;letter-spacing:-.01em}
.st h3{font-size:1.06rem;font-weight:600;line-height:1.3}
.st p{text-wrap:pretty}
.st a:hover{text-decoration:none}
.st :focus-visible{outline:2px solid var(--accent-gold);outline-offset:3px}

/* ── Titelblatt ───────────────────────────────────────────────────────
   Gesetzt wie das Titelblatt eines Bandes: alles auf der Mittelachse, von oben
   nach unten Vornamen in gesperrten Versalien, der Name gross, eine Zierleiste
   mit den Ringen, wonach der Text sich richtet, der Herausgeber, drei Wege.
   Unten wie ein Impressum: Adresse, Fassung, Jahr in roemischen Ziffern.
   Der Block fuellt den ersten Bildschirm (svh: auf dem Telefon ohne die
   ein- und ausfahrende Adressleiste), nie weniger als 36rem. */
.st-titel{position:relative;min-height:max(36rem,calc(100vh - var(--header-h)));min-height:max(36rem,calc(100svh - var(--header-h)));
  margin-top:var(--header-h);display:grid;grid-template-rows:1fr auto;justify-items:center;
  padding:clamp(2.5rem,7vh,5rem) max(1.25rem,env(safe-area-inset-right,0px)) 2.2rem max(1.25rem,env(safe-area-inset-left,0px));text-align:center}
.st-titel-satz{align-self:center;display:flex;flex-direction:column;align-items:center;max-width:44rem}
.st-titel-name{margin:0;display:flex;flex-direction:column;align-items:center;color:var(--text-ink);font-weight:400}
.st-vorname{font-family:var(--font-body);font-size:clamp(.72rem,1.4vw,.84rem);font-weight:500;letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:var(--text-muted)}
.st-hegel{font-family:var(--font-display);font-weight:400;font-size:clamp(5.4rem,15vw,10.5rem);line-height:.9;letter-spacing:-.005em;margin:.12em 0 .16em}
.st-zier{display:flex;align-items:center;gap:1.1rem;margin-top:.1rem}
.st-zier-linie{width:clamp(3rem,9vw,5.5rem);height:1px;background:var(--rule)}
.st-zier-ringe{width:2.1rem;height:auto;overflow:visible}
.st-zier-ringe .ring{stroke-width:1.2px}
.st-nach{margin:1.6rem 0 0;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.st-nach-zeile{font-size:clamp(.66rem,1.3vw,.76rem);font-weight:500;letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase;color:var(--text-muted)}
.st-nach .st-gw{font-family:var(--font-display);font-style:italic;font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.15;color:var(--text-body)}
.st-von{margin:1.5rem 0 0;font-style:italic;font-size:.98rem;color:var(--text-muted)}
.st-wege{margin-top:clamp(2.4rem,6vh,3.6rem);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem 1.5rem}
.st-wege a{font-size:.95rem;font-weight:500;font-variant-caps:all-small-caps;letter-spacing:.14em;color:var(--text-ink);padding:.35rem 0 .3rem;border-bottom:1px solid var(--rule);transition:border-color .2s,color .2s}
.st-wege a:hover,.st-wege a:focus-visible{border-bottom-color:var(--accent);text-decoration:none}
.st-wege-punkt{color:var(--accent-gold)}
.st-impressum{margin:0;font-size:.66rem;letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase;color:var(--text-muted);font-variant-numeric:lining-nums}
.st-impressum a{color:var(--text-muted);border-bottom:1px solid transparent}
.st-impressum a:hover{color:var(--text-ink);border-bottom-color:var(--rule);text-decoration:none}
.st-impressum abbr{text-decoration:none}
@media (max-width:480px){
  .st-vorname{letter-spacing:.28em;margin-right:-.28em}
  .st-nach-zeile{letter-spacing:.2em;margin-right:-.2em}
  .st-impressum{letter-spacing:.16em;margin-right:-.16em}
  .st-wege{gap:.3rem .85rem}
  .st-wege a{font-size:.86rem;letter-spacing:.1em}
}

/* ── Kennzahlen ───────────────────────────────────────────────────────── */
.st-zahlen{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.st-zahlen div{padding:1.05rem 1.1rem;display:grid;gap:.1rem;border-left:1px solid var(--rule)}
.st-zahlen div:first-child{border-left:0;padding-left:0}
.st-zahlen dt{order:2;font-size:.8rem;color:var(--text-muted)}
.st-zahlen dd{order:1;margin:0;font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.1;color:var(--text-ink)}
@media (max-width:600px){
  .st-zahlen{grid-template-columns:1fr 1fr}
  .st-zahlen div:nth-child(3){border-left:0;padding-left:0}
  .st-zahlen div:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ── Abschnitte ───────────────────────────────────────────────────────── */
.st-abschnitt{padding-block:clamp(3.5rem,8vw,6.5rem);scroll-margin-top:var(--header-h)}
.st-abschnitt + .st-abschnitt{border-top:1px solid var(--rule)}
.st-abschnitt-kopf{display:grid;gap:.85rem;max-width:42rem;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.st-lead{margin:0;font-size:1.04rem;line-height:1.7;max-width:42rem}
.st-lead + .st-lead{margin-top:1rem}

/* Bandliste */
.st-katalog{display:grid;gap:1.6rem}
.st-gruppe{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1.5rem;border-top:1px solid var(--rule);padding-top:.9rem}
.st-gruppe-name{font-size:1.02rem}
.st-gruppe-zahl{display:block;font-weight:400;font-size:.8rem;color:var(--text-muted);margin-top:.15rem}
.st-baende{list-style:none;margin:0;padding:0}
.st-band{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto auto;gap:1rem;align-items:baseline;padding:.6rem .5rem .6rem 0;border-bottom:1px solid var(--rule);transition:background-color .15s}
.st-band:last-child{border-bottom:0}
.st-band:hover{background:var(--bg-subtle)}
.st-band-nr{font-size:1.08rem;color:var(--accent-gold);text-align:right;font-variant-numeric:lining-nums tabular-nums}
.st-band-titel{color:var(--text-ink);min-width:0}
.st-band-titel::after{content:"";position:absolute;inset:0}
.st-band-titel:focus-visible{outline:none}
.st-band:has(.st-band-titel:focus-visible){outline:2px solid var(--accent-gold);outline-offset:2px}
.st-band-jahr{color:var(--text-muted);margin-left:.15em}
.st-band-seiten{font-size:.82rem;color:var(--text-muted);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.st-band-seiten abbr{text-decoration:none}
.st-band-tei{position:relative;z-index:1;font-size:.74rem;font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--accent);border:1px solid var(--rule);border-radius:var(--radius);padding:.05rem .45rem .12rem}
.st-band-tei:hover{border-color:var(--accent)}
@media (max-width:760px){
  .st-gruppe{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .st-band{grid-template-columns:2rem minmax(0,1fr) auto;row-gap:.1rem}
  .st-band-seiten{grid-column:2;grid-row:2}
  .st-band-tei{grid-column:3;grid-row:1}
}
.st-anm{margin:1.6rem 0 0;font-size:.86rem;color:var(--text-muted);max-width:42rem}

/* Was diese Edition anders macht */
.st-begruendung{display:grid;grid-template-columns:minmax(0,1fr) 12.5rem;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:820px){.st-begruendung{grid-template-columns:minmax(0,1fr)}}
.st-bild{margin:0;display:grid;gap:.55rem}
.st-bild img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:2px}
.st-bild figcaption{font-size:.78rem;line-height:1.45;color:var(--text-muted)}
@media (max-width:820px){.st-bild{max-width:12.5rem}}
.st-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.5rem,5vw,3.6rem);padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule)}
@media (max-width:760px){.st-spalten{grid-template-columns:minmax(0,1fr)}}
.st-spalten > div{display:grid;gap:.75rem;align-content:start}
.st-spalten p{margin:0;font-size:.93rem;line-height:1.7}

/* Gemessen, nicht behauptet */
.st-gemessen{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:700px){.st-gemessen{grid-template-columns:minmax(0,1fr)}.st-gemessen .st-bild{max-width:9rem}}
.st-gemessen-text{display:grid;gap:1rem;max-width:42rem}
.st-quote{margin:0 0 .3rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.st-quote b{font-weight:400;font-size:clamp(3rem,6vw,4.4rem);line-height:1;color:var(--text-ink);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.st-quote span{font-size:.9rem;color:var(--text-muted);max-width:16rem;line-height:1.45}
.st-gemessen-text p{margin:0;font-size:1rem;line-height:1.7}

/* Ausblick */
.st-zeitleiste{margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;display:grid;gap:.6rem;max-width:44rem}
.st-zeitleiste-rand{overflow-x:auto}
.st-zeitleiste svg{display:block;width:100%;height:auto}
.st-zeitleiste .v{fill:var(--accent)}
.st-zeitleiste .achse{stroke:var(--rule)}
.st-zeitleiste text{font-family:var(--font-body);font-size:11px;fill:var(--text-muted);font-variant-numeric:lining-nums}
.st-zeitleiste .anz{fill:var(--text-ink)}
.st-zeitleiste figcaption{font-size:.8rem;color:var(--text-muted)}
/* Auf dem Telefon schrumpft die Leiste auf gut die Haelfte: groessere Ziffern, nur jedes zweite Jahr beschriftet. */
@media (max-width:600px){.st-zeitleiste text{font-size:19px}.st-zeitleiste text.ungerade{display:none}}
.st-jahre{list-style:none;margin:clamp(1.8rem,3.5vw,2.4rem) 0 0;padding:0;max-width:52rem}
.st-jahr{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;padding:.55rem 0;border-top:1px solid var(--rule)}
.st-jahr-zahl{color:var(--accent);font-variant-numeric:lining-nums tabular-nums;font-size:.95rem}
.st-jahr ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:.93rem}
.st-mehr{margin-top:0}
.st-mehr > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;padding:.5rem 1rem;border:1px solid var(--rule);border-radius:var(--radius);font-size:.88rem;color:var(--text-body)}
.st-mehr > summary::-webkit-details-marker{display:none}
.st-mehr > summary::after{content:"";width:.45em;height:.45em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-.15em);transition:transform .2s}
.st-mehr[open] > summary::after{transform:rotate(-135deg) translateY(-.05em)}
.st-mehr > summary:hover{border-color:var(--text-muted)}
.st-mehr .st-jahre{margin-top:1rem}
.st-mehr .st-zu{display:none}
.st-mehr[open] .st-auf{display:none}
.st-mehr[open] .st-zu{display:inline}

/* Offline und offen */
.st-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:760px){.st-zwei{grid-template-columns:minmax(0,1fr)}}
.st-zwei > div{display:grid;gap:.9rem;align-content:start;justify-items:start}
.st-zwei p{margin:0;font-size:.97rem;line-height:1.7}
.st-klein{font-size:.82rem!important;color:var(--text-muted);font-variant-numeric:lining-nums}

/* Telefon: schmalere Jahresspalte im Ausblick (steht am Ende, damit sie die Grundregel schlaegt). */
@media (max-width:600px){.st-jahr{grid-template-columns:4.2rem minmax(0,1fr);gap:.7rem}.st-jahr ul{font-size:.88rem}}

/* ── Proportionen (Oktober 2026) ──────────────────────────────────────
   Das Titelblatt auf ein 8-px-Raster: Vornamen → Name 16, Name → Zier 40,
   Zier → „nach dem Text“ 40, → „Gesammelten Werke“ 8, → Herausgeber 24,
   → drei Wege 64; das Impressum steht am unteren Rand. Gesperrte Versalien in
   einer Einstellung (13.5 px, 0.20 em) statt fuenf; die drei Wege in
   Kapitaelchen in Grundgroesse. Cormorant nur ab 44 px. Die Zier waechst mit
   dem Namen (46 px, Linien 120 px), und die Ringe ruhen offen und atmen in 14
   Sekunden einmal zusammen, statt die Haelfte der Zeit ein Kreis zu sein. */
.st-titel{padding-bottom:1.5rem}
.st-vorname,.st-nach-zeile,.st-impressum{font-size:.77rem;font-weight:500;letter-spacing:.2em;margin-right:-.2em}
.st-hegel{font-size:clamp(5.4rem,13vw,10rem);margin:16px 0 0}
.st-zier{margin-top:40px;gap:1.1rem}
.st-zier-linie{width:clamp(4rem,9vw,7.5rem)}
.st-zier-ringe{width:2.6rem}
.st-nach{margin-top:40px;gap:8px}
.st-nach .st-gw{font-size:clamp(1.9rem,3.6vw,2.5rem)}
.st-von{margin-top:24px;font-size:.966rem}
.st-wege{margin-top:64px;gap:.4rem 1.6rem}
.st-wege a{font-size:1rem;letter-spacing:.08em;padding:.3rem 0 .25rem}
.st-impressum{display:flex;flex-wrap:wrap;justify-content:center;column-gap:0}
.st-imp-gruppe{white-space:nowrap}
.st-zier-ringe .ring-a{animation:st-puls-a 14s ease-in-out infinite}
.st-zier-ringe .ring-b{animation:st-puls-b 14s ease-in-out infinite}
.st-zier-ringe .ring-c{animation:st-puls-c 14s ease-in-out infinite}
@keyframes st-puls-a{0%,70%{transform:translate(0,0)}80%,88%{transform:translate(0,18.7px)}100%{transform:translate(0,0)}}
@keyframes st-puls-b{0%,70%{transform:translate(0,0)}80%,88%{transform:translate(20px,-9.3px)}100%{transform:translate(0,0)}}
@keyframes st-puls-c{0%,70%{transform:translate(0,0)}80%,88%{transform:translate(-20px,-9.3px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.st-zier-ringe .ring-a,.st-zier-ringe .ring-b,.st-zier-ringe .ring-c{animation:none}}
@media (max-width:480px){
  .st-vorname,.st-nach-zeile{letter-spacing:.14em;margin-right:-.14em}
  .st-impressum{letter-spacing:.12em;margin-right:-.12em;flex-direction:column;align-items:center;row-gap:.35rem}
  .st-imp-trenn{display:none}
  .st-wege{gap:.3rem 1.1rem}
  .st-wege a{font-size:.94rem;letter-spacing:.06em}
  .st-hegel{margin-top:12px}
  .st-zier{margin-top:32px}
  .st-nach{margin-top:32px}
  .st-wege{margin-top:48px}
}

/* Unterhalb des Titelblatts: Ueberschriften der Abschnitte auf 44 px (Skala),
   Kennzahlen auf 34 px, Etiketten 13.5 px. */
.st h2{font-size:clamp(1.9rem,3vw,2.5rem)}
.st-zahlen dd{font-size:clamp(1.6rem,2.6vw,1.93rem)}
.st-zahlen dt,.st-band-seiten{font-size:.77rem}
.st-gruppe-name{font-size:.966rem}
.st-gruppe-zahl{font-size:.77rem}
.st-imp-trenn{margin:0 .55em}

/* ── Die Ringe (Rueckmeldung 23.10.2026: zu klein, zu langsam) ────────────
   Die Zier traegt die Marke der Edition; mit 46 px unter einem 176-px-Namen
   las sie sich wie ein Satzzeichen. Jetzt 72 px (rund 0.4 des Namens), die
   Linien entsprechend 136 px (das Bild ist 6 rem breit, die Ringe selbst fuellen davon gut die Haelfte, sichtbar rund 57 px), mehr Luft zum Unterlaengen-g. Der Puls laeuft
   in 9 Sekunden: offen, zusammen, eine Weile vereint, wieder auseinander;
   die Drehung in 36 statt 48 Sekunden. */
.st-zier{margin-top:48px;gap:1.4rem}
.st-zier-linie{width:clamp(4.5rem,9.5vw,8.5rem)}
.st-zier-ringe{width:6rem;margin-block:-.6rem}
.st-zier-ringe .ring{stroke-width:1.3px}
.st-zier-ringe .ring-a{animation:st-puls2-a 9s cubic-bezier(.45,0,.25,1) infinite}
.st-zier-ringe .ring-b{animation:st-puls2-b 9s cubic-bezier(.45,0,.25,1) infinite}
.st-zier-ringe .ring-c{animation:st-puls2-c 9s cubic-bezier(.45,0,.25,1) infinite}
.st-zier-ringe .ringe-spin{animation-duration:36s}
@keyframes st-puls2-a{0%,30%{transform:translate(0,0)}45%,70%{transform:translate(0,18.7px)}85%,100%{transform:translate(0,0)}}
@keyframes st-puls2-b{0%,30%{transform:translate(0,0)}45%,70%{transform:translate(20px,-9.3px)}85%,100%{transform:translate(0,0)}}
@keyframes st-puls2-c{0%,30%{transform:translate(0,0)}45%,70%{transform:translate(-20px,-9.3px)}85%,100%{transform:translate(0,0)}}
.st-nach{margin-top:48px}
@media (max-width:480px){.st-zier{margin-top:36px}.st-zier-ringe{width:4.6rem;margin-block:-.4rem}.st-zier-linie{width:4.2rem}.st-nach{margin-top:36px}}
@media (prefers-reduced-motion:reduce){.st-zier-ringe .ring-a,.st-zier-ringe .ring-b,.st-zier-ringe .ring-c,.st-zier-ringe .ringe-spin{animation:none}}

/* ── Der Name (Rueckmeldung 23.10.2026: zu gross) ─────────────────────────
   Bei 176 px beherrschte der Name den Bildschirm. Vier Grade verglichen (176,
   144, 128, 112): bei 128 px steht er im Verhaeltnis von rund 3 : 1 zu
   „Gesammelten Werke“ (44 px), wie auf einem Titelblatt; 112 verlor gegen die
   Zeile darunter. Abstaende und Zier wachsen mit dem Namen mit, damit der
   Block eine Figur bleibt: 12 · 32 · 32 · 8 · 24 · 56. */
.st-hegel{font-size:clamp(4.4rem,9vw,7.3rem);margin-top:12px}
.st-zier{margin-top:32px;gap:1.2rem}
.st-zier-ringe{width:4.8rem;margin-block:-.5rem}
.st-zier-linie{width:clamp(4rem,8vw,6.6rem)}
.st-nach{margin-top:32px}
.st-wege{margin-top:56px}
@media (max-width:480px){.st-hegel{margin-top:10px}.st-zier{margin-top:28px}.st-zier-ringe{width:4rem;margin-block:-.4rem}.st-zier-linie{width:3.8rem}.st-nach{margin-top:28px}.st-wege{margin-top:44px}}

/* ── Entdecken (23.10.2026) ───────────────────────────────────────────────
   Am Fuss des Titelblatts statt der Impressumszeile ein Hinweis nach unten:
   das Wort als Etikett, darunter eine Haarlinie mit Pfeilspitze, die sich
   langsam senkt. Fuehrt zu den Kennzahlen; die Fassung steht jetzt dort. */
.st-entdecken{display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--text-muted);padding:.4rem 1rem 0;transition:color .2s}
.st-entdecken:hover,.st-entdecken:focus-visible{color:var(--text-ink);text-decoration:none}
.st-entdecken-wort{font-size:.77rem;font-weight:500;letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase}
.st-entdecken-pfeil{width:12px;height:30px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke;animation:st-sinken 2.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes st-sinken{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
@media (prefers-reduced-motion:reduce){.st-entdecken-pfeil{animation:none}}
#zahlen{scroll-margin-top:var(--header-h)}
html:has(.st-titel){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(.st-titel){scroll-behavior:auto}}
/* Kennzahlen: fuenf Felder, das fuenfte ist die Fassung */
.st-zahlen{grid-template-columns:repeat(5,minmax(0,1fr))}
.st-zahl-fassung a{color:inherit}
.st-zahl-fassung dd a{color:var(--accent-gold)}
.st-zahl-fassung a:hover{color:var(--text-ink);text-decoration:none}
@media (max-width:600px){
  .st-zahlen{grid-template-columns:1fr 1fr}
  .st-zahlen .st-zahl-fassung{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--rule)}
}

/* ── Neu (23.10.2026) ─────────────────────────────────────────────────────
   Ueber dem Titelblatt eine einzige Zeile, die auf die neueste Fassung zeigt:
   kein Kasten, keine Vorschau, nur ein Wort auf der Haarlinie wie die drei
   Wege. „Neu“ als goldenes Etikett, der Rest in Grundschrift. */
.st-titel{grid-template-rows:auto 1fr auto;padding-top:clamp(1.5rem,4vh,2.5rem)}
.st-neu{display:inline-flex;align-items:baseline;gap:.75rem;margin-bottom:clamp(1.5rem,5vh,3rem);padding:.3rem 0 .25rem;border-bottom:1px solid var(--rule);color:var(--text-ink);transition:border-color .2s}
.st-neu:hover,.st-neu:focus-visible{border-bottom-color:var(--accent);text-decoration:none}
.st-neu-marke{font-size:.77rem;font-weight:500;letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase;color:var(--accent-gold)}
.st-neu-text{font-size:.94rem;font-style:italic}
.st-neu-pfeil{font-size:.94rem;color:var(--text-muted);transition:transform .2s,color .2s}
.st-neu:hover .st-neu-pfeil,.st-neu:focus-visible .st-neu-pfeil{transform:translateX(3px);color:var(--accent)}
@media (max-width:480px){.st-neu{gap:.6rem}.st-neu-text,.st-neu-pfeil{font-size:.88rem}}

/* ── Rahmen (23.10.2026) ──────────────────────────────────────────────────
   Die Mitte traegt nur noch den Titel: Vornamen, Name, Ringe, wonach der
   Text sich richtet. Alles Uebrige steht am Rand des ersten Bildschirms wie
   Impressum und Verlagszeile: Neues oben links, der Herausgeber unten links,
   „Entdecken“ unten in der Mitte, die drei Wege unten rechts. Die Raender
   fluchten mit Wortmarke und Farbknopf im Kopf. Unter 900 px steht alles
   wieder auf einer Achse, der Titel in der Mitte, das Uebrige darunter. */
.st-titel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:end;
  padding:28px max(2rem,env(safe-area-inset-right,0px)) 28px max(1.25rem,env(safe-area-inset-left,0px))}
.st-neu{grid-column:1;grid-row:1;justify-self:start;align-self:start;margin:0}
.st-titel-satz{grid-column:1/-1;grid-row:2;align-self:center}
.st-von{grid-column:1;grid-row:3;justify-self:start;margin:0;text-align:left;font-size:.86rem}
.st-entdecken{grid-column:2;grid-row:3}
.st-wege{grid-column:3;grid-row:3;justify-self:end;margin:0;gap:.3rem 1.2rem}
.st-wege a{font-size:.84rem;letter-spacing:.08em}
@media (max-width:899px){
  .st-titel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto auto;row-gap:18px;
    padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
  .st-neu{grid-column:1;justify-self:center}
  .st-titel-satz{grid-column:1}
  .st-wege{grid-column:1;grid-row:3;justify-self:center;margin-top:8px}
  .st-von{grid-column:1;grid-row:4;justify-self:center;text-align:center}
  .st-entdecken{grid-column:1;grid-row:5;margin-top:6px}
}