/* ==========================================================================
     METHODE
     ========================================================================== */

  /* Titel: Verstehen → Verändern → Verankern.
     Die Begriffe kommen nacheinander von rechts an ihre Stelle, in derselben
     Richtung wie die helle Flaeche selbst, nur etwas spaeter — so bemerkt man
     die Bewegung als zweiten Schlag. Jedes Wort sitzt in einem eigenen
     Fenster und schiebt sich darin hervor, deshalb laeuft nie ein Wort ueber
     ein anderes. Zerlegt wird der Titel in pages/js/methode-titel.js. Ohne
     JavaScript greift nichts davon, dann steht die Zeile einfach da. */
  .mt-split .mt-w{
    display:inline-block;
    overflow:hidden;
    padding:.16em 0 .22em;
    margin:-.16em 0 -.22em;
    vertical-align:bottom}
  .mt-split .mt-i{
    display:inline-block;
    opacity:0;
    transform:translate3d(112%,0,0);
    will-change:transform,opacity}
  .mt-split.mt-go .mt-i{
    opacity:1;
    transform:none;
    transition:opacity .32s ease var(--mt-d,0s),
               transform .82s cubic-bezier(.16,1,.3,1) var(--mt-d,0s)}
  @media(prefers-reduced-motion:reduce){
    .mt-split .mt-w{overflow:visible;padding:0;margin:0}
    .mt-split .mt-i{opacity:1;transform:none;transition:none}}

/* Marker oben rechts, wie im Header-Entwurf */
.pg-mark{position:absolute;z-index:5;top:118px;right:clamp(16px,4.4vw,64px);display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.pg-mark i{display:inline-block;width:2px;height:22px;background:var(--ink)}
.pg-mark:hover{color:var(--ink)}
@media(max-width:820px){.pg-mark{top:92px;font-size:10px;gap:10px;letter-spacing:.14em}.pg-mark i{height:18px}}

/* Feine Hoehenlinien wie im Header hinter dem Signet */
.sg-sec{position:relative;overflow:hidden}
.sg-sec>*:not(.sg-topo){position:relative;z-index:1}
.sg-topo{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;color:rgba(125,100,248,.13);transform:scale(1.1);-webkit-mask-image:radial-gradient(120% 90% at 50% 50%,#000 45%,transparent 92%),linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(120% 90% at 50% 50%,#000 45%,transparent 92%),linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.sg-topo path{fill:none;stroke:currentColor;stroke-width:1.2}
[data-theme="light"] .sg-topo{color:rgba(75,46,158,.12)}