/* ══ DIE LEISTUNGSSEITEN ═══════════════════════════════════════════════════════════════
   /social und /editing. Liegt AUF recht.css (die liefert Kopf, Fuss, Farben und
   Formular) und bringt nur das dazu, was diese beiden Seiten brauchen.

   ── FARBEN: KEINE EIGENEN ─────────────────────────────────────────────────────────────
   Ty 19.09.2026: „Die meisten Farben die hier genutzt werden sind augenkrebs" und
   „Schau dir die haupt akibon seite an, und jetzt diese SMM unterseite."
   Er hat recht, und der Fehler war grundsaetzlich: ich hatte der Unterseite eine eigene
   Palette gegeben (Pink #f472b6, Flieder #c084fc, Cyan #38bdf8), damit sie sich
   „abhebt". Genau das war das Problem — sie hob sich von der eigenen Marke ab. Die
   Hauptseite kommt mit drei Akzenten aus: Gold fuer alles, was Akibon ist und was man
   anklickt, Flieder fuer die leisen Marken und Hervorhebungen, Gruen fuer Haken und
   alles, wobei man gewinnt. Mehr braucht diese Seite auch nicht.
   Die Namen --social und --schnitt bleiben stehen, damit der vorhandene Inhalt nicht
   angefasst werden muss — sie zeigen jetzt beide auf denselben Fliederton der Marke.

   ── UND DIE SEITE MUSS ETWAS ZEIGEN ───────────────────────────────────────────────────
   Ty: „Alles nur text nichts visuell erklärt oder wenigstens schön gemacht."
   Auch richtig. Dagegen stehen hier drei Bilder statt drei Absaetzen: .wege zeigt, dass
   zwei Quellen in EIN Ergebnis laufen, und .folge zeigt die Reihenfolge Website → VSL
   → Social als Kette, weil „erst die Seite, dann Leute drauf“ ein Ablauf ist und kein
   Satz. (Dazwischen stand einmal ein Kartensatz mit drei Bedingungen — Ty 19.09.2026:
   „Das kann weg.“ Die eine Zusage daraus, die sonst nirgends stand — wem die Aufnahmen
   gehoeren —, ist in die Start-Liste gewandert.) */

:root{
  --social:var(--lila2);     /* #c58df0 — der Flieder der Hauptseite */
  --social-2:var(--lila);
  --schnitt:var(--lila2);    /* /editing benutzt denselben; eine Marke, eine Palette */
  --fl:167,139,250;          /* derselbe Flieder als RGB, fuer die durchsichtigen Toene */
  /* Die hellen Stufen stehen in site/stil.css, aber NICHT in recht.css — die
     Rechtsseiten haben nie einen hellen Abschnitt gebraucht. Ohne sie faellt
     `background:var(--hell)` auf durchsichtig zurueck und der Streifen bleibt
     schwarz mit schwarzer Schrift darin. Gemessen und genau so passiert. */
  --hell:#f4f2f9; --hell2:#e9e5f3;
  --hell-tx:#16121f; --hell-tx2:#4a4360; --hell-bd:rgba(20,16,32,.1);
}

/* ── LUFT ─────────────────────────────────────────────────────────────────────────────
   Ty 19.09.2026: „irgendwie ist die schrift überall hier extrem zusammengequetscht.
   Keine Luft zum atmen."
   Die Ursache ist, dass diese Seite auf recht.css sitzt — und recht.css ist für
   Dokumente gebaut. Nebeneinandergelegt:

                     Startseite (stil.css)        Rechtsseiten (recht.css)
     Abschnitt        66–116 px Polster            keins
     h2               25–44 px, Zeile 1,14         18 px, Zeile geerbt
     h3               17,5 px                      15 px
     h1               36–68 px, Zeile 1,05         28–38 px

   Für ein Impressum ist eng richtig, da will niemand scrollen. Eine Verkaufsseite mit
   fünf Abschnitten liest sich so wie ein einziger Block. Also bekommen /social und
   /editing hier die Maße der Startseite — und weil die Überschriften jetzt tragen,
   bleibt die Trennlinie darüber als Abschnittsgrenze stehen.

   Der Verlauf in der Überschrift stand vorher auf −1,2 px Laufweite; das war zusätzlich
   zum engen Zeilenabstand buchstäblich zusammengequetscht. Jetzt −1 px bei Zeile 1,12. */
.rahmen h2{font-size:clamp(25px,3.2vw,36px);line-height:1.16;letter-spacing:-1px;
  font-weight:800;margin:clamp(52px,7vw,86px) 0 16px;padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--bd2)}
.rahmen h3{font-size:17.5px;font-weight:800;letter-spacing:-.3px;margin:0 0 8px;color:var(--tx)}
/* Überschriften, die in einem eigenen Kasten sitzen, brauchen weder Linie noch Abstand —
   der Kasten ist schon die Grenze. */
.wall__head h2,.licht h2{margin:0;padding-top:0;border-top:none}
.rahmen .gross{font-size:17px;line-height:1.75}
.rahmen .klein{line-height:1.7}
.rahmen p{margin:0 0 14px}
.rahmen p:last-child{margin-bottom:0}

/* ── KOPFBEREICH ──────────────────────────────────────────────────────────────────────
   Ty 19.09.2026: „Hero section ist KOMPLETT HÄSSLICH. Komplettes redesign, Und hab gross
   das Bild von Yousef da."
   Was vorher falsch war, laesst sich benennen: eine Textspalte allein in der Breite, eine
   Ueberschrift, die ueber vier Zeilen lief und davon drei im Farbverlauf — die Startseite
   setzt den Verlauf auf EIN Wort („Kunden"), nicht auf einen halben Absatz. Und darunter
   eine Punktreihe, wo die Startseite ihre Kennzahlen stehen hat.
   Jetzt: zwei Spalten, die Ueberschrift kuerzer und der Verlauf auf zwei Woertern, die
   Kennzahlenreihe der Startseite (.zahlen, Werte aus site/stil.css), und rechts das, was
   hier eigentlich verkauft wird — der Mensch, der die Beitraege macht. */
.lhero{display:grid;gap:clamp(30px,5vw,54px);align-items:center;
  padding:clamp(34px,6vw,62px) 0 clamp(20px,3vw,30px)}
@media(min-width:900px){ .lhero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)} }
.lhero__text{min-width:0;max-width:58ch}
/* Kurzer Satz, groessere Schrift. Ty 19.09.2026: „Was ist das bitte fuer ein NICHT
   kraftvoller satz? Hier muss was kuerzeres knackigeres stehen." Vier Woerter tragen
   mehr Groesse als der Absatz vorher — die Startseite geht bei ihrer h1 bis 68 px. */
.lhero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.1;letter-spacing:-1.4px;margin:0 0 20px}
/* Zwei Woerter im Verlauf bleiben zusammen — getrennt ueber zwei Zeilen zerfaellt
   der Farbverlauf in zwei Stuecke, die nicht mehr zusammengehoeren. */
.lhero h1 .verlauf{white-space:nowrap}
.lhero .gross{margin:0 0 30px}
/* Dasselbe Etikett wie .marke auf der Startseite: 11 px, 800, 2,4 px Laufweite. */
.lmarke{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--social)}
.lmarke::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.lreihe{display:flex;flex-wrap:wrap;gap:11px}
/* Die Kennzahlenreihe der Startseite, Wert fuer Wert aus site/stil.css. */
/* Nebeneinander, wie auf der Startseite. Das feste Zweispalten-Raster stammt aus der
   Zeit, als hier „6 oder 12", „ab 790 EUR" und „Deutschlandweit" standen — drei breite
   Posten, die in 489 px nicht nebeneinander passten. Seit die ersten beiden kurze Zahlen
   sind, passen alle drei, und das Raster hat nur noch einen Umbruch erzwungen, wo Platz
   war. Ty 19.09.2026: „da ist genug platz, wieso hast du daraus 2 zeilen gemacht".
   Flex statt Raster heisst: sie brechen um, wenn es eng wird, und sonst nicht. */
.zahlen{display:flex;flex-wrap:wrap;gap:20px 30px;
  border-top:1px solid var(--bd);padding-top:24px;margin-top:30px}
/* 27 statt 30 px, und das ist gerechnet: bei 30 px sind die drei Posten zusammen
   440 px breit, mit zwei Zwischenraeumen 508 — die Spalte ist 489. Es fehlten also
   19 px, und die Reihe brach um. Bei 27 px sind es 462 und sie passt.
   (Ich hatte vorher 387 px gemessen und daraus „passt" geschlossen — die Messung lief
   mitten im Hochzaehlen, „0,4 Mio." ist kuerzer als „1,2 Mio.". Zahlen, die sich
   bewegen, misst man am Ende.) */
.zahlen div b{display:block;font-size:clamp(21px,2.3vw,27px);font-weight:800;letter-spacing:-.8px}
.zahlen div span{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--tx3);
  text-transform:uppercase}

/* ── DAS PORTRAET ─────────────────────────────────────────────────────────────────────
   Ty 19.09.2026: „Dann mach das kleiner und nimm das volle bild. Und übermale es nicht
   tf." Drei klare Ansagen, und alle drei gegen das, was hier vorher stand:

   1. KEIN AUSSCHNITT. Vorher lag ein 4:5-Rahmen darauf und hat links und rechts etwas
      abgeschnitten. Jetzt gibt es weder aspect-ratio noch object-fit — das Bild bringt
      seine eigenen Maße mit, es wird nur in der Breite skaliert. Damit wird JEDES Bild
      vollständig gezeigt, auch ein hochkantes Ganzkörperfoto, falls eins kommt.
   2. NICHTS DARÜBER. Vorher lagen zwei Schichten auf dem Gesicht: ein Abdunkeln von oben
      und ein Hausfarbenton in soft-light. Gut gemeint gegen den hellen Bildhintergrund,
      aber es war übermalt. Beide sind weg; das Bild ist unberührt.
   3. Die Namenszeile liegt deshalb UNTER dem Bild und nicht mehr darauf — eine Zeile über
      dem Kinn ist auch Übermalen.
   Die Breite ist kleiner als vorher (300 statt 380), das Bild dadurch schärfer: die
   Vorlage ist 480 Pixel breit, bei 300 steht sie mit 1,6-facher Dichte. */
.portraet{--breit:clamp(230px,58vw,300px);
  position:relative;margin:0 auto;width:var(--breit)}
.portraet::before{content:"";position:absolute;inset:-18% -22% -12%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(224,168,60,.30),transparent 68%),
             radial-gradient(closest-side at 72% 78%,rgba(var(--fl),.34),transparent 70%);
  filter:blur(14px)}
.portraet__kasten{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--bd2);background:var(--karte);
  box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10)}
/* NUR das Bild steht ueber dem Korn — die Namenszeile darunter nicht.
   Ty 19.09.2026: „Sowas darf ruhig den filter haben... nur fotos und videos nicht." */
.portraet img{display:block;width:100%;height:auto;position:relative;z-index:51}

/* Die Karte unter dem Bild. Eigene Flaeche, eigene Linie — sie gehoert zum Bild, liegt
   aber nicht darauf. */
/* NUR die direkten Kinder. Das lebende Schild wohnt seit heute in dieser Unterschrift,
   und `figcaption b` hat auch SEINE Zahl auf display:block gesetzt — dadurch stand
   „1,2 Mio." und „Aufrufe" untereinander statt nebeneinander, trotz nowrap. Gemessen:
   das <b> war 239 px breit, also volle Zeile. Dasselbe galt fuer span und a. */
.portraet figcaption{padding:15px 17px 17px;border-top:1px solid var(--bd)}
.portraet figcaption > em{display:block;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:1.7px;text-transform:uppercase;color:var(--social);margin-bottom:7px}
.portraet figcaption > b{display:block;font-size:18px;font-weight:800;letter-spacing:-.3px;
  color:var(--tx);line-height:1.2}
.portraet figcaption > span{display:block;margin-top:3px;font-size:12.5px;color:var(--tx3)}
.portraet figcaption > a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;font-weight:800;color:var(--social);text-decoration:none}
.portraet figcaption > a svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:2;flex-shrink:0}
.portraet figcaption > a:hover{color:var(--gold)}

/* ── DIE SPRECHBLASE ──────────────────────────────────────────────────────────────
   Ty 19.09.2026: „Mach daraus eine sprechblase bisschen hoeher und groesser und mach
   das Yousef das sagt, dass er mit so vielen bisher gearbeitet hat und bald schon
   mit dir."
   Aus dem Etikett „6 Laeden in Muenchen" wird damit ein Satz, den ein Mensch sagt —
   und der zeigt auf sein Gesicht. Zwoelf statt sechs, weil die Wand zwoelf Clips
   zeigt und jeder bei einem anderen Laden gedreht wurde; die Zahl steht also direkt
   darunter zum Nachzaehlen.
   Der Satz sagt „gedreht", nicht „gebucht": beweisbar ist, was auf der Wand liegt. */
.sprech{position:relative;margin:16px 0 0;padding:15px 18px;border-radius:16px;
  background:var(--sur2);border:1px solid var(--bd2);
  font-size:13.5px;line-height:1.5;color:var(--tx2);
  box-shadow:0 14px 34px rgba(0,0,0,.42)}
.sprech b{color:var(--tx)}
/* Der Zipfel. Zwei Vierecke uebereinander statt einem: das obere traegt den Rand,
   das untere deckt ihn dort ab, wo die Blase selbst anfaengt — sonst zoege sich die
   Randlinie quer durch den Zipfel. */
.sprech::before,.sprech::after{content:"";position:absolute;width:13px;height:13px;
  transform:rotate(45deg)}
.sprech::before{background:var(--bd2)}
.sprech::after{background:var(--sur2)}

/* Schmal: die Blase steht unter der Karte, der Zipfel zeigt nach oben. */
.sprech::before{top:-7px;left:34px}
.sprech::after{top:-5.5px;left:34px}

/* Breit: sie schwebt rechts neben dem Portrait und zeigt darauf.
   Dieselbe Grenze wie vorher die Plaketten (1240 px) — nur verschwindet sie
   darunter nicht mehr, sie rutscht nach unten. Ein Satz, den nur jeder zweite
   Besucher sieht, waere die Muehe nicht wert. */
@media(min-width:1240px){
  .sprech{position:absolute;top:34%;left:calc(100% + 16px);width:230px;margin:0;z-index:52}
  .sprech::before{top:26px;left:-7px}
  .sprech::after{top:26px;left:-5.5px}
}

/* ── DER PULSIERENDE PUNKT ────────────────────────────────────────────────────────
   Ein Punkt, der schlaegt, sagt „das hier ist gerade wahr" schneller als jedes Wort
   daneben. Zwei Kreise: der innere steht, der aeussere laeuft nach aussen und
   verblasst — kein Blinken, das waere ein Alarm. Bei „Bewegung reduzieren" steht er
   still, dann traegt die Zahl allein.
   Die Zahl selbst zaehlt beim Erscheinen hoch, damit man sieht, dass sie geholt und
   nicht gedruckt wurde. */
/* ── DIE LEBENDE ZEILE ────────────────────────────────────────────────────────────
   Ty 19.09.2026: „mach das nicht als so box, sondern wie 6 oder 12 Beitraege im
   Monat. Oben die zahlen, unten als Text Social proof oder so."
   Also keine Plakette mehr: die Zahlen stehen in derselben Reihe wie die uebrigen
   Kennzahlen, in denselben Groessen, und darunter steht in einer Zeile, woher sie
   kommen. Der Punkt davor ist das Einzige, was sie von einer festen Zahl
   unterscheidet — und genau das soll er sagen. */
/* `.rahmen p` setzt margin:0 0 14px und ist spezifischer als `.lebt` allein — die
   Zeile klebte dadurch an der Kennzahl darueber. Mit dem Elternteil davor gewinnt sie. */
.rahmen .lebt{display:flex;align-items:center;gap:8px;margin:18px 0 0;
  font-size:11.5px;font-weight:800;letter-spacing:.3px;color:var(--tx3)}
/* display:block ist hier kein Schmuck: ein <span> ist von Haus aus inline, und auf
   inline wirken width und height nicht. Vorher hat `figcaption span{display:block}`
   das aus Versehen erledigt — als ich diese Regel auf direkte Kinder begrenzt habe,
   fiel der Punkt auf 0x0 zusammen (gemessen). */
.orb{display:block;position:relative;flex:0 0 auto;width:8px;height:8px;
  border-radius:50%;background:var(--gruen)}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:orbPuls 2.4s cubic-bezier(.25,.6,.35,1) infinite}
@keyframes orbPuls{
  0%{transform:scale(1);opacity:.65}
  70%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
@media(prefers-reduced-motion:reduce){ .orb::after{animation:none} }

/* ── DER HELLE STREIFEN ────────────────────────────────────────────────────────────────
   Die Startseite wechselt zwischen dunklen und hellen Baendern, und die Pakete stehen
   dort im hellen. Das ist kein Schmuck: nach zwei dunklen Abschnitten liest ein heller
   wie ein Themenwechsel, und der Preis steht darin, statt darin unterzugehen.
   Der Streifen laeuft ueber die ganze Breite, sein Inhalt bleibt auf der Spalte. */
/* Der Streifen ragt um die halbe Rollbalkenbreite ueber den Rand hinaus (100vw zaehlt
   den Balken mit, 100% nicht). Das wird abgeschnitten, nicht scrollbar gemacht: clip
   statt hidden, weil hidden einen Rollbehaelter erzeugt und damit die klebende Kopfzeile
   toeten wuerde. Beide Elemente, weil body allein nicht immer an den Viewport durchreicht. */
html,body{overflow-x:clip}
.licht{background:var(--hell);color:var(--hell-tx);
  margin:clamp(34px,5vw,58px) calc((100% - 100vw) / 2) 0;
  padding:clamp(40px,6vw,66px) calc((100vw - 100%) / 2)}
.licht h2,.licht h3{color:var(--hell-tx)}
.licht p{color:var(--hell-tx2)}
.licht .marke{color:#7a1fc4}
.licht .gross{color:var(--hell-tx2)}
/* recht.css faerbt jedes <strong> mit --tx, der HELLEN Schrift fuer dunklen Grund.
   Im hellen Streifen waren die fetten Listenpunkte dadurch fast weiss auf Weiss —
   gemessen rgb(236,233,245) auf #fff. Genau umgekehrt: hier ist fett dunkler. */
.licht strong,.licht b{color:var(--hell-tx)}
.marke{font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  margin:0 0 10px;color:var(--social)}

/* ── PAKETE — DIESELBEN KARTEN WIE AUF DER STARTSEITE ──────────────────────────────────
   Ty 19.09.2026: „mach den bereich im stil wie die haupt akibon seite ihre 2 pakete
   anzeigt." Also die Werte aus site/stil.css, nicht etwas Aehnliches: weisse Karte,
   18 px Radius, 26 px Polster, Preis 30/800/-1, Haken in Gruen, und das hervorgehobene
   Paket traegt Gold — Rand, Schatten und ein dunkelgoldenes Band, weil reines Gold auf
   Weiss mit 1,8:1 nicht lesbar ist. */
.pakete{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:stretch;margin-top:34px}
.paket{background:var(--hell-karte,#fff);border:1px solid var(--hell-bd);border-radius:18px;padding:26px;
  position:relative;display:flex;flex-direction:column}
.paket h3{margin:0;font-size:18px;font-weight:800}
.paket .haken{margin-bottom:auto}
.paket .knopf{margin-top:24px;width:100%}
.paket.hervor{border:1px solid var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 18px 48px rgba(224,168,60,.22)}
.paket .band{position:absolute;top:-13px;left:26px;background:#8a5a00;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
  padding:5px 12px;border-radius:99px}
.preis{font-size:30px;font-weight:800;letter-spacing:-1px;margin:6px 0 2px;
  color:var(--hell-tx)}
.preis small{font-size:13px;font-weight:700;color:var(--hell-tx2)}
.pakettext{font-size:14px;margin:14px 0 0}
.aktion{margin:10px 0 0;font-size:13px;font-weight:700;color:#16a34a}
/* Die Menge ist keine Aktion — Gruen gehoert dem, wobei man gewinnt. Sie traegt
   deshalb den Flieder der Marken, wie .marke im hellen Abschnitt. */
.menge{margin:8px 0 0;font-size:13px;font-weight:800;letter-spacing:.3px;color:#7a1fc4}
.lieferung{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--hell-tx2)}
.haken{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.haken li{display:flex;gap:11px;font-size:15px;color:var(--hell-tx2);align-items:flex-start}
.haken li::before{content:'\2713';color:#16a34a;font-weight:800;flex-shrink:0}
.licht .knopf.leer{border-color:var(--hell-bd);color:var(--hell-tx)}
.licht .knopf.leer:hover{border-color:var(--lila);color:var(--lila)}
.licht .knopf.lila{background:var(--lila);color:#fff}
.licht .knopf.lila:hover{background:var(--lila2);color:#14100a}

/* ── DIE REIHENFOLGE ───────────────────────────────────────────────────────────────────
   „Erst steht die Seite, dann schickt man Leute darauf" ist ein Ablauf. Also drei
   Glieder mit Pfeilen dazwischen, das dritte hervorgehoben, weil es das ist, was auf
   dieser Seite verkauft wird. */
.folge{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:22px 0 0}
.folge__glied{flex:1 1 180px;padding:16px 18px;border-radius:14px;background:var(--karte);
  border:1px solid var(--bd2)}
.folge__glied em{display:block;font-style:normal;font-size:10.5px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.folge__glied b{display:block;font-size:15px;color:var(--tx);margin-bottom:3px}
.folge__glied span{font-size:13px;color:var(--tx2)}
.folge__glied.jetzt{border-color:rgba(var(--fl),.42);background:rgba(var(--fl),.08)}
.folge__glied.jetzt em{color:var(--social)}
.folge__pfeil{align-self:center;flex:0 0 auto;color:var(--tx3);font-size:18px;line-height:1}
@media(max-width:700px){ .folge__pfeil{transform:rotate(90deg);align-self:flex-start;margin-left:24px} }
/* ── /editing erbt alles ───────────────────────────────────────────────────────────────
   Dieselbe Palette, dieselben Bausteine. Frueher stand hier ein eigener Farbsatz — das
   war genau der Fehler, den Ty benannt hat. */

/* ══ DIE REEL-WAND ════════════════════════════════════════════════════════════════
   Ty 19.09.2026: „ich sagte schau den code an und mach es genau gleich gerne 1 zu 1
   als template gespeichert kopieren nur halt mit den Yousef videos."
   Also ist das hier die Wand von ~/Documents/akibon-badboujee, Klasse fuer Klasse
   uebernommen: .wall / .wall__head / .wall__credit / .wall__rail / .wall__more /
   .reels / .reel / .tile / .said / .said__row / .reel__stats / .reel__stat.
   Geaendert wurden nur die Farbmarken (dort Gelb auf Pflaume, hier Akibon-Pink auf
   Schwarz) — die Maße, Abstaende, Uebergaenge und Regeln sind die vom Original.

   EIN echter Unterschied, und der ist keine Entscheidung: Instagram gibt die mp4
   nicht mehr heraus. tile() kann beides und nimmt das Bild, wenn kein Video da ist —
   genau wie beim Original, wenn jemand „Bewegung reduzieren" eingestellt hat. Kommen
   Yousefs Originaldateien, steht in den Daten ein video: und nichts weiter aendert
   sich. */
:root{ --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace }

.tile{
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:12px;
  overflow:hidden;
  background:#0d0a15;
  border:1px solid var(--bd2);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.95);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease;
}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;position:relative;z-index:51}
.tile:hover{border-color:var(--social)}
.tile.has-still{background-size:cover;background-position:center}
.tile.is-still video{opacity:0}
.tile video{transition:opacity .3s ease}

.wall{margin-top:clamp(46px,6vw,74px);padding-block:0}
/* Ty 19.09.2026: „warum ist hier alles so haesslich unordentlich gequetscht?"
   Weil Ueberschrift, Etikett, Schild und Satz mit 10 und 14 px Abstand uebereinander
   klebten — Werte von damals, als die Ueberschrift 18 px hatte. Bei 36 px braucht das
   dreimal so viel. Und das Schild rechts hing an der Grundlinie des Etiketts statt
   oben an der Ueberschrift, was die ganze Zeile schief aussehen liess. */
.wall__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px 28px;flex-wrap:wrap;margin-bottom:0;
}
.wall__head + .wall__rail{margin-top:34px}
.wall__head h2{margin:0}
.wall__head > div{min-width:0}
.wall__credit{margin-top:9px}
.wall__uber{margin:14px 0 0;font-size:11.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--social)}
.wall__satz{margin:20px 0 34px;max-width:62ch}
.wall__credit{
  font-family:var(--mono);font-size:11.5px;color:var(--tx3);
  border:1px solid var(--bd2);border-radius:999px;padding:7px 14px;
  text-decoration:none;white-space:nowrap;
}
.wall__credit:hover{border-color:var(--social);color:var(--social)}

/* ── DER RAND LAEUFT AUS ──────────────────────────────────────────────────────────
   Ty 19.09.2026: „das soll nicht so hart kantik abgeschnitten sein sondern so einen
   fade haben." Dieselbe Maske wie bei der Bewertungsschiene auf der Bad-&-Boujee-
   Seite — dort steht der Grund schon im Code: eine Karte, die aus der Schiene
   laeuft, endete an einer harten senkrechten Kante.
   Zwei Dinge anders als dort: die Maske gilt hier auch links (sobald gescrollt ist,
   wird links genauso beschnitten), und sie schaltet sich ab, wo es nichts mehr
   auszublenden gibt — am Anfang links, am Ende rechts. `stand()` setzt die beiden
   Werte, weil es ohnehin schon weiss, wo die Schiene steht.
   UND: eine Maske erzeugt einen Stapelkontext. Ohne das z-index hier saessen die
   Kacheln wieder darin gefangen und das Korn laege wieder ueber den Videos — genau
   die Ausnahme, die vorhin gebaut wurde. Deshalb steht die Schiene selbst ueber der
   Kornebene (50) und traegt ihre Kacheln mit. */
.reels{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;
  padding-block:6px 20px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--bd2) transparent;
  position:relative;z-index:51;
  --ml:0px; --mr:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--ml),
    #000 calc(100% - var(--mr)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--ml),
    #000 calc(100% - var(--mr)),transparent 100%);
}
.reels::-webkit-scrollbar{height:6px}
.reels::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:99px}
/* Beim Original ist die Kachel eine <figure>. Hier ist sie ein Link, weil es
   das echte Reel zu sehen gibt — Hover zeigt die Kommentare, Klick oeffnet
   Instagram. Sonst unveraendert. */
.reel{flex:0 0 auto;width:clamp(168px,44vw,232px);scroll-snap-align:start;margin:0;
  text-decoration:none;color:inherit;display:block}

/* ── DIE ZAHLEN AUF DEM CLIP ─────────────────────────────────────────────────────
   Likes links oben, Kommentare rechts oben, so wie sie auf dem Beitrag selbst
   sitzen. Aufrufe gibt Instagram ausgeloggt nicht heraus, also stehen hier keine
   statt erfundener. */
/* Seit der Kommentar-Zaehler weg ist, steht hier nur noch das Herz — also links
   ausrichten statt auseinanderziehen, sonst haengt es ohne Gegenueber da. */
.reel__stats{
  position:absolute;inset:10px 10px auto 10px;z-index:52;
  display:flex;align-items:flex-start;
  pointer-events:none;
}
.reel__stat{
  font-family:var(--mono);font-size:11px;line-height:1;
  color:#fff;background:rgba(10,7,16,.58);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.20);
  border-radius:99px;padding:5px 9px;
  font-variant-numeric:tabular-nums;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
/* waehrend die Kommentare laufen saessen sie uebereinander */
.tile.talking .reel__stats{opacity:0;transition:opacity .3s ease}

/* ── DIE KOMMENTARE AUF DEM CLIP ─────────────────────────────────────────────────
   Das sind die Kommentare unter genau diesem Beitrag, also tauchen sie ueber genau
   diesem Clip auf — einer nach dem anderen, in Ruhe, und nur auf Nachfrage. */
.said{
  position:absolute;
  inset:auto 0 0 0;
  z-index:53;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:13px;
  padding:48px 14px 16px;
  background:linear-gradient(to top,rgba(7,5,12,.97) 40%,rgba(7,5,12,.82) 70%,transparent);
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.tile.talking .said{opacity:1}
.said__row{
  display:block;
  color:#fff;
  font-size:.96rem;
  line-height:1.32;
  text-shadow:0 1px 4px rgba(0,0,0,.95);
  opacity:0;
  transform:translateY(8px);
}
.said__row b{
  display:block;
  font-family:var(--mono);
  font-weight:400;
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--social);
  margin-bottom:2px;
  opacity:.85;
}
/* Jede wartet ihre Runde ab — 260 ms Abstand, damit sie ankommen statt zu erscheinen */
.tile.talking .said__row{
  animation:sayUp .55s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:calc(var(--n) * .26s + .12s);
}
@keyframes sayUp{ to{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce){
  .said,.said__row{transition:none}
  .tile.talking .said__row{animation:none;opacity:1;transform:none}
}

/* ── DIE PFEILE ──────────────────────────────────────────────────────────────────
   Drei Spalten: Rinne, Clips, Rinne. Beide Spuren bleiben reserviert, auch waehrend
   ein Knopf versteckt ist, damit nichts seitlich springt, wenn der Zurueck-Pfeil
   auftaucht. */
.wall__rail{
  position:relative;
  display:grid;align-items:center;
  grid-template-columns:46px minmax(0,1fr) 46px;
  column-gap:14px;
}
.wall__more{grid-column:3}
.reels{grid-column:2}
.wall__more{
  width:46px;height:46px;border-radius:50%;position:relative;
  border:1px solid var(--bd2);background:rgba(10,7,16,.86);
  cursor:pointer;transition:background-color .2s ease,border-color .2s ease;
}
.wall__more[hidden]{display:none}
.wall__more--back{grid-column:1}
.wall__more::before{
  content:"";position:absolute;top:50%;left:50%;
  width:11px;height:11px;
  border-top:2px solid #fff;border-right:2px solid #fff;
  transform:translate(-70%,-50%) rotate(45deg);
}
.wall__more--back::before{transform:translate(-30%,-50%) rotate(-135deg)}
.wall__more:hover{background:var(--social);border-color:var(--social)}
.wall__more:hover::before{border-color:#14100a}
/* Zwei 46er Rinnen von 375 px sind fast ein ganzer Clip. Auf dem Handy gehen die
   Pfeile und das Wischen macht die Arbeit. */
@media(max-width:720px){
  .wall__rail{grid-template-columns:minmax(0,1fr)}
  .wall__more{display:none}
  .reels{grid-column:1}
}

/* ── HANDY ───────────────────────────────────────────────────────────────────────
   168 px war ein Daumennagel, kein Video. Ein Clip fuellt jetzt fast den Schirm,
   der naechste lugt hervor. */
@media(max-width:700px){
  .reel{width:min(72vw,300px)}
  .reels{gap:12px}
}
/* Auf einem Tippgeraet bekommt der Clip im Bild .talking dauerhaft — es gibt kein
   Hover, das wieder aufhoert. Also wird aus der Schicht ein Streifen am unteren
   Rand: die zwei ersten Kommentare, der Clip selbst bleibt in Ruhe. */
@media(hover:none){
  .said{
    padding:22px 12px 12px;
    gap:7px;
    background:linear-gradient(to top,rgba(7,5,12,.94) 52%,rgba(7,5,12,.55) 78%,transparent);
  }
  .said__row{font-size:.86rem;line-height:1.28}
  .said__row:nth-child(n+3){display:none}
  .said__row b{font-size:8.5px;margin-bottom:1px}
  .tile.talking .reel__stats{opacity:1}
}

.wallfuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:2px 0 0;
  font-size:12.5px;color:var(--tx3)}
.wallfuss a{font-weight:800}

/* ══ DER KINOFILM-TON ══════════════════════════════════════════════════════════════════
   Ty 19.09.2026: „Versuch mal diesen stil für Yousefs Seite… also das was der magic
   button hier ausspuckt, weil ich fühle dieses Lila bei Yousef nicht. sieht billig aus."

   Gemeint ist die Vorlage „Kinofilm" aus dem Magic Button (`body.kino` in
   site/stil.css). Die Werte hier sind dieselben, Zeile für Zeile — es ist keine
   Nachempfindung, sondern derselbe Farbsatz: warme Brauntöne statt blauschwarz,
   Creme statt Weiß, Bernstein statt Gold, und — das ist der Punkt — `--lila` und
   `--lila2` zeigen auf warmes Kupfer. Damit verschwindet das Lila überall auf einmal,
   auch dort, wo es über `--social` in die Reel-Wand, die Plaketten und die Etiketten
   durchgereicht wird.

   Der Grund, warum der Farbsatz die ganze Palette umlegt und nicht nur den Akzent,
   steht schon in stil.css: eine Farbkorrektur zieht ein BILD. Bliebe ein Ton kalt,
   sähe es nach Versehen aus statt nach Absicht.

   EINE Sache habe ich weggelassen, und zwar bewusst: das Flimmern. Auf der Startseite
   hängt es an `body.ruhig`/`body.scrollt`, die seite.js beim Scrollen setzt — diese
   Seite lädt seite.js nicht, das Flimmern liefe also dauerhaft, während jemand Preise
   liest. Vignette und Korn sind da, nur eben still. Soll es doch pulsieren, ist es
   eine Zeile: animation:kinoflimmern 3.4s steps(2,end) infinite. */
body.kino{
  --bg:#0c0907; --bg2:#130f0a; --bg3:#1a1410;
  --sur:#1a1410cc; --sur-voll:#1a1410; --sur2:#241c14;
  --bd:rgba(246,236,220,.09); --bd2:rgba(246,236,220,.17); --bd3:rgba(246,236,220,.26);
  --tx:#f7eee0; --tx2:#c8b69f; --tx3:#96836d;
  --hell:#1a1410; --hell2:#241c14; --hell-tx:#f7eee0; --hell-tx2:#c8b69f;
  --hell-bd:rgba(246,236,220,.13); --hell-karte:#241c14;
  --gold:#e8a13c; --gold-hell:#f4c078; --goldtx:#f0b45c;
  --lila:#c8763c; --lila2:#e09a5e; --gruen:#bcc76e;
  /* die Namen aus recht.css, die als feste Werte dastehen und deshalb mit müssen */
  --karte:#171109;
  /* und die beiden dieser Seite */
  --social:var(--lila2); --social-2:var(--lila); --schnitt:var(--lila2);
  --fl:224,154,94;
}
/* Vignette und Korn, ohne Klicks abzufangen — aber NICHT über den Aufnahmen.
   Ty 19.09.2026: „ok aber den filter nicht auf die fotos und videos legen."
   Richtig, und es ist derselbe Einwand wie beim Portrait vorhin: eine Farbkorrektur
   darf die Seite einfärben, nicht das Material. Auf der Startseite liegt die Ebene
   auf 300 und damit über allem; hier sitzt sie auf 50, und die Aufnahmen stehen auf
   51. Dazwischen passt nichts: alles andere auf der Seite hat z-index auto oder
   einstellig. Über beiden bleibt die klebende Kopfzeile auf 70, sonst würde eine
   Kachel beim Scrollen darüberlaufen. */
body.kino::after{
  content:'';position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.93;
  background:
    radial-gradient(125% 95% at 50% 44%,transparent 40%,rgba(0,0,0,.58) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.26'/%3E%3C/svg%3E");
}
/* Die festen Dunkeltöne, die recht.css und diese Datei noch blauschwarz hatten */
body.kino .ukopf{background:rgba(12,9,7,.80)}
body.kino .tile{background:var(--bg2)}
body.kino .reel__stat{background:rgba(12,9,7,.58)}
body.kino .wall__more{background:rgba(12,9,7,.86)}
body.kino .wall__more:hover::before{border-color:#1a1006}
body.kino .said{
  background:linear-gradient(to top,rgba(10,7,5,.97) 40%,rgba(10,7,5,.82) 70%,transparent)}
@media(hover:none){
  body.kino .said{
    background:linear-gradient(to top,rgba(10,7,5,.94) 52%,rgba(10,7,5,.55) 78%,transparent)}
}
body.kino .portraet figcaption{background:var(--karte)}
/* Gruen heisst im Kinofilm Oliv — sonst sitzt der einzige kalte Ton der Seite
   ausgerechnet auf jedem Haken. */
body.kino .haken li::before,body.kino .aktion{color:var(--gruen)}
body.kino .menge,body.kino .licht .marke{color:var(--goldtx)}

/* Was auf einer Aufnahme LIEGT, folgt ihr: die Zahlen und die Kommentare der Wand
   sitzen auf dem Clip, also stehen sie mit ihm über der Ebene (52/53) — sonst
   verschwänden sie hinter dem Bild. Alles, was daneben oder darunter steht, bleibt
   unter der Ebene und bekommt das Korn: die Namenszeile, die Karten, die Preise,
   der ganze Rest der Seite. */

/* ── LANGFORM ─────────────────────────────────────────────────────────────────────
   Ty 19.09.2026: „Pack das auch auf die seite, als long form referenz."
   Warum das NICHT die Wand von oben ist: Langform ist quer und dauert zehn Minuten.
   Eine 9:16-Kachel mit fuenfzehn Sekunden Essay waere weder das Format noch die
   Aussage. Also ein ruhiges Raster aus 16:9-Karten mit Titel und Laufzeit — bei
   Langform verkauft der Titel, nicht die erste Sekunde.
   Und die Zahlen fehlen mit Absicht: der Kanal hat zwei- bis dreistellige Aufrufe.
   Neben 420.000 Likes daruber saehe das nach Schwaeche aus, obwohl die Arbeit
   dieselbe ist. Was zaehlt, ist dass es zwoelf Folgen sind. */
.lang{margin-top:clamp(46px,6vw,74px)}
.lang__gitter{display:grid;gap:16px;margin-top:28px;grid-template-columns:1fr}
@media(min-width:620px){ .lang__gitter{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .lang__gitter{grid-template-columns:repeat(3,1fr)} }
.lang__karte{display:block;text-decoration:none;color:inherit;border-radius:14px;
  overflow:hidden;background:var(--karte);border:1px solid var(--bd2);
  transition:border-color .2s,transform .3s var(--weich)}
.lang__karte:hover,.lang__karte:focus-visible{border-color:var(--gold);transform:translateY(-4px)}
.lang__bild{position:relative;display:block}
.lang__bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lang__zeit{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:6px;
  font-family:var(--mono);font-size:11px;color:#fff;background:rgba(10,7,5,.78);
  font-variant-numeric:tabular-nums}
.lang__titel{display:block;padding:12px 14px 14px;font-size:13.5px;font-weight:700;
  line-height:1.4;color:var(--tx)}
@media(prefers-reduced-motion:reduce){ .lang__karte:hover{transform:none} }

/* ── DAS ZITAT ───────────────────────────────────────────────────────────────────
   Ty 19.09.2026: „Ich mag den text, aber ich mag nicht das design von dem blog. Da
   muss was besonderes sein. Wir von Akibon mögen nichts langweiliges."
   Er hat recht: Ueberschrift plus Absatz ist das Aussehen von „hier stand noch ein
   Gedanke". Der Satz ist aber keine Erlaeuterung, sondern eine Aussage von IHM —
   und eine Aussage, die jemand verantwortet, sieht anders aus als ein Absatz. Also
   ein Zitat, gross gesetzt, mit der Ueberschrift als Etikett.

   Darunter, buendig am Kartenboden, eine Zeitleiste — Ty 19.09.: „das bild da
   nochmal von mir ist haesslich. Lieber eine timeline." Das passt auch besser zum
   Satz: Gold ist, was er selbst schneidet, blass, was abgegeben wird. Beschriftet
   ist nichts, denn eine Zahl an den Spuren wuerde eine Teamgroesse behaupten. */
.zitat{--pd:clamp(26px,4vw,42px);position:relative;overflow:hidden;
  margin-top:clamp(46px,6vw,74px);padding:var(--pd) var(--pd) 0;
  border-radius:22px;border:1px solid var(--bd2);
  background:linear-gradient(152deg,rgba(224,168,60,.08),rgba(var(--fl),.05) 62%,transparent)}
/* Die Glyphe steht in ihrem Zeilenkasten weit oben: die Tinte beginnt erst bei
   .106em und ist nur .26em hoch, der Rest des Kastens ist Luft. Darum haengt top an
   der Schriftgroesse — sonst ist sie oben abgeschnitten, sobald sie mitwaechst.
   Nachgemessen ueber TextMetrics, nicht geschaetzt. */
.zitat::before{content:"\201D";position:absolute;top:calc(16px - .106em);right:22px;
  pointer-events:none;font-family:Georgia,'Times New Roman',serif;line-height:1;
  font-size:clamp(170px,30vw,340px);color:var(--gold);opacity:.12}
.rahmen .zitat h2{margin:0 0 18px;padding:0;border:none;
  font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gold)}
.zitat blockquote{margin:0;position:relative}
.zitat blockquote p{font-size:clamp(18px,2.3vw,26px);line-height:1.38;letter-spacing:-.5px;
  color:var(--tx);max-width:34ch;margin:0}
.zitat blockquote strong{color:var(--gold-hell)}
.zitat__nach{margin-top:14px !important;font-size:clamp(14px,1.5vw,16px) !important;
  color:var(--tx2) !important;letter-spacing:0 !important}
.rahmen .zitat .zitat__wer{display:flex;align-items:baseline;gap:9px;
  margin:20px 0 0;font-size:13px}
.zitat__wer::before{content:"";flex:0 0 auto;align-self:center;
  width:22px;height:1px;background:var(--gold);opacity:.75}
.zitat__wer b{color:var(--tx)}
.zitat__wer span{color:var(--tx3)}

.leiste{--lp:clamp(14px,2.4vw,22px);position:relative;overflow:hidden;
  margin:20px calc(var(--pd) * -1) 0;padding:9px var(--lp) 13px;
  border-top:1px solid var(--bd2);background:rgba(0,0,0,.24)}
.leiste__mass{height:8px;margin-bottom:9px;
  background:repeating-linear-gradient(to right,
    rgba(247,238,224,.22) 0 1px,transparent 1px 22px);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
  mask-image:linear-gradient(to bottom,#000,transparent)}
.leiste__spur{position:relative;height:11px;border-radius:3px;
  background:rgba(247,238,224,.05)}
.leiste__spur + .leiste__spur{margin-top:5px}
.leiste__spur i{position:absolute;top:0;bottom:0;border-radius:3px;
  left:calc(var(--x) * 1%);width:calc(var(--w) * 1%)}
.leiste__spur--team i{background:rgba(247,238,224,.17)}
.leiste__spur--ich i{background:linear-gradient(180deg,
  rgba(232,161,60,.88),rgba(232,161,60,.55))}
/* Der Abspielkopf laeuft ueber einen Wrapper in voller Spurbreite: translateX(100%)
   ist dann genau eine Spurlaenge. Direkt `left` zu animieren waere jeder Frame ein
   Layout — so bleibt es auf dem Compositor. */
.leiste__lauf{position:absolute;top:0;bottom:0;left:var(--lp);right:var(--lp);
  pointer-events:none;animation:zlauf 17s linear infinite}
.leiste__kopf{position:absolute;top:0;bottom:0;left:0;width:1px;
  background:rgba(247,238,224,.8);box-shadow:0 0 10px rgba(247,238,224,.3)}
.leiste__kopf::before{content:"";position:absolute;top:0;left:-4px;
  width:9px;height:4px;border-radius:0 0 2px 2px;background:rgba(247,238,224,.8)}
@keyframes zlauf{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  .leiste__lauf{animation:none;transform:translateX(34%)}}

/* ── WOMIT GESCHNITTEN WIRD ──────────────────────────────────────────────────────
   Ty 19.09.2026: „das davinci resolve studio logo und der fakt dass ich das benutze
   soll auf die seite, weil das ist eine sehr haeufig gestellte Frage auf ernst."
   Steht direkt hinter „Wie es ablaeuft", weil die Frage dort entsteht. Das Zeichen
   ist das echte Programmsymbol aus seiner Installation, keine Nachzeichnung. */
.womit{display:flex;align-items:flex-start;gap:clamp(14px,2.4vw,22px);
  margin-top:clamp(20px,2.6vw,30px);padding:clamp(16px,2.4vw,22px);
  border:1px solid var(--bd2);border-radius:16px;background:rgba(0,0,0,.18)}
.womit > img{flex:0 0 auto;width:clamp(48px,7vw,64px);height:auto;border-radius:13px}
.rahmen .womit__text > p{margin:0;max-width:62ch}
.rahmen .womit__text > p + p{margin-top:9px}
.womit__was{font-size:clamp(16px,1.9vw,19px);letter-spacing:-.2px;color:var(--tx)}
.womit__was strong{color:var(--gold-hell)}

/* ── PLATZHALTER ──────────────────────────────────────────────────────────────────
   Ty 19.09.2026: „lass platzhalter bei sachen wo ich dir noch nichts gegeben hast."
   Gerne — aber nicht fuer Kunden. Ein „PLATZHALTER" auf einer Verkaufsseite sagt
   jedem Besucher, dass hier noch nichts fertig ist. Sie sind deshalb unsichtbar und
   erscheinen nur mit ?entwurf=1 in der Adresse. Ty sieht die Luecken, der Kunde die
   fertige Seite. */
.platz{display:none}
body.entwurf .platz{display:block;
  background:rgba(224,168,60,.07);border:1px dashed rgba(224,168,60,.45);
  color:var(--gold);font-size:12.5px;line-height:1.55}
body.entwurf .sprech.platz::before,body.entwurf .sprech.platz::after{display:none}
body.entwurf::before{content:"Entwurfsansicht \2014 Platzhalter sichtbar";
  position:fixed;z-index:400;left:50%;transform:translateX(-50%);top:0;
  padding:5px 14px;border-radius:0 0 10px 10px;font-size:11px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;background:var(--gold);color:#14100a}