/* ==========================================================================
   INSIGHTS — Stilebene der Strecke /insights und /insights/<beitrag>

   Diese Datei wird AUSSCHLIESSLICH von den beiden Vorschauseiten geladen. Sie
   liegt bewusst nicht in assets/css: die Liveseite soll sich durch die
   Entstehung dieser Strecke um kein Byte veraendern.

   WICHTIGSTE ENTSCHEIDUNG: fast nichts hier ist neu erfunden.
   Der Webflow-Export traegt eine vollstaendige, nie benutzte Blog-Ebene mit
   sich — `.insight-sec`, `.insight-card`, `.insight-card-wrapper`,
   `.insight-card-body`, `.blog-row`, `.blog-tag`, `.blog-flex`, `.detail-sec`.
   Webflow gibt nur Regeln fuer KOMBINATIONEN aus, die im Projekt vorkamen;
   deshalb existieren `.insight-card.mb-60`, `.insight-card-body.bg-white`,
   `.blog-tag.rotate` und die drei Telefon-/Tablet-Baender — aber keine
   Grundregel. Und `overrides.css` §10 verdrahtet den Foto-Verlauf schon heute
   fuer `.insight-card:hover`, obwohl die Klasse in keiner Seite steht.

   Hier wird also die fehlende Grundebene NACHGEZOGEN, nicht ein zweites
   Kartensystem daneben gestellt. Alles, was die Seite schon kann, kommt aus
   site.css / custom.css / overrides.css: Raster (60px), Container (60 + 40 =
   100px Rand), Typoleiter (72 · 40 · 32 · 24 · 20 · 18 · 16), Pillen
   (`.tab-btn3` > `.tab-inner-btn` + `.circle-orange`), Kennzahlenrahmen
   (`.box-1` mit dem Verlaufsstrich #7A1E00 → #FE5000 → #FF8A4C), Filterpillen
   (`.dropdown-toggle` / `.dropdown-list-2` / `.dropwon-list`), Zweispalter
   (`.team-contact-row`, 66/33) und der Foto-Verlauf
   (`.executives_photos-overlay`).

   Alle Regeln sind mit `:where(html.page-insights)` bzw.
   `:where(html.page-insights-article)` eingefasst — Nullspezifitaet, dieselbe
   Konvention wie in custom.css. So kann diese Datei spaeter unveraendert in
   assets/css wandern, ohne auf eine andere Seite auszustrahlen.
   ========================================================================== */

/* Beschriftungen, die nur die Vorlesesoftware braucht. Die Seite kennt keine
   solche Hilfsklasse — das Feld im Briefband braucht eine, sonst stuende sein
   Text zweimal da: einmal als Beschriftung, einmal als Platzhalter. */
:where(html.page-insights) .u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(html.page-insights) {
  /* Ein einziger Wert steuert die Kartenbreite. Drei Spalten wie das
     Fallstudienraster (`.experience-card-wrapper`), zwei ab 1199, eine ab 767. */
  --ins-cols: 3;
  --ins-gap: 60px;
}

/* --------------------------------------------------------------------------
   1. Der Hero: die Linienzeichnung des Ladebildschirms, im Dauerloop

   Kundenwunsch Andre, 31.8.: „direkt bei load nur die animierten linien 1 zu 1
   ohne diesen lottie swoosh am ende (desktop und mobil) ... und keine bickel &
   company einblendung sondern direkt die loopenden linien". Es ist dieselbe
   Datei, die der Preloader zeichnet (`bickel-lines-v67.json`), unveraendert.

   `--hero-dark: 1` meldet die dunkle Flaeche an — main.js Absatz 10 liest
   genau diese Eigenschaft und invertiert die Wortmarke darueber.
   -------------------------------------------------------------------------- */
:where(html.page-insights) .hero-sec2.py-100.ins-hero-loop {
  background-image: none;
  /* #212121, und zwar dauerhaft. Auf der Startseite laeuft der Ladebildschirm
     ab und gibt danach das helle Canvas frei; genau dieser Wechsel faellt hier
     weg — der Grund bleibt vom ersten Bild bis zum Stillstand derselbe.
     Derselbe Wert steht in den beiden Lottie-Kopien als Grundflaeche, damit
     zwischen Sektion und Zeichnung keine Kante sichtbar wird. */
  background-color: #212121;
}
:where(html.page-insights) .hero-sec2.py-100.ins-hero-loop { --hero-dark: 1; }

/* Die Animationsebene deckt den Hero und liegt HINTER dem Textblock:
   `z-index: 0` gegen die 2, die overrides.css §32 dem `.hero-sec2 > .container`
   gibt. Die Startseite haengt ihre Animation mit `z-index: 11` UEBER den
   Seiteninhalt — das geht dort, weil der Swoosh ausserhalb seines Keils
   transparent ist. Diese Komposition traegt eine deckende, bildfuellende
   Flaeche („Rectangle 1", 0,0 bis 1920x1080); darueber montiert wuerde sie
   „Insights" und die Unterzeile drei Sekunden lang zudecken. */
:where(html.page-insights) .ins-loop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

/* `.ins-loop_fig` IST der Lottie-Traeger, kein Kasten um einen — und er traegt
   bewusst NICHT die Klasse `.lottie-animation`: site.css:4277 gaebe der
   `width: 50%; top: 50%; left: 0`. Auf der Startseite hebt die Regel
   `.animation-wrapper [data-animation-type="lottie"]` (overrides.css) das
   wieder auf; hier gibt es die nicht, und die Zeichnung sass in der linken
   Haelfte des Hero. Die Ebene heisst aus demselben Grund nicht
   `.animation-wrapper`: custom.css legt darueber fuer alles, was NICHT
   `page-index` ist, unter 768px `left: 30%`, `width: 200vh`,
   `height: 60.25vw` und unter 575px `left: 88%` — Werte, die auf den Swoosh
   der Impressumsseiten gerechnet sind.

   EINGEPASST WIRD WIE AUF DER STARTSEITE, 1:1 (Kundenwunsch 31.8.: „uebernimm
   die regel 1 zu 1 nur ohne die namensanimation und den swoosh"). Die
   Hausformel steht in custom.css/overrides.css als

     position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
     min-width: 100%; min-height: 100%;
     width: 177.78vh; height: 56.25vw;

   also die 16:9-Komposition auf das groessere der beiden Masse aufgezogen und
   mittig beschnitten. Hier stehen Container-Einheiten statt `vh`/`vw`, denn
   `.page-wrapper` traegt in zwei Bildschirmbaendern `zoom: .8` bzw. `.7`:
   Ansichtsfenster-Einheiten werden damit multipliziert, die Komposition deckte
   den Hero dann nur noch zu 80 bzw. 70 Prozent. `cqw`/`cqh` messen den Hero
   selbst und sind davon unberuehrt — dasselbe Bild, nur richtig gerechnet.
   Nachgemessen gegen den Preloader bei 1440x900, gleicher Ausschnitt, Bild 78:
   Schwerpunkt der orangen Pixel weicht um dx -2,8 px, dy -1,2 px ab, die
   Pixelzahl um +0,4 %.

   AUF JEDER BREITE DIESELBE ZEICHNUNG, auch auf dem Telefon
   („zeig auf den mobilen geraeten die selben linien an wie im startbereich").
   Das ist die eine Abweichung von der Vorlage: der Preloader blendet die
   Zeichnung unter 480px aus, weil dort der Wortmarken-Wipe die Animation ist
   (overrides.css §87). Der faellt hier weg — abgeschaltet bliebe eine leere
   Flaeche. Die erste Zeile ist der Rueckfall fuer Browser ohne
   Container-Einheiten. */
:where(html.page-insights) .ins-loop_fig {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  width: max(100cqw, 177.7778cqh);
  height: max(100cqh, 56.25cqw);
}

/* …und zwar in ZWEI Fassungen, denn die beiden Kompositionen haben nicht
   dasselbe Format. Die Formel oben deckt eine 16:9-Zeichnung; sie gilt fuer
   `.ins-loop_breit` (1920x1080). Die Hochformat-Fassung ist 1080x1920, also
   9:16 — dort sind die beiden Faktoren zu tauschen.

   Bis zum 31.8. stand die 16:9-Formel auf BEIDEN. Der Kasten wurde damit auf
   dem Telefon 1500px breit (nachgemessen bei 390x844), und weil der
   Lottie-Renderer ohne `data-fit="stretch"` mit `xMidYMid meet` einpasst, sass
   die Zeichnung darin mittig und schmaler als der Hero — ein Rand links und
   rechts. Wie breit, haengt vom Verhaeltnis des Hero ab, und genau deshalb
   fiel es lokal nicht auf:

     Hero        alte Formel   neue Formel
     390x844     Rand  0/0     Rand 0/0     <- so getestet, deshalb uebersehen
     390x630     Rand 18/18    Rand 0/0     <- Telefon MIT Safari-Leisten
     390x560     Rand 38/38    Rand 0/0
     340x560     Rand 12/12    Rand 0/0

   Mit der richtigen Formel ist der Kasten exakt 9:16, die Zeichnung fuellt ihn
   ganz, und `meet` und `slice` fallen zusammen — kein Rand, bei keinem
   Verhaeltnis. (Kundenbefund 31.8.: „die animation hat einen abstand zum rand
   mobil - sie soll keinen rand haben".) */
:where(html.page-insights) .ins-loop_schmal {
  width: max(100cqw, 56.25cqh);
  height: max(100cqh, 177.7778cqw);
}

/* --------------------------------------------------------------------------
   Die Umschaltung der Startseite, uebernommen
   Dort zeigt der Ladebildschirm auf schmalen Schirmen NICHT die Linien von
   `bickel-lines-v67` — `custom.css` schaltet `.code-embed-14` unter 481px auf
   `display: none`, `site.css` schon unter 768px. Was auf dem Telefon zu sehen
   ist, kommt aus `bc_swoosh_mobile_combined`: dieselbe Bildsprache, fuer das
   stehende Format gezeichnet, mit dem Fluchtpunkt am rechten Rand statt in der
   Mitte, und mit dem Keil in derselben Datei. Nachgemessen bei 390x844:
   `.code-embed-14` display:none, `.code-embed-13` 1500x844.

   Umschaltpunkt ist 767px — derselbe, an dem site.css die breite Fassung
   abschaltet. Zwei Knoten tragen `.ins-loop_breit` (Keil und Linien), einer
   `.ins-loop_schmal`. */
:where(html.page-insights) .ins-loop_schmal { display: none; }
@media screen and (max-width: 767px) {
  :where(html.page-insights) .ins-loop_breit { display: none; }
  :where(html.page-insights) .ins-loop_schmal { display: block; }
}

/* KEIN Verlauf hinter dem Text (Kundenwunsch 31.8.: „insights hero: bitte gar
   keinen verlauf hinter dem text"). Hier standen nacheinander ein Ink-Verlauf
   und der Marken-Verlauf der uebrigen Unterseiten (overrides.css §32); beide
   sind heraus. Der Text steht damit direkt auf der Zeichnung — die Linien sind
   Haarlinien, die weisse 72er-Schrift traegt darueber. */


/* Der Abschnitt zur Verkleinerung der Menuezeilen stand hier bis zum 1.9. — er
   galt nur fuer die Vorschaufassung mit neun Menuepunkten. Seit Insights im
   echten Menue steht, tragen neun Punkte ALLE Seiten; die Regeln sind deshalb
   nach overrides.css §152 gewandert, wo die Menueschrift ohnehin gesetzt wird.
   Mit ihnen ist die Klasse `menue-neun` aus dem Markup verschwunden. */


/* Die Abschnitte zur Fassung ohne Hero und zum Foto im Hero standen hier bis
   zum 31.8. Der Kunde hat den Film gewaehlt; beide sind entfallen und liegen in
   der Geschichte. Mit ihnen sind `.ins-ohne-hero` und `.ins-hero-bild` aus dem
   Markup verschwunden — es gab keine Regel mehr, die sie treffen konnte. */


/* --------------------------------------------------------------------------
   1b. Der Film im Hero
   Der Hero-Film der Startseite laeuft im Hintergrund (Kundenentscheid 31.8.).

   ACHTUNG, hier ist am 31.8. schon einmal etwas schiefgegangen: dieser
   Abschnitt hiess 1d und lag zwischen den Abschnitten 1c und 1b der damaligen
   Vergleichsfassungen. Als die entfielen, ist er mitgeloescht worden — und weil
   danach KEINE Regel mehr auf `.ins-video*` passte, lief der Film in seiner
   Eigengroesse: 1080x2048 auf dem Telefon in einem 390px-Hero. Auf dem Schirm
   sah das nach einem Ausschnitt statt nach dem Hochformat-Schnitt aus, obwohl
   die richtige Datei geladen war (Kundenbefund „mobil bitte die 9:16 version
   des films verwenden"). Wer hier wieder aufraeumt: `.ins-video`,
   `.ins-video_film` und `.ins-video_notfall` sind das Einzige, was dem Film
   Groesse und Lage gibt — main.js gibt ihm keine. Getragen wird er von main.js Absatz 1 — dieselbe
   Klasse `bg-video`, dieselben `data-src-*`-Namen, also waehlt es auch hier
   nach dem SEITENVERHAELTNIS des Fensters zwischen 16:9- und 9:16-Schnitt,
   laedt sofort (der Film liegt im ersten Screen) und blendet auf das erste
   Bild ein. Keine Zeile JavaScript kommt dafuer hinzu.

   Die Geometrie steht hier und nicht in overrides.css §41: die Regel dort
   haengt an `#video-sec .img-holder` und gilt nur auf der Startseite.
   -------------------------------------------------------------------------- */
:where(html.page-insights) .hero-sec2.py-100.ins-hero-video {
  background-image: none;
  background-color: var(--ink);
  --hero-dark: 1;
}
:where(html.page-insights) .ins-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Das Notfallbild liegt UNTEN und zeigt sich, solange kein Bild des Films da
   ist — auf einer gedrosselten Leitung, bei `prefers-reduced-motion`, in den
   ersten Sekunden, und im Energiesparmodus von iOS, der Autoplay ueberhaupt
   blockiert. Es ist ein Standbild DESSELBEN Films bei derselben Sekunde, je
   Schnitt aus seiner eigenen Datei — die Umschaltung steht im Markup an
   `(min-aspect-ratio: 1/1)`, derselben Grenze, an der main.js den Film
   waehlt. */
:where(html.page-insights) .ins-video_notfall,
:where(html.page-insights) .ins-video_notfall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
:where(html.page-insights) .ins-video_film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity .8s ease;
}
:where(html.page-insights) .ins-video_film.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  :where(html.page-insights) .ins-video_film { display: none; }
}
/* Der Verlauf des Hauses, wie ihn overrides.css §32 den Fotoheroes gibt: oben
   neutral, damit der Film liest, unten Marke, wo Zeile, Ueberschrift und Knopf
   liegen. `z-index: 1` legt ihn ueber den Film (der in `.ins-video` auf 1
   steht, aber innerhalb einer Ebene mit `z-index: 0`); der Textblock liegt mit
   der 2 aus overrides.css §32 darueber. */
:where(html.page-insights) .hero-sec2.py-100.ins-hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(33, 33, 33, .22) 0%,
    rgba(33, 33, 33, .30) 44%,
    rgba(251, 143, 95, .38) 82%,
    rgba(254, 80, 0, .62) 100%);
}


/* --------------------------------------------------------------------------
   2. Sektionskopf
   Derselbe Aufbau wie auf /expertise: Slash-Zeile, Ueberschrift 40/48,
   Unterzeile 32/36. Die Klassen kommen aus dem Bestand
   (`.focus_left`, `.focus_label`, `.about_slash`, `.text-size-xlarge`,
   `.heading-style-h5`); hier fehlt nur die Breitenbegrenzung der Unterzeile,
   damit sie nicht ueber die ganzen 1920px laeuft.
   -------------------------------------------------------------------------- */
/* Die Unterzeile ist mittig gesetzt UND mittig gestellt. `text-align: center`
   allein genuegt nicht: der Block ist auf 1180px begrenzt und stand ohne die
   beiden `auto` linksbuendig in der Spalte — die Zeile sah dann gegenueber der
   Ueberschrift darueber nach links verrutscht aus. */
:where(html.page-insights) .ins-sub {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   3. + 4. Filterleiste, Ergebniszeile, Marken, Leerbefund
   Auf Kundenwunsch vom 24.8. AUSSER BETRIEB. Sie sind aus der Seite genommen,
   nicht aus dem Projekt: die Karten tragen ihre Merkmale weiter als
   `data-cat` / `data-fmt` / `data-year`, die Beschriftungen stehen weiter in
   content.json unter `ui`. Wieder einschalten heisst: `filterleiste()` in
   build.py zurueckholen und die Regeln dafuer hier wieder aufnehmen — sie
   waren die Leiste von /expertise (graue Schale, 10px innen, 8px-Pillen,
   `.dropdown-list-2.is-open` aus site.css) plus die `.tag`-Form als
   abwaehlbare Marke.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Kartenraster — die nachgezogene Grundebene der Export-Klassen
   `.insight-card-wrapper` ist das Raster, `.insight-card` die Karte,
   `.insight-card-body` die Textplatte darin. Die 60px Rinne, das weisse
   Kartenblatt und der 37px-Innenabstand der Platte stehen so schon im
   Export; hier kommt dazu, was er nie ausgegeben hat.
   -------------------------------------------------------------------------- */
:where(html.page-insights) .insight-card-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--ins-cols), minmax(0, 1fr));
  gap: var(--ins-gap);
  margin-top: 60px;
}
/* Eine ausgefilterte Karte verschwindet, statt zu schrumpfen — `display: none`
   nimmt sie aus dem Raster, die uebrigen ruecken auf. */
:where(html.page-insights) .insight-card.is-off { display: none; }

/* ZWEI Bewegungen im Hover, mehr nicht (Kundenwunsch): der orange Verlauf
   waechst ueber das Bild, und die Ueberschrift geht auf Orange. Der
   Verlaufsrahmen, das Anheben der Karte und das Heranfahren des Bildes sind
   wieder raus — vier gleichzeitige Bewegungen lasen als Unruhe, und das Haus
   bewegt ohnehin knapp: „Motion confirms, never entertains." */
:where(html.page-insights) .insight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  text-decoration: none;
}

/* Das Vorschaubild im Verhaeltnis der Projektbilder der Seite: 16/9. */
:where(html.page-insights) .insight-card_media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  line-height: 0;
}
:where(html.page-insights) .insight-card_media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Der orange Verlauf ist NICHT neu: `.executives_photos-overlay` ist die
   Team-Raster-Ebene. Ihre Grundregel steht in site.css (absolut am unteren
   Rand, Verlauf transparent → 75 % Orange), overrides.css §10 setzt sie auf
   `height: 0` und laesst sie fuer `.insight-card:hover` wachsen. Hier fehlt
   nur die Lage ueber dem Bild. */
:where(html.page-insights) .insight-card .executives_photos-overlay { z-index: 1; }
/* Die Zielhoehe ist ein ANTEIL, kein fester Wert. overrides.css §10 setzt
   280px — das ist auf die hochformatigen Teamportraits gemuenzt. Ein
   Kartenbild im Verhaeltnis 16/9 ist bei 400px Breite nur 225px hoch; 280px
   hiessen volle Deckung, und weil der transparente Anfang des Verlaufs dann
   oberhalb des Kastens laege, saehe man nur noch das dichte Ende. Ein Drittel
   (Kundenwunsch 31.8.: „die orangene Ueberlagerung soll nur 1/3 vom bild
   ueberlagern") laesst das Motiv stehen und traegt die Marke trotzdem. */
:where(html.page-insights) .insight-card:hover .executives_photos-overlay { height: 33%; }

:where(html.page-insights) .insight-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 20px;
  padding: 30px 30px 37px;
}
/* Die Kopfzeile der Karte: Datum, Format und Lesezeit, getrennt durch den
   Marken-Slash in Orange — dieselbe Trennung wie im Set-up-Streifen der
   Fallstudien. Der Slash FUEHRT seinen Wert, damit eine umgebrochene Zeile
   nie auf ihm endet. */
:where(html.page-insights) .ins-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  color: #21212180;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
:where(html.page-insights) .ins-meta > span { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
:where(html.page-insights) .ins-meta .ins-sep { color: var(--brand); }

:where(html.page-insights) .insight-card_title {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  transition: color .35s ease;
}
:where(html.page-insights) .insight-card:hover .insight-card_title { color: var(--brand); }
:where(html.page-insights) .insight-card_teaser {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
}

/* Die Autorenzeile schliesst die Karte ab und wird von einer Haarlinie
   getragen — dieselbe 10-%-Tinte wie die Zeilen der Kontaktkarte. */
:where(html.page-insights) .ins-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(33, 33, 33, .10);
}
 /* Eckig, nicht rund — dieselbe Form wie die Kacheln im Team-Raster. Die
   Flaeche darunter ist deren Plattenfarbe (#d9d9d9 auf 50 %), damit ein noch
   nicht geladenes Bild nicht als heller Kasten aufblitzt. */
:where(html.page-insights) .ins-avatar {
  flex: none;
  width: 48px; height: 48px;
  overflow: hidden;
  background-color: rgba(217, 217, 217, .5);
}
:where(html.page-insights) .ins-avatar img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
:where(html.page-insights) .ins-byline_name {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
:where(html.page-insights) .ins-byline_role {
  color: #21212180;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   7. „Weitere laden"
   Kein neuer Knopf: `.tab-btn3` > `.tab-inner-btn.bg-gray` mit dem orangen
   Punkt, also dieselbe Pille wie die „Mehr erfahren"-Reihen. Zentriert unter
   dem Raster, in der Flucht der Sliderbalken.
   -------------------------------------------------------------------------- */
:where(html.page-insights) .ins-more { display: flex; justify-content: center; margin-top: 60px; }
:where(html.page-insights) .ins-more.is-done { display: none; }

/* --------------------------------------------------------------------------
   8. Briefband
   Das dunkle Band der Track-Record-Sektion, hier mit einem Feld darin. Orange
   bleibt Linie: der Knopf ist die Pille, das Feld traegt nur eine 20-%-Kante,
   die im Fokus auf Orange geht.
   -------------------------------------------------------------------------- */
:where(html.page-insights) .ins-signup {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: var(--ink);
}
/* KEIN Abstand zwischen Slash und Ueberschrift — dieselbe Regel wie ueberall
   auf der Seite: „the slash sits over it like a first line at line-height 1.0
   — no extra gap, anywhere" (overrides.css). Die 20px hier stammten aus der
   Fassung mit der kleinen Zeile zwischen beiden; die Zeile ist am 24.8.
   entfallen, der Rand war stehen geblieben. */
:where(html.page-insights) .ins-signup_head {
  margin: 0;
  max-width: 20em;
  color: #fff;
  /* Groesse und Zeilenhoehe kommen aus `.text-size-xlarge` im Markup, also aus
     derselben Leiter wie jede andere Sektionsueberschrift der Seite: 40px am
     Desktop, 24px auf dem Telefon. Eigene Werte hier hiessen eine zweite
     Leiter — auf 375px stand die Ueberschrift dann mit 32px neben einer mit
     24px. Nur das Gewicht wird gesetzt: `.text-size-xlarge` ist 500, die
     Sektionskoepfe tragen 600 ueber ihr <strong>. */
  font-weight: 600;
}
:where(html.page-insights) .ins-signup_text {
  margin: 20px 0 0;
  max-width: 34em;
  color: rgba(255, 255, 255, .7);
  font-size: 24px;
  font-weight: 300;
  line-height: 32px;
}
:where(html.page-insights) .ins-signup_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
:where(html.page-insights) .ins-signup_form input {
  width: 420px;
  max-width: 100%;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
:where(html.page-insights) .ins-signup_form input::placeholder { color: rgba(255, 255, 255, .45); }
:where(html.page-insights) .ins-signup_form input:focus { outline: 0; border-color: var(--brand); }
/* Auf dem dunklen Band ist die graue Pille falsch — dort traegt der Knopf die
   schwarze Innenfuellung, wie die Reihen auf den dunklen Heroes. */
:where(html.page-insights) .ins-signup .tab-inner-btn { background-color: transparent; }
:where(html.page-insights) .ins-signup .tab-inner-btn .text-block { color: #fff; }

/* ==========================================================================
   ARTIKELSEITE
   Sie folgt dem Bau der Profilunterseiten: ein Hero, der die Seite fuellt,
   darunter der Zweispalter aus `.team-contact-row` (66/33) mit dem Text links
   und einer Karte rechts. Zwei Abweichungen sind Absicht:
     * Der Hero traegt statt der Freistellung das Beitragsbild ganzflaechig,
       mit dem Verlauf, den die Seite fuer Bildbaender benutzt.
     * Die rechte Spalte ist eine SCHIENE, die mitlaeuft — beim Lesen eines
       langen Textes ist ein festes Inhaltsverzeichnis der Unterschied
       zwischen Nachschlagen und Suchen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9. Lesefortschritt
   Der 4px-Balken der Slider — `rgba(254,80,0,.25)` als Bahn, Marke als
   Fuellung — an die Oberkante gelegt. Er liegt AUSSERHALB von
   `.page-wrapper`, weil der auf den beiden grossen Desktop-Baendern `zoom`
   traegt und ein `position: fixed` darin in gezoomten Einheiten rechnet.
   -------------------------------------------------------------------------- */
.ins-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  height: 4px;
  background: rgba(254, 80, 0, .18);
  pointer-events: none;
}
.ins-progress > i {
  display: block;
  width: 0; height: 100%;
  background: var(--brand);
}
@media print { .ins-progress { display: none; } }

/* --------------------------------------------------------------------------
   10. Artikel-Hero
   Eine Bildflaeche in Bildschirmhoehe, zwei Verlaeufe darueber und der
   Textblock unten links auf 100px Rand — dieselbe Anordnung wie der
   Kopfvisual von /about-us und dieselbe Bodenluft wie `.profile-hero_content`.

   ZWEI Verlaeufe, aus einem gemessenen Grund: der Marken-Verlauf allein
   (transparent → 75 % Orange) traegt weisse 72px-Schrift nicht ueber jedem
   Foto — auf `bc-approach-for` liegt oben rechts eine helle Fensterflaeche.
   Darunter liegt deshalb eine Tintenlage, die nach unten dichter wird; das
   Orange bleibt die oberste und damit die sichtbare Farbe.
   -------------------------------------------------------------------------- */
:where(html.page-insights-article) .ins-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min);
  overflow: hidden;
  background-color: var(--ink);
}
:where(html.page-insights-article) .ins-hero_media { position: absolute; inset: 0; line-height: 0; }
/* `50% 25%`, nicht 40 %: das Heldenbild dieses Beitrags traegt oben eigens
   angelegte Kopffreiheit in #212121 (die graue „BICKEL & COMPANY"-Leiste des
   gelieferten Motivs ist abgeschnitten, dafuer sind 800 Quellpixel Grund
   ergaenzt). Der Ausschnitt sitzt deshalb hoeher, damit bei einem breiten,
   flachen Fenster die Koepfe nicht angeschnitten werden. */
:where(html.page-insights-article) .ins-hero_media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
:where(html.page-insights-article) .ins-hero_ink,
:where(html.page-insights-article) .ins-hero_brand { position: absolute; inset: 0; pointer-events: none; }
/* Die obere Haelfte des Fotos bleibt UNANGETASTET. Erste Fassung liess beide
   Verlaeufe bei 0 % beginnen — zusammen ergaben sie schon in der Bildmitte
   genug Deckung, um das Motiv zu verschlucken: der Hero sah aus wie eine
   braune Flaeche. Beide setzen jetzt erst dort ein, wo Text liegt.

   Die Tinte ist die duennere der beiden und dient allein der Lesbarkeit der
   16px-Zeile ganz unten; darueber liegt der Marken-Verlauf des Hauses in
   genau der Form, in der ihn der Kopfvisual von /about-us traegt
   (transparent → 75 % Orange). */
:where(html.page-insights-article) .ins-hero_ink {
  background-image: linear-gradient(180deg,
      rgba(33, 33, 33, 0) 48%, rgba(33, 33, 33, .14) 62%,
      rgba(33, 33, 33, .38) 78%, rgba(33, 33, 33, .62) 100%);
}
/* HOECHSTENS DAS UNTERE DRITTEL (Kundenwunsch Andre, 31.8.: „Koennt ihr das
   Cover Bild oben mit keinem orange Stich machen, d.h. Dass die Orangene Farbe
   schneller ausbleicht?"). Bis dahin setzte die Rampe bei 26 % ein — auf dem
   Heldenbild dieses Beitrags lagen damit die Gesichter und alle drei Sakkos
   rostfarben statt in ihren eigenen Farben. Jetzt beginnt sie bei 67 %, die
   oberen zwei Drittel bleiben unberuehrt.

   Die weisse Schrift traegt trotzdem, ohne dass hier etwas nachgeholfen werden
   muesste: Grund gibt ihr die neutrale Tinte darunter, die weiter ab 48 %
   laeuft. Der Marken-Verlauf war dafuer nie zustaendig — er ist Anmutung. */
:where(html.page-insights-article) .ins-hero_brand {
  background-image: linear-gradient(180deg,
      rgba(254, 80, 0, 0) 67%, rgba(254, 80, 0, .30) 80%, rgba(254, 80, 0, .78) 100%);
}
:where(html.page-insights-article) .ins-hero_content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 106px;
}
:where(html.page-insights-article) .ins-hero_title {
  margin: 20px 0 0;
  max-width: 1180px;
  color: #fff;
}
:where(html.page-insights-article) .ins-hero_lead {
  margin: 20px 0 0;
  max-width: 900px;
  color: #fff;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
}

/* Die Ruecksprungmarke traegt einen PFEIL, keinen Slash: sie fuehrt zurueck,
   sie eroeffnet keinen Abschnitt. Es ist derselbe Pfeil wie ueberall auf der
   Seite — die 15x11-Maske aus overrides.css §5 (`--arrow`), nur um 180° in die
   Gegenrichtung gedreht. Beim Hover rueckt er 3px nach, wie in der
   LinkedIn-Zeile der Kontaktkarte, dort nach rechts, hier nach links. */
:where(html.page-insights-article) .ins-back {
  /* `flex` statt `inline-flex` mit eigener Breite: die Marke darunter ist
     `inline-block` und stuende sonst in derselben Zeile wie der Rueckweg. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color .2s ease;
}
:where(html.page-insights-article) .ins-back::before {
  content: "";
  flex: none;
  width: 15px; height: 11px;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center / 15px 11px no-repeat;
          mask: var(--arrow) center / 15px 11px no-repeat;
  transform: rotate(180deg);
  transition: transform .2s ease;
}
:where(html.page-insights-article) .ins-back:hover { color: var(--ink); }
:where(html.page-insights-article) .ins-back:hover::before { transform: rotate(180deg) translateX(3px); }

/* --------------------------------------------------------------------------
   11. Die Leiste unter dem Banner, und der Text ueber die volle Breite
   Bis zum 31.8. war die Beitragsseite ein 66/33-Zweispalter
   (`.team-contact-row`) mit einer mitlaufenden Schiene rechts. Nachgemessen bei
   1440: Text 80..880, Schiene 960..1392 — und weil die beiden Kaesten kurz und
   der Artikel lang ist, stand darunter eine mehrere Bildschirme hohe leere
   Spalte. Kundenwunsch Andre: „Koennt ihr das Publish / Share von links nach
   rechts unter das Banner setzen. Genauso wie das Published. Es nimmt rechts so
   viel Platz weg. Haette den Artikel lieber ueber den ganzen Screen von links
   nach rechts."

   Jetzt: eine waagerechte Leiste zwischen Banner und Text, links die
   Erscheinungsangabe, rechts die vier Weitergaben. Darunter der Text ueber die
   volle Containerbreite, LINKS angeschlagen — nicht mittig (Kundenentscheid).
   -------------------------------------------------------------------------- */
:where(html.page-insights-article) .ins-meta {
  background: var(--canvas);
  padding: 40px 0 0;
}
/* ZWEI TEILE (Kundenwunsch 31.8.): links die Erscheinungsangabe als offene
   Zeile mit grauer Linie darunter, rechts daneben die weisse Box „Share".
   Die Linie laeuft von der linken Kante bis an die Box heran — die Zeile nimmt
   sich den freien Platz (`flex: 1`), die Box bleibt so breit wie ihr Inhalt.
   `align-items: flex-end` legt die Linie auf die Unterkante der Box, damit die
   beiden Teile auf einer Grundlinie sitzen. */
:where(html.page-insights-article) .ins-meta_row {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}
:where(html.page-insights-article) .ins-meta_wann {
  flex: 1;
  display: flex;
  /* „Published" steht UEBER dem Datum, nicht daneben (Kundenwunsch 31.8.) —
     dieselbe Ordnung wie in der Box daneben und wie frueher in der Schiene:
     die gesperrte Kleinschrift als Aufschrift, darunter der Wert. */
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(33, 33, 33, .12);
}
/* Die Box: dieselbe weisse Platte wie `.ins-panel` und der Claim. */
:where(html.page-insights-article) .ins-meta_box {
  flex: none;
  background: #fff;
  padding: 22px 28px;
}
:where(html.page-insights-article) .ins-meta_box .ins-panel_head { margin-bottom: 14px; }
:where(html.page-insights-article) .ins-meta_label {
  color: #21212180;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}
:where(html.page-insights-article) .ins-meta_wert {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
/* Die Weitergaben standen in der Schiene UNTEREINANDER, mit einer Trennlinie je
   Zeile und dem Punkt am rechten Rand. In der Leiste stehen sie NEBENEINANDER:
   keine Trennlinien, kein Blocksatz, der Punkt ruecke direkt hinter das Wort. */
:where(html.page-insights-article) .ins-meta .ins-share {
  flex-direction: row;
  align-items: center;
  gap: 28px;
}
:where(html.page-insights-article) .ins-meta .ins-share a,
:where(html.page-insights-article) .ins-meta .ins-share button {
  width: auto;
  gap: 10px;
  padding: 0;
  border-top: 0;
  justify-content: flex-start;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  :where(html.page-insights-article) .ins-meta { padding-top: 28px; }
  /* Untereinander: erst die Zeile mit ihrer Linie, darunter die Box ueber die
     ganze Breite. Nebeneinander blieben von beiden nur Reste. */
  :where(html.page-insights-article) .ins-meta_row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  :where(html.page-insights-article) .ins-meta_wann {
    flex: none;
    padding-bottom: 18px;
  }
  :where(html.page-insights-article) .ins-meta_box { padding: 20px 22px; }
  :where(html.page-insights-article) .ins-meta .ins-share {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
}

:where(html.page-insights-article) .ins-panel { background: #fff; padding: 28px; }
:where(html.page-insights-article) .ins-panel_head {
  margin: 0 0 18px;
  color: #21212180;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Autorenkarte: die Kontaktkarte der Profile (`.vk`), hier MIT Bild — auf den
   Profilen ist das Portrait bewusst raus, weil es im Hero derselben Seite
   schon steht. Hier steht im Hero nur ein 56px-Kreis, die Karte darf also
   das Gesicht zeigen. */
/* Bild und Name sind EIN Link auf die Profilunterseite, und das Bild verhaelt
   sich wie eine Kachel im Team-Raster: eckig, auf der Plattenfarbe des Rasters,
   und im Hover waechst derselbe orange Verlauf darueber
   (`.executives_photos-overlay`, site.css + overrides.css §10).

   Die Zielhoehe ist ein ANTEIL, kein fester Wert: overrides.css setzt 280px,
   gemuenzt auf die 560px hohen Kacheln des Rasters. Auf einem 104px-Quadrat
   hiesse das volle Deckung, und weil der transparente Anfang des Verlaufs dann
   oberhalb des Kastens laege, saehe man nur noch das dichte Ende. */
:where(html.page-insights-article) .ins-author {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  text-decoration: none;
}
:where(html.page-insights-article) .ins-author_bild {
  position: relative;
  flex: none;
  width: 112px; height: 112px;
  overflow: hidden;
  line-height: 0;
  background-color: rgba(217, 217, 217, .5);
}
/* KEINE Vergroesserung: die Portraits sind quadratische Freistellungen
   (1500x1500, mit Alphakanal). In einem quadratischen Kasten zeigt
   `object-fit: cover` sie deshalb vollstaendig — mit `scale()` war der Kopf
   oben abgeschnitten. */
:where(html.page-insights-article) .ins-author_bild img {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
:where(html.page-insights-article) .ins-author:hover .executives_photos-overlay { height: 62%; }
:where(html.page-insights-article) .ins-author_ident b { transition: color .35s ease; }
:where(html.page-insights-article) .ins-author:hover .ins-author_ident b { color: var(--brand); }
:where(html.page-insights-article) .ins-author_bio {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
}

/* Ohne Verfasser bleibt im ersten Kasten nur die Erscheinungszeile. Sie traegt
   die Schrift der Werteizeilen der Kontaktkarte (16/1.3, Tinte). */
:where(html.page-insights-article) .ins-erschienen {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* Teilen: drei Zeilen in der Bauform der Kontaktkarte, die letzte kopiert den
   Link. Der Pfeil der `.vk_link`-Zeile bleibt den Wegen vorbehalten, die aus
   der Seite hinausfuehren. */
:where(html.page-insights-article) .ins-share { display: flex; flex-direction: column; }
:where(html.page-insights-article) .ins-share a,
:where(html.page-insights-article) .ins-share button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid rgba(33, 33, 33, .10);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}
:where(html.page-insights-article) .ins-share > :first-child { border-top: 0; padding-top: 0; }
:where(html.page-insights-article) .ins-share a:hover,
:where(html.page-insights-article) .ins-share button:hover { color: var(--brand); }
:where(html.page-insights-article) .ins-share .ins-dot {
  flex: none;
  width: 18px; height: 18px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  transition: background-color .5s;
}
:where(html.page-insights-article) .ins-share a:hover .ins-dot,
:where(html.page-insights-article) .ins-share button:hover .ins-dot { background-color: var(--brand); }
:where(html.page-insights-article) .ins-share button.is-done { color: var(--brand); }

/* --------------------------------------------------------------------------
   12. Fliesstext
   24/36 statt der 24/28 aus `.paragraph-2`: dieselbe Groesse wie im
   Profiltext, aber mit der Zeilenluft, die ein langer Text braucht — die
   Seite fuehrt dieselbe Korrektur schon fuer die Akkordeon-Absaetze
   (overrides.css: `line-height: 1.5`).
   -------------------------------------------------------------------------- */
/* ZWEI Breiten, nicht eine.

   Die Zeilenlaenge bestimmt die Textbreite: die linke Spalte ist 66,66 % und
   damit 1213px breit – bei 24px Schrift sind das rund 95 Zeichen pro Zeile,
   deutlich zu viel fuer einen langen Text. Absaetze, Listen, Ueberschriften
   und Zitate stehen deshalb auf 860px, das sind rund 72 Zeichen.

   Die Spalte selbst bleibt aber voll: die Abbildung und der Autorenblock am
   Ende nutzen sie ganz. Sonst stuende rechts vom Text ein 375px breiter
   Streifen Nichts – der Fliesstext saehe dann nicht ruhig aus, sondern
   verrutscht. Die Profilseiten machen es genauso, nur mit einem einzigen
   Wert: dort steht der kurze Vorstellungstext auf `_w-1140` und laesst
   73px stehen. Hier sind es zwanzig Absaetze statt drei. */
:where(html.page-insights-article) .ins-body { max-width: none; }
/* KEINE Obergrenze mehr. Hier standen zwei Masse — 860px fuer Absaetze und
   Listen, 1140px fuer Bild und Claim —, gerechnet auf die schmale Spalte des
   Zweispalters. Der ist weg; der Text laeuft jetzt ueber die volle
   Containerbreite, und alle Bloecke teilen sich ein Mass (Kundenwunsch 31.8.:
   „ueber den ganzen Screen von links nach rechts"). */
:where(html.page-insights-article) .ins-body > p,
:where(html.page-insights-article) .ins-body > ul,
:where(html.page-insights-article) .ins-body > .ins-h2,
:where(html.page-insights-article) .ins-body > .ins-quote,
:where(html.page-insights-article) .ins-body > .ins-figure,
:where(html.page-insights-article) .ins-body > .ins-claim { max-width: none; }

/* Die im Manuskript FETT gesetzten Absaetze (Kundenwunsch Andre, 31.8.:
   „designerisch hervorheben"). Kein Kasten, keine Farbflaeche, kein zweites
   Schriftgewicht-Experiment: sie stehen in der Groesse der Sektionsunterzeilen
   (32/44, Gewicht 500) ueber die ganze Spaltenbreite statt auf der schmalen
   Textbreite, abgesetzt durch die 2px-Haarlinie des Hauses in Orange.

   Die Unterscheidung zum Zitat ist die Richtung der Linie: das Zitat traegt
   sie LINKS und dazu Anfuehrungszeichen, die Hervorhebung OBEN und ohne. Beide
   Bis zum 31.8. war das ein oranger Strich ueber die volle Spaltenbreite. Der
   ist heraus: „Die orangen Striche machen nicht ganz so viel Sinn, weil wir kein
   neues Kapitel mit den fettgedruckten Texten beginnen" — eine Linie ueber die
   ganze Breite liest sich als Kapitelanfang, und das ist keiner.

   Stattdessen steht der Absatz auf einer WEISSEN PLATTE, nach Andres eigenem
   Vorschlag („Vielleicht kann man die nochmal mit so einem weissen Hintergrund
   unterfuettern"). Es ist dasselbe Mittel, das die Seite fuer ihre Kaesten schon
   benutzt (`.ins-panel`), und der Grund der Sektion ist `#fafafa` —
   nachgemessen, Weiss hebt sich davon ab, ohne etwas zu behaupten. Keine Kontur
   und kein Marken-Akzent: sonst wirkte die Platte wie ein Zitat. */
:where(html.page-insights-article) .ins-claim {
  margin-top: 40px !important;
  background: #fff;
  padding: 32px 36px;
  color: var(--ink);
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 44px !important;
}
:where(html.page-insights-article) .ins-body > * { margin: 0; }
:where(html.page-insights-article) .ins-body > * + * { margin-top: 30px; }
:where(html.page-insights-article) .ins-body p {
  color: var(--ink);
  font-size: 24px;
  font-weight: 300;
  line-height: 36px;
}
:where(html.page-insights-article) .ins-body p strong { font-weight: 600; }
:where(html.page-insights-article) .ins-body .ins-lead {
  font-size: 32px;
  font-weight: 500;
  line-height: 44px;
}

/* Die Zwischenueberschrift ist derselbe Bau wie jeder Sektionskopf der Seite:
   `.focus_label` mit dem Slash, direkt darueber der Ueberschrift. Groesse und
   Zeilenhoehe des Slash kommen aus main.js (slashSync), das ihn aus der
   Headline daneben misst — dieselbe Groesse, `line-height: 1`, KEIN Abstand
   dazwischen. Genau so formuliert es overrides.css fuer die ganze Seite: „the
   slash sits over it like a first line at line-height 1.0 — no extra gap,
   anywhere." Die erste Fassung hier war ein eigenes ::before mit 32px und
   20px Abstand und stand damit sichtbar weiter von seiner Headline weg als
   jede andere Marke der Seite. */
:where(html.page-insights-article) .ins-h2 { margin-top: 60px; }
:where(html.page-insights-article) .ins-h2 .focus_label { line-height: 1; }
:where(html.page-insights-article) .ins-h2 .about_slash { font-size: 40px; }
:where(html.page-insights-article) .ins-body h2 {
  margin: 0;
  color: var(--ink);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  scroll-margin-top: 140px;
}

/* Die Interview-Frage ist keine Ueberschrift, sondern eine Frage: 32/40/600
   mit dem Slash davor in der Zeile, damit Frage und Antwort als Paar lesen. */
:where(html.page-insights-article) .ins-body .ins-q {
  display: flex;
  gap: 14px;
  margin-top: 60px;
  color: var(--ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  scroll-margin-top: 140px;
}
:where(html.page-insights-article) .ins-body .ins-q::before { content: "/"; flex: none; color: var(--brand); }

/* Liste: der Slash ist der Aufzaehlungspunkt der Seite. */
:where(html.page-insights-article) .ins-body ul { margin: 0; padding: 0; list-style: none; }
:where(html.page-insights-article) .ins-body li {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(33, 33, 33, .10);
  color: var(--ink);
  font-size: 24px;
  font-weight: 300;
  line-height: 34px;
}
:where(html.page-insights-article) .ins-body li:first-child { border-top: 0; }
:where(html.page-insights-article) .ins-body li::before { content: "/"; flex: none; color: var(--brand); font-weight: 600; }

/* Zitat: die groesste Schrift des Textes, an einer orangen Linie.

   ZWEI Korrekturen gegenueber der ersten Fassung. `blockquote` erbt aus dem
   Webflow-Grundstil `border-left: 5px solid` in Grau — die Linie war also
   ohnehin da, nur ungewollt, grau und ohne Abstand: der Text klebte an ihr.
   Sie ist jetzt die 2px-Haarlinie des Hauses in Orange, und der Text steht
   40px davon entfernt. Dazu kommen echte Anfuehrungszeichen (sie stehen im
   Markup, sprachrichtig: „…" auf Deutsch, “…” auf Englisch); der Slash, der
   vorher darueber stand, faellt dafuer weg — Marke, Linie und Zeichen
   nebeneinander waeren drei Ansagen fuer dieselbe Sache. */
:where(html.page-insights-article) .ins-quote {
  margin-top: 60px !important;
  padding: 6px 0 6px 40px;
  border: 0;
  border-left: 2px solid var(--brand);
}
:where(html.page-insights-article) .ins-quote p {
  margin: 0;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 48px !important;
}
:where(html.page-insights-article) .ins-quote footer {
  margin-top: 20px;
  color: #21212180;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.33;
}

/* Abbildung im Text. Eine je Beitrag, ganze Spaltenbreite, Beschriftung
   darunter in der gesperrten Kleinschrift der Kontaktkarte mit dem
   Marken-Slash davor. Sie ersetzt den Kennzahlenstreifen (Kundenwunsch): die
   orangen Platten mit Wachstums- und Zaehlanimation gehoeren auf die
   Startseite und in die Fallstudien, mitten im Fliesstext waren sie ein
   zweiter Auftritt neben dem Text.

   Das Ablaufbild von /approach ist eine SVG mit eigenem dunklem Grund und
   trotzdem randlos — deshalb keine Flaeche und kein Rahmen darum, nur die
   Beschriftung. */
:where(html.page-insights-article) .ins-figure {
  margin: 60px 0 0 !important;
}
:where(html.page-insights-article) .ins-figure img,
:where(html.page-insights-article) .ins-figure picture {
  display: block;
  width: 100%;
  height: auto;
}
:where(html.page-insights-article) .ins-figure figcaption {
  margin-top: 20px;
  /* `figcaption` steht im Webflow-Grundstil auf `text-align: center`
     (site.css) — die Beschriftung stand dadurch mittig unter einem
     linksbuendigen Text. */
  text-align: left;
  color: #21212180;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

/* Die Kennzeile im Autorenkasten der Schiene: Name, Rolle. Sie hiess bis zum
   24.8. `.ins-outro_text` und gehoerte zum Autorenblock am Textende — den gibt
   es nicht mehr, der Autor steht nur noch rechts. */
:where(html.page-insights-article) .ins-author_ident { display: flex; flex-direction: column; gap: 4px; }
:where(html.page-insights-article) .ins-author_ident b { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--ink); }
:where(html.page-insights-article) .ins-author_ident span { font-size: 18px; font-weight: 600; line-height: 1.2; color: #21212180; }

/* --------------------------------------------------------------------------
   13. Weitere Beitraege
   Dasselbe Kartenraster, dreispaltig, auf hellgrauem Grund — wie die
   „Selected Experiences" der Profile.
   -------------------------------------------------------------------------- */
:where(html.page-insights-article) .insight-card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  margin-top: 60px;
}

/* --------------------------------------------------------------------------
   14. Baender
   Dieselben Schwellen wie die Seite: 1199 / 991 / 767 / 479. Zwischen 768 und
   1364px arbeitet der Rest der Seite mit `clamp()`-Rampen; die Groessen hier
   sind bewusst so gewaehlt, dass sie in diese Rampen passen, statt eine
   zweite Leiter zu eroeffnen.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  :where(html.page-insights) { --ins-cols: 2; }
  :where(html.page-insights-article) .insight-card-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  :where(html.page-insights) { --ins-gap: 40px; }
  :where(html.page-insights) .insight-card_title { font-size: 26px; }
  :where(html.page-insights) .insight-card_teaser { font-size: 18px; line-height: 26px; }
  :where(html.page-insights) .ins-signup { padding-top: 60px; padding-bottom: 60px; }
  :where(html.page-insights) .ins-signup_text { font-size: 20px; line-height: 28px; }

  :where(html.page-insights-article) .ins-hero_content { padding-bottom: 60px; }
  :where(html.page-insights-article) .ins-hero_lead { font-size: 24px; line-height: 32px; }
  :where(html.page-insights-article) .ins-rail { position: static; top: auto; }
  :where(html.page-insights-article) .ins-body p { font-size: 20px; line-height: 30px; }
  :where(html.page-insights-article) .ins-body .ins-lead { font-size: 26px; line-height: 36px; }
  :where(html.page-insights-article) .ins-h2 { margin-top: 50px; }
  :where(html.page-insights-article) .ins-h2 .about_slash { font-size: 32px; }
  :where(html.page-insights-article) .ins-body h2 { font-size: 32px; }
  :where(html.page-insights-article) .ins-body .ins-q { font-size: 26px; line-height: 34px; margin-top: 50px; }
  :where(html.page-insights-article) .ins-body li { font-size: 20px; line-height: 30px; }
  :where(html.page-insights-article) .ins-quote p { font-size: 30px !important; line-height: 38px !important; }
  :where(html.page-insights-article) .ins-claim { font-size: 26px !important; line-height: 36px !important; }
  :where(html.page-insights-article) .insight-card-wrapper { gap: 40px; }
}

@media (max-width: 767px) {
  :where(html.page-insights) { --ins-cols: 1; --ins-gap: 24px; }
  :where(html.page-insights) .insight-card-wrapper { margin-top: 40px; }
  :where(html.page-insights) .insight-card-body { padding: 24px 20px; gap: 16px; }
  :where(html.page-insights) .ins-signup { padding-top: 40px; padding-bottom: 40px; }
  :where(html.page-insights) .ins-signup_form input { width: 100%; }
  :where(html.page-insights) .ins-more { margin-top: 40px; }

  /* Im Hochformat ist das Deckungsfenster nur rund ein Drittel der Bildbreite
     breit. Mittig zeigte es Walter Bickel — in einem Beitrag, der Stefan
     Treiber begruesst, fehlte damit ausgerechnet der Neue. Er steht links im
     Motiv, `7%` rueckt das Fenster auf ihn.

     Am 31.8. war hier kurz `object-fit: contain` gesetzt, damit alle drei
     Personen ganz im Bild stehen. Im Bild nachgesehen und wieder verworfen
     (Kundenentscheid „zurueck auf cover"): ein `contain`-Bild ist im
     Hochformat nur `Breite / 1.518` hoch, also 257px bei 390px Fensterbreite —
     es lag damit unter dem Text und dem Marken-Verlauf, und von den drei
     Personen war weniger zu sehen als beim Ausschnitt. */
  :where(html.page-insights-article) .ins-hero_media img { object-position: 7% 25%; }
  :where(html.page-insights-article) .ins-hero_content { padding-bottom: 40px; }
  :where(html.page-insights-article) .ins-hero_lead { font-size: 20px; line-height: 28px; }
  :where(html.page-insights-article) .ins-body > * + * { margin-top: 24px; }
  :where(html.page-insights-article) .ins-h2 { margin-top: 40px; }
  :where(html.page-insights-article) .ins-h2 .about_slash { font-size: 26px; }
  :where(html.page-insights-article) .ins-body h2 { font-size: 26px; }
  :where(html.page-insights-article) .ins-body .ins-q { font-size: 22px; line-height: 30px; margin-top: 40px; }
  :where(html.page-insights-article) .ins-body p { font-size: 18px; line-height: 28px; }
  :where(html.page-insights-article) .ins-body .ins-lead { font-size: 22px; line-height: 32px; }
  :where(html.page-insights-article) .ins-body li { font-size: 18px; line-height: 28px; }
  :where(html.page-insights-article) .ins-quote { margin-top: 40px !important; padding: 4px 0 4px 24px; }
  :where(html.page-insights-article) .ins-quote p { font-size: 24px !important; line-height: 32px !important; }
  :where(html.page-insights-article) .ins-claim { font-size: 22px !important; line-height: 32px !important; margin-top: 32px !important; padding: 24px 22px; }
  /* KEINE Silbentrennung. Hier stand bis zum 31.8. `hyphens: auto` fuer
     dieses Band, weil „Fuehrungspersoenlichkeiten," bei 340px als ein Wort
     266px breit ist und ueber die 260px-Spalte laeuft. Das Silbenwoerterbuch
     des Browsers trennt dabei aber, wo es will: „vertrau-ensvoller",
     „Ma-nagement", „Private-Equi-ty-Fonds" — genau die Trennstriche, die im
     Haus schon einmal beanstandet wurden (overrides.css § zu `hyphens`).
     Kundenbefund 31.8.: „der text hat jetzt doch wortumbrueche?"

     Statt zu trennen wird der Satz eine Stufe kleiner: bei der Schriftgroesse
     unten passt das laengste Wort in die engste Spalte, ohne dass irgendwo ein
     Wort gebrochen werden muss. Nachgemessen an 340, 375 und 390px.
     `hyphens: manual` schreibt es ausdruecklich fest — ein gesetztes `&shy;`
     wirkt weiter, automatisch wird nie getrennt. */
  :where(html.page-insights-article) .ins-claim {
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: normal;
  }
  :where(html.page-insights-article) .ins-figure { margin-top: 40px !important; }
  :where(html.page-insights-article) .ins-panel { padding: 22px; }
  :where(html.page-insights-article) .insight-card-wrapper { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 479px) {
  :where(html.page-insights) .insight-card_title { font-size: 24px; }
  :where(html.page-insights) .ins-avatar { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   15. Druck
   Ein Beitrag soll sich als PDF ausgeben lassen, ohne dass dafuer eine Datei
   erzeugt werden muss — der „Drucken / PDF"-Knopf ruft nur `window.print()`.
   Dafuer fliegt alles raus, was auf Papier nichts zu suchen hat.
   -------------------------------------------------------------------------- */
@media print {
  :where(html.page-insights-article) .navbar_wrapper,
  :where(html.page-insights-article) .menu-item,
  :where(html.page-insights-article) .consent,
  :where(html.page-insights-article) .section-2,
  :where(html.page-insights-article) .ins-rail,
  :where(html.page-insights-article) .ins-related,
  :where(html.page-insights-article) .hero_indicator { display: none !important; }
  :where(html.page-insights-article) .page-wrapper { zoom: 1 !important; }
  :where(html.page-insights-article) .ins-hero { min-height: 0 !important; }
  :where(html.page-insights-article) .ins-hero_ink,
  :where(html.page-insights-article) .ins-hero_brand { display: none; }
  :where(html.page-insights-article) .ins-hero_title,
  :where(html.page-insights-article) .ins-hero_lead,
  :where(html.page-insights-article) .ins-back { color: var(--ink) !important; }
  :where(html.page-insights-article) .ins-hero_media { display: none; }
  :where(html.page-insights-article) .team-contact-left { width: 100% !important; }
  :where(html.page-insights-article) .ins-body p { font-size: 12pt; line-height: 1.5; }
}