/* Abschnitt "Vom Gedanken zur Formulierung" in der Scrollcraft-Fassung (Vergleich, 01.10.2026).
   Uebernommen aus MarcusMend-Website-Scrollcraft (mend.css, Kapitel "beispiel"); alle Regeln auf
   .sc-beispiel begrenzt, weil diese Seite eigene .manifest-Regeln hat (styles.css). */
.sc-beispiel{--dach:41px;--kopf-h:85px;--sc-ease-out:cubic-bezier(0.23,1,0.32,1);background:var(--ink);color:var(--paper)}
@media (max-width:760px){.sc-beispiel{--kopf-h:0px}}

/* Links wie der bisherige Abschnitt (.example-layout in styles.css) */
.sc-beispiel .eyebrow{color:var(--gold)}
.sc-beispiel h2{color:var(--white)}
.sc-beispiel .beispiel__intro p{color:var(--stone-300)}
.sc-beispiel a{color:var(--interactive-on-dark)}
.sc-beispiel .text-link{color:var(--interactive-on-dark);border-color:var(--interactive-on-dark-border);margin-top:26px}
.sc-beispiel :focus-visible{outline-color:var(--interactive-on-dark)}

.sc-beispiel .beispiel{padding-block:120px}
.sc-beispiel .beispiel__raster{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:start}
.sc-beispiel .beispiel__frage{position:relative;white-space:nowrap}
/* Die Goldlinie, die "Wie sage ich das?" durchstreicht, sobald der Satz steht. */
.sc-beispiel .beispiel__frage::after{content:"";position:absolute;left:-2%;right:-2%;top:56%;height:.09em;background:var(--gold);border-radius:var(--r-dot);transform-origin:left center;transform:scaleX(var(--streich,0))}
.sc-beispiel .beispiel__bahn{position:relative}

/* Rechts: Grundgestaltung kommt von .manifest dieser Seite (styles.css): Schreibmaschinenschrift, Gold,
   graue Kopfzeile, Hinweis mit Trennlinie. Hier nur Ergaenzungen fuer Kopfzeile, Zaehler und Schreibmodus. */
/* pre-wrap aus styles.css wuerde Zeilenumbrueche des Quelltexts als Leerzeilen zeigen */
.sc-beispiel .manifest blockquote{margin:0;white-space:normal;color:var(--paper)}
/* Karte beginnt auf Hoehe der Ueberschrift, nicht der Dachzeile (Dachzeile 13 px + Zeilenhoehe + 20 px Abstand) */
.sc-beispiel .manifest{margin-top:var(--dach)}
.sc-beispiel .manifest__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}
.sc-beispiel .manifest__kopf .overline{margin-bottom:0}
.sc-beispiel .manifest__zaehler{font:500 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.08em;color:var(--stone-500);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-beispiel .manifest__zitat{min-height:7.5em}
.sc-beispiel .manifest__getippt{display:none}
.sc-beispiel .manifest__fuss{margin:18px 0 0}
.sc-beispiel .knopf-leise{font-family:var(--font-sans);min-height:44px;padding:0 18px;border-radius:var(--r-full);border:1px solid var(--interactive-on-dark-border);background:transparent;color:var(--interactive-on-dark);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color 140ms var(--sc-ease-out)}
.sc-beispiel .knopf-leise:hover{background:rgba(255,255,255,.06)}
.sc-beispiel .knopf-leise:active{transform:scale(.97)}
.sc-beispiel .manifest__eigen label{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.sc-beispiel .manifest__eigen textarea{width:100%;min-height:9em;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--gold);background:color-mix(in oklab,var(--paper) 6%,var(--ink-deep));color:var(--paper);font:400 var(--fs-md)/1.75 var(--font-mono);resize:vertical}
.sc-beispiel .manifest__eigen .small{margin-top:10px;padding-top:0;border-top:0}
.sc-beispiel .manifest__eigen[hidden]{display:none}

/* Schreibmodus (nur mit JavaScript und ohne reduzierte Bewegung). Keine zusaetzliche Scroll-Strecke:
   der Satz schreibt sich, waehrend die Karte normal durchs Bild scrollt (siehe beispiel-scroll.js). */
.sc-beispiel.schreibt .manifest__voll{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sc-beispiel.schreibt .manifest__getippt{display:block;line-height:1.6;white-space:normal}
.sc-beispiel.schreibt .satz{display:block;position:relative;padding-top:1.4em}
.sc-beispiel.schreibt .satz+.satz{margin-top:.35em}
.sc-beispiel .satz .z{opacity:0}
.sc-beispiel .satz .z.da{opacity:1}
.sc-beispiel .satz .marke{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--gold);animation:sc-blinken 1s steps(2,start) infinite}
@keyframes sc-blinken{to{visibility:hidden}}
/* Randnotiz: benennt, was der Satz tut, sobald er beginnt */
.sc-beispiel .satz[data-notiz]::before{content:attr(data-notiz);position:absolute;left:0;top:.35em;font:700 var(--fs-2xs)/1 var(--font-sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity 220ms var(--sc-ease-out),transform 220ms var(--sc-ease-out)}
.sc-beispiel .satz.aktiv[data-notiz]::before{opacity:1;transform:none}
.sc-beispiel.schreibt .manifest__zitat{min-height:0}
.sc-beispiel .manifest.fertig .knopf-leise{animation:sc-auftauchen 420ms var(--sc-ease-out) both}
.sc-beispiel.schreibt .manifest:not(.fertig) .manifest__fuss{visibility:hidden}
@keyframes sc-auftauchen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:1080px){.sc-beispiel .beispiel__raster{gap:44px}}
@media (max-width:999.98px){
  .sc-beispiel .beispiel__raster{grid-template-columns:1fr;gap:36px}
  .sc-beispiel .manifest{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.sc-beispiel .satz .marke{animation:none}}