/* ==========================================================================
   Bittersweet Brands – Marken-Layer
   Wird NACH bittersweet.min.css geladen.

   Grundsatz: Das Template bleibt unangetastet. Hier stehen nur
   (a) die Schriftdateien der Marke,
   (b) Styles fuer die wenigen Elemente, die die Website-Vorlage zusaetzlich
       verlangt (Gruenderinnen-Block, Wortmarke, Fussnote),
   (c) zwei kleine Korrekturen, weil die Vorlage andere Element-Anzahlen
       vorgibt als das Template (4 Leistungen statt 6 Karten, 8 Fakten statt
       4 Teamkarten).
   Die Schriftgroessen, Abstaende und Animationen des Templates werden NICHT
   veraendert.
   ========================================================================== */

/* ------------------------------------------------------------ Schriften  */
/* Blauer Nue ersetzt DM Sans 1:1 (Fliesstext)                              */
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Light.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Light_Italic.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Light_Italic.woff") format("woff");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Regular.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Regular_Italic.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Regular_Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Medium.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Medium_Italic.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Medium_Italic.woff") format("woff");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-SemiBold.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-SemiBold_Italic.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-SemiBold_Italic.woff") format("woff");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Bold.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Bold_Italic.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Bold_Italic.woff") format("woff");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-ExtraBold.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-ExtraBold.woff") format("woff");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-ExtraBold_Italic.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-ExtraBold_Italic.woff") format("woff");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Heavy.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Heavy.woff") format("woff");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/assets/fonts/BlauerNue-Heavy_Italic.woff2") format("woff2"),
       url("/assets/fonts/BlauerNue-Heavy_Italic.woff") format("woff");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* GC Grind ersetzt Bebas Neue 1:1 (Display) – gleiche kondensierte
   Proportionen, damit alle Groessen des Templates unveraendert passen.      */
@font-face {
  font-family: "GC Grind";
  src: url("/assets/fonts/GCGrind-Regular.woff2") format("woff2"),
       url("/assets/fonts/GCGrind-Regular.woff") format("woff");
  font-weight: 400 900; font-style: normal; font-display: swap;
}

/* GC Grind wurde aus Bebas Neue abgeleitet, das urspruenglich nur
   Grossbuchstaben ohne Umlaute kennt. Die Ae/Oe/Ue-Punkte in
   GCGrind-Regular.woff(2) sind direkt im Font neu gesetzt: quadratisch
   wie der Punkt der Schrift, 100 Einheiten gross, 12 Einheiten ueber der
   Buchstabenoberkante (im Original lagen sie weit oberhalb der Ascent).

   Bleibt die Maskierung: der Buchstaben-Reveal (data-title) legt um jeden
   Buchstaben eine Box mit overflow:clip, die exakt an der Zeilenbox
   endet - und die Cap-Hoehe (810) liegt dort schon fast an der Kante.
   Statt die Box hoeher zu machen (das haette alle Zeilen auseinander
   gezogen) uebernimmt clip-path das Maskieren: unten und seitlich
   schneidet es wie zuvor an der Kante, nach oben laesst es Luft.

   Der Freiraum gilt ausdruecklich NUR fuer Buchstaben mit Umlautpunkten;
   bittersweet-brand.js haengt dafuer .bs-umlaut an deren Maske. Grund:
   Ueberschriften wie .facts_title auf "Ueber uns" parken ihre Buchstaben
   VOR der Animation oberhalb der Maske und fahren nach unten ein - in
   einem generellen Freiraum blitzten deren Unterkanten vorab als
   schwarzer Strich auf (bei 0.25em die Grundlinien aller Grossbuchstaben,
   ab 0.04em Komma und Unterlaengen). Ae/Oe/Ue haben keine Unterlaenge,
   ihre Grundlinie liegt 195 Einheiten ueber der Maskenkante - 0.16em
   (160 Einheiten) bleibt darunter und reicht zugleich fuer die Punkte,
   die 132 Einheiten brauchen (Oberkante Oe 932 minus Grundlinie 805).    */
.gsap_split_letter-mask.bs-umlaut {
  overflow: visible !important;
  clip-path: inset(-0.16em 0 0 0);
}

/* SplitText erzeugt Buchstaben, Woerter und Masken als <span> (wegen
   Google, siehe bittersweet-brand.js) und setzt dann selbst kein
   display/position mehr. Ohne inline-block griffen weder die
   Verschiebe-Animationen noch das Abschneiden der Masken.               */
.gsap_split_letter,
.gsap_split_word,
.gsap_split_letter-mask,
.gsap_split_word-mask {
  position: relative;
  display: inline-block;
}

/* Ueberschriften der Hero-Bereiche standen auf line-height:1 - zu eng,
   sobald Umlautpunkte in die Zeile darueber ragen. 1.1 ist der naechste
   Wert aus der Template-Skala.                                           */
.hero_sub_title,
.about_hero_title,
.service_hero_title,
.project_hero_title,
.project_claim,
.heading-style-h3.is-blog-hero,
.heading-style-h3.is-contact {
  line-height: var(--_typography---line-height--1-1);
}

/* ------------------------------------------------------------ Wortmarke  */
.brand_wordmark {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.brand_wordmark.is-caption {
  height: 1.75em;
  vertical-align: -0.55em;
  margin-left: 0.25em;
}

.brand_wordmark.is-canvas {
  height: auto;
  width: clamp(140px, 18vw, 260px);
  vertical-align: middle;
}

/* Kopfzeile: Wortmarke anstelle des Schriftzugs, auf Zeilenhoehe skaliert   */
.brand_wordmark.is-nav {
  display: block;
  width: auto;
  height: 2.6rem;
}

/* Auf Seiten mit Hero-Bereich (Startseite) ist die Wortmarke im Hero noch
   nicht zu sehen – dort stehen oben nur die Menuepunkte. Beim Verlassen des
   Hero-Bereichs blendet sie ein und schiebt die Menuepunkte nach rechts.
   Die Klassen setzt assets/js/bittersweet-brand.js.                         */
.navigation.has-scroll-brand .brand {
  flex: 0 0 auto;
  max-width: 0;
  opacity: 0;
  overflow: clip;
  pointer-events: none;
  transition: max-width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease 0.1s;
}

.navigation.has-scroll-brand.is-brand-visible .brand {
  max-width: 350px;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 991px) {
  .navigation.has-scroll-brand.is-brand-visible .brand { max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation.has-scroll-brand .brand { transition: none; }
}

@media (max-width: 991px) {
  .brand_wordmark.is-nav { height: 2.2rem; }
}

@media (max-width: 479px) {
  .brand_wordmark.is-nav { height: 1.9rem; }
}

/* ------------------------------------------------------------ Ladebild   */
/* Das Template setzt hier height:100vh. Auf Mobilgeraeten ist 100vh die
   Hoehe OHNE Browserleisten – dadurch blieb unten ein Streifen frei. 100dvh
   folgt der tatsaechlich sichtbaren Hoehe. 100vw ersetzt durch 100%, weil
   100vw auf dem Desktop die Scrollleiste mitzaehlt und quer ueberlaeuft.    */
.preloader {
  width: 100%;
  height: 100vh;      /* Rueckfallebene fuer aeltere Browser */
  height: 100dvh;
}

/* Wortmarke im Ladebild, so breit wie zuvor der Schriftzug (8em bei der
   Schriftgroesse des Templates entspricht 256 px).                          */
.brand_wordmark.is-preloader {
  display: block;
  width: auto;
  height: 1.6em;
}

.preloader_logo_mask {
  display: block;
  overflow: clip;
}

/* Das Template laesst den Schriftzug zeichenweise hinter einer Maske
   einfahren. Fuer das Bild dieselbe Bewegung, gleiche Verzoegerung (0,05 s)
   und so getaktet, dass sie vor dem Hochfahren des Ladebilds (1,44 s)
   abgeschlossen ist.                                                        */
.brand_wordmark.is-preloader {
  animation: bs-preloader-logo-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes bs-preloader-logo-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand_wordmark.is-preloader { animation: none; }
}

/* Hero: Wortmarke genauso breit wie zuvor der Schriftzug (1178 px bei
   1440 px Viewport = 82vw), damit die Bildwirkung erhalten bleibt.          */
.brand_wordmark.is-hero {
  display: block;
  width: 82vw;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Das Template laesst die Hero-Ueberschrift zeichenweise hinter einer Maske
   nach unten einfahren. Ein Bild hat keine Zeichen, deshalb wird dieselbe
   Bewegung hier fuer die Wortmarke nachgebaut – gleiche Verzoegerung (2,57 s
   nach dem Preloader) und gleiche Dauer wie im Original.                    */
.hero_logo_mask {
  display: block;
  overflow: clip;
}

.brand_wordmark.is-hero {
  animation: bs-hero-logo-in 1s cubic-bezier(0.16, 1, 0.3, 1) 2.57s both;
}

@keyframes bs-hero-logo-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand_wordmark.is-hero { animation: none; }
}

/* ---------------------------------------------- Anpassung an die Vorlage */
/* (1) Im Template stehen in diesen Karten vierstellige Jahreszahlen ("2020"),
       in der Vorlage stehen dort Leistungsnamen ("Online-Spot"). Die Woerter
       sind deutlich laenger, deshalb wird die Schriftgroesse so skaliert,
       dass der laengste Name genauso breit laeuft wie die Jahreszahl im
       Original (363 px bei 1440 px Viewport). Die Skalierung haengt an der
       Template-Variablen, damit das responsive Verhalten erhalten bleibt.   */
.year_text {
  font-size: calc(var(--_typography---font-sizes--heading--about-year-text) * 0.435);
}

/* Kartenbreite und Einzeiligkeit nur dort, wo das Karussell auch waagerecht
   faehrt. Unterhalb von 992px gelten die Werte des Templates (max. 300px),
   sonst wuerden die Karten breiter als der Bildschirm.                      */
@media (min-width: 992px) {
  .year_item {
    width: 480px;
    max-width: 480px;
  }

  .year_text {
    white-space: nowrap;   /* im Template stand hier eine einzeilige Jahreszahl */
  }
}

/* (1b) Derselbe Fall im Footer: dort stand "// BITTERSWEET", jetzt steht
       "// BITTERSWEET BRANDS". Der Schriftzug laeuft im Template bis an die
       Containerkante – mit dem laengeren Wort liefe er darueber hinaus.
       Die Skalierung haengt wieder an der Template-Variablen, damit alle
       Breakpoints (h2 / 24vw / 28vw) erhalten bleiben.                      */
.logo_big_text {
  font-size: calc(var(--_typography---font-sizes--heading--footer-logo-text) * 0.96);
}

/* (2) Die Vorlage sieht 8 Fakten vor, das Template 4 Teamkarten. Die zweite
       Viererreihe bekommt denselben Treppenversatz wie die erste.          */
.team_card._5 { margin-top: 0; }
.team_card._6 { margin-top: 100px; }
.team_card._7 { margin-top: 200px; }
.team_card._8 { margin-top: 300px; }

@media (max-width: 991px) {
  .team_card._5,
  .team_card._6,
  .team_card._7,
  .team_card._8 { margin-top: 0; }
}

/* (3) Das schwebende Badge sitzt im Template neben "Expert Members".
       "Die Gründerin" ist kuerzer – Badge entsprechend nachruecken.        */
.floating_text.is-team {
  left: auto;
  right: 22%;
}

@media (max-width: 767px) {
  .floating_text.is-team { right: 6%; }
}

/* (4) Das Sticker-Badge ueber "Marken die uns vertrauen": im Template stand
       dort "400+ top Brands", jetzt steht ein laengerer deutscher Text. Auf
       schmalen Viewports wurde das Badge dadurch hoeher und legte sich ueber
       die Ueberschrift statt sie nur anzuschneiden. Schrift verkleinern und
       Position nachziehen, bis die Ueberlappung wieder der des Templates
       entspricht (rund 16 px).                                             */
@media (max-width: 991px) {
  .leader_section_badge {
    font-size: calc(var(--_typography---font-sizes--body--text-3xl) * 0.72);
  }
}

@media (max-width: 479px) {
  .leader_section_badge {
    font-size: calc(var(--_typography---font-sizes--body--text-3xl) * 0.68);
    top: -26px;
  }
}

/* -------------------------------------------------------- Gruenderinnen- */
/* Block auf der About-Seite (Website-Vorlage S. 19)                        */
.founder_block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(4rem, 9vw, 9rem);
}

.founder_image_wrap {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.founder_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Platzhalter, solange das Foto/GIF der Gruenderin fehlt                    */
.founder_image_placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f2ece7 0%, #e4dbd4 100%);
}

.founder_image_placeholder span {
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

.founder_name {
  margin-bottom: 0.5em;
}

.founder_text p {
  font-size: clamp(1.15rem, 1.9vw, 1.75rem);
  line-height: 1.5;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 1em;
  text-transform: none;
}

.founder_text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .founder_block {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------- Weitere Vorlagentexte */
/* Einleitung unter der Hero-Headline der About-Seite (Vorlage S. 16)       */
.about_hero_intro {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: clamp(1.05rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  font-weight: 500;
}

/* Fussnote unter den Tempo-Kacheln (Vorlage S. 18)                         */
.why_choose_footnote {
  max-width: 60rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  font-size: clamp(0.95rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  opacity: 0.75;
}

/* Ueberschrift der 8 Fakten (Vorlage S. 20) – laenger als die urspruengliche
   Ueberschrift, daher etwas kleiner, damit sie einzeilig bleibt.           */
.facts_title {
  font-size: clamp(1.75rem, 4vw, 3.75rem);
  line-height: 1.05;
}

.section_header.is_facts {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* Platzhaltertexte, solange Kundeninhalte fehlen                           */
.content_pending {
  text-transform: none;
  opacity: 0.55;
  font-style: italic;
}

/* ================================================== 2. Runde (Praesi) === */

/* ------------------------------------------- Bilder in den Ueberschriften */
/* Die beiden Pillen in den Hero-Ueberschriften (Vorlage S. 13 und S. 25).
   Format und Groesse bleiben die des Templates, nur das Motiv wechselt.     */
.about_hero_title_span {
  background-image: url(/assets/media/bs-about-headline.webp);
}

.service_hero_title_span {
  background-image: url(/assets/media/bs-service-headline.webp);
}

/* Senkrechte Lage der Pille im Satz (ab 768px, inline).
   Das Template setzt vertical-align: middle – das richtet die Pille an der
   x-Hoehe aus, also an der Mitte der Kleinbuchstaben. Beide Ueberschriften
   stehen aber komplett in Versalien, deren Mitte liegt hoeher. Ohne
   Korrektur sitzt die Pille dadurch rund 22 px zu tief (bei 102 px
   Schriftgroesse).
   Die Werte sind am gerenderten Bild nachgemessen, nicht aus der
   Schriftmetrik gerechnet: das Template legt jeden Buchstaben in eine Maske
   mit overflow:clip, und solche Inline-Bloecke setzen ihre Grundlinie auf
   die Unterkante – die Zeile sitzt dadurch anders, als die Metrik erwarten
   laesst.
   Genau auf Versalmitte laege -0,086em. Gesetzt sind -0,125em, das Bild
   steht damit bewusst 0,039em (rund 4 px) ueber der Mitte – etwas hoeher
   wirkt ruhiger, weil die gefuellte Flaeche optisch schwerer ist als die
   Buchstaben. Tiefer setzen heisst: Betrag verkleinern (-0,086em waere
   exakt mittig), hoeher heisst vergroessern.
   Ueber position/top statt ueber vertical-align, weil eine Aenderung an
   vertical-align die Hoehe der Zeilenbox und damit den Zeilenabstand der
   Ueberschrift verschieben wuerde.                                         */
@media (min-width: 768px) {
  .about_hero_title_span,
  .service_hero_title_span {
    position: relative;
    top: -0.125em;
  }
}

/* Bis 767px bekommt die Pille eine eigene, mittige Zeile.
   Grund: Das Template zerlegt die Ueberschrift per SplitText in einzelne
   Wortbloecke mit echten Leerzeichen dazwischen. Die Pille ist dabei ein
   eigenstaendiges Kind und kann an jeder dieser Stellen umbrechen – auf
   schmalen Bildschirmen landet sie dadurch je nach Textlaenge am
   Zeilenanfang und haengt frei neben der Schrift. Die Zeile ist dann zwar
   rechnerisch mittig, das Bild steht aber sichtbar aus der Achse.
   Als eigener Block sitzt es bei jeder Breite exakt in der Mitte, und der
   Umbruch faellt in beiden Ueberschriften auf die inhaltliche Zaesur
   ("... Idee | bis zum finalen Frame", "... laeuft: | ungefiltert ...").
   Ab 768px bleibt alles inline im Satz, so wie die Vorlage es zeigt.        */
@media (max-width: 767px) {
  .about_hero_title_span,
  .service_hero_title_span {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* Ungleiche Raender, damit die Pille OPTISCH mittig zwischen den beiden
       Textzeilen sitzt. Bei line-height:1 ist die Zeilenbox hoeher als das,
       was man sieht: unter dem letzten Buchstaben der Zeile darueber bleibt
       die Unterlaenge als Leerraum stehen (0,19em), ueber den Versalien der
       Zeile darunter dagegen so gut wie nichts. Bei gleichen Raendern wirkt
       die Pille dadurch um diesen Betrag nach unten gerueckt.
       Die beiden Raender wirken unabhaengig: margin-top schiebt die Pille
       selbst (und die Zeile darunter mit), margin-bottom nur die Zeile
       darunter. Verschiebt man beide gegenlaeufig um denselben Betrag,
       wandert allein das Bild, der Zeilenabstand bleibt.
       Geometrisch mittig waeren 0,02em / 0,23em. Gewuenscht ist das Bild
       bewusst etwas hoeher, deshalb sind beide um 0,065em (rund 3 px)
       gegenlaeufig verschoben: oben bleiben rund 7 px Luft, unten rund 14. Der Wert ist am
       gerenderten Bild nachgemessen und nicht nur aus der Schriftmetrik
       gerechnet: das Template legt jeden Buchstaben in eine Maske mit
       overflow:clip, und solche Inline-Bloecke setzen ihre Grundlinie auf die
       Unterkante - die Zeilen sitzen dadurch etwas anders als die reine
       Metrik erwarten laesst. Die Ueberschriften sind
       durchgehend in Versalien gesetzt, es gibt also keine Unterlaengen, die
       den Wert verschieben koennten. In em, damit es ueber alle
       Bildschirmbreiten mitskaliert.                                        */
    margin-top: -0.045em;
    margin-bottom: 0.295em;
  }
}

/* ------------------------------------------------------- Videokacheln    */
/* Das Template gibt Hintergrundvideos feste 500 px Hoehe. In den Kacheln
   von Featured Works, Arbeiten und beim Gruenderinnen-Portraet bestimmt der
   Rahmen das Format, das Video fuellt ihn aus (object-fit: cover steht
   bereits im Template).                                                    */
.work_image_visual.is-video > .bs-background-video,
.project_image > .bs-background-video,
.founder_image_wrap > .bs-background-video {
  width: 100%;
  height: 100%;
  /* Das Template legt seine Hintergrundvideos auf z-index: -100, weil sie dort
     hinter dem Inhalt einer ganzen Sektion liegen sollen. In einer Kachel mit
     eigener Hintergrundfarbe (Featured Works) rutscht das Video damit hinter
     diese Farbe und ist unsichtbar. isolation begrenzt die Stapelreihenfolge
     auf die Kachel, dann liegt das Video wieder oben - der Play/Pause-Knopf
     bleibt darueber. */
  isolation: isolate;
}

/* Im Template steht in dieser Kachel ein Bild, das seine Breite selbst
   mitbringt. Ein Video hat keine, und die Kachel ist ein Flex-Element in
   einer zentrierten Spalte – ohne Breitenangabe faellt sie auf 0 zusammen.
   max-width: 500px des Templates begrenzt sie weiterhin nach oben.         */
.work_image_visual.is-video {
  width: 100%;
}

/* Die neun Projekte der Praesentation haben noch keine Detailseite. Ihre
   Kachel ist deshalb kein Link – Rahmen und Format aber wie bei den
   verlinkten Projekten.                                                    */
.project_image.is-video {
  margin-bottom: var(--_spacing---spacing-semantics--spacing-xl);
  aspect-ratio: 1;
  border-radius: var(--_spacing---border-radious--lg);
  overflow: hidden;
}

/* Schlagworte ohne Filterseite: gleiche Optik, aber nicht klickbar.        */
.project_tag.is-static {
  cursor: default;
  display: inline-block;
}

.project_tag.is-static:hover {
  text-decoration: none;
}

/* ------------------------------------------------------- Jobs-Seite      */
/* Vorlage S. 27: drei Fragen, dann das Formular fuer Talente.              */
.job_form_section {
  padding-top: var(--_spacing---section-padding--padding-regular);
  padding-bottom: var(--_spacing---section-padding--padding-regular);
}

.job_questions {
  max-width: 62rem;
  margin: 0 auto clamp(3rem, 7vw, 6rem);
  text-align: center;
}

.job_question {
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 0.35em;
}

.job_question:last-child {
  margin-bottom: 0;
}

.job_form_header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.job_form_intro {
  margin-top: 0.75rem;
  opacity: 0.7;
}

/* Die Zusatzfrage unter dem Feldnamen ("Wo erreichen wir dich?")           */
.job_form_hint {
  margin-top: -0.35rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-transform: none;
  opacity: 0.6;
}

.job_form_outro {
  max-width: 46rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.4;
  font-weight: 500;
}

/* Hinweis ueber dem Kontaktformular (Vorlage S. 28)                        */
.contact_direct_note {
  max-width: 44rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.5;
  opacity: 0.75;
}

/* ============================== Team-Raster auf Ueber uns (Desktop) === */
/* Gewuenscht ist die Optik der Vorlage: Der Ausschnitt bleibt stehen und die
   acht Karten fliegen beim Scrollen nacheinander herein.

   Das Template kann das von Haus aus (.track 300vh, .sticky 100vh), es war
   aber auf VIER Karten ausgelegt. Mit acht passte das Raster nicht mehr in
   eine Fensterhoehe: gemessen 1814px Raster bei 900px Fenster. Die zweite
   Reihe lag dauerhaft unterhalb des Bildes, und weil der Ausschnitt
   angeheftet ist, holt auch Weiterscrollen sie nicht herein. Deshalb war das
   Anheften zwischenzeitlich abgeschaltet.

   Damit beides geht – angeheftet UND alle acht sichtbar – muss das Raster in
   die Fensterhoehe passen. Der grosse Posten ist das Bild (441px von 593px
   Karteninhalt). Seine Hoehe haengt jetzt an der Fensterhoehe statt am
   Seitenverhaeltnis des Fotos, dadurch passt sich das Raster jeder
   Fensterhoehe an, statt sie zu sprengen.

   Der Treppenversatz der Vorlage (0/100/200/300px) kostete allein 300px und
   ist auf ein Mass in vh geschrumpft – die Staffelung bleibt sichtbar, kostet
   aber kaum Hoehe.

   Preis dieser Loesung: Die Karten sind niedriger als zuvor, das Foto ist
   ein Querformat-Ausschnitt statt Hochformat. Anders lassen sich acht Karten
   nicht in einen stehenden Bildschirm bringen.

   Unter 992px bleibt alles beim Fluss der Vorlage: dort untereinander, ohne
   Anheften.                                                                */
/* Angeheftet nur, wenn die Fensterhoehe dafuer reicht (ab 720px). Darunter
   muessten die Bilder so flach werden, dass nichts mehr zu erkennen ist –
   dort laesst man die Sektion besser fliessen, wie auf Mobil auch.        */
@media (min-width: 992px) and (min-height: 720px) {
  /* Scrollstrecke, waehrend der der Ausschnitt steht */
  .team_section .track {
    height: 300vh;
  }

  .team_section .sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 992px) {
  .team_cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: clamp(14px, 2.2vh, 40px);
  }

  /* Treppenversatz klein und hoehenabhaengig statt fester 100/200/300px.
     Bewusst knapp gehalten: jeder Pixel hier fehlt dem Bild.              */
  .team_cards .team_card { margin-top: 0; }
  .team_cards .team_card._2, .team_cards .team_card._6 { margin-top: 0.7vh; }
  .team_cards .team_card._3, .team_cards .team_card._7 { margin-top: 1.4vh; }
  .team_cards .team_card._4, .team_cards .team_card._8 { margin-top: 2.1vh; }

  .team_cards .member_image_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Karte 1: Der mittige Ausschnitt (Vorgabe 50%) schneidet die Oberlippe an.
     Das Motiv sitzt im oberen Drittel des Hochformats, unten folgt nur noch
     Kinn. Der Ausschnitt wandert deshalb nach oben, dann ist der Mund
     vollstaendig im Bild. Nur diese eine Karte - die anderen sieben sind
     mittig richtig.                                                        */
  .team_cards .team_card:first-child .member_image_wrap img {
    object-position: 50% 28%;
  }
}

/* Angeheftet: Die Bildhoehe haengt an der Fensterhoehe, damit beide Reihen in
   den stehenden Ausschnitt passen. Der Wert schoepft ihn weitgehend aus –
   nachgemessen bleiben je nach Fenster noch rund 30-190px Luft.           */
@media (min-width: 992px) and (min-height: 801px) {
  .team_cards .member_image_wrap {
    height: clamp(130px, 28vh, 400px);
    margin-bottom: clamp(8px, 1.2vh, 20px);
  }
}

/* 720-800px Fensterhoehe: Hier ist nicht das Bild der Engpass, sondern der
   Text – bei schmalen Karten bricht er auf mehr Zeilen um. Deshalb etwas
   flacher und ohne Treppenversatz.                                        */
@media (min-width: 992px) and (min-height: 720px) and (max-height: 800px) {
  .team_cards {
    gap: clamp(10px, 1.6vh, 24px);
  }

  .team_cards .team_card._2, .team_cards .team_card._3,
  .team_cards .team_card._4, .team_cards .team_card._6,
  .team_cards .team_card._7, .team_cards .team_card._8 {
    margin-top: 0;
  }

  .team_cards .member_image_wrap {
    height: clamp(110px, 26vh, 300px);
    margin-bottom: clamp(6px, 1vh, 14px);
  }
}

/* Flache Fenster ohne Anheften. Das Abschalten muss ausdruecklich
   geschehen: laesst man hier nur die eigene Regel weg, greift wieder die des
   Templates (.sticky steht dort auf position: sticky).
   Das Bild darf dann ein festes, angenehmes Format haben, weil die Sektion
   mitwachsen kann.                                                         */
@media (min-width: 992px) and (max-height: 719px) {
  .team_section .track {
    height: auto;
  }

  .team_section .sticky {
    position: static;
    height: auto;
  }

  .team_cards .member_image_wrap {
    aspect-ratio: 4 / 3;
    height: auto;
    margin-bottom: 1rem;
  }
}

/* ================================ Ueber uns: Kopf "Warum wir?" ======= */
/* Die Vorlage stellte die beiden Ueberschriften an die aeusseren Raender
   ("Warum wir" ganz links, "Wir liefern" ganz rechts) und schob den Text
   darunter in eine 321px schmale Spalte am rechten Rand. Links davon blieb
   eine grosse leere Flaeche – der Kopf wirkte auseinandergerissen.

   Jetzt eine zentrierte Spalte: Frage oben, Aussage darunter, Text darunter.
   Das folgt dem Muster, das auf derselben Seite schon beim Kopf von
   "Behind the Scenes" steht (.section_header.is_life).

   Umgesetzt rein ueber die vorhandenen Klassen – kein Markup entfernt.
   Die beiden Wrapper (.why_choose_section_header, .why-choose_section_right)
   kommen nur auf dieser Seite vor und werden vom Template-JavaScript nicht
   angefasst (das kennt nur .why_choose_track und .why_choose_item), lassen
   sich also gefahrlos umstellen. Der Trennstrich der Vorlage bleibt, er
   setzt den Kopf weiterhin von den Tempo-Kacheln darunter ab.

   Groessenstufen sind die des Templates: die Frage bleibt auf h4, die
   Aussage steht auf h3 – dadurch entsteht die Rangfolge, die vorher fehlte,
   ohne eine eigene Schriftgroesse zu erfinden.                             */
.why_choose_section_header {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 1rem);
  text-align: center;
}

/* Im Template ein 321px breiter Kasten am rechten Rand – als Glied der
   zentrierten Spalte braucht er keine eigene Breite mehr.                  */
.why-choose_section_right {
  flex: 0 0 auto;
  max-width: none;
}

/* Ebenso der Textblock: statt schmal und rechtsbuendig jetzt mittig und
   in einer Breite, die sich angenehm liest.                               */
.why_choose_section_info {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 991px) {
  .why-choose_section_right { max-width: none; }
  .why_choose_section_info { max-width: 40rem; }
}

/* ============================= Ueber uns: die vier Kennzahl-Kacheln === */

/* (1) Der Strich unter den Zahlen.
   Unter jeder Zahl stand ein kurzer waagerechter Strich. Das ist kein
   Gestaltungselement, sondern ein Rest der Zaehler-Mechanik:

   Die Zahlen sind Spalten aus zehn Ziffern uebereinander, die in einem
   Ausschnitt (.stats_counter_visible_height, overflow:hidden) laufen. Der
   Ausschnitt ist genau eine Ziffernhoehe hoch – 128px bei 128px Schrift, weil
   line-height:1 gilt.

   Die Schrift braucht aber mehr Platz als ihre Zeilenhoehe: nachgemessen ist
   der Ziffernkasten 128px hoch, die Textzeile darin aber 142px. Sie ragt oben
   und unten je 7px heraus. Dadurch schaut die OBERKANTE der naechsten Ziffer
   genau in der letzten Pixelreihe des Ausschnitts hervor – und die Oberkante
   einer Ziffer ist ein waagerechter Balken. Das ist der Strich.

   clip-path schneidet die letzten 7% der Schriftgroesse ab. Das reicht: die
   sichtbare Ziffer endet rund 24px ueber der Kante, die naechste beginnt 7px
   darunter. In Prozent der Schriftgroesse, damit es ueber alle Breakpoints
   mitskaliert. Auf das Layout hat clip-path keinen Einfluss, die Zahlen
   bleiben stehen wo sie sind, und der Zaehler laeuft unveraendert.          */
.stats_counter_visible_height {
  clip-path: inset(0 0 calc(var(--_typography---font-sizes--heading--h3) * 0.07) 0);
}

/* (2) Kachel 3 in Gruen.
   Die drei anderen Kacheln sind farbig mit weisser Schrift, die dritte ist
   hell (#f0f0f0) und war schwarz. Der Ton ist auf Wunsch ein helles Gruen.
   Hinweis fuers Protokoll: auf dem hellen Untergrund ergibt das rund 2,2:1
   Kontrast, liegt also unter der ueblichen Lesbarkeitsschwelle von 4,5:1.
   Das ist eine bewusste gestalterische Entscheidung.
   Die Zahl selbst traegt im Markup eine eigene Farbangabe, die ist dort
   mitgeaendert.                                                            */
.about_stats_item._3 .about_stats_item_text {
  color: #8cd05a;
}

/* ======================== Marken-Sektion: Laufband und Zitat mittig === */
/* Das Template legt ueber das Kaestchenraster eine zweite, absolut
   positionierte Ebene (.brands_grid.absolute) mit 22 Spalten und 11 Reihen.
   Darin standen urspruenglich acht Elemente verstreut: das Laufband, das
   Zitat und sechs Kundenlogos. Die Platzierung kommt aus ID-Regeln des
   Templates (Laufband auf grid-area 2/-3/2/13, Zitat auf 4/5/10/15) und
   ergab bewusst ein unruhiges, versetztes Bild.

   Nachdem die Logos raus sind, blieben nur zwei Elemente uebrig – eines
   oben rechts, eines darunter links. Gewuenscht ist stattdessen: beide
   mittig, untereinander.

   Umgesetzt ueber flex statt grid am Container. Das hat den angenehmen
   Nebeneffekt, dass die grid-area-Regeln der Vorlage von selbst wirkungslos
   werden – Rasterplatzierung gilt nicht fuer Flex-Elemente. Es muss also
   nichts ueberschrieben werden, was gegen die hohe Spezifitaet der
   ID-Regeln ohnehin nur mit !important ginge.

   Beide bekommen dieselbe Breite, damit der Stapel als bewusste Setzung
   liest statt als Rest. Die Ebene liegt weiterhin absolut ueber dem
   Kaestchenraster und kann nicht mitwachsen – die Hoehe des Inhalts muss
   deshalb unter der Sektionshoehe bleiben, was bei zwei Elementen mit
   Abstand reichlich hinkommt.

   Unterhalb von 768px nicht noetig: dort loest das Template die Ebene
   ohnehin aus der absoluten Lage (position: relative) und stellt beide
   uebereinander ueber die volle Breite.                                    */
@media (min-width: 768px) {
  .brands_grid.absolute {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: 5%;
  }

  .brands_grid.absolute > .brands_ticker,
  .brands_grid.absolute > .brands_testimony_area {
    flex: 0 0 auto;
    width: min(680px, 100%);
  }
}

/* ===================================== Buttons: Rahmen und Beiwerk === */
/* Das Template baut in jeden Button drei weisse Balken (.button_line_mask,
   25x2px) und legt sie auf den 2px-Rahmen: einen oben, zwei unten. Sie
   stanzen absichtlich Luecken in die Outline. Auf hellem Grund wirkt der
   Rahmen dadurch unfertig, auf dunklem Grund stehen die weissen Balken als
   Striche unter einzelnen Buchstaben.
   Dazu kommt .button_line – ein schwarzer 25x2px-Balken als Flex-Element
   links neben der Beschriftung, der als Gedankenstrich gelesen wird.
   Beides wird ausgeblendet: der Rahmen ist damit rundum geschlossen, unter
   der Schrift stehen keine Striche mehr, und der Balken vor dem Text ist
   weg. Betroffen sind alle 16 Buttons der Website samt der farbigen
   _v2-Varianten. Ausblenden statt Loeschen, damit die Vorlage unangetastet
   bleibt und das Entfernen dieses Blocks alles zurueckholt.               */
.button_line_mask_wrapper,
.button_line_mask,
.button_line_mask_v2,
.cta_button_line_mask,
.button_line {
  display: none;
}

/* Die zweite, verdeckte Textkopie (fuer den Wechsel beim Ueberfahren) liegt
   im Template bei inset:100% – also exakt an der Schnittkante ihres Rahmens
   (.button_text_wrapper, overflow:hidden). Durch Subpixel-Rundung ragen die
   Oberlaengen der Kopie einen halben Pixel darueber hinaus. Sichtbar wird
   das als kurze Striche unter genau den hohen Buchstaben (K, t, k, f, h) –
   es sieht aus wie eine Unterstreichung einzelner Zeichen.
   Die Webflow-Interaktion setzt der Kopie ausserdem per Inline-Style
   color:#000, sie ist also schwarz und damit gut sichtbar.
   Ein kleiner Abstand loest das Ueberstehen auf, ohne den Wechsel beim
   Ueberfahren anzutasten – die Kopie faehrt weiterhin von unten herein.
   In em statt in px, weil vier dieser Buttons in den skalierten Karten des
   Startseiten-Karussells sitzen: dort schrumpft ein fester Pixelwert mit
   der Karte mit und reichte nicht mehr aus (gemessen 0,38 statt 1 px).

   Angesprochen wird ueber den gemeinsamen Wrapper und .second_text, nicht
   ueber die einzelnen Textklassen: das Template hat drei Varianten davon
   (.button_text, .button_text_v2, .cta_button_text), und so ist auch eine
   vierte gleich mit abgedeckt.                                            */
.button_text_wrapper .second_text {
  top: calc(100% + 0.1em);
}

/* ------------------------------------------- Direktkontakt (Kontakt) */
/* .link-primary ist im Template auf var(--white) gesetzt – gedacht fuer
   dunkle Flaechen. Im Hinweis ueber dem Kontaktformular steht der Text auf
   hellem Grund, E-Mail und Telefonnummer waren dadurch unsichtbar. Beide
   uebernehmen jetzt die Farbe des umgebenden Absatzes; die Unterstreichung
   folgt mit currentColor. Der Hover bleibt wie im Template.               */
.contact_direct_note .link-primary {
  color: inherit;
  -webkit-text-decoration-color: currentColor;
  text-decoration-color: currentColor;
}

.contact_direct_note .link-primary:hover {
  color: var(--vivid-orange);
  -webkit-text-decoration-color: var(--vivid-orange);
  text-decoration-color: var(--vivid-orange);
}

/* ------------------------------------------------------- Projektseiten   */
/* Die fuenf Projektseiten sind aus einem Guss und durchgehend zentriert
   (Kundenwunsch nach der linksbuendigen Fassung): Tags, Projektname als
   kleine Zeile, der Kampagnen-Claim als Ueberschrift, drei Meta-Felder, der
   Spot in seinem eigenen Format, dann die Key Facts als eine Spalte -
   Ueberschrift, darunter die Liste, alles auf der Mittelachse. Die
   Zweispalter-Aufteilung des Templates (Ueberschrift links, Text rechts) ist
   fuer diese Seiten aufgehoben. Bildgalerie, Zaehlerblock, Zitat und
   "Ergebnis" der Vorlage sind entfernt - dort standen nur Platzhalter und
   erfundene Kennzahlen.                                                    */
.project_single_hero_area { align-items: center; text-align: center; }
.project_single_hero_area .project_tag_wrapper { justify-content: center; }
.project_meta_wrapper { margin-left: auto; margin-right: auto; }
.project_meta_area { justify-content: center; }
.project_meta_item { align-items: center; text-align: center; }

/* Kundenlogo als erstes Element ueber den Tags (assets/media/bs-logo-*.webp,
   aus den gelieferten Originalen beschnitten und auf 800px verkleinert).
   Wortmarken laufen auf eine gemeinsame Hoehe; das runde Almauftrieb-Signet
   (is-signet) darf deutlich hoeher, sonst wird es zur Briefmarke.          */
.project_logo { line-height: 0; }
.project_logo img {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: clamp(2.25rem, 3.2vw, 3.25rem);
  max-width: min(60vw, 15rem);
}
.project_logo.is-signet img { max-height: clamp(5.5rem, 9vw, 8rem); }

/* Unter 768px stellt das Template den Kopfbereich auf flex-flow:wrap, also
   auf eine Zeile - Logo, Tags und Projektname rutschen dann nach links,
   waehrend der Claim (volle Breite) zentriert bleibt. Hier bleibt es eine
   Spalte, dann greift align-items:center von oben auch auf Mobil.         */
@media (max-width: 767px) {
  .project_single_hero_area { flex-flow: column; }
}

/* Reihenfolge im Kopf: Claim ganz oben, darunter das Kundenlogo, dann die
   Tags. Der Projektname als Vorzeile (project_eyebrow) ist entfallen - das
   Logo sagt, wer der Kunde ist. Der Claim bekommt unten etwas mehr Luft.  */
.project_single_hero_area .project_claim { margin-bottom: 0.5rem; }

/* Lange Claims eine Stufe kleiner, sonst laufen sie ueber vier Zeilen.      */
.project_claim { max-width: 22ch; margin-left: auto; margin-right: auto; }
.project_claim.is-long { font-size: var(--_typography---font-sizes--heading--h4); max-width: 28ch; }

/* Der Spot statt des 192/65-Bildstreifens, mittig wie der uebrige
   Inhalt. Quadratische
   Spots bleiben quadratisch, der 16:9-TV-Spot (bwin) laeuft ueber die volle
   Breite. Kein Beschnitt.                                                   */
/* Der Spot sitzt - anders als der Bildstreifen des Templates - innerhalb
   von padding_global/container, damit er auf derselben Achse wie Claim und
   Key Facts steht statt am Fensterrand.                                    */
.project_hero_wrap { margin-bottom: 0; }

/* Zwischen Spot und "Key Facts" lagen 300px Leerraum (150 Abstand unter dem
   Spot plus 150 Sektions-Innenabstand). Jetzt 80px, das Ende der Sektion
   bleibt wie im Template.                                                  */
.project_why_choose { padding-top: 80px; }

/* Zwischen Meta-Feldern und Spot: Sektions-Innenabstand 150 -> 64px.       */
.project_single_hero { padding-bottom: 64px; }

.project_hero_media {
  margin: 0 auto;
  border-radius: var(--_spacing---border-radious--lg);
  overflow: hidden;
}
.project_hero_media.is-square { aspect-ratio: 1; width: min(100%, 720px); }
.project_hero_media.is-wide   { aspect-ratio: 16 / 9; width: 100%; }

/* Wie bei den Kacheln: Das Template legt Hintergrundvideos auf z-index -100,
   isolation holt sie in der Kachel wieder nach vorn.                       */
.project_hero_media > .bs-background-video {
  width: 100%;
  height: 100%;
  isolation: isolate;
}

/* Key Facts: eine zentrierte Spalte statt des 40/60-Zweispalters. Die
   Ueberschrift steht ueber der Liste, die Liste ist auf Lesebreite begrenzt. */
.project_why_choose .why_choose_content {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.project_why_choose .why_choose_left_col,
.project_why_choose .why_choose_right_col {
  width: 100%;
  max-width: 52rem;
  flex: none;
  margin-left: auto;
  margin-right: auto;
}

.project_facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.25rem);
}

/* Die Fact-Ueberschrift deutlich groesser als der Fliesstext: Display-
   Schrift in Versalien, rund doppelte Groesse des Textes. Der Text darunter
   bleibt auf text-lg.                                                        */
.project_fact_title {
  margin-bottom: 0.45em;
  font-family: var(--_typography---font-family--heading-font);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: var(--_typography---letter-spacing--0-01);
  text-transform: uppercase;
}

.project_fact p { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------ Startseite: Kundenlogo auf der Karte */
/* Gleiche Dateien wie auf den Projektseiten, in Originalfarben.          */
.work_logo { margin-bottom: 1.75rem; line-height: 0; }
.work_logo img { display: inline-block; width: auto; height: 2.5rem; max-width: 12rem; }
.work_logo.is-signet img { height: 5.5rem; }
@media (max-width: 767px) { .work_logo img { height: 2rem; } .work_logo.is-signet img { height: 4.5rem; } }

/* ---------------------------------------- Startseite: fuenfte Work-Karte */
/* Das Template kennt vier Karten (._2 bis ._4 absolut gestapelt). MyMuesli
   ist die fuenfte; die Stapel-Animation dazu liegt in bittersweet-brand.js. */
.work_collection_list_wrapper._5 { z-index: 0; position: absolute; inset: 0 0 auto; }

/* Scrollstrecke des Stapels: 100vh je Stufe, Stufen = Karten - 1. Das Template
   gab vier Karten fest 300vh; hier haengt es an der Kartenzahl, die das
   Skript als --bs-karten setzt (Rueckfall: vier).                          */
@media (min-width: 992px) {
  .work_items_track { height: calc((var(--bs-karten, 4) - 1) * 100vh); }
}
@media (max-width: 991px) { .work_collection_list_wrapper._5 { position: static; } }

/* ------------------------------------- Startseite: Leistungen-Reihe      */
/* Die Vorlage gibt der Reihe pauschal 300vh Scrollstrecke, die Bewegung
   selbst endet aber schon vorher – die letzten rund 200px scrollt man ohne
   Bewegung. Hier entspricht die Strecke genau dem Weg, den die Reihe
   zuruecklegt; den misst bittersweet-brand.js und setzt ihn als
   --bs-about-strecke. Rueckfall ohne Skript: wie in der Vorlage.           */
@media (min-width: 992px) {
  .about_track { height: calc(100vh + var(--bs-about-strecke, 200vh)); }
}

/* ------------------------------------------------------- Rechtsseiten    */
/* Das Template kennt keine reine Textseite. Impressum (und spaeter
   Datenschutz) brauchen eine schmale, gut lesbare Spalte statt der breiten
   Layoutraster der uebrigen Seiten.                                        */
.legal_section {
  padding-top: var(--_spacing---section-padding--padding-regular);
  padding-bottom: var(--_spacing---section-padding--padding-regular);
}

.legal_wrapper {
  max-width: 48rem;
  margin: 0 auto;
}

.legal_title {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.legal_block {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.legal_block:last-child {
  margin-bottom: 0;
}

.legal_heading {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 0.5em;
}

.legal_text {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  text-transform: none;
}

/* Links im Fliesstext der Rechtsseiten. Die Klasse .link-primary des
   Templates ist fuer die dunkle Fusszeile gemacht und setzt weisse Schrift –
   auf der weissen Rechtsseite waere sie unsichtbar. Deshalb hier eigene
   Auszeichnung: Farbe wie der Text, unterstrichen.                         */
.legal_text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal_text a:hover {
  text-decoration-thickness: 2px;
}

/* Der Link neben der Copyright-Zeile in der Fusszeile. Das Impressum muss
   von jeder Seite aus erreichbar sein, deshalb steht er dort und nicht in
   der Seitenliste.                                                         */
.footer_legal_text.is-link {
  text-decoration: none;
}

.footer_legal_text.is-link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------- Vorerst ausgeblendet  */
/* Vorlage S. 28: Rezensionen sollen nicht auf der Website stehen, und das
   allgemeine Showreel wird erst noch geschnitten. Beides bleibt im Quelltext
   stehen und ist mit dem Entfernen dieses Blocks sofort wieder da.         */
.testimonial_section,          /* Kundenstimmen (Startseite, Leistungen)    */
.about_hero_review_area,       /* Sternebewertung im Hero (Ueber uns)       */
.showreel_section {            /* Showreel-Sektion (Startseite)             */
  display: none;
}

/* ------------------------------------------------------- Eingabefelder   */
/* iOS zoomt beim Antippen in jedes Feld mit weniger als 16px Schrift hinein
   und die Seite bleibt danach verschoben. Alle vorhandenen Felder liegen
   bereits bei 16px, die Grundregel des Templates (.bs-input/.bs-select: 14px)
   greift aber, sobald ein Feld ohne eigene Klasse dazukommt. Diese Regel
   sichert die Untergrenze dauerhaft ab – Schaltflaechen bleiben unberuehrt. */
@media (max-width: 991px) {
  input:not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ------------------------------------------------------- Laufband        */
/* Arbeiten-Seite: die Zeile ueber dem Projektraster ist im Template als
   Laufband angelegt (drei Begriffe, dreimal wiederholt, .project_ticker
   schneidet mit overflow:clip ab), bekommt dort aber keine Bewegung – sie
   stand still. bittersweet-brand.js klont den Inhalt einmal und setzt
   .is-laufend; verschoben wird um die halbe Breite, dann steht die Kopie
   genau dort, wo das Original begann, und der Uebergang ist unsichtbar.
   Dauer wie beim Fusszeilen-Laufband des Templates: 10 s je Durchlauf,
   hier auf die doppelte Strecke gerechnet.                                 */
.project_ticker_row.is-laufend {
  width: max-content;
  will-change: transform;
  animation: bs-laufband 20s linear infinite;
}

@keyframes bs-laufband {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .project_ticker_row.is-laufend {
    animation: none;
  }
}

/* Steps-Karten (Schritt 01-04) auf Mobile: .step_item_inner hat keine
   feste Breite und sitzt in einem Flex-Parent mit align-items:center,
   dadurch schrumpft jede Karte auf die Breite ihres Textes. Bei "PRODUKTION"
   ist der Info-Text so lang, dass er umbricht - dann zieht sich die Karte
   auf volle Breite; die drei kuerzeren Texte passen einzeilig und bleiben
   schmaler/eingerueckt. Ergebnis: eine Karte sah "anders" aus als die
   anderen drei. Fix: alle Karten auf der Einspalten-Stufe (479px, wie im
   Template) auf volle Breite zwingen. */
@media screen and (max-width: 479px) {
  .step_item_inner {
    width: 100%;
  }
}

/* ------------------------------------------------- Fusszeile: Anschrift  */
/* Das Template begrenzt die Adresszeile auf 15 Zeichen Breite - "82024
   Taufkirchen" wuerde umbrechen. Drei Zeilen (Firma, Strasse, Ort) ohne
   Begrenzung.                                                              */
.footer_address_text { max-width: none; }

/* ------------------------------------------ Know-how: 16:9-Clips (Start, Leistungen) */
/* Motion Design und KI-Produktion laufen seit 17.09.2026 mit den
   Full-Screen-Clips aus der Lieferung (16:9, 1280x720). Im 4:3-Rahmen des
   Templates saessen Logo und Textliste (DKV) im Beschnitt, deshalb bekommen
   genau diese beiden Rahmen 16:9; Crossmarket und Social bleiben 4:3, ihre
   Hochkant-Clips brauchen die Hoehe.                                       */
.service_item_video_wrap.is-wide { aspect-ratio: 16 / 9; }

/* ---------------------------------------- Ueber uns: "Behind the Scenes" */
/* Die Ueberschrift soll einzeilig bleiben. Bei 1512px braucht der Text
   1489px, der Container hat 1347px - also Schriftgroesse an die Breite
   koppeln (6.2vw, gedeckelt auf die h3-Groesse) und Umbruch verbieten.     */
.section_header.is_life h2 {
  white-space: nowrap;
  font-size: min(var(--_typography---font-sizes--heading--h3), 6.2vw);
}

/* ------------------------------------------------ Datenschutzhinweis Formulare */
.form_privacy_note {
  align-self: stretch;
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-transform: none;
  opacity: 0.7;
}
.form_privacy_note a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.form_privacy_note.is-footer { margin: 0.75rem 0 0; color: #ffffff80; opacity: 1; max-width: 32ch; }
.form_privacy_note.is-footer a { color: #fff; }

/* Aufzaehlung in den Rechtstexten (Datenschutz: Betroffenenrechte)          */
.legal_list { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.legal_list li { margin-bottom: 0.35rem; }

/* ==================================================================== Blog */
/* Zehn Beitraege aus "Blogbeitraege Website Bittersweet Brands.docx",
   erzeugt per Skript (Struktur je Beitrag: Lead, Absaetze, fett markierte
   Kernsaetze als Zitat, drei FAQ, Abschluss-CTA). Uebersicht: Beitrag 01
   als Aufmacher, die uebrigen neun im Raster, Themenfilter darueber.       */

/* ---- gemeinsame Karte (Uebersicht und "Weiterlesen" unter jedem Beitrag) */
.blog_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.75rem, 4.5vw, 4.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
}
.blog_card,
.blog_feature {
  color: var(--black-secondary);
  text-decoration: none;
}
.blog_card { display: flex; flex-direction: column; gap: 0.9rem; }
.blog_card[hidden], .blog_feature[hidden], .blog_leer[hidden] { display: none !important; }

.blog_card_image,
.blog_feature_image {
  aspect-ratio: 3 / 2;
  border-radius: var(--_spacing---border-radious--sm);
  overflow: hidden;
  background: var(--linen, #e9dcd2);
  isolation: isolate;
}
.blog_card_image { margin-bottom: 0.35rem; }
.blog_card_image img,
.blog_feature_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.blog_card:hover img, .blog_card:focus-visible img,
.blog_feature:hover img, .blog_feature:focus-visible img { transform: scale(1.045); }

.blog_card_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog_card_tag {
  padding: 0.4rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.blog_card_title {
  margin: 0;
  font-family: var(--_typography---font-family--heading-font);
  font-size: clamp(1.5rem, 1.9vw, 2.1rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--_typography---letter-spacing--0-01);
  text-transform: uppercase;
}
.blog_card_lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
  opacity: 0.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog_card_more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
.blog_card_more::after { content: "\00a0→"; display: inline-block; transition: transform 0.3s ease; }
.blog_card:hover .blog_card_more::after,
.blog_feature:hover .blog_card_more::after { transform: translateX(0.25rem); }

/* ---- Uebersicht ---------------------------------------------------------- */
.blog_listing_section { padding-top: clamp(3rem, 6vw, 5rem); }
.blog_filter {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin: 0 auto clamp(2.75rem, 5vw, 4.5rem);
}
html.bs-mod-js .blog_filter { display: flex; }
.blog_filter_chip {
  appearance: none;
  margin: 0;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--black-secondary);
  border-radius: 999px;
  background: transparent;
  color: var(--black-secondary);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.blog_filter_chip:hover { background: var(--linen, #e9dcd2); }
.blog_filter_chip.is-active { background: #121212; color: #fff; }

.blog_feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 4.5vw, 5rem);
  margin-bottom: clamp(4rem, 8vw, 7rem);
}
.blog_feature_image { border-radius: var(--_spacing---border-radious--lg); }
.blog_feature_content { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.blog_feature_title {
  margin: 0;
  font-family: var(--_typography---font-family--heading-font);
  font-size: clamp(2.25rem, 4.2vw, 4.25rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: var(--_typography---letter-spacing--0-01);
  text-transform: uppercase;
}
.blog_feature_lead {
  margin: 0 0 0.5rem;
  max-width: 32ch;
  font-size: clamp(1.125rem, 1.45vw, 1.375rem);
  line-height: 1.45;
  text-transform: none;
}
.blog_leer { margin-top: 2rem; text-align: center; text-transform: none; opacity: 0.7; }

/* ---- Beitragsseite ------------------------------------------------------- */
.blog_details_section { padding-bottom: clamp(4rem, 8vw, 7rem); }
.blog_details_header { row-gap: 1.5rem; }
.blog_back {
  color: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}
.blog_back::before { content: "← "; }
.blog_title { margin-top: 0.25rem; }
.blog_lead {
  margin: 0.25rem auto 0;
  max-width: 36ch;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  line-height: 1.4;
  text-transform: none;
}

/* Das Template schneidet Beitragsbilder auf 12:5. Die Bilder hier sind
   teils fertige Anzeigenmotive (Sprechblasen, Einblendungen), teils
   hochkant - deshalb im eigenen Format, Hochformat schmaler.             */
.blog_image.is-natural {
  display: block;
  aspect-ratio: auto;
  max-width: 1100px;
  margin: clamp(2.75rem, 5vw, 4.5rem) auto;
  overflow: hidden;
}
.blog_image.is-natural img { display: block; width: 100%; height: auto; }
.blog_image.is-portrait { max-width: 560px; }

.blog_body { max-width: 46rem; }
.blog_body p {
  margin-bottom: 1.5rem;
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  line-height: 1.7;
  text-transform: none;
}
.blog_body strong { font-weight: 700; }
.blog_body blockquote {
  margin: 2.75rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--vivid-orange, #ff691e);
  font-family: var(--_typography---font-family--heading-font);
  font-size: clamp(1.75rem, 2.7vw, 2.6rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.blog_faq,
.blog_cta { max-width: 46rem; margin: clamp(3rem, 6vw, 5rem) auto 0; }
.blog_faq_title {
  margin: 0 0 1rem;
  font-family: var(--_typography---font-family--heading-font);
  font-size: var(--_typography---font-sizes--heading--h5);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.blog_faq_item { border-top: 1px solid #0003; }
.blog_faq_item:last-child { border-bottom: 1px solid #0003; }
.blog_faq_frage {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.35rem 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
}
.blog_faq_frage::-webkit-details-marker { display: none; }
.blog_faq_frage::after {
  content: "+";
  flex: none;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 0.8;
  transition: transform 0.25s ease;
}
.blog_faq_item[open] > .blog_faq_frage::after { transform: rotate(45deg); }
.blog_faq_antwort {
  margin: 0;
  padding: 0 2.5rem 1.5rem 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-transform: none;
}

.blog_cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--_spacing---border-radious--lg);
  background: var(--linen, #e9dcd2);
}
.blog_cta_text {
  margin: 0;
  font-family: var(--_typography---font-family--heading-font);
  font-size: clamp(1.75rem, 2.5vw, 2.4rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.blog_more_section { padding-bottom: var(--_spacing---section-padding--padding-regular); }
.blog_more_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid #0003;
}
.blog_more_title {
  margin: 0;
  font-family: var(--_typography---font-family--heading-font);
  font-size: var(--_typography---font-sizes--heading--h4);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}
.blog_more_all {
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 991px) {
  .blog_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog_feature { grid-template-columns: 1fr; }
  .blog_more_section .blog_grid > a:nth-of-type(3) { display: none; }
}
@media (max-width: 600px) {
  .blog_grid { grid-template-columns: 1fr; }
  .blog_more_section .blog_grid > a:nth-of-type(3) { display: flex; }
  .blog_more_head { flex-direction: column; align-items: flex-start; }
  .blog_faq_antwort { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blog_card_image img, .blog_feature_image img, .blog_card_more::after { transition: none; }
}

/* Nur fuer Screenreader sichtbar (404: Seitenueberschrift, die sichtbar als
   Grafik "404" dasteht).                                                    */
.bs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}