/* =========================================================================
   Seite /gebaut («Über mich»), nur hier geladen. Neu am 11.10.2026.

   Ergänzt gebaut.css und den <style>-Block im Kopf der Seite, ohne sie zu
   ändern. Keine neue Farbe, keine neue Schrift: alles aus site.css.
   ========================================================================= */

/* ---------- Die Vergessenskurve auf dem Handy ----------
   Die Zeichnung ist 560 Einheiten breit und wird auf einem 375 Pixel breiten
   Telefon auf rund 335 Pixel verkleinert. Ihre Beschriftung landete dabei bei
   9 Pixeln («5 Kernpunkte») und 6 Pixeln («Tag 0»): nicht lesbar.

   Unter 600 Pixeln steht die Beschriftung darum als gewöhnlicher Text unter der
   Zeichnung (.urk-leg in gebaut.html), in 15 und 12 Pixeln. Die Schrift in der
   Zeichnung wird dort ausgeblendet, damit nichts doppelt dasteht. Die
   Textzeile rückt mit negativem Rand in den freien Streifen unter der
   Grundlinie, wo sonst die kleine Schrift stand.

   Die Einzüge links und rechts folgen den Rändern der Zeichnung (46 und 22
   von 560 Einheiten), damit «Tag 0» unter dem Anfang der Kurve steht und
   «nach einem Monat» unter ihrem Ende.

   V2 (12.10.2026): die Beschriftung als Text gilt jetzt im ganzen Handy-
   Bereich, also unter 768 statt unter 600 Pixeln, und sagt «direkt danach»
   statt «Tag 0». Am Handy wird Tag 0 nirgends mehr angeboten, das Wort
   sollte dort nicht an den Probe-Chat erinnern. Am Rechner steht in der
   Zeichnung weiter «Tag 0» (assets/js/gebaut.js). */
.urk-leg{display:none}
@media(max-width:767px){
  .urk__t,.urk__k{display:none}
  .urk{margin-bottom:0}
  .urk-leg{display:flex;justify-content:space-between;gap:16px;
    max-width:600px;margin:-12px 0 26px;padding:0 3.9% 0 8.2%}
  .urk-leg p{display:flex;flex-direction:column;gap:2px}
  .urk-leg p:last-child{text-align:right}
  .urk-leg b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-synthesis:none;
    font-size:15px;line-height:1.2;letter-spacing:.02em;color:#fff}
  .urk-leg span{font-size:13px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}
}

/* ---------- Schriftgrössen fürs Handy ----------
   Regel seit der Handy-Prüfung vom 11.10.2026: Fliesstext mindestens 16
   Pixel, Nebenzeilen mindestens 14, Etiketten in Grossbuchstaben nicht unter
   12. Über die Abschnitts-Kennungen, weil der <style>-Block im Kopf der Seite
   nach diesem Stilblatt kommt und bei gleicher Gewichtung gewinnen würde. */
#apps .mine i{font-size:16px}
#apps .mine em{font-size:12px}
#ich .ich__ort{font-size:12px}

/* Der Kopf rückt nach oben, weil jetzt der Zurück-Knopf über der Augenbraue
   steht. V2 Runde 2: am Handy mit Blättern nicht, dort hält site.css 17a oben
   den Platz für die Pille frei (diese Regel hätte ihn mit ihrer Kennung
   überschrieben). */
@media(min-width:768px){#ich{padding-top:18px}}
@media(max-width:767px){html:not(.blaettern) #ich{padding-top:18px}}

/* ---------- Die anderen Apps, kompakt ----------
   Seit dem 11.10.2026 ein halber Satz je App statt zwei Sätze, ohne «Im Test»
   in jeder Zeile. Die Zeilen werden dadurch niedriger: kleineres Symbol,
   weniger Abstand. Am Rechner drei Spalten statt zwei. Über #apps, weil der
   <style>-Block im Kopf der Seite nach diesem Stilblatt kommt. */
#apps .mine--kurz .mine__z{padding:12px 0;gap:14px;min-height:68px}
#apps .mine--kurz .mine__ic{width:44px;height:44px}
#apps .mine--kurz .mine__ic img{border-radius:10px}
#apps .mine--kurz i{margin-top:5px;line-height:1.4}
@media(min-width:1060px){#apps .mine--kurz{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* =========================================================================
   V2 Runde 2 (12.10.2026): am Handy blättern, ein Bereich ein Bildschirm
   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkt 13. Das Einrasten
   steht in site.css 17a; Platz für den Inhalt höchstens 571 Pixel.
   Alles mit html.blaettern davor: das schlägt auch den <style>-Block im Kopf
   der Seite. Am Rechner und am Tablet bleibt jeder Pixel.
   ========================================================================= */
@media(max-width:767px){
  html.blaettern main > .hair{display:none}
  /* «Wie ich auf die Idee kam» besteht am Handy aus zwei Bildschirmen (die
     zwei .idee-teil), der Abschnitt selbst trägt keinen Abstand mehr. */
  html.blaettern #idee{padding:0}

  /* ---------- 1 · Über mich ----------
     Zurück oben. Das Bild klein links, Name und Ort daneben, der Satz
     darunter über die ganze Breite: so passt alles auf einen Bildschirm, und
     der Block steht mittig im Platz über dem Zustimmungsband. */
  html.blaettern #ich > .wrap{display:flex;flex-direction:column;
    min-height:calc(100svh - var(--blatt-oben) - var(--blatt-unten))}
  html.blaettern #ich .seite-zurueck{align-self:flex-start}
  html.blaettern #ich .eyebrow{margin-top:auto}
  html.blaettern #ich .ich{grid-template-columns:104px minmax(0,1fr);column-gap:18px;row-gap:0;
    align-items:center;margin-top:24px;margin-bottom:auto;padding-bottom:96px}
  html.blaettern #ich .ich > div{display:contents}
  html.blaettern #ich .ich__bild{grid-column:1;grid-row:1/3}
  html.blaettern #ich .ich__bild img{max-width:104px;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
  html.blaettern #ich .ich__name{grid-column:2;grid-row:1;align-self:end}
  html.blaettern #ich .ich__ort{grid-column:2;grid-row:2;align-self:start}
  html.blaettern #ich .ich .lead{grid-column:1/-1;grid-row:3;margin-top:22px}

  /* ---------- 2 und 3 · Wie ich auf die Idee kam ----------
     Erst Überschrift, der erste Satz und die Vergessenskurve. Dann auf einem
     eigenen Bildschirm der Schluss, gross gesetzt, mit dem Knopf. */
  html.blaettern .idee-teil--schluss .lead{font-size:21px;line-height:1.5;color:#e9efec;margin-top:0}
  html.blaettern .idee-teil--schluss .btn{margin-top:6px}

  /* ---------- 4 · Weitere Apps von mir ----------
     Runde 4 (13.10.2026, Punkt 37): am Handy wie ein Home-Bildschirm, drei
     Spalten, grosses Zeichen, der Name darunter. Reihenfolge aus dem HTML:
     CatchMe, Probia, TrainTag, dann Pluvio, SoMeGu, Cirka. Wer eine eigene
     Seite hat, trägt den Pfeil hinter dem Namen und ist als Ganzes antippbar
     (rund 110 × 100 Pixel); SoMeGu und Cirka nur Zeichen und Name. TrainTag
     fällt auf: ein Ring und ein leiser Schein in seinem Bernstein (#f2c14e,
     aus dem Zeichen der App, rund 11 zu 1 auf dem Grund), Name und Pfeil in
     derselben Farbe. Der halbe Satz je App fällt am Handy weg, «alle noch im
     Test» steht im Satz darüber. Am Rechner bleibt die Liste, wie sie war. */
  html.blaettern #apps .mine--kurz{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 6px;margin-top:30px}
  html.blaettern #apps .mine--kurz li{border-top:0}
  html.blaettern #apps .mine--kurz .mine__z{position:relative;display:grid;grid-template-columns:auto auto;
    justify-content:center;align-items:center;column-gap:4px;row-gap:11px;min-height:0;padding:6px 0 8px;
    border-radius:18px;-webkit-tap-highlight-color:transparent}
  html.blaettern #apps .mine--kurz .mine__z > div{display:contents}
  html.blaettern #apps .mine--kurz .mine__ic{grid-column:1/-1;justify-self:center;width:62px;height:62px}
  html.blaettern #apps .mine--kurz .mine__ic img{border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
  html.blaettern #apps .mine--kurz i{display:none}
  html.blaettern #apps .mine--kurz b{grid-column:1;font-size:15px;letter-spacing:.07em}
  html.blaettern #apps .mine--kurz div.mine__z b{grid-column:1/-1;justify-self:center}
  html.blaettern #apps .mine--kurz a.mine__z > span{grid-column:2;font-size:17px;line-height:1;color:var(--muted)}
  html.blaettern #apps .mine__z--tt::before{content:"";position:absolute;left:50%;top:-14px;width:118px;height:104px;
    margin-left:-59px;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(242,193,78,.17),rgba(242,193,78,0))}
  html.blaettern #apps .mine--kurz .mine__z--tt .mine__ic img{border-color:transparent;
    box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #f2c14e,0 10px 26px rgba(242,193,78,.22)}
  html.blaettern #apps .mine--kurz .mine__z--tt b,html.blaettern #apps .mine--kurz .mine__z--tt > span{color:#f2c14e}
  html.blaettern #apps .mine--kurz a.mine__z:active .mine__ic{transform:scale(.96)}
  html.blaettern #apps .mine--kurz .mine__ic{transition:transform .14s var(--ease)}
  html.blaettern #apps .mine--kurz a.mine__z:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

  /* ---------- 5 · Go & Grow holen ----------
     Ein Bildschirm für den Schluss: die Zeile darf gross sein. Darunter
     «Für iPhone und Android.» und seit Runde 4 (13.10.2026, Punkt 38) die
     Laden-Knöpfe nach Punkt 27 (Baustein .laden-weiche, site.css 16b und
     18a): mit Erkennung nur der eigene, sonst beide untereinander, App
     Store oben. Der Block bleibt so breit wie die Zeile darüber gut
     lesbar ist, höchstens 320 Pixel. */
  html.blaettern #holen h2{font-size:48px;line-height:.95}
  html.blaettern #holen .laden-tat{max-width:320px;margin-inline:auto}

  /* Die Sicherungen (Feld mit Fokus, Bereich zu hoch) gelten für alle
     Blätter-Seiten gemeinsam: site.css 17a und assets/js/blaettern.js. */
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  html.blaettern #apps .mine--kurz .mine__ic{transition:none}
  html.blaettern #apps .mine--kurz a.mine__z:active .mine__ic{transform:none}
}
@media(max-width:767px) and (hover:hover){
  html.blaettern #apps .mine--kurz a.mine__z:hover b,html.blaettern #apps .mine--kurz a.mine__z:hover > span{color:var(--primary)}
  html.blaettern #apps .mine--kurz .mine__z--tt:hover b,html.blaettern #apps .mine--kurz .mine__z--tt:hover > span{color:#ffd77a}
}



/* =========================================================================
   RECHNER (ab 768 Pixeln), 13.10.2026: ein Bereich, ein Bildschirm
   Auftrag: docs/umbau-handy/DESKTOP-2026-10-13.md. Am Rechner erzählt die
   Seite dasselbe wie am Handy, in derselben Reihenfolge: Über mich, Viel
   gelesen (mit der Kurve), der Schritt zum Tun, die anderen Apps, Go & Grow
   holen. Jeder Bereich ist genau eine Bildschirmhöhe hoch (das Fenster ohne
   die Kopfleiste), kompakt und mittig, mit einem Hauptelement.
   Runde 2 am Rechner (13.10.2026 abends): die Seite hakt ein wie am Handy.
   <html class="blaettern blaettern-rechner">, jeder .bildschirm ist eine
   Station (site.css 17e, assets/js/blaettern.js e). Der letzte Bereich und
   die Fusszeile sind zusammen ein Bildschirm (--fuss-h misst blaettern.js).
   Alles hier steht in @media(min-width:768px). Unter 768 Pixeln ändert sich
   kein Pixel (Pixelvergleich gegen den Stand v2c). html.blaettern davor,
   damit die Regeln auch gegen den <style>-Block im Kopf der Seite gewinnen;
   wo ein style-Attribut im HTML steht, hilft nur !important.
   ========================================================================= */
@media(min-width:768px){
  /* Die Kopfleiste ist 57 Pixel hoch, ab 900 Pixeln 61 (site.css). */
  html.blaettern{--rz-kopf:57px;--rz-h:calc(100vh - var(--rz-kopf));--rz-rand:clamp(24px,4.6vh,52px)}
  html.blaettern main > .hair{display:none}
  html.blaettern main > section{display:flex;padding:0}
  html.blaettern main > section[hidden]{display:none}
  html.blaettern main > section > .wrap{display:flex;flex-direction:column;justify-content:center;
    min-height:var(--rz-h);padding-block:var(--rz-rand)}
  html.blaettern main > section:last-child > .wrap{min-height:calc(var(--rz-h) - var(--fuss-h, 0px))}

  /* ---------- 1 · Über mich ----------
     Links die grosse Zeile, Name, Ort und der Satz, rechts das Bild gross.
     Der Zurück-Knopf bleibt oben links, wie er immer war; der Rest steht
     mittig im Bildschirm. */
  html.blaettern #ich{padding-top:0}
  html.blaettern #ich > .wrap{padding-top:20px}
  html.blaettern #ich .seite-zurueck{align-self:flex-start;margin-bottom:0}
  html.blaettern #ich .eyebrow{margin-top:auto;margin-bottom:24px}
  html.blaettern #ich .ich{margin-bottom:auto}
  html.blaettern #ich h1{font-size:clamp(64px,8vw,112px);line-height:1}
  html.blaettern #ich .ich__name{font-size:clamp(30px,3vw,40px)}
  html.blaettern #ich .ich__ort{font-size:13px}
  html.blaettern #ich .ich .lead{font-size:clamp(18px,1.5vw,21px);max-width:34em}

  /* ---------- 2 · Viel gelesen. Wenig getan. ----------
     Die Zeile, der Satz und darunter die Kurve gross über die Breite. Ihre
     Beschriftung steht wie am Handy als Text darunter («direkt danach»
     statt «Tag 0»), die Schrift in der Zeichnung ist aus. Die Breite der
     Kurve richtet sich nach der Höhe, damit alles auf den Bildschirm passt. */
  html.blaettern #idee{padding:0}
  html.blaettern #idee > .wrap{display:block;min-height:0;padding-block:0}
  html.blaettern .idee-teil{display:flex;flex-direction:column;justify-content:center;
    min-height:var(--rz-h);padding-block:var(--rz-rand)}
  html.blaettern .idee-teil h2{font-size:clamp(46px,5.2vw,76px)!important;line-height:.92}
  html.blaettern .idee-teil > .lead{max-width:36em!important;font-size:clamp(18px,1.5vw,21px)}
  html.blaettern .urk,html.blaettern .urk-leg{--urk-b:min(100%,960px,calc((var(--rz-h) - 400px) * 560 / 190))}
  html.blaettern .urk{width:var(--urk-b);max-width:none;margin:clamp(20px,3.6vh,36px) 0 0}
  html.blaettern .urk__t,html.blaettern .urk__k{display:none}
  html.blaettern .urk-leg{display:flex;justify-content:space-between;gap:24px;
    width:var(--urk-b);max-width:none;margin:calc(26px - var(--urk-b) * 42 / 560) 0 0;padding:0 3.9% 0 8.2%}
  html.blaettern .urk-leg p{display:flex;flex-direction:column;gap:4px}
  html.blaettern .urk-leg p:last-child{text-align:right}
  html.blaettern .urk-leg b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-synthesis:none;
    font-size:clamp(20px,1.9vw,28px);line-height:1.1;letter-spacing:.02em;color:#fff}
  html.blaettern .urk-leg span{font-size:13px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}

  /* ---------- 3 · Der Schritt vom Lesen zum Tun ----------
     Der Satz gross und hell, daneben (ab 1024) die Zahl 51 als Bild, mit
     denselben Worten wie in der Belegzeile der Startseite. Darunter der
     Knopf. */
  html.blaettern .idee-teil--schluss{display:grid;grid-template-columns:minmax(0,1fr);
    align-content:center;column-gap:clamp(40px,5vw,88px)}
  html.blaettern .idee-teil--schluss .lead{max-width:24em!important;margin-top:0;
    font-size:clamp(24px,2.35vw,34px);line-height:1.42;color:#e9efec;text-wrap:pretty}
  html.blaettern .idee-teil--schluss > p:not(.lead):not(.idee-zahl){margin-top:clamp(20px,3.2vh,32px)!important}
  html.blaettern .idee-teil--schluss .btn{min-height:56px;padding:15px 30px;font-size:16px}

  /* ---------- 4 · Weitere Apps von mir ----------
     Wie am Handy ein Home-Bildschirm: grosses Zeichen, der Name darunter,
     TrainTag mit Ring und Schein in seinem Bernstein, SoMeGu und Cirka ohne
     Pfeil. Der halbe Satz je App fällt wie am Handy weg. */
  html.blaettern #apps h2{font-size:clamp(46px,5.2vw,76px)!important;line-height:.92}
  html.blaettern #apps .lead{font-size:clamp(18px,1.5vw,21px)}
  html.blaettern #apps .mine--kurz{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.8vh,28px) 12px;
    margin-top:clamp(24px,4vh,40px);max-width:620px}
  html.blaettern #apps .mine--kurz li{border-top:0}
  html.blaettern #apps .mine--kurz .mine__z{position:relative;display:grid;grid-template-columns:auto auto;
    justify-content:center;align-items:center;column-gap:6px;row-gap:14px;min-height:0;padding:10px 0 12px;
    border-radius:22px}
  html.blaettern #apps .mine--kurz .mine__z > div{display:contents}
  html.blaettern #apps .mine--kurz .mine__ic{grid-column:1/-1;justify-self:center;
    width:clamp(76px,6.4vw,96px);height:clamp(76px,6.4vw,96px);transition:transform .16s var(--ease)}
  html.blaettern #apps .mine--kurz .mine__ic img{border-radius:22%;box-shadow:0 12px 30px rgba(0,0,0,.5)}
  html.blaettern #apps .mine--kurz i{display:none}
  html.blaettern #apps .mine--kurz b{grid-column:1;font-size:clamp(17px,1.4vw,20px);letter-spacing:.08em}
  html.blaettern #apps .mine--kurz div.mine__z b{grid-column:1/-1;justify-self:center}
  html.blaettern #apps .mine--kurz a.mine__z > span{grid-column:2;font-size:20px;line-height:1;color:var(--muted)}
  html.blaettern #apps .mine__z--tt::before{content:"";position:absolute;left:50%;top:-18px;width:170px;height:150px;
    margin-left:-85px;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(242,193,78,.18),rgba(242,193,78,0))}
  html.blaettern #apps .mine--kurz .mine__z--tt .mine__ic img{border-color:transparent;
    box-shadow:0 0 0 3px var(--bg),0 0 0 5px #f2c14e,0 14px 34px rgba(242,193,78,.22)}
  html.blaettern #apps .mine--kurz .mine__z--tt b,html.blaettern #apps .mine--kurz .mine__z--tt > span{color:#f2c14e}
  html.blaettern #apps .mine--kurz a.mine__z:hover .mine__ic{transform:translateY(-3px)}
  html.blaettern #apps .mine--kurz a.mine__z:active .mine__ic{transform:scale(.97)}
  html.blaettern #apps .mine--kurz a.mine__z:hover b,html.blaettern #apps .mine--kurz a.mine__z:hover > span{color:var(--primary)}
  html.blaettern #apps .mine--kurz .mine__z--tt:hover b,html.blaettern #apps .mine--kurz .mine__z--tt:hover > span{color:#ffd77a}
  html.blaettern #apps .mine--kurz a.mine__z:hover > span{transform:none}
  html.blaettern #apps .mine--kurz a.mine__z:focus-visible{outline:3px solid var(--primary);outline-offset:4px}

  /* ---------- 5 · Go & Grow holen (mit der Fusszeile ein Bildschirm) ----------
     Wie bei Daylio: das Zeichen der App, der Name, ein Satz, die zwei
     Laden-Knöpfe gleich gestaltet, App Store oben, Google Play darunter
     (Auftrag vom 11.10.2026: untereinander, auf allen Seiten gleich; am
     Handy Punkt 32). «Probier Tag 0 aus» gibt es wie am Handy nicht mehr.
     Bei wenig Höhe (unter 820 Pixeln Fenster) fällt das Zeichen weg, damit
     der Bereich mit der Fusszeile auf einen Bildschirm passt. */
  html.blaettern #holen h2{font-size:clamp(52px,5.6vw,84px);line-height:.92}
  html.blaettern #holen .lead{font-size:clamp(18px,1.5vw,21px);margin-top:12px}
  html.blaettern #holen .laden-tat{width:100%;max-width:360px;margin-top:clamp(18px,3.4vh,32px)}
  html.blaettern #holen .laden.stores{grid-template-columns:minmax(0,1fr);max-width:none;gap:10px}
  html.blaettern #holen .laden .store{min-height:62px;justify-content:center;padding:8px 20px}
  .holen-zeichen{display:block;width:clamp(72px,9vh,112px);height:auto;margin:0 auto clamp(16px,2.8vh,28px);
    border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 70px rgba(95,181,171,.18)}
}
@media(min-width:768px) and (max-height:819px){
  .holen-zeichen{display:none}
}
@supports(height:100svh){
  @media(min-width:768px){html.blaettern{--rz-h:calc(100svh - var(--rz-kopf))}}
}
@media(min-width:900px){html.blaettern{--rz-kopf:61px}}

/* Die 51 gibt es nur am Rechner ab 1024 Pixeln (daneben ist dort Platz). */
.idee-zahl{display:none}

/* Zwei Spalten erst ab 1024 Pixeln. Darunter (Tablet hochkant) steht alles
   untereinander, mittig im Bildschirm. */
@media(min-width:1024px){
  /* 1 · Text links, Bild rechts */
  html.blaettern #ich > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(320px,min(32vw,58vh),460px));
    grid-template-rows:auto 1fr auto auto auto auto auto 1fr;column-gap:clamp(48px,6vw,96px);align-items:start}
  html.blaettern #ich .seite-zurueck{grid-column:1;grid-row:1;justify-self:start}
  html.blaettern #ich .eyebrow{grid-column:1;grid-row:3;margin-top:0}
  html.blaettern #ich h1{grid-column:1;grid-row:4}
  html.blaettern #ich .ich,html.blaettern #ich .ich > div{display:contents}
  html.blaettern #ich .ich__bild{grid-column:2;grid-row:2/9;align-self:center}
  html.blaettern #ich .ich__bild img{max-width:none;width:100%;border-radius:32px;
    box-shadow:0 24px 60px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06)}
  html.blaettern #ich .ich__name{grid-column:1;grid-row:5;margin-top:clamp(20px,3.6vh,34px)}
  html.blaettern #ich .ich__ort{grid-column:1;grid-row:6}
  html.blaettern #ich .ich .lead{grid-column:1;grid-row:7;margin-top:14px}

  /* 3 · der Satz links, die 51 rechts */
  html.blaettern .idee-teil--schluss{grid-template-columns:minmax(0,1fr) auto}
  html.blaettern .idee-teil--schluss > .lead{grid-column:1;grid-row:1}
  html.blaettern .idee-teil--schluss > p:not(.lead):not(.idee-zahl){grid-column:1;grid-row:2}
  html.blaettern .idee-zahl{display:flex;flex-direction:column;align-items:flex-start;grid-column:2;grid-row:1/3;
    align-self:center;margin:0}
  .idee-zahl b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-synthesis:none;
    font-size:clamp(150px,min(17vw,30vh),260px);line-height:.82;letter-spacing:-.01em;color:var(--primary)}
  .idee-zahl span{margin-top:16px;font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

  /* 4 · Überschrift links, die sechs Zeichen rechts */
  html.blaettern #apps > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);
    grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(40px,5vw,88px);align-items:start}
  html.blaettern #apps .eyebrow{grid-column:1;grid-row:2}
  html.blaettern #apps h2{grid-column:1;grid-row:3}
  html.blaettern #apps .lead{grid-column:1;grid-row:4;max-width:24em!important}
  html.blaettern #apps .mine--kurz{grid-column:2;grid-row:1/6;align-self:center;margin-top:0;max-width:none}
}
@media(min-width:768px) and (prefers-reduced-motion:reduce){
  html.blaettern #apps .mine--kurz .mine__ic{transition:none}
  html.blaettern #apps .mine--kurz a.mine__z:hover .mine__ic,html.blaettern #apps .mine--kurz a.mine__z:active .mine__ic{transform:none}
}