/* =============================================================================
   FEAR — DROP 001. Bibliothek VII.

   Das hier ist ausdruecklich NICHT die Sprache der Modulbibliotheken. Dort
   wird gezeigt, wie Inhalte dargestellt werden. Hier wird eine Kampagne
   gefahren: ein Satz je Flaeche, ein Bild dahinter, ein Rahmen darum.

   Vorbild ist die vom Haus gebaute v7-Fassung (Kamera-Rahmen, Frame-Zaehler,
   Farbchip, Drop-Nummer). Uebernommen ist ihre SPRACHE, nicht ihr Code — und
   ohne ihre Fremdbibliothek: Bewegung laeuft ueber eine einzige eigene
   Bildschleife, Schrift ueber die selbstgehosteten Hausschnitte.

   EIN RASTER FUER ALLES. Jede Kante auf dieser Seite — Rahmen, Kopfzeile,
   Textspalte, Bildkante, Fusszeile — sitzt auf denselben vier Werten. Genau
   das war die Vorgabe: Bild, Text, Raster und Flaeche muessen aufeinander
   sitzen, nicht nebeneinander liegen.
   ============================================================================= */

.drop{
  /* --- das Raster, einzige Quelle jeder Ausrichtung ------------------------
     KORREKTUR 2026-07-29 (Operator: "ob wir nicht weiter nach links gehen").
     Vorher stand hier `--edge:clamp(20px,3vw,40px)` und ein Deckel von
     1180 px. Auf 1920 px ergab das eine zentrierte Spalte, die bei x=370
     begann — waehrend der Kamerarahmen bei x=32 sass. Drei Kanten auf einer
     Seite, die im eigenen Kopfkommentar "ein Raster fuer alles" verspricht.
     Gemessen, nicht vermutet: 370 px tote Flaeche links.

     Jetzt gilt die Leiter aus zz-raster.css — dieselbe Leiter wie in Shop,
     Corporate und Magazin. Auf 1920 px ist der Rand exakt 96 px, und die
     Textspalte beginnt dort, wo der Rahmen und die Fusszeile beginnen. */
  --edge:24px;                      /* Aussenrand der Seite, siehe Leiter */
  --frame:clamp(16px,2.5vw,32px);   /* Einzug des Kamerarahmens */
  --gap:clamp(12px,1.5vw,20px);
  --hud:clamp(40px,5vh,56px);       /* Hoehe der Rahmenzeilen */
  --deckel:1728px;                  /* wie --zr-max */
  --spalte:min(calc(100% - 2 * var(--edge)),var(--deckel));

  /* --- Flaechen --- */
  --void:#050505; --ink:#0A0A0A; --carbon:#141414; --smoke:#1F1F1F;
  --cream:#FFFADA; --bone:#E8E3D8;
  --sig:#A53A2A;

  /* --- Schrift- und Linienfarben (R30: Literale nur hier, nie im Bauteil).
     Die Seite ist EIN dunkles Thema mit Absicht — Weiss ist hier der
     Invert-Akzent (Hover, Zeiger), kein Theme-Verstoss. --- */
  --w:#fff;                          /* Invert-Voll: Hover, Zeigerpunkt */
  --w-55:rgba(255,255,255,.55);      /* Knopfrahmen */
  --w-10:rgba(255,255,255,.10);      /* Fortschritts-Haarlinie */
  --grau:#8A8A8A;                    /* HUD- und Fuss-Grundton */
  --grau-hell:#A9A49A;               /* Katalog-Fusszeile */
  --stein:#C7C2B8;                   /* Fuss-Links */
  --knochen:#F2EFE7;                 /* Kachel-Zeile auf Motiv */
  --sk-hell:#D9D4C9;                 /* Kachel-Nachsatz dunkel */
  --sk-dunkel:#3A372F;               /* Kachel-Nachsatz creme */
  --terra-schrift:#D4744F;           /* Terra aufgehellt, nur als Schrift */

  /* --- Schrift --- */
  --display:"NotoSerifDisplay",Didot,Georgia,serif;
  --sans:"PPNeue",-apple-system,system-ui,sans-serif;
  --meta-xs:10px; --meta-sm:11px; --meta-md:12px;
  --track:.22em; --track-wide:.3em;

  --e:cubic-bezier(.165,.84,.44,1);

  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  /* Der Zeiger wird ersetzt — die eigene Marke laeuft mit. Nur dort, wo es
     ueberhaupt einen Zeiger gibt. */
  cursor:none;
}
@media(pointer:coarse){.drop{cursor:auto}}

/* Die Leiter. Dieselben fuenf Stufen wie zz-raster.css — hier ausgeschrieben,
   weil die Kampagne ihre eigene Sprache hat und nicht das ganze Rastersystem
   mitzieht. Weicht eine Zahl von der Leiter ab, ist das ein Fehler, kein
   Freiheitsgrad; die Wache verify-raster.mjs prueft beide gegeneinander. */
@media(min-width:600px){ .drop{--edge:32px} }
@media(min-width:900px){ .drop{--edge:48px} }
@media(min-width:1280px){.drop{--edge:64px} }
@media(min-width:1680px){.drop{--edge:96px} }

/* Zwei Toene, mehr gibt es nicht. Dunkel ist der Normalfall, Creme traegt
   das Manifest — die Stelle, an der die Marke selbst spricht. */
/* Die Vorzeile ist 11px gross und liegt fast immer auf einem Motiv. Bei
   #8A8A8A traegt sie auf einem hellen Foto nicht (gemessen 1,43:1 gegen
   ein weisses Motiv) — auf dunklem Grund laeuft sie deshalb in Knochen. */
.drop .st{--bg:var(--void); --fg:#F2EFE7; --fg2:#E0DAD0; --hair:rgba(242,239,231,.16)}
.drop .st[data-ton="cream"]{--bg:var(--cream); --fg:#0A0A0A; --fg2:#5F5B52;
  --hair:rgba(10,10,10,.20)}

/* ====================================================== KAMERARAHMEN (fix) */
.dhud{position:fixed;inset:var(--frame);z-index:40;pointer-events:none;
  color:var(--hud-fg,var(--grau));
  transition:color 600ms var(--e)}
/* Die Zeilen halten Abstand von den vier Ecken — sonst schneidet die Ecke
   in die letzte Ziffer des Zaehlers. */
/* Jede Kante traegt ihre eigene Farbe (siehe faerbeRahmen in zz-drop.js) —
   deshalb steht --hud-fg auf der ZEILE und der ECKE, nicht nur am Rahmen. */
.dhud .row,.dhud i{color:var(--hud-fg,var(--grau));transition:color 600ms var(--e)}

/* DER RAHMEN BRAUCHT EINEN EIGENEN GRUND (2026-07-29).
   Farbe allein traegt ihn nicht. Unter ihm laeuft die Seite durch, und auf den
   Plakatflaechen liegt dort ein MOTIV — an einer hellen Stelle stand die
   Fusszeile mit 1,43:1. Gefunden hat das erst guard-contrast-media am Pixel;
   im DOM ist der Grund des Rahmens immer nur die Seitenfarbe, und dort sah
   alles gruen aus.

   Der Grund ist ein weicher Verlauf von der Kante her — im Kino ist das der
   schwarze Balken, hier ist es dasselbe Mittel: er nimmt dem Bild nichts weg
   und gibt der Zeile etwas zum Stehen. Seine Farbe folgt der Flaeche
   (--scrim-o/-u aus faerbeRahmen), sonst waere er auf Creme ein dunkler
   Schatten, wo dunkle Schrift steht. */
.dhud::before,.dhud::after{content:"";position:absolute;
  left:calc(-1 * var(--frame));right:calc(-1 * var(--frame));
  height:calc(var(--hud) + var(--frame) + 20px);
  pointer-events:none;z-index:-1;
  transition:background 600ms var(--e)}
/* Mit PLATEAU, nicht als reiner Verlauf: die Zeile sitzt nicht an der Kante,
   sondern ein Stueck darunter. Ein Verlauf, der bei 0 % beginnt, ist dort
   schon halb abgefallen — gemessen 4,31:1 statt der noetigen 4,5:1. Voll bis
   unter die Zeile, dann ausblenden. */
.dhud::before{top:calc(-1 * var(--frame));
  background:linear-gradient(180deg,var(--scrim-o,rgba(0,0,0,.88)) 0%,
    var(--scrim-o,rgba(0,0,0,.88)) 62%,rgba(0,0,0,0) 100%)}
.dhud::after{bottom:calc(-1 * var(--frame));
  background:linear-gradient(0deg,var(--scrim-u,rgba(0,0,0,.88)) 0%,
    var(--scrim-u,rgba(0,0,0,.88)) 62%,rgba(0,0,0,0) 100%)}
/* Die Rahmenzeile sitzt auf DERSELBEN Schiene wie der Satz darunter. Der
   Rahmen ist um --frame eingerueckt, die Schiene liegt bei --edge — die
   Differenz ist das Polster. Vorher standen hier feste 26 px; damit begann
   die Kopfzeile auf 1920 px bei x=58 und der Satz bei x=370. */
.dhud .row{position:absolute;left:0;right:0;
  padding:0 max(0px,calc(var(--edge) - var(--frame)));display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--gap);
  font-size:var(--meta-sm);letter-spacing:var(--track);text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.dhud .row.top{top:0}
.dhud .row.bot{bottom:0}
.dhud .r{text-align:right}
.dhud .c{text-align:center}
/* Die vier Ecken. Sie sind das Zeichen, dass hier ein Bild gerahmt wird. */
.dhud i{position:absolute;width:14px;height:14px;border:0 solid currentColor;
  opacity:.55}
.dhud i.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.dhud i.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.dhud i.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.dhud i.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.dhud .chip{display:inline-flex;align-items:center;gap:.45em}
.dhud .chip s{width:9px;height:9px;background:var(--cream);display:block;
  text-decoration:none;outline:1px solid currentColor}
.dhud .idx b{font-weight:400}
.dhud .idx em{font-style:normal;opacity:.5;margin:0 .25em}

/* Am Telefon passen drei Spalten nicht in eine 11px-Zeile. Ungeregelt bricht
   "— ZABA & ZINGO · BERLIN ↔ MILANO" in VIER Zeilen und legt sich quer ueber
   das Motiv — auf 390 px gemessen. Ein Kamerarahmen, der ins Bild waechst,
   ist kein Rahmen mehr.

   Also weglassen, was der Rahmen an dieser Breite nicht leisten muss: Ort und
   Farbchip. Was bleibt, ist das, wofuer er da ist — welcher Drop, welche
   Flaeche von wie vielen, welches Kapitel. Nichts bricht um. */
.dhud .row > *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
  /* Die Schiene gilt auch hier — nur der Inhalt der Zeile wird duenner. */
  .dhud .row.top .l,
  .dhud .row.bot .l,
  .dhud .row.bot .r{display:none}
  .dhud .row.top{grid-template-columns:1fr auto}
  .dhud .row.bot{grid-template-columns:1fr}
  .dhud .row.bot .c{text-align:left}
}

/* Fortschritt als Haarlinie am oberen Rand — kein Balken, kein Prozentwert. */
.dprog{position:fixed;top:0;left:0;right:0;height:1px;z-index:45;
  background:var(--w-10)}
.dprog span{display:block;height:100%;background:var(--sig);
  transform:scaleX(0);transform-origin:0 50%}

/* =============================================================== FLAECHEN */
.drop .st{position:relative;min-height:100svh;display:grid;align-content:center;
  background:var(--bg);color:var(--fg);overflow:clip;isolation:isolate;
  padding:calc(var(--hud) + var(--frame) + var(--gap)) 0;
  transition:background-color 600ms var(--e),color 600ms var(--e)}
.drop .in{width:var(--spalte);margin:0 auto;position:relative;z-index:2}

/* ================================================== RASTUNG DES BLICKS ====
   Operator-Befund 2026-07-29: "es ist nicht 100% im Viewport". Richtig — und
   es war nie anders. Jede Flaeche ist genau 100svh hoch, aber ohne Rastung
   haelt der Bildlauf irgendwo dazwischen an: gemessen auf 1512x982 stand die
   Trennkante bei y=608, also von zwei Flaechen je die Haelfte. Eine Kampagne,
   die je Flaeche EINEN Satz zeigt, zeigt dann zwei halbe.

   `mandatory` und nicht `proximity`: proximity rastet nur, wenn man ohnehin
   fast richtig steht — genau der Fall, den man nicht absichern muss.
   Flaechen, die HOEHER sind als das Fenster (a-split misst 989 px auf einem
   982-px-Fenster), bleiben vollstaendig erreichbar; ist der Rastbereich
   groesser als das Sichtfenster, gilt jede Lage darin als gueltige Rast.

   Die Rastung haengt an einer Klasse auf <html> und NICHT an `body.drop`:
   der Katalog /module7/ traegt dieselbe Koerperklasse, ist aber ein
   Kartengitter und darf nicht rasten. Eine Bedingung, die zwei verschiedene
   Seiten gleich behandelt, ist keine Bedingung. */
html.drop-schiene{scroll-snap-type:y mandatory}
/* `always` statt `normal` (Operator 2026-08-09): JEDER Scroll haelt an der
   NAECHSTEN Flaeche. Mit `normal` traegt eine einzige Schwunggeste ueber
   zwei, drei, fuenf Flaechen hinweg — die Strecke wird durchblaettert statt
   gelesen, und die Stimme liest eine Flaeche, die schon vorbei ist. Die
   kurze Fassung (zz-kurz.css) stand schon auf `always`; die Kampagne nicht —
   derselbe Griff fuehlte sich auf zwei Strecken verschieden an. */
html.drop-schiene .st{scroll-snap-align:start;scroll-snap-stop:always}
html.drop-schiene .dfoot{scroll-snap-align:start;scroll-snap-stop:always}
@media(prefers-reduced-motion:reduce){
  html.drop-schiene{scroll-snap-type:y proximity}
}

/* Das Motiv liegt IMMER hinter dem Satz, nie neben ihm. Es bewegt sich
   langsamer als die Seite — der Blick bleibt am Wort, nicht am Bild.

   KORREKTUR 2026-07-29 (Operator: "bei fear fehlen bilder emotionen").
   Die Motive lagen die ganze Zeit da, man sah sie nur nicht: `grayscale(1)`
   hat ausgerechnet die Terra-Linie geloescht, die in fast jedem dieser Bilder
   das Motiv traegt — und der Schleier lag mit einer FLACHEN Schicht ueber der
   gesamten Flaeche. Beides zusammen ergab schwarze Rechtecke. Ein Bild, das
   man nicht sieht, ist kein Bild.

   Jetzt: die Farbe bleibt (gedaempft, nicht gestrichen), und der Schleier
   liegt dort, wo der Text steht — nicht ueber dem ganzen Motiv. */
.drop .bg{position:absolute;inset:-8% 0;z-index:0;background-size:cover;
  background-position:center;
  filter:saturate(.72) contrast(1.10) brightness(.86);
  will-change:transform}
.drop .st[data-ton="cream"] .bg{filter:saturate(.62) contrast(1.02) brightness(1.04)}

/* Der Schleier traegt die Schrift, nicht das Bild. Er ist gerichtet: dicht an
   der Kante, an der der Satz sitzt, offen dort, wo das Motiv atmen darf.
   Die Grundschicht bleibt (ein vollstaendig weisses Motiv muss getragen
   werden), sie ist aber halb so schwer wie vorher — die Dichte kommt jetzt
   aus der Richtung, nicht aus der Flaeche. Werte am Pixel gefahren. */
.drop .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.62) 34%,
      rgba(0,0,0,.20) 68%,rgba(0,0,0,.10) 100%),
    linear-gradient(0deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.10) 40%,
      rgba(0,0,0,.10) 60%,rgba(0,0,0,.34) 100%),
    rgba(0,0,0,.28)}
/* Mittig gesetzte Flaechen brauchen den Schleier mittig, nicht links. */
.drop .a-auftakt .veil,.drop .a-slogan .veil,.drop .a-schwelle .veil{
  background:
    radial-gradient(96% 66% at 50% 50%,rgba(0,0,0,.74) 0%,rgba(0,0,0,.52) 52%,
      rgba(0,0,0,.16) 100%),
    rgba(0,0,0,.30)}
/* Auf Creme kippt die Rechnung: dort traegt HELL die dunkle Schrift. */
.drop .st[data-ton="cream"] .veil{
  background:
    linear-gradient(100deg,rgba(255,250,218,.90) 0%,rgba(255,250,218,.76) 38%,
      rgba(255,250,218,.42) 72%,rgba(255,250,218,.30) 100%),
    rgba(255,250,218,.30)}

/* ================================================================ SCHRIFT */
/* Die Anzeigeschrift des Hauses traegt nie unter 40px — darunter uebernimmt
   die Hausschrift. Deshalb liegt der Mindestwert jeder Anzeigezeile auf
   2.5rem und nicht darunter, auch am kleinsten Telefon. */
/* Der Satz. Anzeigeschrift, nie unter 40px — darunter uebernimmt die
   Hausschrift, so steht es im Regelwerk. */
.drop .say{font-family:var(--display);font-weight:200;
  --sz:clamp(2.6rem,7.4vw,6.2rem);
  font-size:max(2.5rem,calc(var(--sz) * var(--zoom,1)));
  line-height:.98;letter-spacing:-.035em;margin:0}
.drop .say em{font-style:normal;font-weight:400}

/* ------------------------------------------------ ZEILE = REDEPAUSE ------ */
/* Der Umbruch ist hier keine Folge der Spaltenbreite, sondern eine Setzung:
   jedes Satzende und jede Redepause beginnt eine neue Zeile (zz-satz.js).
   Vorher lief der Blick ueber den Punkt hinweg weiter und der Rest kippte als
   Zwei-Wort-Waise darunter — der Satz war vollstaendig, seine Wirkung weg.

   `balance` sitzt auf der ZEILE, nicht auf dem Absatz: sonst rechnet der
   Browser ueber alle Zeilen hinweg aus und hebt die Setzung wieder auf. */
.drop .z{display:block;text-wrap:balance}
/* Was gebunden ist, bricht nicht: so faellt der Umbruch eine Stelle frueher
   und der Rest traegt drei Woerter statt einem. Gesetzt wird das aus der
   Messung am gerenderten Bild, nicht aus einer Schaetzung. */
.drop .bind{white-space:nowrap}
/* Nach einem Satzende atmet die Flaeche kurz, nach einer Pause nur halb. */
.drop .say .z + .z{margin-top:.06em}
.drop .say .z[data-art="satz"] + .z{margin-top:.16em}

/* Wortweiser Auftritt: jedes Wort steigt hinter einer Kante hervor. Die
   Verzoegerung kommt aus dem Setzer und laeuft ueber die Zeilen — die Pause
   steht damit auch in der Zeit, nicht nur im Raum. */
/* Das Fenster ist groesser als die Zeile — siehe --zz-tinte-* in
   zz-corporate.css. Ein Fenster in Zeilenhoehe (.98) schnitt hier jedem "g",
   "y", "p" unten 0,093 bis 0,139 em ab; bei 99 px sind das 14 Pixel. Die Luft
   kommt als Padding (overflow schneidet an der Innenkante) und wird per
   negativem Aussenmass wieder eingezogen: die Zeile steht danach exakt da, wo
   sie vorher stand. Die Startlage waechst mit, damit das Wort vor seinem
   Auftritt weiterhin GENAU um die Fensterhoehe tiefer steht. */
.drop .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-top:var(--zz-tinte-oben);padding-bottom:var(--zz-tinte-unten);
  margin-top:calc(-1 * var(--zz-tinte-oben));
  margin-bottom:calc(-1 * var(--zz-tinte-unten))}
.drop .w > span{display:inline-block;
  transform:translateY(calc(105% + var(--zz-tinte-oben) + var(--zz-tinte-unten)));
  transition:transform 900ms var(--e);transition-delay:var(--d,0ms)}
.drop .st.sichtbar .w > span{transform:none}

/* Der Nachsatz traegt dieselbe Setzung — er ist meist Stakkato
   ("Dry mouth. Loud pulse. No danger anywhere.") und lebt genau davon,
   dass jeder dieser drei Saetze fuer sich steht. */
.drop .sub .z{text-wrap:pretty}
.drop .sub .z + .z{margin-top:.15em}
.drop .sub{font-family:var(--sans);font-size:clamp(1rem,1.6vw,1.25rem);
  line-height:1.45;color:var(--fg);opacity:.82;margin:1.4rem 0 0;
  max-width:38ch;
  transform:translateY(14px);opacity:0;
  transition:opacity 700ms var(--e) 420ms,transform 700ms var(--e) 420ms}
.drop .st.sichtbar .sub{opacity:.82;transform:none}

.drop .meta{font-size:var(--meta-sm);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--fg2);margin:0 0 1.6rem;
  display:flex;align-items:center;gap:.8rem}
.drop .meta::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ================================================ MOTIV NEBEN DEM WORT === */
/* Der Kern der Korrektur vom 2026-07-29. Vorher lag jedes Motiv als
   Vollflaeche HINTER dem Satz und musste deshalb so weit weggedimmt werden,
   dass nichts mehr davon uebrig war. Jetzt steht es bei den Spaltenformen als
   gerahmtes Bild NEBEN dem Satz — scharf, in Farbe, ohne Schleier — und traegt
   seine Emotion als Unterschrift.

   Ein Raster fuer beide: Wort und Motiv sitzen in derselben Reihe und teilen
   dieselbe untere Kante. Sie rutschen dadurch bei keiner Breite auseinander. */
.drop .feld{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:end}
@media(min-width:900px){
  .drop .feld.mit-motiv{grid-template-columns:1fr minmax(220px,28%)}
  /* Jede zweite Flaeche spiegelt. Ohne das laeuft die ganze Strecke
     einseitig und der Blick gewoehnt sich nach drei Flaechen ab. */
  .drop .st[data-rolle="spalte"]:nth-of-type(even) .feld.mit-motiv{
    grid-template-columns:minmax(220px,28%) 1fr}
  .drop .st[data-rolle="spalte"]:nth-of-type(even) .motiv{order:-1}
}
.drop .wort{min-width:0}

.drop .motiv{margin:0;position:relative}
.drop .motiv .rahmen{position:relative;overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--hair);background:var(--carbon)}
.drop .st[data-ton="cream"] .motiv .rahmen{background:var(--bone)}
.drop .motiv img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.04);
  transform:scale(1.06);
  transition:transform 1400ms var(--e),filter 700ms var(--e)}
.drop .st.sichtbar .motiv img{transform:scale(1)}
/* Der Vorhang. Das Motiv wird aufgezogen, nicht eingeblendet — ein Bild, das
   von 0 auf 1 blendet, wirkt wie ein Ladefehler. */
.drop .motiv .rahmen s{position:absolute;inset:0;background:var(--bg);
  transform-origin:100% 50%;transform:scaleX(1);
  transition:transform 1100ms var(--e) 260ms}
.drop .st.sichtbar .motiv .rahmen s{transform:scaleX(0)}

/* ---------------------------------------------------------- DIE EMOTION -- */
/* Sie steht beim Wort, nicht in einer Legende irgendwo unten: als Unterschrift
   am Rahmen, und wo es keinen Rahmen gibt, direkt unter dem Satz. */
.drop .emo{display:flex;align-items:center;gap:.7em;margin:.85rem 0 0;
  font-size:var(--meta-sm);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--fg2)}
.drop .wort > .emo{margin:1.6rem 0 0}
.drop .emo i{display:block;width:2.4em;height:1px;background:var(--sig);
  flex:none;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 900ms var(--e) 320ms}
.drop .st.sichtbar .emo i{transform:none}
.drop .emo span{opacity:0;transform:translateY(6px);
  transition:opacity 700ms var(--e) 440ms,transform 700ms var(--e) 440ms}
.drop .st.sichtbar .emo span{opacity:1;transform:none}

/* ------------------------------------------------------------- BERUEHRUNG */
/* Was anfassbar ist, antwortet. Nur dort, wo es ueberhaupt einen Zeiger gibt —
   auf dem Telefon bliebe ein Hover-Zustand nach der Beruehrung haengen. */
@media(hover:hover) and (pointer:fine){
  .drop .motiv .rahmen{transition:border-color 500ms var(--e)}
  .drop .motiv:hover .rahmen{border-color:var(--sig)}
  .drop .motiv:hover img{transform:scale(1.05);filter:saturate(1.06) contrast(1.07)}
  .drop .motiv .emo i{transition:transform 900ms var(--e) 320ms,width 500ms var(--e)}
  .drop .motiv:hover .emo i{width:4.2em}
  /* Die Zeile unter dem Zeiger tritt vor, die uebrigen treten zurueck. Eine
     Hervorhebung ohne Gegenteil sieht man nicht. */
  .drop .say .z{transition:opacity 420ms var(--e)}
  .drop .say:hover .z{opacity:.40}
  .drop .say:hover .z:hover{opacity:1}
}

/* ---------------------------------------------------- Darstellungsformen */
/* auftakt — das eine Wort, drei Motive dahinter */
.drop .a-auftakt{text-align:center}
.drop .a-auftakt .in{width:min(900px,100% - 2*var(--edge))}
.drop .a-auftakt .mark{font-family:var(--display);font-weight:200;
  text-transform:uppercase;font-size:clamp(4.4rem,21vw,15rem);line-height:.82;
  letter-spacing:-.055em;margin:0}
.drop .a-auftakt .say{--sz:clamp(2.5rem,5.2vw,3.4rem);margin-top:1.2rem;
  letter-spacing:-.02em}
.drop .a-auftakt .meta{justify-content:center}
.drop .a-auftakt .meta::after{display:none}
.drop .a-auftakt .sub{margin-left:auto;margin-right:auto;text-align:center}
.drop .a-auftakt .bg{opacity:0;transition:opacity 1400ms var(--e)}
.drop .a-auftakt .bg.on{opacity:1}

/* gross — Satz linksbuendig auf der Spalte */
.drop .a-gross .say{max-width:16ch}

/* zeilen — Satz plus Nachsatz, enger Block */
.drop .a-zeilen .say{--sz:clamp(2.5rem,5vw,3.8rem);max-width:18ch}

/* bild-satz — Motiv als Flaeche, Satz sitzt auf der unteren Rasterlinie */
.drop .a-bild-satz{align-content:end}
.drop .a-bild-satz .say{--sz:clamp(2.5rem,5.4vw,4.2rem);max-width:20ch}

/* manifest — Creme, keine Bilder, der Text steht allein */
.drop .a-manifest .say,.drop .a-zitate .say{font-family:var(--display);
  --sz:clamp(2.5rem,5.2vw,4rem);line-height:1.06;max-width:22ch}
.drop .a-manifest .in,.drop .a-zitate .in,.drop .a-drei .in{
  width:min(980px,100% - 2*var(--edge))}
/* zitate — die Saetze, die dir jemand gesagt hat */
.drop .a-zitate .say{font-style:italic;opacity:.9}

/* drei — Not talent. Not luck. Just Clarity. */
.drop .a-drei .liste{display:grid;gap:.2rem}
.drop .a-drei .liste div{display:grid;grid-template-columns:4.5rem 1fr;
  align-items:baseline;padding:1rem 0;border-top:1px solid var(--hair)}
.drop .a-drei .liste div:last-child{border-bottom:1px solid var(--hair)}
.drop .a-drei .liste .n{font-size:var(--meta-sm);letter-spacing:var(--track);
  color:var(--fg2)}
.drop .a-drei .liste .t{font-family:var(--display);font-weight:200;
  --sz:clamp(2.5rem,6vw,4.4rem);
  font-size:max(2.5rem,calc(var(--sz) * var(--zoom,1)));
  line-height:1;letter-spacing:-.03em}

/* split — zwei Motive, zwei Saetze, eine Signallinie dazwischen */
.drop .a-split .paar{display:grid;gap:0}
.drop .a-split .h{position:relative;padding:clamp(1.4rem,4vh,2.4rem) 0}
.drop .a-split .h + .h{border-top:1px solid var(--hair)}
/* Terra ist hier die Linie zwischen den beiden Haelften, nicht die Schrift.
   Als 11px-Wort auf einem hellen Motiv misst es 1,62:1 — das Kennwort laeuft
   deshalb in Knochen, und das Signal bleibt, wo es hingehoert: an der Kante. */
.drop .a-split .h .k{font-size:var(--meta-sm);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--fg2);margin-bottom:.6rem}
.drop .a-split .h .k::before{content:"";display:inline-block;width:1.6em;
  height:1px;background:var(--sig);vertical-align:middle;margin-right:.6em}
.drop .a-split .h .t{font-family:var(--display);font-weight:200;
  --sz:clamp(2.5rem,4.6vw,3.4rem);
  font-size:max(2.5rem,calc(var(--sz) * var(--zoom,1)));
  line-height:1.04;letter-spacing:-.03em}
@media(min-width:900px){
  .drop .a-split .paar{grid-template-columns:1fr 1fr;gap:var(--edge)}
  .drop .a-split .h + .h{border-top:0;border-left:1px solid var(--sig);
    padding-left:var(--edge)}
}

/* signatur — das Wort verdichtet sich zum Zeichen */
.drop .a-signatur .stufen{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:1rem clamp(1.2rem,4vw,3rem)}
.drop .a-signatur .stufen span{font-family:var(--display);font-weight:200;
  font-size:clamp(2.5rem,7vw,5rem);line-height:1;letter-spacing:-.04em;
  opacity:.34;transition:opacity 700ms var(--e)}
.drop .st.sichtbar .a-signatur .stufen span,
.drop .a-signatur .stufen span:last-child{opacity:1}
.drop .a-signatur .stufen span:last-child{font-weight:400}

/* slogan — feste Setzung, steht immer allein, nie einzeilig */
.drop .a-slogan{text-align:center}
.drop .a-slogan .say{--sz:clamp(2.5rem,6.4vw,5rem);max-width:none;
  line-height:1.04}
.drop .a-slogan .meta{justify-content:center}
.drop .a-slogan .meta::after{display:none}

/* schwelle — der Ausgang */
.drop .a-schwelle{text-align:center}
.drop .a-schwelle .say{--sz:clamp(2.5rem,6vw,4.6rem)}
.drop .a-schwelle .meta{justify-content:center}
.drop .a-schwelle .meta::after{display:none}
.drop .a-schwelle .sub{margin-left:auto;margin-right:auto}
.drop .enter{display:inline-flex;align-items:center;gap:.9em;margin-top:2.4rem;
  padding:1.05rem 2.6rem;border:1px solid var(--w-55);color:var(--w);
  font-size:var(--meta-md);letter-spacing:var(--track-wide);text-transform:uppercase;
  text-decoration:none;border-radius:999px;min-height:48px;
  transition:background 500ms var(--e),color 500ms var(--e),
    border-color 500ms var(--e),gap 500ms var(--e)}
.drop .enter:hover{background:var(--w);color:var(--ink);border-color:var(--w);gap:1.4em}
/* Der Rahmen des Knopfes ist 1 px und damit KEIN Fokusnachweis (R68 verlangt
   2 px bei 3:1). Gemessen per Tabulator, in beiden Themen — mit der Maus faellt
   es nie auf. Der eigene Rahmen bleibt Gestaltung, der Fokus bekommt seinen. */
.drop .enter:focus-visible{outline:2px solid var(--sig);outline-offset:4px}
.drop .enter i{display:block;width:1.6em;height:1px;background:currentColor}

/* ========================================================== KAPITELTAFEL */
/* Die Kapiteltafel stand auf 62svh. Als Zwischenstueck war das gedacht — mit
   der Rastung wird daraus ein Defekt: die Tafel rastet oben ein und laesst
   373 px der naechsten Flaeche stehen, gemessen auf 982 px Fensterhoehe. Acht
   der 58 Flaechen zeigten damit zwei Sachen gleichzeitig. Eine Rastflaeche
   ist so hoch wie das Fenster, sonst rastet sie auf etwas anderes mit.
   Die Tafel bleibt ruhig — sie hat nur mehr Luft um sich. */
.drop .kap{min-height:100svh;align-content:center}
.drop .kap .nr{font-family:var(--display);font-weight:200;
  font-size:clamp(4rem,14vw,10rem);line-height:.8;letter-spacing:-.05em;
  opacity:.18}
.drop .kap .t{font-family:var(--display);font-weight:200;
  font-size:clamp(2.5rem,6vw,4.4rem);line-height:1;letter-spacing:-.035em;
  margin:.4rem 0 0}
.drop .kap .cl{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--fg2);
  margin-top:1rem;max-width:34ch}
/* Ausgang nach BELIEVE — rechts in jedem Kapitel. Form und Farbe wie .enter
   auf der Schwelle, damit der Weg an beiden Stellen gleich aussieht. Am
   Telefon rückt er unter den Claim; Trefferfläche mindestens 44 px (R28b). */
.drop .kap .in{position:relative}
.drop .kap .kexit{display:inline-flex;align-items:center;gap:.6em;min-height:44px;
  margin-top:1.6rem;font-family:var(--sans);font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--sig);padding-bottom:.35em}
.drop .kap .kexit i{width:1.6em;height:1px;background:currentColor;
  transition:width 300ms var(--e)}
.drop .kap .kexit:hover i,.drop .kap .kexit:focus-visible i{width:2.6em}
@media (min-width:900px){
  .drop .kap .kexit{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-top:0}
}

/* =========================================================== EIGENER ZEIGER */
.dcur{position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity 300ms var(--e)}
.dcur.on{opacity:1}
.dcur .dot{position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--w);transform:translate(-50%,-50%)}
.dcur .ring{position:absolute;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);
  transition:width 400ms var(--e),height 400ms var(--e),
    border-color 400ms var(--e)}
.dcur.gross .ring{width:62px;height:62px;border-color:var(--w)}
@media(pointer:coarse){.dcur{display:none}}

/* ============================================================== FUSSZEILE */
/* DER AUFBAUBEREICH BEHAELT SEINE HOEHE, BEVOR ER GEBAUT WIRD.

   `<main id="drop">` kommt leer aus dem Server; die 50 Flaechen setzt das
   Skript. Bis dahin ist das Dokument etwa fussleistenhoch — also steht die
   Fussleiste beim Laden IM BILD und wird eine Sekunde spaeter von 50 Flaechen
   nach unten geschoben. Genau das misst R72 als Verschiebung: CLS 0,338, das
   Dreifache der Grenze.

   Gefunden wurde es, weil ich es verschlimmert habe. Die Trefferflaechen im
   Fuss auf 44 px zu heben (R28b) machte den Fuss hoeher — und damit die
   geschobene Flaeche groesser: 0,338 auf 0,366, dreimal deterministisch gegen
   den unveraenderten Stand aus HEAD gemessen. Den eigenen Anteil
   zurueckzunehmen haette den Messwert repariert und die Ursache stehen
   lassen; die Ursache ist, dass hier nichts reserviert war.

   Eine Bildschirmhoehe ist die richtige Reserve und keine geratene Zahl: die
   erste Flaeche der Strecke ist selbst 100svh hoch, der Platzhalter ist also
   exakt so gross wie das, was ihn ersetzt (R48). Damit startet die Fussleiste
   unterhalb der Falz und traegt zur Verschiebung nichts mehr bei. */
#drop:empty{min-height:100svh}

.dfoot{background:var(--ink);color:var(--grau);padding:clamp(3rem,9vh,5rem) 0;
  border-top:1px solid rgba(255,255,255,.12)}
.dfoot .in{width:var(--spalte);margin:0 auto;display:grid;gap:1.4rem}
.dfoot .wm{font-family:var(--display);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.03em;color:var(--bone)}
.dfoot .links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  font-size:var(--meta-sm);letter-spacing:var(--track);text-transform:uppercase}
/* Die Wege im Fuss sind Bedienflaechen, keine Zierzeile.
   Vorher: 149x20 px und ein Fokusrahmen von 1 px, der aus dem Unterstrich
   bestand. Beides gemessen am gerenderten Stand (R28b harte Untergrenze
   24x24, Hausmass 44; R68 mindestens 2 px bei 3:1). Am Schreibtisch faellt
   das nie auf — mit dem Daumen und mit der Tastatur schon. Die kurze Fassung
   loest das seit ihrem Bau richtig; hier zieht der Kanon nach, nicht
   umgekehrt. Der Unterstrich bleibt die Gestaltung, er ist nur nicht mehr
   der Fokusnachweis. */
.dfoot a{color:var(--stein);text-decoration:none;border-bottom:1px solid var(--sig);
  min-height:44px;min-width:24px;display:inline-flex;align-items:center;
  justify-content:center;
  padding-bottom:2px}
.dfoot a:hover{color:var(--w)}
.dfoot a:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.dfoot .q{font-size:var(--meta-sm);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--grau)}

/* ============================================================ KATALOGSEITE */
/* Jedes Modul einmal als Hochformat und einmal quadratisch — so wie es
   ausgespielt wird. Wer hier etwas sieht, sieht den fertigen Beitrag. */
.drop.kat{cursor:auto}
.drop.kat .st{min-height:0;padding:0}
.kgrid{width:var(--spalte);margin:0 auto;padding:clamp(2rem,6vh,4rem) 0;
  display:grid;gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.kcard{border:1px solid rgba(255,255,255,.14);background:var(--ink);
  display:grid;gap:0}
.kcard .kmeta{display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem .9rem;font-size:var(--meta-xs);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--grau);
  border-bottom:1px solid rgba(255,255,255,.14)}
/* Terra traegt auf dunklem Grund keinen Text — gemessen 3,05:1. Als Schrift
   laeuft dieselbe Farbe aufgehellt (4,89:1 auf #22201F, 6,3:1 auf #141311);
   als Linie und Flaeche bleibt Terra Terra. */
.kcard .kmeta .fz{color:var(--terra-schrift)}
/* Das Ausspielformat ist keine Behauptung, es ist die Kachel selbst. */
.kcard .shot{position:relative;aspect-ratio:9/16;overflow:hidden;
  display:grid;align-content:center;padding:1.2rem;background:var(--void)}
.kcard[data-post="feed"] .shot{aspect-ratio:4/5}
.kcard[data-ton="cream"] .shot{background:var(--cream)}
.kcard .shot .bgk{position:absolute;inset:0;background-size:cover;
  background-position:center;filter:grayscale(1) contrast(1.06)}
/* Im kleinen Format traegt ein Motiv weniger als auf der ganzen Flaeche —
   der Schleier ist hier flacher, damit ueberhaupt ein Bild zu sehen ist.
   Die Zeile steht trotzdem mit Abstand ueber dem Mindestwert (gemessen). */
.kcard .shot .vk{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.30) 100%),rgba(0,0,0,.34)}
.kcard[data-ton="cream"] .shot .vk{display:none}
.kcard .shot .txt{position:relative;z-index:2;font-family:var(--display);
  font-weight:200;font-size:clamp(1.1rem,2.4vw,1.5rem);line-height:1.06;
  letter-spacing:-.025em;color:var(--knochen)}
.kcard[data-ton="cream"] .shot .txt{color:var(--ink)}
.kcard .shot .sk{position:relative;z-index:2;font-family:var(--sans);
  font-size:14px;line-height:1.4;margin-top:.7rem;color:var(--sk-hell)}
.kcard[data-ton="cream"] .shot .sk{color:var(--sk-dunkel)}
.kcard .kfoot{padding:.7rem .9rem;font-size:14px;line-height:1.45;color:var(--grau-hell);
  border-top:1px solid rgba(255,255,255,.14)}

@media(prefers-reduced-motion:reduce){
  .drop .w > span,.drop .sub,.drop .st,.dhud,.drop .a-auftakt .bg,
  .drop .a-signatur .stufen span{transition:none}
  .drop .w > span{transform:none}
  .drop .sub{opacity:.82;transform:none}
}

/* Streckenzeile vor dem Haus-Fuß: eine Zeile, kein zweiter Fuß. */
.dfoot.dfoot-schmal{padding:clamp(1.6rem,4vh,2.6rem) 0;border-top:1px solid rgba(255,255,255,.08)}
.dfoot.dfoot-schmal .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.dfoot.dfoot-schmal .wm{font-size:.8rem;letter-spacing:.2em}

/* Haus-Fuß auf den Drop-Seiten: die Corporate-Token werden auf die Flächen des
   Drops gelegt — der Fuß trägt den Ton der Strecke, ohne dass body[data-theme]
   die Token der Seite kippt (gemessen 2026-09-08: --ink wurde Creme, der
   Streifen darüber verlor seine Fläche). */
.drop #zzfoot{--paper:var(--carbon);--surface:var(--smoke);--ink:var(--cream);--ink2:var(--bone);
  --muted:var(--grau);--line:var(--w-55);--line-soft:var(--w-10);--signal:var(--sig);--auf-film:var(--w)}
.drop .dfoot.dfoot-schmal{background:var(--void);color:var(--grau)}
.drop .dfoot.dfoot-schmal .wm{color:var(--bone)}