/* ============================================================
   MOTION — die Bewegungssprache der Startseite für die Unterseiten
   ============================================================
   Die Startseite trägt ihr CSS inline und hat dort eine eigene
   Handschrift entwickelt: Glaskarten mit wanderndem Lichtschein,
   magnetische Schaltflächen, stehende Filme hinter Sektionen und
   gerundete Nahtstellen zwischen den Abschnitten.

   Die Unterseiten laufen auf signal.css + editorial.css. Vieles davon
   ist dort schon angelegt (.glass, .mesh, .aura, .reveal, .ticker),
   es fehlten aber die Stücke, die erst nach dem Umbau der Startseite
   entstanden sind. Diese Datei ergänzt genau die — und übersetzt sie
   auf die ed-Bausteine der Unterseiten.

   Wird nach editorial.css geladen, damit sie gezielt überschreiben kann.
   ============================================================ */

/* ------------------------------------------------------------
   1 · Lichtschein auf den Kacheln
   ------------------------------------------------------------
   signal.js setzt --mx/--my auf jedem Element mit der Klasse .glass.
   Die ed-Kacheln bekommen dieselbe Klasse und einen Schein-Span, also
   greift die Mechanik ohne zusätzliches Skript. Aussehen und Radius
   der Kachel bleiben, wie editorial.css sie definiert. */
.ed-kachel{overflow:hidden}
.ed-kachel .glass__glow{
  position:absolute;width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,122,56,.26),transparent 68%);
  opacity:0;transition:opacity .35s;filter:blur(14px);
  transform:translate(-50%,-50%);left:var(--mx,50%);top:var(--my,50%);z-index:0;
}
.ed-kachel:hover .glass__glow{opacity:1}
/* Der Inhalt muss über dem Schein liegen */
.ed-kachel > *:not(.glass__glow){position:relative;z-index:1}
/* Auf den pflaumefarbenen Kacheln trägt der Schein mehr Licht */
.ed-kachel--pflaume .glass__glow{
  background:radial-gradient(circle,rgba(255,122,56,.34),transparent 68%);
}
/* Das leichte Anheben der Startseite, hier zurückhaltender dosiert */
.ed-kachel:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.ed-kachel:hover{transform:none}}

/* ------------------------------------------------------------
   2 · Magnetische Schaltflächen
   ------------------------------------------------------------
   signal.js verschiebt .magnet-Elemente ein Stück in Richtung Zeiger.
   Es braucht nur die passende Überblendung, damit das Zurückspringen
   beim Verlassen weich läuft. */
.magnet{transition:transform .45s cubic-bezier(.2,.8,.2,1),
                   background .2s ease,border-color .2s ease,color .2s ease}
@media (prefers-reduced-motion:reduce){
  .magnet{transition:background .2s ease,border-color .2s ease,color .2s ease}
}

/* ------------------------------------------------------------
   3 · Gerundete Naht zwischen den Abschnitten
   ------------------------------------------------------------
   Wie auf der Startseite: der folgende Abschnitt schiebt sich mit
   gerundeter Oberkante über den vorherigen. Sinnvoll nur dort, wo
   dahinter etwas Dunkleres liegt — sonst sind die Rundungen auf dem
   weißen Grund der Unterseiten nicht zu sehen. */
.wipe{border-radius:26px 26px 0 0;position:relative;z-index:1;
  box-shadow:0 -24px 60px rgba(21,12,19,.28)}

/* ------------------------------------------------------------
   4 · Stehender Film hinter einer Sektion
   ------------------------------------------------------------
   Identisch zur Startseite: der Film hält am oberen Rand, die Inhalte
   ziehen darüber hinweg. Die Sektion darf kein overflow:hidden tragen —
   das machte sie zum Scroll-Container und sticky liefe ins Leere.
   overflow:clip schneidet genauso ab, ohne diesen Nebeneffekt. */
.hat-film{position:relative;overflow:clip}
.hat-film > .wrap{position:relative;z-index:1}
.sfilm{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none}
.sfilm__hold{position:sticky;top:0;height:100vh;height:100svh;overflow:clip}
.sfilm video,.sfilm img{width:100%;height:100%;object-fit:cover;display:block}
.sfilm__schleier{position:absolute;inset:0;pointer-events:none}

/* Dunkle Sektion: der Film trägt, Weiß auf Dunkel führt */
.sfilm--dunkel video,.sfilm--dunkel img{filter:saturate(1.25) brightness(1.14)}
.sfilm--dunkel .sfilm__schleier{
  background:
    linear-gradient(180deg,rgba(21,12,19,.82) 0%,rgba(28,16,25,.14) 12%,rgba(28,16,25,.10) 88%,rgba(21,12,19,.82) 100%),
    linear-gradient(90deg,rgba(21,12,19,.34) 0%,rgba(33,19,29,.14) 42%,rgba(21,12,19,0) 100%);
}
/* Helle Sektion: der Film liegt als Schimmer hinter dem Inhalt */
.sfilm--hell video,.sfilm--hell img{filter:saturate(1) brightness(.98)}
/* Der Schleier liegt nur noch auf den Kanten. In der Mitte bleiben rund
   18 %, damit der Film wirklich zu sehen ist. Lesbar bleibt der Text über
   die Karten und den Hof hinter der Überschrift, nicht über eine weiße
   Decke auf dem ganzen Film. */
.sfilm--hell .sfilm__schleier{
  background:
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.20) 12%,rgba(255,255,255,.18) 88%,#fff 100%),
    linear-gradient(90deg,rgba(243,236,240,.10),rgba(255,255,255,.02));
}
/* Freier Film: ohne Schleier und ohne Farbkorrektur. Für Sektionen, in
   denen der Film selbst das Bild ist und der Text auf einer eigenen
   Glasfläche daneben steht, also nichts ungeschützt darauf liegt. */
.sfilm--frei video,.sfilm--frei img{filter:none}
.sfilm--frei .sfilm__schleier{display:none}

/* Wer Bewegung reduziert haben möchte, sieht nur das Standbild */
@media (prefers-reduced-motion:reduce){
  .sfilm__hold{position:absolute;inset:0;height:100%}
  /* Der Film bleibt stehen: film.js laedt ihn bei reduzierter Bewegung
     gar nicht erst, das poster traegt die Sektion. display:none naehme
     auch das Standbild. */
}

/* ------------------------------------------------------------
   5 · Textblöcke über einem Film
   ------------------------------------------------------------
   Läuft ein Film hinter einer Sektion, steht offener Text sonst auf
   wechselndem Grund. Diese Blöcke bekommen deshalb dieselbe Glasfläche
   wie die Karten — so wie der Einleitungsblock auf der Startseite. */
.hat-film .ed-kopf--auf-film{
  padding:32px 34px 34px;border-radius:24px;
  background:rgba(24,13,21,.55);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 50px rgba(0,0,0,.28);
}
@supports not (backdrop-filter:blur(1px)){
  .hat-film .ed-kopf--auf-film{background:rgba(24,13,21,.9)}
}

/* ------------------------------------------------------------
   5b · Film ohne Filter, alles darauf aus Glas
   ------------------------------------------------------------
   Für Sektionen, in denen der Film selbst das Bild ist (hat-film--frei
   zusammen mit sfilm--frei). Über dem Film liegt dann kein Schleier
   mehr; jeder Textblock trägt sich über seine eigene Glasfläche. Die
   ist bewusst durchsichtiger als die Karten der übrigen Seiten — man
   soll den Film hindurch sehen und den Text trotzdem lesen können.
   Getragen wird die Lesbarkeit vom Weichzeichner, nicht von Deckkraft:
   die Fläche mittelt die Farben dahinter aus, dadurch bleibt der
   Kontrast auch über hellen und dunklen Stellen des Films stabil. */
.hat-film--hell .ed-kopf--auf-film,
.hat-film--frei .ed-kopf--auf-film,
.hat-film--frei .beispiel,
.hat-film--frei .merksatz{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:26px;
  background:linear-gradient(158deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.36) 60%,rgba(243,236,240,.4) 100%);
  /* Wenig saturate: der Film ist farbig, ein hoher Wert färbte die
     Fläche kräftig ein. brightness hebt sie stattdessen ins Helle,
     damit die Tinte darauf sicher steht. */
  backdrop-filter:blur(32px) saturate(112%) brightness(1.2);
  -webkit-backdrop-filter:blur(32px) saturate(112%) brightness(1.2);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(112,72,97,.08),
    0 26px 60px -24px rgba(26,15,23,.3);
}
/* Glanzkante oben, damit die Fläche eine Oberkante hat und nicht nur
   durchsichtig ist — dieselbe Machart wie bei der Navigationsleiste. */
.hat-film--hell .ed-kopf--auf-film::before,
.hat-film--frei .ed-kopf--auf-film::before,
.hat-film--frei .beispiel::before,
.hat-film--frei .merksatz::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 46%);
  mix-blend-mode:screen;
}
.hat-film--hell .ed-kopf--auf-film,
.hat-film--frei .ed-kopf--auf-film{padding:clamp(28px,3.2vw,38px)}
.hat-film--frei .beispiel{padding:clamp(26px,2.8vw,32px)}
.hat-film--frei .merksatz{padding:clamp(22px,2.4vw,28px) clamp(24px,2.8vw,32px)}
/* Ohne Glaseffekt trägt eine dichte Fläche. */
@supports not (backdrop-filter:blur(1px)){
  .hat-film--hell .ed-kopf--auf-film,
  .hat-film--frei .ed-kopf--auf-film,
  .hat-film--frei .beispiel,
  .hat-film--frei .merksatz{background:rgba(255,255,255,.94)}
}
html.sparsam .hat-film--hell .ed-kopf--auf-film,
html.sparsam .hat-film--frei .ed-kopf--auf-film,
html.sparsam .hat-film--frei .beispiel,
html.sparsam .hat-film--frei .merksatz{background:rgba(255,255,255,.94)}
/* Die Bildkacheln liegen mit etwas Abstand über dem Film und bekommen
   denselben weichen Schatten wie die Glasflächen. */
.hat-film--frei .mo{box-shadow:0 26px 60px -26px rgba(26,15,23,.42)}

/* ------------------------------------------------------------
   5c · Die nächste Sektion schwebt über den Film
   ------------------------------------------------------------
   Der Film hält am oberen Rand, die Inhalte ziehen darüber hinweg —
   und am Ende schiebt sich die folgende Fläche mit gerundeter
   Oberkante darüber, wie die Kapitel über das Hero der Startseite. */
.ed-bildband--ueber{
  position:relative;z-index:2;
  margin-top:clamp(-56px,-4vw,-32px);
  border-radius:30px 30px 0 0;
  box-shadow:0 -26px 60px -18px rgba(26,15,23,.28);
}

/* ------------------------------------------------------------
   6 · Vorstandskarten wie auf der Startseite
   ------------------------------------------------------------
   Weiß mit etwas Durchsicht, damit der Film dahinter mitspielt. */
/* Dieselbe Glasfläche wie die Karten der Startseite, nur als echtes
   Glas aufgebaut: Verlauf statt Flächenfarbe, kräftigerer Weichzeichner,
   helle Innenkante oben. Der Vorhang dahinter bleibt dadurch sichtbar,
   die Namen darauf stehen trotzdem sicher. */
.hat-film .person{
  background:linear-gradient(158deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.44) 62%,rgba(243,236,240,.46) 100%);
  backdrop-filter:blur(28px) saturate(140%) brightness(1.1);
  -webkit-backdrop-filter:blur(28px) saturate(140%) brightness(1.1);
  border-color:rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(112,72,97,.08),
    0 24px 56px -24px rgba(26,15,23,.28);
}
.hat-film .person:hover{
  background:linear-gradient(158deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.56) 62%,rgba(243,236,240,.58) 100%);
}
/* Der Aufsichtsratskasten trägt dieselbe Fläche wie die Karten darin. */
.hat-film .rat{
  background:linear-gradient(158deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.28) 62%,rgba(243,236,240,.32) 100%);
  backdrop-filter:blur(26px) saturate(135%) brightness(1.08);
  -webkit-backdrop-filter:blur(26px) saturate(135%) brightness(1.08);
  border-color:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 24px 56px -26px rgba(26,15,23,.24);
}
/* Die Kontaktzeile unter dem Zitat gehört zur selben Familie. */
.hat-film .direkt{
  background:linear-gradient(158deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.38) 100%);
  backdrop-filter:blur(24px) saturate(140%) brightness(1.1);
  -webkit-backdrop-filter:blur(24px) saturate(140%) brightness(1.1);
  border-color:rgba(255,255,255,.55);
}
@supports not (backdrop-filter:blur(1px)){
  .hat-film .person,.hat-film .rat,.hat-film .direkt{background:rgba(255,255,255,.95)}
}
/* Das MEMORO-Logo unter den Vorstandstexten so groß wie auf der
   Startseite — dort steht es auf 38px. */
.hat-film .person__logo{height:38px;width:auto;padding-top:18px;opacity:.55}
/* Zitat und Kontaktzeile bleiben deckend, sie tragen eigenen Text */
.hat-film .zitat,.hat-film .direkt{position:relative;z-index:1}

/* ------------------------------------------------------------
   7 · Textspalte einer Splitt-Sektion über dem Film
   ------------------------------------------------------------
   Auf „Woran Sie uns messen können" stünde die Liste sonst direkt auf
   dem Film. Sie bekommt dieselbe helle Glasfläche wie die Karten. */
.hat-film--hell .splitt__text{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(28px,3.2vw,38px);border-radius:28px;
  /* Durchsichtiger als vorher (.86) und als echtes Glas aufgebaut: ein
     Verlauf statt einer Flächenfarbe, kräftigerer Blur, eine helle
     Innenkante oben und eine dunkle unten. Der Film bleibt dadurch
     spürbar, die Tinte darauf steht trotzdem sicher. */
  background:linear-gradient(158deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.58) 62%,rgba(243,236,240,.6) 100%);
  backdrop-filter:blur(28px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter:blur(28px) saturate(170%) brightness(1.05);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(112,72,97,.1),
    0 1px 0 rgba(112,72,97,.06),
    0 28px 64px -22px rgba(26,15,23,.3);
}
/* Glanzverlauf wie auf der Navigationsleiste, damit die Fläche eine
   Oberkante bekommt statt nur durchsichtig zu sein */
.hat-film--hell .splitt__text::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 42%);
  mix-blend-mode:screen;
}
@supports not (backdrop-filter:blur(1px)){
  .hat-film--hell .splitt__text{background:rgba(255,255,255,.96)}
}

/* Ohne Bild links: die Spalte bleibt frei, der Text steht rechts. */
.splitt--frei .splitt__text{grid-column:2}
@media(max-width:880px){
  .splitt--frei .splitt__text{grid-column:auto}
}

/* ------------------------------------------------------------
   8 · Enger Seitenkopf
   ------------------------------------------------------------
   Auf der Nachfolgeseite sollen Überschrift, Text, Schaltflächen und
   die Zahlenleiste zusammen auf einen Laptopbildschirm passen. Der
   Standardkopf ist dafür zu großzügig gepolstert. Je flacher das
   Fenster, desto enger wird gerückt — auf großen Schirmen bleibt die
   Ruhe erhalten. */
.ed-kopfbild--eng{
  padding-top:calc(var(--nav-h) + clamp(20px,2.6vw,44px));
  padding-bottom:clamp(36px,4vw,60px);
}
.ed-kopfbild--eng .ed-zahlen{margin-top:clamp(28px,3.2vw,48px)}

@media (max-height:940px){
  .ed-kopfbild--eng{padding-top:calc(var(--nav-h) + 16px);padding-bottom:28px}
  .ed-kopfbild--eng .ed-display{font-size:clamp(30px,4.2vw,48px)}
  .ed-kopfbild--eng .ed-text--gross{font-size:17px}
  .ed-kopfbild--eng .ed-zahlen{margin-top:24px}
  .ed-kopfbild--eng .ed-zahlen > div{padding-top:20px;padding-bottom:18px}
}
@media (max-height:820px){
  .ed-kopfbild--eng{padding-top:calc(var(--nav-h) + 8px);padding-bottom:20px}
  .ed-kopfbild--eng .ed-display{font-size:clamp(28px,3.8vw,42px)}
  .ed-kopfbild--eng .ed-text,.ed-kopfbild--eng .ed-text--gross{font-size:16px;line-height:1.5}
  .ed-kopfbild--eng .ed-zahlen{margin-top:18px}
  .ed-kopfbild--eng .ed-zahlen > div{padding-top:16px;padding-bottom:14px}
  .ed-kopfbild--eng .ed-knopfreihe{margin-top:18px}
}

/* ------------------------------------------------------------
   9 · Wachsende Ringe im Kopf von „Über uns"
   ------------------------------------------------------------
   signal.js setzt beim Scrollen transform und opacity. Hier steht nur,
   worauf skaliert wird und wie weich der Übergang läuft. Ohne Skript
   und bei reduzierter Bewegung bleibt die Grafik einfach stehen. */
.ed-kopfbild__struktur{
  transform-origin:72% 42%;
  will-change:transform,opacity;
  transition:transform .12s linear,opacity .12s linear;
}
@media (prefers-reduced-motion:reduce){
  .ed-kopfbild__struktur{transform:none !important;opacity:1 !important;transition:none}
}

/* ------------------------------------------------------------
   10 · Aufsichtsrat mit Gesichtern
   ------------------------------------------------------------
   Dieselben Karten wie beim Vorstand, nur eine Stufe zurückgenommen:
   der Vorstand führt, der Aufsichtsrat steht daneben. Vier statt drei
   Karten in der Reihe, kleinere Polsterung, kein Text darunter. */
.rat__gesichter{margin-top:18px}
.rat__gesichter .person{padding:18px}
.rat__gesichter .person__pic{aspect-ratio:1/1;margin-bottom:14px}
.rat__gesichter .person h3{font-size:17px}
.rat__gesichter .person .rolle{font-size:11px}
/* Ohne Foto: Initialen auf Pflaumengrund, gleiche Fläche wie ein Bild */
.rat__gesichter .person__pic--mono{background:var(--plum-mist)}
.rat__gesichter .person__pic--mono span{color:var(--plum-deep);font-size:24px}
.rat__gesichter .person__pic--mono small{color:var(--muted)}
@media(max-width:900px){
  .rat__gesichter{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   11 · Sparsamer Betrieb, Mobilgeräte und ältere Hardware
   ============================================================
   assets/js/film.js setzt .sparsam auf <html>, sobald eines davon
   zutrifft: reduzierte Bewegung gewünscht, Datensparmodus, 2G, wenig
   Arbeitsspeicher, wenige Kerne oder kein MP4-Abspieler. Dann fallen
   hier die Effekte weg, die auf schwacher Hardware jeden Scrollschritt
   kosten. Die Seite verliert dabei nichts an Inhalt, nur an Schmuck. */

/* Ein Film, der nicht laufen kann, zeigt sein poster. Er bleibt
   sichtbar — display:none nähme der Sektion auch das Standbild. */
.film--standbild{pointer-events:none}

/* Die beiden großen Weichzeichner sind der teuerste Posten der Seite:
   .mesh liegt mit blur(80px) über die volle Sektion, .aura mit
   blur(94px). Auf dem Telefon reicht ein Bruchteil davon — die Flächen
   sind ohnehin weiche Farbverläufe. */
@media(max-width:900px){
  .mesh{filter:blur(40px)}
  .aura{filter:blur(48px)}
  .kr__glow{filter:blur(46px)}
}
html.sparsam .mesh,
html.sparsam .aura,
html.sparsam .kr__glow{filter:blur(28px);animation:none}
html.sparsam .mesh i,
html.sparsam .aura i,
html.sparsam .kr__glow i{animation:none}

/* Glasflächen kosten pro Bild eine eigene Kopie des Hintergrunds.
   Im Sparbetrieb wird daraus eine deckende Fläche. Die Farben stehen
   in den @supports-Zweigen der jeweiligen Stylesheets bereits für
   Browser ohne backdrop-filter bereit, hier dieselbe Logik. */
/* Auch die Pseudoelemente: dort sitzt das Glas der Leiste und der
   Wortmarke. Ein blankes * lässt sie aus. */
html.sparsam *,
html.sparsam *::before,
html.sparsam *::after{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.sparsam .nav__in{background:rgba(255,255,255,.96)}
html.sparsam .glass{background:rgba(40,24,34,.95)}
html.sparsam .phaus__logo{background:#fff}
html.sparsam .ratklein{background:rgba(255,255,255,.96)}

/* Der Laufschriftbalken schiebt endlos eine breite Fläche über den
   Bildschirm. Auf schwacher Hardware steht er still. */
html.sparsam .ticker__track{animation:none;transform:none}

/* will-change hält Ebenen dauerhaft im Grafikspeicher. Auf Geräten mit
   wenig Speicher ist das kontraproduktiv. */
html.sparsam *,html.sparsam *::before,html.sparsam *::after{will-change:auto!important}

/* ------------------------------------------------------------
   12 · Sehr schmale Geräte (iPhone SE und Ähnliches, ab 320px)
   ------------------------------------------------------------
   Bei 320px stießen die großen Knöpfe und einzelne Überschriften an
   den Rand. Knöpfe stehen white-space:nowrap, deshalb konnten sie
   nicht nachgeben. Hier dürfen sie es. */
@media(max-width:380px){
  .btn--lg{padding:13px 20px;font-size:14px}
  .btn{white-space:normal;text-wrap:balance;max-width:100%;flex-wrap:wrap;gap:6px}
  .btn .arw{flex:none}
  :root{--ed-display:clamp(29px,8.4vw,74px)}
}
/* Eine Überschrift darf nie über den Rand laufen, egal wie schmal das
   Gerät ist und wie lang das Wort. */
h1,h2,h3,h4,.ed-display,.ed-titel{overflow-wrap:break-word}

/* ------------------------------------------------------------
   13 · Ruhiges Scrollen auf dem Telefon
   ------------------------------------------------------------
   will-change legt für jedes betroffene Element dauerhaft eine eigene
   Ebene im Grafikspeicher an. Auf dem Schreibtischrechner ist das
   günstig, auf einem Telefon mit wenig Grafikspeicher kippt es ins
   Gegenteil: die Ebenen verdrängen einander und jeder Scrollschritt
   kostet eine neue Zeichnung. Hochkant bleibt es deshalb nur dort, wo
   wirklich fortlaufend animiert wird — Laufschrift und Karussell. */
@media(max-width:900px){
  .aura i,.mesh i,.hero__media,.hero__in,
  .ed-bildband__bild,.band__bild,
  .tile--photo img,.mo img{will-change:auto}
}

/* Der Sektionsfilm hängt sticky über der ganzen Sektion. Mit contain
   sagen wir dem Browser, dass sich Änderungen darin nicht auf den Rest
   der Seite auswirken — er muss beim Scrollen dann nur diesen Kasten
   neu zeichnen statt der Umgebung. */
.sfilm__hold{contain:paint}

/* ------------------------------------------------------------
   14 · Logoleiste hochkant
   ------------------------------------------------------------
   Wie auf der Startseite: zwei gleich breite Felder statt einer Reihe,
   die sich an der Eigenbreite der Logos ausfranst. */
@media(max-width:640px){
  ul.logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .logos li{height:82px;padding:12px 14px;border-radius:14px;min-width:0}
  .logos img{max-height:40px}
  /* wie auf der Startseite: der Schriftzug darf keine Ortspille sein */
  .logos .name{background:none;border:0;border-radius:0;padding:0}
  .logos .name{font-size:15px}
}
@media(max-width:360px){
  ul.logos{gap:8px}
  .logos li{height:72px;padding:10px 12px}
  .logos img{max-height:34px}
}

/* Ohne Weichzeichner (Sparbetrieb) tragen die Karten den Text nicht mehr,
   wenn sie halb durchsichtig sind. Dort bleiben sie deckend. */
html.sparsam .hat-film .person,
html.sparsam .hat-film .rat,
html.sparsam .hat-film .direkt{background:rgba(255,255,255,.96)}