/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */


.audience-list { list-style: none; margin: 22px 0 0; padding: 0; }
/* BEWUSST display:block statt flex.
   Vorher war das li ein Flex-Container. Dadurch wurde ein einleitendes
   <strong> zu einem EIGENEN Flex-Item neben dem Fliesstext, also zu einer
   zweiten Spalte, die mitschrumpft: "Handel." brach zu "Han-del." um und
   zwischen Label und Text klaffte eine Luecke. Mit block flossen Label und
   Text wieder in einer gemeinsamen Zeile, das Zeichen haengt absolut links. */
.audience-list li {
  position: relative;
  display: block;
  padding: 15px 0 15px 36px;
  font-size: 16px; line-height: 1.62;
  color: var(--ink-soft);
  border-top: 1px solid rgba(16,100,102,0.14);
}
.audience-list li:last-child { border-bottom: 1px solid rgba(16,100,102,0.14); }
.audience-mark {
  position: absolute;
  left: 0; top: 17px;
  width: 22px; height: 22px;
}
.audience-mark::after {
  content: '';
  position: absolute; left: 7px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--peach);
  transition: transform 0.3s var(--ease-marke);
}
.audience-list li:hover .audience-mark::after { transform: scale(1.45); }

/* Bei reduzierter Bewegung bleibt das Zeichen einfach stehen. Wichtig: Haken
   und Chevron BRAUCHEN ihre 45-Grad-Drehung, um ueberhaupt die richtige Form
   zu haben - hier darf nur die Hover-Veraenderung weg, nicht die Rotation. */
@media (prefers-reduced-motion: reduce) {
  .audience-mark::after { transition: none; }
  .audience-list li:hover .audience-mark::after { transform: none; }}


/* Modul 1 - aus einem Drehtag werden mehrere Clips */
.v1-clip, .v1-arrow {
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}
.v1-clip { opacity: 0.4; }
.v1-clip-a { transform: translateX(-16px); }
.v1-clip-b { transform: translateX(-16px); transition-delay: 0.07s; }
.v1-clip-c { transform: translateX(-16px); transition-delay: 0.14s; }
.v1-rec { transform-box: fill-box; transform-origin: center; }

/* Modul 2 - Abspielkopf läuft über die Schnitt-Timeline */
.v2-head { transform: translateX(40px); transition: transform 0.2s ease; }
.v2-block { transition: fill 0.35s ease, stroke-opacity 0.35s ease; fill: transparent; }

/* Modul 3 - Formate richten sich aus, das Hochformat tritt hervor */
.v3-fmt { transition: transform 0.45s var(--ease-marke), opacity 0.45s ease; transform-box: fill-box; transform-origin: center; }
.v3-fmt-wide   { transform: translateY(6px) rotate(-3deg); opacity: 0.72; }
.v3-fmt-square { transform: translateY(4px) rotate(2deg);  opacity: 0.72; transition-delay: 0.06s; }
.v3-fmt-tall   { transform: scale(0.94); transition-delay: 0.12s; }
.v3-play {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.4s var(--ease-marke) 0.12s;
}

/* Weiterführender Link innerhalb der dunklen Beispiel-Sektion.
   Entspricht .service-more, aber in Pfirsich statt Petrol, weil .service-more
   auf dunklem Grund (var(--ink)) nicht lesbar wäre. */
.sub-example-more { margin: 20px 0 0; }
.sub-example-more a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600;
  color: var(--peach);
  text-decoration: none;
  border-bottom: 1px solid rgba(237,191,139,0.35);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.sub-example-more a:hover { border-bottom-color: var(--peach); gap: 12px; }
.sub-example-more a:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sub-example-more a { transition: none; }
  .sub-example-more a:hover { gap: 8px; }}


/* ---- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Zustände bleiben erhalten, nur ohne Bewegung */
  .v1-clip { opacity: 1; transform: none; }
  .v3-fmt-wide, .v3-fmt-square { transform: none; opacity: 1; }
  .v3-fmt-tall { transform: none; }
  .v2-head { transform: translateX(150px); }}


/* Gegenstück zu .bt-panel-out: die Karte, die zeigt, was Social Lift abnimmt.
   Sie bleibt weiß und bekommt eine Petrol-Kante, damit im Vergleich sofort
   sichtbar ist, welche Seite die Entlastung ist. */

/* ---- Lange deutsche Komposita brechen lassen ----
   "erklärungsbedürftigem", "Suchmaschinenoptimierung": in Flex-Listen kann
   ein solches Wort nicht umbrechen und schiebt die Zeile über den Rand
   (gemessen 29.07.2026: 30px Überlauf bei 375px Breite).
   min-width:0 hebt die implizite Mindestbreite von Flex-Kindern auf,
   hyphens:auto trennt an echten Silbengrenzen statt mittendrin.
   Greift, weil <html lang="de"> gesetzt ist. */
.audience-list li,
.mh-balance-list li{
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.va-plan-illu { position: relative; width: 100%; max-width: 320px; height: auto; }

/* Die vier Themenzeilen laufen gestaffelt ein, die dritte ist der Blickfang.
   Danach kommen die Ergebnisse: erst der Film, dann die Kurzvideos. */
.va-row, .va-out, .va-check, .va-flow {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}
.va-r1 { transition-delay: 0.04s; }  .va-r2 { transition-delay: 0.09s; }
.va-r3 { transition-delay: 0.14s; }  .va-r4 { transition-delay: 0.19s; }
.va-plan-media:hover .va-row { transform: translateX(4px); }
.va-plan-media:hover .va-r3 { transform: translateX(8px); }
.va-check { transition-delay: 0.16s; }
.va-plan-media:hover .va-check { transform: scale(1.18); }

.va-flow { stroke-dasharray: 30; transition-delay: 0.24s; }
.va-plan-media:hover .va-flow { stroke-dashoffset: -18; }

.va-out { opacity: 0.55; }
.va-o1 { transition-delay: 0.28s; }  .va-o2 { transition-delay: 0.34s; }
.va-o3 { transition-delay: 0.40s; }  .va-o4 { transition-delay: 0.46s; }
.va-plan-media:hover .va-out { opacity: 1; transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .va-row, .va-out, .va-check, .va-flow { transition: none; transition-delay: 0s; }
  .va-plan-media:hover .va-row,
  .va-plan-media:hover .va-r3,
  .va-plan-media:hover .va-check,
  .va-plan-media:hover .va-out { transform: none; }
  .va-out { opacity: 1; }
  .va-plan-media:hover .va-flow { stroke-dashoffset: 0; }}


/* ---- Bewegung reduzieren - Zustand bleibt, Bewegung entfällt ------------- */
@media (prefers-reduced-motion: reduce) {
  .ov-match li:hover .audience-mark::after { transform: none; }}

.hw-head { max-width: 62ch; }
.hw-head h2 { margin: 8px 0 16px; }

/* ---- Der Bogen -------------------------------------------- */
.hw-sheet {
  position: relative;
  margin-top: 44px;
  /* Seitliches Padding liegt an den Frames, nicht am Bogen: nur so sind
     alle drei Felder exakt gleich breit (gemessen 30.07.2026). */
  padding: 34px 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Filmperforation als CSS-Verlauf, nicht als SVG: so zieht sie sich
   mit der Kartenbreite mit und braucht kein zweites Motiv im Markup.
   11px Loch / 14px Steg bei 7px Höhe liest sich als Perforation. */
.hw-perf {
  position: absolute; left: 20px; right: 20px; height: 7px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(11,76,78,0.13) 0 11px,
    transparent 11px 25px);
}
.hw-perf-top { top: 12px; }
.hw-perf-bottom { bottom: 12px; }

/* ---- Die drei Aufnahmen ------------------------------------ */
.hw-frames {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* kein gap: die Haarlinie zwischen den Frames macht die Trennung,
     wie auf einem echten Kontaktbogen */
  gap: 0;
}
/* Alle drei Frames tragen dieselbe Box, auch der erste: die transparente
   Linkslinie haelt seine Breite mit den beiden anderen gleich, die eine
   sichtbare Trennlinie haben. */
.hw-frame {
  padding: 0 22px;
  border-left: 1px solid transparent;
}
.hw-frame + .hw-frame { border-left-color: var(--border); }

.hw-frame-visual {
  position: relative;
  aspect-ratio: 3 / 2;   /* deckt sich mit viewBox 240x160 */
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid rgba(16,100,102,0.12);
  background: var(--teal-tint);
  overflow: hidden;
}

.hw-slate {
  position: absolute; top: 9px; left: 12px; z-index: 2;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--teal-dark); opacity: 0.45;
  font-variant-numeric: tabular-nums;
}

.hw-frame h3 {
  margin: 0 0 8px;
  font-size: 19.5px; line-height: 1.3;
  color: var(--ink);
}
.hw-frame p {
  margin: 0;
  font-size: 15.5px; line-height: 1.62;
  color: var(--ink-soft);
}

/* Aufnahmen werden beim Scrollen nacheinander freigelegt */

/* ---- Die Aufnahmen im Kontaktbogen -------------------------
   Vorher lagen hier drei gezeichnete SVGs (.hw1-* bis .hw3-*) samt
   Hover-Ablaeufen. Michi, 09.08.2026: Bibliotheksware in einem Block,
   der echten Arbeitsalltag verspricht. Jetzt stehen drei Aufnahmen
   aus einem echten Drehtag drin, alle drei liegen schon im Projekt.
   ------------------------------------------------------------ */
.hw-shot { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
/* Bei Hochformat wuerde der mittige Ausschnitt den Kopf abschneiden. */
.hw-shot--oben { object-position: 50% 30%; }
.hw-frame-visual:has(.hw-shot) { background: var(--ink); }
/* Die Nummer liegt auf dem Bild, also hell mit Schatten statt teal. */
.hw-frame-visual:has(.hw-shot) .hw-slate { color: #fff; opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.hw-frame:hover .hw-shot { transform: scale(1.035); }

/* ---- Bruecke in die Ausspielung ---------------------------- */
.hw-bridge {
  display: block;
  width: 2px; height: 44px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, rgba(11,76,78,0.3), rgba(11,76,78,0.08));
}
.hw-bridge::after {
  content: '';
  position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%;
  background: var(--peach);
  border: 2px solid var(--peach-dark);
}

/* ---- 04 Ausspielung (dunkles Panel) ------------------------ */
.hw-out {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.32fr);
  gap: 44px; align-items: center;
  padding: 34px 34px;
  border-radius: var(--radius);
  background: var(--ink);
  color: rgba(255,255,255,0.82);
}
/* min-width:0 ist im Grid Pflicht, sonst kann die Claim-Zeile die
   Spalte über ihre Bahn hinaus aufziehen */
.hw-out-lead { min-width: 0; }
.hw-slate-out {
  position: static;
  display: block;
  margin-bottom: 10px;
  color: var(--peach);
  opacity: 0.9;
}
.hw-out-claim {
  margin: 0 0 18px;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.32; font-weight: 700;
  color: #ffffff;
  max-width: 22ch;
}
/* wie .service-more, aber auf dunklem Grund lesbar. display:inline statt
   inline-flex: bei einem Zweizeiler bliebe der Pfeil sonst nicht hinter
   "ab", sondern spraenge an den rechten Rand der Zeile. */
.hw-out-more {
  display: inline;
  font-size: 14.5px; font-weight: 600; line-height: 1.9;
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.34);
  transition: border-color 0.3s ease;
}
.hw-out-more span {
  display: inline-block; margin-left: 7px;
  transition: transform 0.3s ease;
}
.hw-out-more:hover { border-color: var(--peach); }
.hw-out-more:hover span { transform: translateX(4px); }

.hw-targets {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hw-target {
  padding: 18px 14px 16px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  transition: opacity 0.6s ease,
              transform 0.5s cubic-bezier(.2,.7,.2,1),
              background 0.5s ease,
              border-color 0.5s ease;
}
.hw-mini { display: block; width: 100%; max-width: 104px; height: auto; margin: 0 auto; }
.hw-target-label {
  display: block; margin-top: 12px;
  font-size: 13.5px; font-weight: 700;
  color: #ffffff;
}
.hw4-fill { fill-opacity: 0.16; transition: fill-opacity 0.5s ease; }
.hw-target:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.hw-target:hover .hw4-fill { fill-opacity: 0.3; }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 1000px) {
  .hw-out { grid-template-columns: 1fr; gap: 28px; }
  .hw-out-claim { max-width: none; }}

@media (max-width: 860px) {
  /* Der Kontaktbogen kippt in die Vertikale: die Frames stehen
     untereinander, getrennt durch die Haarlinie statt daneben. */
  .hw-frames { grid-template-columns: 1fr; }
  .hw-frame { border-left: 0; }
  .hw-frame + .hw-frame {
    border-top: 1px solid var(--border);
    margin-top: 26px; padding-top: 26px;
  }
  .hw-frame-visual { max-width: 380px; }}

@media (max-width: 560px) {
  .hw-sheet { margin-top: 34px; padding: 30px 16px; }
  .hw-perf { left: 14px; right: 14px; }
  .hw-out { padding: 26px 20px; }
  /* Ziele werden Zeilen statt Spalten, es verschwindet nichts */
  .hw-targets { grid-template-columns: 1fr; gap: 12px; }
  .hw-target {
    display: grid; grid-template-columns: 72px minmax(0, 1fr);
    align-items: center; gap: 16px;
    text-align: left; padding: 14px 16px;
  }
  .hw-mini { max-width: 72px; }
  .hw-target-label { margin-top: 0; }}


/* ---- Reduced Motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hw-shot, .hw-target, .hw4-fill, .hw-out-more, .hw-out-more span { transition: none; }
  .hw-out-more:hover span { transform: none; }
  .hw-frame:hover .hw-shot,
  .hw-target:hover { transform: none; }}



/* ==========================================================================
   MOBILE-FEINSCHLIFF (Mobile-Audit 31.07.2026)
   Gilt ausschliesslich bis 640px. Desktop und Tablet bleiben unberuehrt.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---------- Gruppe c ---------- */
  /* /leistungen/videoproduktion-imagefilm-lahr/ - Station 04 im dunklen Panel:
     Die Zeile "So laeuft ein Drehtag in deinem Betrieb ab -->" braucht bei 390px
     305px, verfuegbar sind 302px. Der Pfeil fiel dadurch allein auf eine zweite
     Zeile und bekam dort seinen eigenen Unterstrich. 13,5px passen mit Reserve
     in eine Zeile; bei 320px bricht die Zeile weiterhin, dann aber sauber mit
     dem Pfeil hinter "ab". */
  .hw-out-more { font-size: 13.5px; }}


/* Sehr schmale Geraete: die SVG-Beschriftungen skalieren mit der Zeichenflaeche
   mit und fallen unter die 11px-Grenze der Seite. Die Werte sind
   SVG-Nutzereinheiten, nicht Pixel: bei 320px Viewport ergeben 13.5 Einheiten
   wieder rund 11px auf dem Schirm. */
@media (max-width: 379px) {
  /* Videoseite: "Themenplan", "Imagefilm", "Kurzvideos" */
  .va-plan-illu text { font-size: 13.5px; }
  /* "1 Drehtag": die Pille ist auf 72 Einheiten verbreitert (vorher 56, dort
     fuellte der Text sie randlos aus). 13.5 ergibt bei 320px effektiv 11.1px
     und laesst rund 5 Einheiten Luft auf jeder Seite. */
  .va-plan-illu text:nth-of-type(2) { font-size: 13.5px; }}


/* Zweites Band fuer den Themenplan. Der SVG-Rahmen waechst bis rund 394px
   Fensterbreite mit und ist danach auf 320px gedeckelt. Mit nur einem Band bis
   379px fielen die Beschriftungen bei 380px von 13,7 auf 10,7px zurueck - ein
   sichtbarer Sprung, obwohl das Fenster breiter wird, und wieder unter der
   11px-Grenze. Mit dem zweiten Band bleibt der Schritt bei rund 1,5px und
   nichts faellt mehr unter 11px. Das Band laeuft bis 980px durch, weil der
   Rahmen im Tablet-Bereich auf 470px gedeckelt ist und die Beschriftungen dort
   sonst wieder auf 10,5px zurueckfallen. Ab 981px steht die Sektion zweispaltig
   mit eigener Groesse. */
@media (min-width: 380px) and (max-width: 980px) {
  .va-plan-illu text { font-size: 12px; }}


/* --- /leistungen/videoproduktion-imagefilm-lahr/, Kontaktbogen --------- */
/* Ab 860px abwaerts stehen die drei Aufnahmen untereinander, die Illustration
   ist auf 380px gedeckelt und linksbuendig, der Text lief darunter ueber die
   volle Zeile. Bei 768px blieben dadurch rund 330px neben jeder Illustration
   leer und die Bilderliste wuchs auf 1152px Hoehe. Zweispaltig gelesen
   (Aufnahme links, Text rechts) fuellt die Zeile, haelt die Haarlinien-
   Trennung des Kontaktbogens und halbiert die Hoehe. Unter 641px bleibt die
   gestapelte Fassung unveraendert. */
@media (min-width: 641px) and (max-width: 860px) {
  .hw-frames .hw-frame {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    column-gap: 26px;
    align-content: center;
  }
  .hw-frame .hw-frame-visual {
    max-width: none;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .hw-frames .hw-frame h3 { grid-column: 2; grid-row: 1; align-self: end; }
  .hw-frames .hw-frame p { grid-column: 2; grid-row: 2; align-self: start; margin-top: 8px; }}


@media (max-width: 640px) {

  /* --- /leistungen/videoproduktion-imagefilm-lahr/ --------------------- */
  /* hyphens:auto trennte nach vier Buchstaben mitten im Wort:
     "Socia-" / "l-Media-Content". Mindestlaengen setzen statt Trennung ganz
     abschalten - die Notbremse fuer sehr schmale Spalten bleibt erhalten. */
  .audience-list li,
  .mh-balance-list li {
    hyphenate-limit-chars: 12 6 4;
    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 4;
  }}


/* --- /leistungen/videoproduktion-imagefilm-lahr/ ------------------------
   Auf dieser Seite stehen "Was dabei entsteht" und "Fuer wen wir drehen"
   getauscht: das Ergebnis kommt vor der Eignungsfrage. Damit die Abschnitte
   weiter abwechselnd hell und getoent laufen, tauschen ihre Hintergruende
   mit. Nur hier - beide Bausteine kommen auf anderen Seiten unveraendert
   vor. */
.sub-bento--tint { background: var(--teal-tint); }
.sub-audience--plain { background: var(--white); }