/* Teil manifest, Blaupause (Giuliano, 08.10.2026: Variante 1 aus vorgaenge/manifest-varianten statt Glutvideo).
   Drei große Sätze zu je drei Zeilen auf einem Konstruktionsraster in Deep und Signal Blue. Jeder Satz wird beim Einscrollen
   Zeile für Zeile aus dem Umriss ausgefüllt, eine helle Kante läuft mit. Unter jedem Satz eine Maßlinie.
   Seit 09.10.2026 (Giuliano) ohne Beschriftungen über den Sätzen und ohne Schriftfeld, Satz 1 animiert wie 2 und 3.
   Die Hülle <section class="manifest" id="haltung"> baut seite.css (dunkler Grund, seit umbau7 ohne Schnittkante, kein Innenabstand).
   Ohne JavaScript und bei bewegungAus() sind alle Sätze gefüllt. js/manifest.js setzt k-manifest--lebt (Umriss) und je
   Zeile --f (Füllgrad am Scrollen). Animiert wird nur clip-path der Füllung und transform der Kante. */

.k-manifest,.k-manifest *,.k-manifest *::before,.k-manifest *::after{box-sizing:border-box}
.k-manifest{
  --bp-tinte:#F2FAFC;                   /* Füllung, 16:1 auf dem Raster */
  --bp-umriss:rgba(207,228,232,.82);    /* Umrisslinie der Schrift */
  --bp-mass:rgba(124,180,192,.75);      /* Maßlinien und Passkreuze (Signal Blue hell) */
  --bp-linie:rgba(207,228,232,.075);    /* feines Raster, 24 px */
  --bp-linie-stark:rgba(207,228,232,.16); /* grobes Raster, 120 px */
  --bp-grund:#072A3B;                   /* Deep Blue mit etwas Signal Blue */
  --bp-licht:#0D4862;                   /* aufgehellte Mitte */
  --bp-strich:1.5px;
  --manifest-luft:clamp(56px,13svh,140px);
  position:relative;isolation:isolate;color:var(--bp-tinte);overflow-x:clip;
  padding-block:calc(var(--ecke) + clamp(32px,6svh,88px))}

/* Bühne: das Raster, geschnitten wie die Sektion (--schnitt, seit umbau7 none) */
.k-manifest__buehne{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none;
  clip-path:var(--schnitt,polygon(0 0,calc(100% - var(--ecke) * var(--steigung)) 0,100% var(--ecke),100% 100%,calc(var(--ecke) * var(--steigung)) 100%,0 calc(100% - var(--ecke))));
  background:
    linear-gradient(var(--bp-linie-stark) 1px,transparent 1px) -1px -1px/120px 120px,
    linear-gradient(90deg,var(--bp-linie-stark) 1px,transparent 1px) -1px -1px/120px 120px,
    linear-gradient(var(--bp-linie) 1px,transparent 1px) -1px -1px/24px 24px,
    linear-gradient(90deg,var(--bp-linie) 1px,transparent 1px) -1px -1px/24px 24px,
    radial-gradient(ellipse 90% 70% at 45% 40%,var(--bp-licht),var(--bp-grund) 78%)}
/* Passkreuze */
.k-manifest__kreuz{position:absolute;width:22px;height:22px;
  background:linear-gradient(var(--bp-mass),var(--bp-mass)) 50% 0/1px 100% no-repeat,linear-gradient(var(--bp-mass),var(--bp-mass)) 0 50%/100% 1px no-repeat}
.k-manifest__kreuz:nth-child(1){left:8%;top:22%}
.k-manifest__kreuz:nth-child(2){right:12%;top:46%}
.k-manifest__kreuz:nth-child(3){left:18%;bottom:20%}

/* Sätze */
.k-manifest__saetze{position:relative;z-index:1;display:grid;gap:var(--manifest-luft);container-type:inline-size;
  width:100%;max-width:calc(var(--breite) + 2 * var(--rand));margin-inline:auto;
  padding-left:max(var(--rand),env(safe-area-inset-left));padding-right:max(var(--rand),env(safe-area-inset-right))}
/* Je Block genau drei Zeilen mit Giulianos Umbrüchen: jede .k-manifest__zeile ist ein Block ohne Umbruch. Die längste Zeile
   ("deinem Team gar nichts.") misst rund 12,5 em, die Schrift ist darum höchstens 1/13,1 der Satzbreite (100cqi). */
.k-manifest__satz{margin:0;justify-self:start;font-family:var(--f-marke);font-weight:400;
  font-size:clamp(1.875rem,.9rem + 4.6vw,5rem);font-size:min(clamp(1.875rem,.9rem + 4.6vw,5rem),100cqi / 13.1);
  line-height:1.06;letter-spacing:-.004em;color:var(--bp-tinte)}
.k-manifest__satz:nth-child(even){justify-self:end;text-align:right}
/* Jede Zeile so breit wie ihr Text (seit 13.10.2026), damit die Füllung am Scrollen ohne Leerlauf über die Buchstaben läuft;
   in rechtsbündigen Sätzen rückt sie nach rechts. */
.k-manifest__zeile{display:block;width:fit-content;white-space:nowrap}
.k-manifest__satz:nth-child(even) .k-manifest__zeile{margin-left:auto}
/* Maßlinie unter jedem Satz */
.k-manifest__satz::after{content:"";display:block;margin-top:.32em;height:11px;border-inline:1px solid var(--bp-mass);
  background:linear-gradient(var(--bp-mass),var(--bp-mass)) 0 50%/100% 1px no-repeat}

/* Lebend (Giuliano, 09.10.2026: alle drei Sätze gleich; seit 13.10.2026 am Scrollen): jede Zeile startet als Umriss, die Füllung
   (Kopie aus data-text) reicht so weit, wie js/manifest.js es über --f (0 bis 1) vorgibt, die helle Kante sitzt an der
   Füllgrenze und ist nur sichtbar, solange die Zeile halb gefüllt ist (--kante). Kein Übergang, das Skript zieht weich nach.
   Ohne Unterstützung für Umrissschrift bleiben die Sätze einfach gefüllt. */
@supports (-webkit-text-stroke:1px){
  .k-manifest--lebt .k-manifest__satz .k-manifest__zeile{position:relative;color:transparent;-webkit-text-stroke:var(--bp-strich) var(--bp-umriss)}
  .k-manifest--lebt .k-manifest__satz .k-manifest__zeile::after{content:attr(data-text);content:attr(data-text) / "";
    position:absolute;inset:0;color:var(--bp-tinte);-webkit-text-stroke:0;
    clip-path:inset(-.1em calc((1 - var(--f,1)) * 100%) -.1em 0);will-change:clip-path}
  .k-manifest--lebt .k-manifest__satz .k-manifest__zeile::before{content:"";position:absolute;top:-.08em;bottom:-.08em;left:-1px;width:2px;
    background:#BFF3FF;box-shadow:0 0 12px 2px rgba(124,220,240,.7);-webkit-text-stroke:0;
    opacity:var(--kante,0);transition:opacity .35s linear;
    transform:translateX(calc(var(--f,1) * var(--zeilenbreite,0px)));will-change:transform}
}

@media (max-width:640px){.k-manifest{--bp-strich:1px}}
@media (prefers-reduced-motion:reduce){
  .k-manifest--lebt .k-manifest__satz .k-manifest__zeile::before{transition:none;opacity:0}
}