/* ============================================================
   BMV – Entwurf v6 · GANZE SEITE

   Gegenüber v5 geändert (nach Rückmeldung):
   - Das feine Linienraster im Hintergrund ist RAUS.
   - Kennzahlen liegen jetzt über einem Foto statt in Kästen.
   - Alle übrigen Sektionen neu gestaltet; das HTML dafür kommt
     unverändert aus site/index.html (Texte, Zahlen, die 20
     Gesellschafter bleiben also garantiert korrekt).

   Keiltechnik unverändert: clip-path (kantengeglättet) mit
   fester Hero-Höhe -> fester Versatz, 620 × tan16,5° = 184 px.
   ============================================================ */

:root {
  --rot: #E30613;
  --rot-hell: #EE4136;
  --rot-tief: #A80310;
  --rot-text: #D40512;

  --schwarz: #0E0E0E;
  --schwarz-2: #17171A;
  --papier: #F6F6F3;
  --papier-2: #EDEDE8;
  --tinte: #101010;
  --tinte-weich: #4E4F49;
  --tinte-zart: #63645B;   /* auf #EDEDE8 (papier-2) erreicht #6C6D64 nur 4,3:1 */
  --linie: rgba(16,16,16,.13);
  --linie-zart: rgba(16,16,16,.07);
  --linie-hell: rgba(255,255,255,.14);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 72px; --s7: 104px; --s8: 144px;

  --bahn: 1380px;
  --rand: clamp(22px, 4.4vw, 64px);

  --hero-h: 620px;
  --versatz: 184px;
  --keil-x: 96px;
  --keil-b: 26px;
  --linie-h: 8px;
  --keil-fuss: 58%;

  /* Die Signetform ist KEIN nachgebautes Polygon mehr, sondern die aus
     bmv-logo-original.png freigestellte Flaeche (_prototyp/bilder/signet.png,
     1,3 KB). Jeder Nachbau lag daneben: gemessen 494 x 308 px, also
     Verhaeltnis 1,60 - deutlich hoeher als die 2,05, die eine Messung ohne
     die schmale Oberkante ergab. Dadurch wirkte die Schraege zu flach.
     Als Maske eingesetzt laesst sich die Flaeche beliebig einfaerben. */
  --signet-bild: url('bilder/signet.png');
  /* Im Logo laeuft der Verlauf SENKRECHT: oben #EB5B3F, unten #E30914.
     Ein diagonaler Verlauf (160deg) sah dem Original nicht aehnlich. */
  --signet-verlauf: linear-gradient(180deg, #EB5B3F 0%, #E30914 68%);
  --signet-verh: 1.604;

  --kurve: cubic-bezier(.16, 1, .3, 1);
  --kurve-weich: cubic-bezier(.32, .72, 0, 1);
}

* { box-sizing: border-box; }
/* scroll-behavior:smooth zusammen mit der Parallaxe laesst das Scrollen
   in Firefox nachlaufen – die Sprungmarken sind auch ohne fluessig. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px; line-height: 1.62;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
/* Der Kopf bleibt beim Scrollen stehen und verdeckte beim Ankersprung die
   erste Zeile der Ueberschrift (das "G" von Gesellschafter war angeschnitten). */
section[id] { scroll-margin-top: 108px; }
a { color: var(--rot-text); }
/* Skip-Link: nur sichtbar, wenn er per Tab fokussiert wird */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rot); color: #fff; padding: 10px 18px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }
.wrap, .bahn { max-width: var(--bahn); margin: 0 auto; padding-inline: var(--rand); }

/* ============================ KOPF ============================ */
.leiste { background: var(--papier); border-bottom: 1px solid var(--linie-zart);
  font-size: .78rem; color: var(--tinte-weich); }
.leiste-innen { display: flex; justify-content: flex-end; gap: var(--s4); padding: 7px 0; }
.leiste a { color: var(--tinte-weich); text-decoration: none; transition: color .35s var(--kurve); }
.leiste a:hover { color: var(--rot-text); }

.kopf { position: sticky; top: 0; z-index: 40; background: #fff;
  border-bottom: 1px solid var(--linie-zart);
  transition: box-shadow .5s var(--kurve); }
.kopf.eng { box-shadow: 0 6px 24px rgba(16,16,16,.09); }
/* padding-block statt padding: das Kurzschreibweisen-"0" fuer links/rechts
   loeschte sonst das padding-inline von .bahn - auf Desktop unsichtbar
   (dort zentriert margin:auto den schmaleren Inhalt und erzeugt den
   Rand von selbst), auf Mobil (schmaler als --bahn) blieb dadurch 0
   Abstand zu beiden Seiten. */
.kopf-innen { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-block: var(--s3); transition: padding .5s var(--kurve); }
.kopf.eng .kopf-innen { padding-block: 13px; }
.marke img { height: 52px; width: auto; display: block; transition: height .5s var(--kurve); }
.kopf.eng .marke img { height: 42px; }

.navi { display: flex; align-items: center; gap: var(--s5); }
.navi a { position: relative; color: var(--tinte); text-decoration: none;
  font-size: .89rem; font-weight: 600; padding: 6px 0; transition: color .4s var(--kurve); }
.navi a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--rot); transition: right .5s var(--kurve); }
.navi a:hover { color: var(--rot-text); }
.navi a:hover::after { right: 0; }
.navi .tat-klein { background: var(--rot); color: #fff; padding: 11px 22px;
  font-weight: 700; font-size: .87rem;
  transition: background .45s var(--kurve), transform .35s var(--kurve); }
.navi .tat-klein::after { display: none; }
.navi .tat-klein:hover { background: var(--rot-tief); color: #fff; transform: translateY(-1px); }

/* Mobil-Schalter (Hamburger) - nur sichtbar, wenn die Navi unten per Media
   Query zur ausklappbaren Schublade wird. Drei Striche morphen zum Kreuz. */
.navi-schalter { display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 38px; height: 38px; padding: 0; border: 0; background: none;
  cursor: pointer; flex: none; }
.navi-schalter span { display: block; width: 100%; height: 2px; background: var(--tinte);
  transition: transform .35s var(--kurve), opacity .25s var(--kurve); }
.navi-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navi-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navi-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ HERO ============================ */
.hero { position: relative; background: var(--schwarz); color: #fff;
  height: var(--hero-h); overflow: hidden; }
/* Nur noch ein weicher Lichtabfall – das Linienraster ist entfernt. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(85% 70% at 4% 0%, rgba(255,255,255,.085), transparent 60%); }

/* Der rote Strich als EIN Pfad ueber den ganzen Hero. stroke-dashoffset
   zeichnet ihn in einem Zug: unten links -> Keilfuss -> hoch am Keil ->
   oben rechts. Zwei getrennte Elemente wirkten wie zwei Bewegungen. */
.hero-strich {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 6; pointer-events: none; overflow: visible;
}
.hero-strich path {
  /* EINE Flaeche: duenn unten, so breit wie der Keil in der Mitte, duenn
     oben. Ein Umriss statt Linie+Keil - deshalb kein zweiter Balken und
     kein Aufploppen. */
  fill: var(--rot); stroke: none;
}
/* Drei Abschnitte, gleiche Geschwindigkeit, nahtlos aneinander:
   1. unten von links bis zum Keilfuss
   2. der KEIL waechst von unten nach oben (er ist das Mittelstueck -
      frueher lief die duenne Linie ueber ihn und er sprang dann als
      dicker Balken dazu)
   3. oben vom Keilkopf nach rechts */
/* EIN Pfad, EINE Bewegung, konstante Geschwindigkeit (linear).
   Der Keil wird NICHT mehr als Mittelstueck animiert - er ist 26 px breit,
   die Linie 8 px, das kann nie sauber ineinander uebergehen. Er blendet
   sich erst ein, wenn die Linie komplett durch ist. */

/* Die Linie liegt UNTER dem Keil: im schraegen Teil deckt der Keil sie ab,
   sichtbar bleibt nur der waagerechte Ein- und Auslauf. Der Eindruck ist
   eine durchgehende Bewegung ohne zweiten Strich. */
/* Wischmaske: legt die Flaeche gleichmaessig von links nach rechts frei. */
.hero-strich {
  z-index: 4;
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);
  mask-image: linear-gradient(to right, #000 50%, transparent 50%);
  -webkit-mask-size: 200% 100%; mask-size: 200% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: mask-position 1.9s linear .2s,
              -webkit-mask-position 1.9s linear .2s;
}
.los .hero-strich { -webkit-mask-position: 0 0; mask-position: 0 0; }
.keil-flaeche { z-index: 3; }
.los .hero-strich path {
  /* EINE Flaeche: duenn unten, so breit wie der Keil in der Mitte, duenn
     oben. Ein Umriss statt Linie+Keil - deshalb kein zweiter Balken und
     kein Aufploppen. */
  fill: var(--rot); stroke: none;
}
.maske > * {
  /* Deutlicherer Auftritt: groesserer Weg, laengere Dauer - vorher waren
     26 px in 0,8 s kaum wahrnehmbar. */
  display: block; opacity: 0; transform: translateY(48px);
  transition: opacity 1.1s var(--kurve), transform 1.3s var(--kurve);
  /* Grosse Schrift auf eine eigene Ebene legen, sonst zeichnet der Browser
     die Flaeche bei jedem Bild neu und der Auftritt wirkt zaeh. */
  will-change: transform; backface-visibility: hidden;
}
.los .maske > * { will-change: auto; }
.los .maske > * { opacity: 1; transform: none; }
.m1 > * { transition-delay: .2s; }  .m2 > * { transition-delay: .4s; }
.m3 > * { transition-delay: .58s; } .m4 > * { transition-delay: .8s; }
.m5 > * { transition-delay: .98s; }

.kapitel { display: flex; align-items: center; gap: var(--s3);
  font-size: .68rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  margin: 0 0 var(--s4); color: rgba(255,255,255,.62); }
.kapitel .nr { font-weight: 800; font-stretch: 70%; color: var(--rot-hell); letter-spacing: .06em; }
.kapitel::before { content: ""; width: 40px; height: 39px; flex: none;
  background-image: url('bilder/signet-farbig.png') !important;
  background-size: 100% 100%; background-repeat: no-repeat; }
.kapitel .strich { flex: 0 0 56px; height: 1px; background: currentColor; opacity: .34;
  transform-origin: left; transform: scaleX(0); transition: transform .9s var(--kurve) .5s; }
.los .kapitel .strich, .kapitel.da .strich { transform: scaleX(1); }
.los .kapitel::before, .kapitel.da::before { clip-path: inset(0 0 0 0); }

.titel { font-size: clamp(2.7rem, 5.6vw, 5.1rem); font-weight: 800; font-stretch: 73%;
  line-height: .9; letter-spacing: -.034em; margin: 0; }
.titel .rot { color: var(--rot-hell); }
.vorspann { font-size: clamp(1rem, 1.25vw, 1.08rem); line-height: 1.6;
  max-width: 31rem; margin: var(--s4) 0 0; color: rgba(255,255,255,.78); }
.masslinie { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.masslinie::before { content: ""; width: 116px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--rot) 0 20px, rgba(255,255,255,.24) 20px);
  transform-origin: left; transform: scaleX(0); transition: transform 1s var(--kurve) .8s; }
.los .masslinie::before { transform: scaleX(1); }
.hero-tat { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }

/* ---------- Schaltflächen (auch Svens .btn) ---------- */
.tat, .btn {
  position: relative; display: inline-flex; align-items: stretch; overflow: hidden;
  text-decoration: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .92rem; color: #fff; background: var(--rot);
  transition: transform .45s var(--kurve), box-shadow .45s var(--kurve), background .45s var(--kurve);
}
.btn { padding: 16px var(--s4); display: inline-block; }
.tat::before { content: ""; position: absolute; inset: 0; background: var(--rot-tief);
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--kurve-weich); }
.tat:hover::before { transform: scaleX(1); }
.tat span, .tat i { position: relative; z-index: 1; }
.tat span { padding: 18px var(--s4); }
.tat i { display: grid; place-items: center; width: 54px; font-style: normal;
  background: rgba(0,0,0,.22); transition: background .5s var(--kurve); }
.tat i svg { transition: transform .5s var(--kurve); }
.tat:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(227,6,19,.26); }
.tat:hover i { background: rgba(0,0,0,.34); }
.tat:hover i svg { transform: translateX(4px); }
.tat:focus-visible, .btn:focus-visible { outline: 2px solid var(--rot-hell); outline-offset: 3px; }
.tat.leise { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.tat.leise::before { background: rgba(255,255,255,.1); }
.tat.leise i { background: rgba(255,255,255,.09); }
.btn-dark { background: var(--schwarz); }
.btn-dark:hover { background: #000; box-shadow: 0 12px 28px rgba(0,0,0,.28); }

/* ---------- Bild + Keil ---------- */
.hero-raster { position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: 1.16fr .84fr; align-items: stretch; }
.hero-text { align-self: center; padding-right: var(--s7); }

.hero-bild { position: relative; overflow: hidden;
  margin-right: calc((min(100vw, var(--bahn)) - 100vw) / 2 - var(--rand)); }
.hero-bild .rahmen { position: absolute; inset: -6% 0; }
.hero-bild img { position: absolute; inset: 0; width: 100%; height: 112%;
  object-fit: cover; display: block;
  transform: none; opacity: 0;
  /* Erscheint genau waehrend der Balken die Diagonale hochzieht - dadurch
     wirkt der Bildaufbau als Teil derselben Bewegung. */
  /* Das Foto erscheint GENAU waehrend der Balken die Diagonale hochzieht.
     Der Balken startet bei 0,2 s und laeuft 1,9 s; die Diagonale liegt bei
     rund 50-80 % der Strecke, also 1,15 s bis 1,70 s. */
  /* Nur Deckkraft, KEINE Bewegung: der leichte Zoom liess das Bild beim
     Einblenden wandern, was unruhig wirkte. */
  transition: opacity 2.4s ease-in-out 1.0s;
  will-change: transform; }
.los .hero-bild img { opacity: 1; }
.hero-bild::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(14,14,14,.6) 0, rgba(14,14,14,.14) 30%, transparent 54%); }

.keil-flaeche, .keil-strich, .keil-licht, .keil-linie-oben {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Die schwarze Flaeche steht SOFORT - sonst ist das Foto fuer einen Moment
   unbeschnitten zu sehen, was unsauber wirkt. Nur der rote Streifen kommt
   spaeter dazu, passend zur durchlaufenden Linie. */
.keil-flaeche { opacity: 1; }
.keil-strich, .keil-licht { display: none; }
.keil-alt {
  /* alt, synchron mit der Linie.
     mask und clip-path sind getrennte Kanaele: die Keilform bleibt exakt
     erhalten (clip-path), die Maske steuert nur, wieviel davon zu sehen ist.
     Kein Verzerren wie bei transform, kein Ploppen wie bei opacity. */
  opacity: 1;
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 50%);
  mask-image: linear-gradient(to top, #000 50%, transparent 50%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%;
  -webkit-mask-position: 0 -100%; mask-position: 0 -100%;
  transition: mask-position var(--d2, .6s) linear var(--t2, .95s),
              -webkit-mask-position var(--d2, .6s) linear var(--t2, .95s); }
.los .keil-strich, .los .keil-licht {
  -webkit-mask-position: 0 0; mask-position: 0 0; }

.keil-linie-oben { display: none; }


.keil-licht, .keil-linie-oben { z-index: 4; }
.keil-alt3 { background: var(--schwarz);
  /* 14 px weiter nach rechts als die Keilkante: die Flaeche endet damit
     UNTER dem roten Balken statt daneben. Vorher blitzte dazwischen ein
     Streifen des Fotos durch. */
  clip-path: polygon(0 0, calc(var(--keil-x) + var(--versatz)) 0,
    calc(var(--keil-x)) 100%, 0 100%); }
.keil-strich { background: var(--signet-verlauf);
  clip-path: polygon(calc(var(--keil-x) + var(--versatz)) 0,
    calc(var(--keil-x) + var(--versatz) + var(--keil-b)) 0,
    calc(var(--keil-x) + var(--keil-b)) 100%, var(--keil-x) 100%); }
.keil-licht { background: rgba(255,255,255,.28);
  clip-path: polygon(calc(var(--keil-x) + var(--versatz)) 0,
    calc(var(--keil-x) + var(--versatz)) 0,
    calc(var(--keil-x)) 100%, var(--keil-x) 100%); }
.keil-linie-oben { background: linear-gradient(90deg, var(--rot-hell), var(--rot) 300px);
  clip-path: polygon(calc(var(--keil-x) + var(--versatz) + var(--keil-b)) 0, 100% 0,
    100% var(--linie-h), calc(var(--keil-x) + var(--versatz) + var(--keil-b)) var(--linie-h)); }
.bild-quelle { position: absolute; right: var(--s2); bottom: var(--s3); z-index: 7;
  background: rgba(14,14,14,.76); color: rgba(255,255,255,.82);
  font-size: .63rem; padding: 5px 10px; letter-spacing: .05em; }

/* ====================== KENNZAHLEN über Foto ====================== */
.zahlen { position: relative; overflow: hidden; background: var(--schwarz); color: #fff;
  padding: var(--s8) 0 var(--s7); }
.zahlen-grund { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%; opacity: .7; z-index: 0; }
.zahlen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,14,14,.74), rgba(14,14,14,.42) 45%, rgba(14,14,14,.82)); }
/* Seiten-Vignette: dunkelt die Raender ab, damit Treppenhaus/Wandbild im
   Hintergrund weniger ablenken und der Blick auf der Gruppe in der Mitte
   bleibt. */
.zahlen::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14,14,14,.55), transparent 22%, transparent 78%, rgba(14,14,14,.55)); }
.zahlen-innen { position: relative; z-index: 2; }
.zahlen-titel { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800; font-stretch: 76%;
  letter-spacing: -.03em; line-height: 1.04; margin: 0 0 var(--s8); }

.zahlenreihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.zr { position: relative; padding-top: var(--s4); }
/* Keilanschnitt statt Rahmen – wächst beim Erscheinen */
.zr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.2); }
.zr::after { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 2px;
  background: var(--rot); transform-origin: left; transform: scaleX(0);
  transition: transform .9s var(--kurve) .15s; }
.zr.da::after { transform: scaleX(1); }
/* Zurueck auf ruhige Bewegung: nur das Einzeichnen beim Erscheinen (wie
   der Rest der Seite - Kurve, kein Ueberschwinger, keine Dauerschleife).
   Vorherige Pop-/Schwebe-/Blink-Animationen wirkten zu verspielt fuer den
   sonst zurueckhaltenden Stil der Seite. */
/* Kraeftiger Auftritt statt zurueckhaltendem Einblenden: Icon knallt mit
   leichtem Ueberschwinger rein, ein roter Blitzkreis dahinter schiesst auf
   und verpufft - EINMALIG beim Erscheinen, keine Dauerschleife danach (das
   wirkte in der vorherigen Fassung zu verspielt). */
.zr-icon { position: relative; z-index: 1; width: 36px; height: 36px;
  margin-bottom: var(--s3); display: block;
  fill: none; stroke: var(--rot); stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; opacity: 0; transform: scale(.3) rotate(-12deg);
  filter: drop-shadow(0 0 0 rgba(227,6,19,0)); }
.zr.da .zr-icon { animation: zr-impact .65s cubic-bezier(.2,1.4,.4,1) .15s forwards; }
.zr-icon path, .zr-icon circle { stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s var(--kurve) .15s; }
.zr-icon circle { transition-delay: .35s; }
.zr.da .zr-icon path, .zr.da .zr-icon circle { stroke-dashoffset: 0; }
.zr:hover .zr-icon { transform: translateY(-3px) !important; }
@keyframes zr-impact {
  0%   { opacity: 0; transform: scale(.3) rotate(-12deg);
         filter: drop-shadow(0 0 0 rgba(227,6,19,0)); }
  55%  { opacity: 1; transform: scale(1.18) rotate(3deg);
         filter: drop-shadow(0 0 10px rgba(227,6,19,.65)); }
  100% { opacity: 1; transform: scale(1) rotate(0);
         filter: drop-shadow(0 0 0 rgba(227,6,19,0)); }
}
/* Blitzkreis hinter dem Icon - eigenes Element, weil ::before auf <svg>
   nicht zuverlaessig unterstuetzt wird. */
.zr-flash { position: absolute; top: var(--s4); left: 0; width: 36px; height: 36px;
  border-radius: 50%; background: var(--rot); opacity: 0; transform: scale(.2);
  pointer-events: none; z-index: 0; }
/* Wiederholt sich dauerhaft alle 3,2s (statt nur einmal) - sonst ist der
   Effekt leicht zu verpassen, wenn man nicht genau in dem Moment hinschaut,
   in dem die Sektion ins Bild scrollt. Lange Pause zwischen den Pulsen
   (70% der Zeit nichts), damit es nicht nervoes wirkt. */
.zr.da .zr-flash { animation: zr-flash 3.2s cubic-bezier(.2,.7,.3,1) .1s infinite; }
@keyframes zr-flash {
  0%  { opacity: .85; transform: scale(.2); }
  30% { opacity: 0;   transform: scale(2.4); }
  100% { opacity: 0;  transform: scale(2.4); }
}
.zr-puls { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* WICHTIG: .zr-flash separat behandeln. Die Basis-Deckkraft des
     Blitzkreises ist 0 (nur die jetzt deaktivierte Animation blendet ihn
     kurz ein) - ihn hier auf opacity:1 zu zwingen machte ihn dauerhaft zu
     einem VOLLEN roten Kreis in exakt der Icon-Farbe, der das duenne
     Icon-Symbol komplett camoufliert. Das war die Ursache fuer "keine
     Effekte sichtbar" bei aktivierter Systemeinstellung. */
  .zr-icon { animation: none !important; opacity: 1 !important;
    transform: none !important; filter: none !important; }
  .zr-icon path, .zr-icon circle { transition: none !important; stroke-dashoffset: 0 !important; }
  .zr-flash { animation: none !important; opacity: 0 !important; }
}
.zr-wert { display: flex; align-items: baseline; gap: 8px;
  font-size: clamp(2.8rem, 5.6vw, 4.6rem); font-weight: 800; font-stretch: 66%;
  letter-spacing: -.05em; line-height: .9; }
.zr-wert i { font-style: normal; font-size: .27em; font-weight: 700; font-stretch: 92%;
  letter-spacing: .01em; white-space: nowrap; color: rgba(255,255,255,.72); }
.zr-name { display: block; margin-top: var(--s3); font-size: .78rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.zahlen-quelle { font-size: .72rem; color: rgba(255,255,255,.5); margin: var(--s7) 0 0;
  padding-top: var(--s3); border-top: 1px solid var(--linie-hell); }

/* ========================= INHALTSBLÖCKE ========================= */
.block { padding: var(--s8) 0; background: var(--papier);
  /* KEIN content-visibility: der Browser schaetzt dann die Hoehe noch nicht
     gerenderter Sektionen. Beim Sprung auf einen Anker landet er dadurch an
     der falschen Stelle und die erste Ueberschriftzeile verschwindet unter
     dem mitlaufenden Kopf. Die Bildrate ist auch ohne in Ordnung. */ }
.block.grey { background: var(--papier-2); }

.sect { position: relative; font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 800;
  font-stretch: 77%; letter-spacing: -.028em; line-height: 1.05;
  margin: 0 0 var(--s4); padding-left: 84px; max-width: 24ch; }
/* Keil vor der Überschrift – gleicher Winkel wie im Hero */
.h-keil { position: absolute; left: 0; top: .1em; width: 58px; height: 56px;
  background-image: url('bilder/signet-farbig.png') !important;
  background-size: 100% 100%; background-repeat: no-repeat;
  /* clip-path statt scaleY: scaleY staucht das Logo-Bild im Signet,
     clip-path gibt es unverzerrt von oben frei. */
  /* Wischt im Logowinkel von links herein - deutlich lebendiger als ein
     reines Einblenden, und ohne das Bild zu stauchen. */
  clip-path: inset(0 100% 0 0);
  opacity: 0; transform: translateX(-22px);
  transition: clip-path 1s var(--kurve) .15s, opacity .7s var(--kurve) .15s,
              transform 1s var(--kurve) .15s; }
.sect.da .h-keil { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
/* "Beschaffung. Marketing. Vertrieb." ist laenger als die 24ch-Kappung
   anderer Ueberschriften vertraegt - bricht sonst mitten in der Phrase um.
   Eigene, groessere Kappung nur fuer diese eine Ueberschrift. */
.sect-breit { max-width: 36ch; font-size: clamp(1.5rem, 2.9vw, 2.7rem); }
/* text-wrap:pretty verhindert einzelne Wörter/Orphans am Zeilenende -
   betrifft u.a. den Standorte-Absatz und den Kontakt-Satz, die vorher mit
   einem manuellen &nbsp; einzeln geflickt wurden. Browser ohne Unterstützung
   (Safari < 17.4, fallback: normal) brechen weiterhin normal um, nur ohne
   die Orphan-Vermeidung. */
.sect-intro { font-size: 1.05rem; color: var(--tinte-weich); max-width: 56ch;
  margin: 0 0 var(--s7); padding-left: 84px; text-wrap: pretty; }

/* ---------- Leistungen ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.service { position: relative; padding-top: var(--s4); border-top: 1px solid var(--linie); }
.service h3 { font-size: 1.25rem; font-weight: 800; font-stretch: 82%; letter-spacing: -.02em;
  margin: 0 0 var(--s2); }
/* min-height auf die laengste der drei Beschreibungen (Vertrieb, 3 Zeilen)
   kalibriert - sonst beginnt die Liste darunter je nach Textlaenge auf
   unterschiedlicher Hoehe ("versetzt" bei Vertrieb). */
.service p { color: var(--tinte-weich); margin: 0 0 var(--s3); min-height: 4.8em; }
.service ul { list-style: none; padding: 0; margin: 0; }
.service li { position: relative; padding-left: var(--s3); margin-bottom: 9px;
  font-size: .93rem; color: var(--tinte-weich); }
.service li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 6px; background: var(--rot);
  background-image: url('bilder/signet-farbig.png') !important;
  background-size: 100% 100%; background-repeat: no-repeat; }

/* ---------- Strategie ---------- */
/* Volles Originalbild, UNBESCHNITTEN: aspect-ratio entspricht exakt den
   Bildmassen, object-fit:cover schneidet bei passendem Verhaeltnis nichts
   weg. max-width auf eine vernuenftige Breite fuers Hochformat begrenzt
   (sonst waere die Sektion bei voller Bahnbreite ueber 1300 px hoch) und
   zugleich auf die Quellbreite gedeckelt, damit nicht ueber die tatsaech-
   liche Aufloesung hinaus hochskaliert wird (wirkte vorher unscharf). */
.strategie-foto { margin-bottom: var(--s7); max-width: 600px; margin-inline: auto; }
.strategie-foto .bild { aspect-ratio: 940 / 1380; }
.bild { position: relative; overflow: hidden; background: #DDE2E4; }
.bild img.foto { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.bild .tag { position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(14,14,14,.72); color: #fff; font-size: .66rem; padding: 4px 9px; }
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.partner-box { background: #fff; padding: var(--s5); border-top: 3px solid var(--rot);
  transition: transform .55s var(--kurve), box-shadow .55s var(--kurve); }
.partner-box:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,16,16,.09); }
.partner-box h3 { font-size: 1.3rem; font-weight: 800; font-stretch: 82%;
  letter-spacing: -.02em; margin: 0 0 var(--s2); }
.partner-box > p { color: var(--tinte-weich); margin: 0 0 var(--s3); }
.partner-box ul { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.partner-box li { position: relative; padding-left: var(--s3); margin-bottom: 9px;
  font-size: .93rem; color: var(--tinte-weich); }
.partner-box li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 6px; background: var(--rot);
  background-image: url('bilder/signet-farbig.png') !important;
  background-size: 100% 100%; background-repeat: no-repeat; }

/* ---------- Gesellschafter ---------- */
/* Bewusst OHNE Karten-Box: Logos liegen direkt auf der Seitenflaeche statt
   in einem weissen Kasten - Lars' Kritik, dass die Kacheln trotz freigestellter
   Logos wie Boxen wirkten (viel Leerraum, harte weisse Flaeche je Kachel). */
.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4); margin-bottom: var(--s4); }
.member { display: flex; flex-direction: column; gap: var(--s3); align-items: center; text-decoration: none;
  color: var(--tinte); transition: transform .4s var(--kurve); }
.member:hover { transform: translateY(-3px); }
.member:hover .plogo { filter: drop-shadow(0 6px 14px rgba(16,16,16,.18)); }
.member .plogo { width: 100%; max-width: 220px; height: 96px; flex: none; object-fit: contain;
  object-position: center center; }
/* Name/Ort bleiben fuer Screenreader und SEO im Markup, sind aber visuell
   nicht mehr noetig - die Logos sprechen nach der Vergroesserung fuer sich. */
.member .nm, .member .ort {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.map-box { display: block; aspect-ratio: 520 / 240; margin-top: var(--s5); }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Leitsatz ---------- */
.leitsatz { background: var(--schwarz); color: #fff; padding: var(--s8) 0; text-align: center; }
.leitsatz .inner { max-width: 820px; margin: 0 auto; }
.leitsatz p { font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 800; font-stretch: 78%;
  line-height: 1.16; letter-spacing: -.026em; margin: 0; }
.leitsatz .sub { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-top: var(--s4); font-weight: 600; }

/* ---------- Meilensteine ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px;
  width: 1px; background: var(--linie); }
.timeline li { position: relative; display: grid; grid-template-columns: 92px 1fr;
  gap: var(--s5); padding: var(--s3) 0; align-items: baseline; }
.timeline .jahr { font-weight: 800; font-stretch: 70%; font-size: 1.5rem;
  color: var(--rot-text); letter-spacing: -.02em; }
.timeline li::before { content: ""; position: absolute; left: 88px; top: 1.5em;
  width: 9px; height: 9px; background: var(--rot); z-index: 1;
  background-image: url('bilder/signet-farbig.png') !important;
  background-size: 100% 100%; background-repeat: no-repeat; }
.timeline li > span:last-child { color: var(--tinte-weich); }

/* ---------- Aktuelles ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.news { background: #fff; display: flex; flex-direction: column;
  transition: transform .55s var(--kurve), box-shadow .55s var(--kurve); }
.news:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,16,16,.1); }
.news .foto-wrap { overflow: hidden; }
.news .foto-wrap img { display: block; width: 100%; height: 190px; object-fit: cover;
  transition: transform 1s var(--kurve); }
.news:hover .foto-wrap img { transform: scale(1.05); }
.news .datum { font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot-text); padding: var(--s4) var(--s4) 0; }
.news h3 { font-size: 1.1rem; font-weight: 800; font-stretch: 84%; letter-spacing: -.018em;
  margin: var(--s2) var(--s4) var(--s2); line-height: 1.24; }
.news p { color: var(--tinte-weich); font-size: .93rem; margin: 0 var(--s4) var(--s3); flex: 1; }
.news a { margin: 0 var(--s4) var(--s4); font-weight: 700; font-size: .9rem;
  text-decoration: none; color: var(--rot-text); }
.news a:hover { text-decoration: underline; }
.news-all { margin-top: var(--s5); padding-left: 84px; }
.news-all a { font-weight: 700; text-decoration: none; }
.news-all a:hover { text-decoration: underline; }

/* ---------- Presse-Archiv (Uebersicht + Detailseiten) ---------- */
.presse-archiv-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s5); margin-top: var(--s6); }
.presse-karte { background: #fff;
  display: flex; flex-direction: column;
  transition: transform .4s var(--kurve), box-shadow .4s var(--kurve); }
.presse-karte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,16,16,.09); }
.presse-karte-foto { display: block; aspect-ratio: 16/9; overflow: hidden; }
.presse-karte-foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--kurve); }
.presse-karte:hover .presse-karte-foto img { transform: scale(1.04); }
.presse-karte-text { padding: var(--s5); border-top: 3px solid var(--rot);
  display: flex; flex-direction: column; flex: 1; }
/* Karten ohne Foto behalten die rote Linie oben am Kartenrand statt am Text */
.presse-karte:not(:has(.presse-karte-foto)) .presse-karte-text { border-top: 0; }
.presse-karte:not(:has(.presse-karte-foto)) { border-top: 3px solid var(--rot); }
.presse-karte .datum { font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot-text); margin-bottom: 8px; }
.presse-karte h3 { font-size: 1.05rem; font-stretch: 84%; margin: 0 0 var(--s3); line-height: 1.3; }
.presse-karte h3 a { color: var(--tinte); text-decoration: none; }
.presse-karte h3 a:hover { text-decoration: underline; }
.presse-karte p { color: var(--tinte-weich); font-size: .92rem; flex: 1; margin: 0 0 var(--s4); }
.presse-karte-text > a { font-weight: 700; font-size: .88rem; text-decoration: none; align-self: flex-start; }
.presse-karte-text > a:hover { text-decoration: underline; }

.presse-artikel { max-width: 760px; }
.presse-artikel .presse-zurueck { margin-bottom: var(--s5); }
.presse-artikel .presse-zurueck a { font-weight: 700; text-decoration: none; font-size: .9rem; }
.presse-artikel .presse-zurueck a:hover { text-decoration: underline; }
.presse-artikel .datum { font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot-text); margin-bottom: var(--s3); }
.presse-artikel h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-stretch: 80%;
  line-height: 1.15; margin: 0 0 var(--s6); }
.presse-foto { display: block; margin: 0 0 var(--s6); }
.presse-foto img { width: 100%; height: auto; display: block; }
.presse-artikel p { font-size: 1.02rem; line-height: 1.75; color: var(--tinte-weich);
  margin: 0 0 var(--s4); }
.presse-detail { padding-top: var(--s8); }

@media (max-width: 900px) {
  .presse-archiv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .presse-archiv-grid { grid-template-columns: 1fr; }
}

/* ---------- Kontakt / Formular ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s7); align-items: start; }
.addr { font-style: normal; color: var(--tinte-weich); margin-top: var(--s4); line-height: 1.8; }
.inquiry { background: #fff; padding: var(--s6); }
.inquiry h3 { font-size: 1.3rem; font-weight: 800; font-stretch: 82%; margin: 0 0 var(--s1); }
.inquiry .sub { color: var(--tinte-weich); font-size: .93rem; margin: 0 0 var(--s4); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: .95rem;
  border: 1px solid var(--linie); background: var(--papier); color: var(--tinte);
  transition: border-color .35s var(--kurve), background .35s var(--kurve); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rot); background: #fff; }
.field textarea { min-height: 128px; resize: vertical; }
.field.check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem;
  color: var(--tinte-weich); }
.field.check input { width: auto; accent-color: var(--rot); margin-top: 3px; }
.form-note { font-size: .78rem; color: var(--tinte-zart); margin: var(--s3) 0 0; }
.form-status { margin: var(--s3) 0 0; padding: 12px 16px; font-size: .9rem; border-left: 4px solid; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.disclaimer { font-size: .8rem; color: var(--tinte-zart); margin-top: var(--s5); }

/* ---------- Footer ---------- */
footer.site { background: var(--schwarz); color: rgba(255,255,255,.72); padding: var(--s7) 0 var(--s4); }
footer.site .foot-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--linie-hell); }
footer.site .foot-brand img { height: 36px; width: auto; margin-bottom: var(--s3); }
footer.site h4 { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--s3); font-weight: 700; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 10px; }
footer.site a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .92rem;
  transition: color .35s var(--kurve); }
footer.site a:hover { color: #fff; }
footer.site p { font-size: .92rem; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  flex-wrap: wrap; padding-top: var(--s4); font-size: .82rem; color: rgba(255,255,255,.5); }
/* Dezenter Hinweis auf den Ersteller - bewusst klein und erst im Footer,
   nicht Teil des BMV-Markenauftritts selbst. */
.made-by { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.5);
  text-decoration: none; transition: color .3s var(--kurve); }
.made-by:hover { color: rgba(255,255,255,.8); }
.made-by img { height: 26px; width: auto; display: block; }

/* ---------- Auftritt ---------- */
.auftritt { opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--kurve), transform .9s var(--kurve); }
.auftritt.da { opacity: 1; transform: none; }
.v1 { transition-delay: .07s; } .v2 { transition-delay: .16s; }
.v3 { transition-delay: .25s; } .v4 { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .maske > *, .auftritt, .keil-flaeche, .keil-strich, .keil-licht, .keil-linie-oben,
  .hero-bild img, .hero-bild::before, .kapitel .strich, .masslinie::before, .hero-linie-unten,
  .zr::after, .h-keil {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-bild { clip-path: none !important; animation: none !important; }
}

/* ========================= BREAKPOINTS ========================= */
@media (max-width: 1199px) {
  :root { --hero-h: 560px; --versatz: 166px; --keil-x: 78px; }
  .navi { gap: var(--s4); }
  .member-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  :root { --hero-h: auto; }
  /* Links waren vorher komplett ausgeblendet (display:none) - jetzt per
     Schalter erreichbare Schublade statt ersatzlos verschwunden. */
  .navi-schalter { display: flex; order: 2; }
  .kopf-innen { flex-wrap: wrap; }
  .navi { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; max-height: 0; overflow: hidden;
    transition: max-height .4s var(--kurve); }
  .navi.auf { max-height: 420px; }
  .navi a:not(.tat-klein) { display: block; padding: 14px 0;
    border-top: 1px solid var(--linie-zart); }
  .navi a::after { display: none; }
  .navi .tat-klein { margin: var(--s3) 0; text-align: center; }
  .leiste-innen { justify-content: center; gap: var(--s3); flex-wrap: wrap; }
  .hero { height: auto; }
  .hero-raster { grid-template-columns: 1fr; }
  .hero-text { padding: var(--s6) 0; }
  .hero-bild { margin-inline: calc(var(--rand) * -1); height: 320px; }
  .hero-bild .rahmen { inset: 0; }
  .hero-bild img { height: 100%; }
  .keil-flaeche, .keil-strich, .keil-licht, .keil-linie-oben, .hero-linie-unten { display: none; }
  /* Das Foto selbst wischt im Keil-Winkel ein statt nur einzublenden -
     deutlich naeher am "krassen" Desktop-Erlebnis (Keil faehrt ueber das
     Bild) als die vorherige reine Opacity-Ueberblendung. Schraege Kante
     ist waehrend des Wischens klar sichtbar, glaettet sich am Ende zu
     einem sauberen Rechteck - keine dauerhafte Diagonal-Beschneidung. */
  .hero-bild { clip-path: polygon(0 0, 0% 0, -18% 100%, 0% 100%); }
  .los .hero-bild { animation: mobil-keil-wisch 1.3s cubic-bezier(.65,0,.35,1) .3s forwards; }
  @keyframes mobil-keil-wisch {
    0%   { clip-path: polygon(0 0, 0% 0, -18% 100%, 0% 100%); }
    65%  { clip-path: polygon(0 0, 100% 0, 84% 100%, 0% 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  }
  /* Der rote Streifen wischt von links ein - gleiche Bewegungssprache wie
     die Masslinie darueber (scaleX, Ursprung links). Ersetzt die
     Keil-Balken-Animation der Desktop-Buehne, die es auf Mobil nicht mehr
     gibt (eigene, nicht ueberlappende Bildbox statt Keil-Ueberlagerung). */
  /* Schraeg abgeschnittene Ecke statt gerader Linie - nimmt den Winkel des
     Logo-Keils lokal am rechten Ende auf, statt die ganze Linie flach zu
     kippen (waere bei der Breite kaum sichtbar gewesen). Das war Lars'
     Hauptkritik: eine gerade Linie hat keinen Bezug zur Marke. */
  .hero-bild::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: calc(var(--linie-h) + 16px); background: var(--rot); z-index: 5;
    clip-path: polygon(0 0, 100% 0, 100% 35%, calc(100% - 26px) 100%, 0 100%);
    transform-origin: left; transform: scaleX(0);
    transition: transform 1.1s var(--kurve) .5s; }
  .los .hero-bild::before { transform: scaleX(1); }
  .hero-bild::after { background: linear-gradient(180deg, rgba(14,14,14,.45), transparent 42%); }
  .block { padding: var(--s7) 0; }
  /* Weniger Hoehe als vorher: die Sektion war auf dem Handy extrem
     hochformatig (Breite:Hoehe ~0,31), das Hintergrundfoto musste dadurch
     fast quadratisch auf einen schmalen Streifen zusammengeschnitten
     werden ("sieht nicht jeden"). Kompaktere Abstaende lassen mehr von
     der Bildbreite stehen. */
  .zahlen { padding: var(--s4) 0 var(--s3); }
  .zahlenreihe { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s3); }
  .zahlen-titel { margin-bottom: var(--s3); font-size: 1.5rem; }
  .zr { padding-top: var(--s2); }
  .zr-icon { width: 26px; height: 26px; margin-bottom: 6px; }
  .zr-wert { font-size: 2.1rem !important; }
  .zahlen-grund { opacity: .82; }
  .zahlen::after { background: linear-gradient(180deg, rgba(14,14,14,.6), rgba(14,14,14,.32) 45%, rgba(14,14,14,.74)); }
  .services, .partner-grid, .news-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .service p { min-height: 0; }
  .member-grid { grid-template-columns: 1fr 1fr; }
  .member, .member > span { min-width: 0; }
  .member .nm, .member .ort { overflow-wrap: break-word; }
  footer.site .foot-main { grid-template-columns: 1fr 1fr; }
  /* Signet bleibt NEBEN der Ueberschrift wie auf dem Desktop (vorher auf
     Mobil per position:static + transform:none !important komplett anders
     gebaut - stand ueber dem Text statt daneben und hatte keine
     Einwisch-Animation mehr). Nur kleinerer Platzhalter + kleineres Signet. */
  .sect, .sect-intro, .news-all { padding-left: 50px; }
  .h-keil { width: 34px; height: 33px; }
}
@media (max-width: 580px) {
  /* 2 statt 1 Spalte + kleinere Logos: eine Spalte mit grossen Logos
     bedeutete 20× volle Kachelbreite untereinander - sehr viel Scrollen
     fuer wenig Informationsdichte. */
  .member-grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .member .plogo { max-width: 130px; height: 64px; }
  /* Manche Kacheln (SVG-Logos ohne <picture>-Wrapper, z.B. Fröhle/Hamann)
     waren ca. 8,5 px niedriger als die uebrigen - vermutlich ein
     Rendering-Unterschied zwischen eingebetteten SVGs und <picture>-Bildern
     bei der Hoehenberechnung. Feste Hoehe statt die Ursache zu jagen:
     64 px Logo + 24 px (--s3) Abstand = 88 px, erzwungen fuer alle. */
  .member { height: 88px; }
  .frow { grid-template-columns: 1fr; }
  .tat { width: 100%; } .tat span { flex: 1; }
  footer.site .foot-main { grid-template-columns: 1fr; }
  .timeline::before { left: 5px; }
  .timeline li { grid-template-columns: 1fr; gap: var(--s1); padding-left: var(--s4); }
  .timeline li::before { left: 1px; top: .9em; }
  .inquiry { padding: var(--s4); }
}

/* .disclaimer liegt im dunklen Kontaktblock: der helle Grauton erreicht
   dort nur 3,69:1. */
.leitsatz .disclaimer, .zahlen .disclaimer, footer.site .disclaimer,
.block .disclaimer { color: var(--tinte-zart); }
.zahlen .disclaimer, footer.site .disclaimer { color: rgba(255,255,255,.62); }

/* Hervorhebung im Leitsatz – ohne Regel bliebe sie weiss */
.leitsatz .rot { color: var(--rot-hell); }
.leitsatz .satz + * { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-top: var(--s4); font-weight: 600; }

/* ======================== STANDORTKARTE ======================== */
.karte-block { background: var(--papier-2); }
.karte-raster { display: grid; grid-template-columns: 230px 1.6fr .8fr;
  gap: var(--s4); align-items: center; }
/* Eigene Spalte fuer die Infotafel: so verdeckt sie die Karte nicht mehr. */
.karte-tafel { position: relative; min-height: 300px; }

.karte-feld { margin: 0; position: relative; }
#karte {
  width: 100%; height: auto; max-height: 1100px; display: block;
  /* hidden ist Pflicht, sobald gezoomt wird - sonst laeuft die vergroesserte
     Karte ueber ihren Rahmen in Liste und Kopfbereich. */
  overflow: hidden;
}

/* Umriss zeichnet sich beim Erscheinen selbst */
.de-umriss {
  fill: rgba(16,16,16,.045); stroke: rgba(16,16,16,.32); stroke-width: 2.2;
  stroke-linejoin: round;
  /* Bewusst nur ein- statt nachgezeichnet: stroke-dashoffset zwingt den
     Browser, den 400-Punkte-Pfad in JEDEM Bild neu zu rastern – das kostete
     rund 8 fps. Einblenden laeuft auf der Grafikkarte. */
  opacity: 0; transform: translateY(14px);
}
.land-grenze { fill: none; stroke: var(--linie); stroke-width: 1.3; pointer-events: none; }
.karte-feld.da .de-umriss { opacity: 1; transform: none; }

/* Standortpunkt: Keil-Signet statt Kreis – gleiche Form wie im Hero */
.ort { cursor: pointer; opacity: 0; transform: scale(.4); transform-origin: center;
  transition: opacity .5s var(--kurve), transform .6s var(--kurve); transform-box: fill-box; }
.karte-feld.da .ort { opacity: 1; transform: none; }
.ort-mark { fill: var(--rot); transition: fill .3s var(--kurve); }
.ort-ring { fill: none; stroke: var(--rot); stroke-width: 2.5; opacity: 0;
  transform-origin: center; transform-box: fill-box;
  transition: opacity .25s ease-out; }
.ort:hover .ort-mark, .ort.aktiv .ort-mark { fill: var(--rot-tief); }
/* Fester Ring als Markierung PLUS ein pulsierender darueber. Vorher gab es
   nur den Puls - der endet bei Deckkraft 0 und war damit kaum zu sehen. */
.ort:hover .ort-ring, .ort.aktiv .ort-ring { opacity: 1; }
.ort:hover .ort-puls, .ort.aktiv .ort-puls {
  animation: puls 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes puls { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.ort-puls { fill: none; stroke: var(--rot); stroke-width: 3; opacity: 0;
  transform-origin: center; transform-box: fill-box; }

/* Sprechblase */
.ort-blase {
  /* Sitzt fest oben links auf der freien Flaeche neben dem Kartenumriss.
     Vorher stand sie ueber dem Punkt und verdeckte genau die Standorte,
     die man sehen wollte. */
  position: absolute; z-index: 5; pointer-events: none;
  left: 0; top: 50%; transform: translateY(calc(-50% + 46px)); width: 100%;
  background: var(--schwarz); color: #fff; padding: var(--s3) var(--s4);
  font-size: .95rem; line-height: 1.4;
  opacity: 0; transform: translateY(10px);
  transition: opacity .75s var(--kurve), transform .95s var(--kurve); }
.ort-blase.an { opacity: 1; transform: translateY(-50%); }
.ort-blase { display: block; }
.ort-blase img { width: 168px; height: 86px; object-fit: contain;
  background: #fff; padding: 8px 12px; display: block; margin-bottom: var(--s3); }
.ort-blase .anz { display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rot-hell);
  margin: 6px 0 var(--s2); }
.ort-blase ul { list-style: none; margin: 0; padding: var(--s2) 0 0;
  border-top: 1px solid rgba(255,255,255,.18); font-size: .82rem; }
.ort-blase li { color: rgba(255,255,255,.8); margin-bottom: 4px; break-inside: avoid; }
.ort-blase b { display: block; font-weight: 800; font-stretch: 82%; font-size: 1.2rem;
  letter-spacing: -.012em; line-height: 1.15; }
.ort-blase-link { display: inline-block; margin-top: var(--s2); font-size: .82rem;
  font-weight: 700; color: var(--rot-hell); text-decoration: none; }
.ort-blase-link:hover { text-decoration: underline; }
/* Passender Hinweistext je Eingabeart - "Fahren Sie über" ergibt auf einem
   Touchscreen ohne Hover keinen Sinn. */
.nur-touch { display: none; }
@media (hover: none) { .nur-maus { display: none; } .nur-touch { display: inline; } }
.ort-blase .bt span { color: rgba(255,255,255,.72); font-size: .82rem; }

.karte-zahl { margin: 0 0 var(--s5); display: flex; align-items: baseline;
  gap: var(--s7); flex-wrap: wrap; }
.kz-paar { display: flex; align-items: baseline; gap: var(--s3); }
.kz-wert { font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; font-stretch: 66%;
  letter-spacing: -.05em; line-height: .9; }
.kz-name { font-size: .8rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tinte-zart); }

/* Feste Spaltenzahl statt auto-fill: so stehen immer gleich viele Logos
   pro Zeile, unabhaengig von der zufaelligen Breite einzelner Logos.
   4 Spalten gewaehlt, weil 20 Gesellschafter / 4 = exakt 5 volle Reihen
   (3 Spalten liess eine letzte Reihe mit nur 2 Eintraegen zurueck). */
.karte-liste { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.karte-liste li { margin: 0; }
.karte-liste button {
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: none; border: 0; padding: 6px 2px; cursor: pointer; text-align: center;
  font: inherit; color: var(--tinte);
  transition: transform .3s var(--kurve); }
.karte-liste button:hover, .karte-liste button.aktiv { transform: translateY(-2px); }
/* Kein weisser Kasten mehr - Logo liegt direkt auf der Seitenflaeche,
   genau wie bei den Gesellschafter-Kacheln. Nur die Logos, Name/Ort bleiben
   fuer Screenreader/SEO im Markup, sind aber visuell nicht mehr noetig
   (Lars: "reicht wenn man die Logos sieht"). */
.karte-liste .ll { width: 100%; height: 156px; display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; color: var(--tinte-zart); }
.karte-liste .ll img { max-width: 100%; max-height: 150px; object-fit: contain;
  object-position: center center; display: block;
  transition: filter .35s var(--kurve); }
.karte-liste button:hover .ll img, .karte-liste button.aktiv .ll img {
  filter: drop-shadow(0 4px 10px rgba(16,16,16,.18)); }
.karte-liste .ln, .karte-liste .lo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.karte-hinweis { font-size: .78rem; color: var(--tinte-zart); margin: var(--s5) 0 0;
  padding-top: var(--s3); border-top: 1px solid var(--linie-zart); }

@media (prefers-reduced-motion: reduce) {
  .de-umriss { stroke-dashoffset: 0 !important; transition: none; }
  .ort { opacity: 1 !important; transform: none !important; transition: none; }
  .ort:hover .ort-puls, .ort.aktiv .ort-puls { animation: none; }
}
@media (max-width: 1100px) {
  .karte-raster { grid-template-columns: 1fr; gap: var(--s5); }
  .karte-tafel { min-height: 0; }
  .ort-blase { position: relative; top: 0; transform: none; }
  .ort-blase.an { transform: none; }
  #karte { max-height: 460px; margin: 0 auto; }
  /* Reihenfolge per Grid-"order" getauscht: die Infotafel (.karte-tafel)
     stand im Markup VOR der Karte und wuchs/schrumpfte je nach gewaehltem
     Gesellschafter (unterschiedlich viele Standorte in der Liste) - dadurch
     sprang die darunterliegende Karte sichtbar nach oben/unten. Jetzt
     steht die Karte an fester erster Position, die Infotafel darunter. */
  .karte-feld { order: 1; }
  .karte-tafel { order: 2; }
  .karte-seite { order: 3; }
  /* Logo-Liste mit Hover/Zoom-Verhalten raus: auf Touch gibt es laengst
     die Marker direkt auf der Karte zum Antippen (siehe beruehrung-Weiche
     in v6.js) - die Buttons darunter waren eine doppelte, aber nicht
     gleichwertige zweite Bedienung fuer dieselbe Aktion und Grund fuer
     Verwirrung/Ruckler. Die Kennzahlen (20/116) bleiben sichtbar. */
  .karte-liste { display: none; }
}



/* Filialen: feine Punkte hinter den Hauptsitz-Keilen. Erst zusammen
   ergeben sie das eigentliche Argument - 100 Standorte statt 20. */
.filiale {
  /* Heller Kern mit rotem Ring statt voller Flaeche: beim Hineinzoomen
     liegen die Punkte sonst farbgleich auf den Hauptmarken und beides
     verschwimmt zu einem roten Fleck. */
  fill: var(--papier); stroke: var(--rot); stroke-width: 3;
  opacity: 0; transform: scale(.3); transform-origin: center;
  transform-box: fill-box;
  transition: opacity .5s var(--kurve), transform .6s var(--kurve);
}
.karte-feld.da .filiale { opacity: .38; transform: none; }
/* Wird ein Gesellschafter hervorgehoben, treten seine Standorte hervor
   und alle anderen nehmen sich zurueck. */
/* Beim Hervorheben schnell reagieren - die lange Auftrittskurve ist nur
   fuer das erste Erscheinen gedacht, nicht fuers Filtern. */
#karte.gefiltert .filiale { opacity: .1; transition: opacity .12s ease-out; }
#karte.gefiltert .filiale.aktiv {
  opacity: 1; transform: scale(1.7); stroke-width: 4;
  transition: opacity .1s ease-out, transform .18s var(--kurve);
  transition-delay: 0s !important; }
/* Hauptmarke beim Zoom zuruecknehmen, damit die Standorte lesbar bleiben */
#karte.gefiltert .ort image { opacity: .45; transition: opacity .2s ease-out; }
#karte.gefiltert .ort.aktiv image { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .filiale { opacity: .34 !important; transform: none !important; transition: none; }
}

/* Sichtbarer Bau-Stempel, damit auf einen Blick klar ist, welche Fassung
   im Browser liegt. Vor dem Kundentermin entfernen. */
#bauvers { position: fixed; right: 0; bottom: 0; z-index: 99;
  background: #E30613; color: #fff; font: 700 12px/1 'Archivo', sans-serif;
  padding: 8px 12px; letter-spacing: .04em; }

/* Zoomfahrt auf das Gebiet eines Gesellschafters. transform-origin oben links,
   weil die Verschiebung in der viewBox gerechnet wird. */
.karte-buehne {
  transform-origin: 0 0;
  /* Sanft anfahren UND sanft ausrollen - die reine ease-out-Kurve liess
     die Fahrt abrupt beginnen. */
  /* Langsam heranfahren statt hineinspringen. */
  transition: transform 2.4s cubic-bezier(.33, 0, .15, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .karte-buehne { transition: none; }
}

/* ================= Nacharbeiten nach Rueckmeldung ================= */

/* Buttons der beiden Partner-Karten auf gleicher Hoehe: Karte als Spalte,
   Button per auto-Abstand nach unten gedrueckt. Vorher richtete er sich
   nach der Laenge der Aufzaehlung darueber. */
.partner-grid { align-items: stretch; }
.partner-box { display: flex; flex-direction: column; }
.partner-box ul { margin-bottom: var(--s5); }
.partner-box .btn { margin-top: auto; align-self: flex-start; }


/* Karte weiter nach links ruecken - NUR Desktop/Tablet (ab 1101px).
   War zuvor ohne eigene Media Query gesetzt und ueberschrieb dadurch die
   mobile Stapel-Regel (.karte-raster { grid-template-columns: 1fr }),
   weil diese Regel textlich spaeter in der Datei steht. Ergebnis auf
   Mobil: 0px breite Mittelspalte, Karte verschwand, Seite lief
   horizontal ueber. */
@media (min-width: 1101px) {
  /* Listen-Spalte verbreitert (vorher .9fr) - bei grossen Logos (156 px
     Zeilenhoehe) war die Spalte selbst der limitierende Faktor, nicht nur
     die Hoehe: ein breites Logo stiess an max-width:100% der Zelle, lange
     bevor es die volle Hoehe ausnutzen konnte. */
  /* Kartenspalte vergroessert (vorher .95fr) - Lars wollte die Karte
     selbst groesser, nicht nur die Logos daneben. */
  .karte-raster { grid-template-columns: 220px 1.95fr .85fr; }
  .karte-feld { justify-self: start; width: 100%; }
  #karte { margin-left: -4%; }
}

@media (max-width: 1100px) {
  #karte { margin-left: 0; }
  .member .nm { white-space: normal; }
}

/* Hauptmarken dunkel umrissen: liegen Standortpunkte daneben oder darunter,
   verschwimmt sonst beides zu einer roten Flaeche. drop-shadow folgt der
   Silhouette des Logo-Zeichens, ein Rahmen wuerde nur ein Rechteck geben. */
.ort image {
  filter:
    drop-shadow(0 0 1px var(--schwarz))
    drop-shadow(0 0 1px var(--schwarz))
    drop-shadow(0 1px 2px rgba(14,14,14,.45));
}
/* Standortpunkte heller absetzen, damit sie auf der Marke lesbar bleiben */
.filiale { stroke-width: 3.5; }
/* Steht bewusst als LETZTE Regel: der gewaehlte Gesellschafter leuchtet in
   Vollfarbe auf, alle anderen Standorte treten zurueck. */
#karte.gefiltert .filiale.aktiv {
  fill: var(--rot) !important;
  stroke: var(--papier) !important;
  stroke-width: 2 !important;
  opacity: 1 !important;
  transform: scale(1.75);
}

/* Abdeckung und Balken liegen jetzt im SELBEN SVG-Koordinatensystem des
   Hero. Vorher lag die Flaeche im Bildcontainer (700 px) und der Balken im
   Hero (1600 px) - jede Kantenkorrektur wirkte an beiden Enden anders und
   der Balken wurde ungleich breit ueberdeckt. */
.hero-deck { display: none; }

/* Foto direkt beschneiden statt mit einer schwarzen Flaeche abdecken.
   Vorher gab es zwei Kanten (Flaeche + Balken), die nie exakt zusammenfielen,
   weil .hero-bild durch margin-right breiter ist als seine Box.
   NUR Desktop: Auf Mobil ist .hero-bild eine eigene, nicht ueberlappende
   Bildbox OHNE Keil-Schnitt - der Diagonal-Clip war hier vorher nicht
   auf Desktop beschraenkt und schnitt auf Mobil den halben roten
   Start-Streifen und das Foto schraeg weg ("Streifen versetzt/fehlerhaft"). */
.keil-flaeche { display: none; }
@media (min-width: 961px) {
  .hero-bild {
    clip-path: polygon(
      calc(var(--keil-x) + var(--versatz)) 0,
      100% 0, 100% 100%, var(--keil-x) 100%);
  }
}

/* ============ Hero-Buehne: Foto + Kante + Balken in einem SVG ============ */
.hero-buehne {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; overflow: hidden;
}
#hero-foto { opacity: 0; transition: opacity 2.4s ease-in-out 1s; }
.los #hero-foto { opacity: 1; }
#hero-strich-pfad { fill: var(--rot); stroke: none; }
/* Wischmaske legt den Balken gleichmaessig von links nach rechts frei */
.hero-buehne {
  -webkit-mask-image: none; mask-image: none;
}
#hero-strich-pfad {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.9s linear .2s;
}
.los #hero-strich-pfad { clip-path: inset(0 0 0 0); }

/* Alte Einzelteile + die neue Buehne sind NUR fuer den breiten Desktop-Hero
   gebaut (feste Breite:Hoehe-Proportion, Keil quer ueber die rechte Haelfte).
   Auf Mobil stapelt .hero-raster Text ueber Bild (siehe @media 960px) -
   dafuer ist .hero-bild als einfache, nicht ueberlappende Box gedacht.
   Diese Regel war vorher OHNE Media Query gesetzt und blendete .hero-bild
   dadurch auch auf Mobil aus - gleichzeitig blieb #hero-buehne dort sichtbar
   und ueberdeckte als viel zu grosser Keil die Buttons ("Streifen laeuft
   hoch und schneidet die Buttons ab"). */
@media (min-width: 961px) {
  .hero-bild, .keil-flaeche, .keil-strich, .keil-licht, .hero-strich, .hero-deck { display: none; }
}
@media (max-width: 960px) {
  .hero-buehne { display: none; }
}

/* SVG darf nie ueber den Hero hinauswachsen */
#hero-buehne { max-width: 100%; max-height: 100%; }

/* ===== Foto (ehem. Kennzahlen) liegt jetzt hinter Beschaffung/Marketing/Vertrieb ===== */
.leist-foto { position: relative; overflow: hidden; background: var(--schwarz); color: #fff; }
.leist-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,14,14,.78), rgba(14,14,14,.6) 50%, rgba(14,14,14,.82)); }
.leist-foto .wrap { position: relative; z-index: 2; }
.leist-foto .sect, .leist-foto .service h3 { color: #fff; }
.leist-foto .sect-intro, .leist-foto .service p, .leist-foto .service li { color: rgba(255,255,255,.82); }
.leist-foto .service { border-top-color: rgba(255,255,255,.28); }
/* Kennzahlen ohne Foto: ruhiger dunkler Verlauf */
.zahlen { background: linear-gradient(180deg, #141414, #1D1D1B); }
.zahlen::after, .zahlen::before { display: none; }

/* Kacheln: weiss transparent, Zeilen (Titel / Text / Liste) auf gleicher Hoehe */
.leist-foto .services { grid-template-rows: auto auto 1fr; row-gap: var(--s5); }
.leist-foto .service { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-top: 3px solid var(--rot);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: var(--s5); }
.leist-foto .service p { min-height: 0; }
@media (max-width: 960px) {
  .leist-foto .services { grid-template-rows: none; }
  .leist-foto .service { display: block; grid-row: auto; }
}
/* Karte: Logo-Spalte bekommt wieder Platz, Infotafel schmaler */
@media (min-width: 1101px) {
  .karte-raster { grid-template-columns: 190px 1.35fr 1.35fr; }
  .karte-liste { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .karte-liste .ll { height: 112px; }
  .karte-liste .ll img { max-height: 106px; }
}

/* ===== Karte gross, Logos darunter in voller Breite (Desktop) ===== */
@media (min-width: 1101px) {
  .karte-raster { grid-template-columns: 1fr minmax(0, 720px) 1fr; align-items: center;
    gap: var(--s5) var(--s5); }
  .karte-seite { display: contents; }
  .karte-tafel { grid-column: 1; grid-row: 1; align-self: center; }
  .karte-feld { grid-column: 2; grid-row: 1; justify-self: center; width: 100%; }
  #karte { margin: 0; max-height: 960px; }
  .karte-zahl { grid-column: 3; grid-row: 1; align-self: center; justify-self: end;
    flex-direction: column; gap: var(--s5); margin: 0; }
  .karte-liste { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(5, 1fr);
    gap: var(--s4) var(--s5); margin-top: var(--s5); }
  .karte-liste .ll { height: 120px; }
  .karte-liste .ll img { max-height: 112px; }
}

/* ===== Desktop: Karte links, Logos rechts daneben; Infotafel ueber der Karte ===== */
@media (min-width: 1101px) {
  .karte-raster { grid-template-columns: minmax(0, 660px) 1fr; align-items: center; gap: var(--s6); }
  .karte-seite { display: block; grid-column: 2; grid-row: 1; }
  .karte-feld { grid-column: 1; grid-row: 1; width: 100%; }
  .karte-tafel { grid-column: 1; grid-row: 1; align-self: start; justify-self: start;
    z-index: 3; width: 250px; min-height: 0; pointer-events: none; }
  .karte-tafel > * { pointer-events: auto; }
  .karte-zahl { flex-direction: row; justify-self: auto; margin: 0 0 var(--s5); gap: var(--s6); }
  .karte-liste { grid-column: auto; grid-row: auto; grid-template-columns: repeat(3, 1fr);
    margin-top: 0; gap: var(--s4) var(--s4); }
  .karte-liste .ll { height: 118px; }
  .karte-liste .ll img { max-height: 110px; }
}

/* ===== Mobil ===== */
@media (max-width: 960px) {
  .kopf-innen { row-gap: 0; }
  .marke { flex-shrink: 0; }
  /* Foto im Logo-Winkel (16,5 Grad): schraege Kante + roter Keil-Streifen wie auf dem Desktop */
  .hero-bild { --mk: 86px; height: 300px;
    clip-path: polygon(var(--mk) 0, var(--mk) 0, 0 100%, 0 100%); }
  .los .hero-bild { animation: mobil-keil-wisch2 1.3s cubic-bezier(.65,0,.35,1) .3s forwards; }
  @keyframes mobil-keil-wisch2 {
    0%   { clip-path: polygon(86px 0, 86px 0, 0 100%, 0 100%); }
    100% { clip-path: polygon(86px 0, 100% 0, 100% 100%, 0 100%); }
  }
  .hero-bild::before { inset: 0; height: auto; top: 0; left: 0; right: 0; bottom: 0;
    clip-path: polygon(86px 0, 112px 0, 26px 100%, 0 100%);
    transform: none; opacity: 0; transition: opacity .8s ease .9s; }
  .los .hero-bild::before { opacity: 1; transform: none; }
}
@media (max-width: 1100px) { .karte-zahl { display: none; } }

#karte, .ort { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.filiale { pointer-events: none; }

/* Logos: 4 Spalten = 5 volle Reihen (20 Gesellschafter) */
@media (min-width: 1101px) {
  .karte-raster { grid-template-columns: minmax(0, 620px) 1fr; }
  .karte-liste { grid-template-columns: repeat(4, 1fr); gap: var(--s3) var(--s3); }
  .karte-liste .ll { height: 100px; }
  .karte-liste .ll img { max-height: 94px; }
}

/* Foto hinter Beschaffung/Marketing/Vertrieb: ungeschnitten, alle Personen sichtbar */
.leist-foto picture { position: absolute; inset: 0 0 auto 0; display: block; z-index: 0;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.leist-foto .zahlen-grund { position: static; width: 100%; height: auto; object-fit: contain; opacity: .95; display: block; }
.leist-foto::after { background: linear-gradient(180deg, rgba(14,14,14,.5), rgba(14,14,14,.3) 40%, rgba(14,14,14,.55)); }
.leist-foto .sect, .leist-foto .sect-intro { text-shadow: 0 2px 14px rgba(0,0,0,.75); }
@media (max-width: 960px) {
  .leist-foto { padding-top: 0; }
  .leist-foto picture { position: relative; inset: auto; }
  .leist-foto::after { display: none; }
  .leist-foto .wrap { margin-top: 0; padding-top: var(--s5); }
  /* Hero-Foto mobil: Foto steht fest im Keil, nur Streifen zeichnet sich, Foto blendet ein */
  .hero-bild { clip-path: polygon(86px 0, 100% 0, 100% 100%, 0 100%); }
  .los .hero-bild { animation: none; }
  .hero-bild::before { opacity: 1; transition: none; clip-path: polygon(0 100%, 26px 100%, 26px 100%, 0 100%); }
  .los .hero-bild::before { animation: mobil-streifen 1.1s cubic-bezier(.65,0,.35,1) .2s forwards; }
  @keyframes mobil-streifen {
    0%   { clip-path: polygon(0 100%, 26px 100%, 26px 100%, 0 100%); }
    100% { clip-path: polygon(86px 0, 112px 0, 26px 100%, 0 100%); }
  }
}

/* Ueberschriften: engere Schrift hatte die Wortabstaende verschluckt ("Wirbuendeln") */
h1, h2, h3, .zahlen-titel, .titel { word-spacing: .16em; }

/* Desktop: Foto hinter Beschaffung/Marketing/Vertrieb dezenter */
@media (min-width: 961px) {
  .leist-foto .zahlen-grund { opacity: .4; }
  .leist-foto::after { background: linear-gradient(180deg, rgba(14,14,14,.55), rgba(14,14,14,.4) 40%, rgba(14,14,14,.6)); }
}

/* Mobil: Hero-Foto-Animation - Linie laeuft von links ein, steigt als Keil auf, Foto blendet ein */
@media (max-width: 960px) {
  .hero-bild::before { clip-path: polygon(0 calc(100% - 6px), 0 calc(100% - 6px), 0 100%, 0 100%); animation: none !important; }
  .los .hero-bild::before { animation: none !important; }
  .hero-bild.mz::before { animation: mobil-balken 1.6s cubic-bezier(.65,0,.35,1) .1s forwards !important; }
  @keyframes mobil-balken {
    0%   { clip-path: polygon(0 calc(100% - 6px), 0 calc(100% - 6px), 0 100%, 0 100%); }
    40%  { clip-path: polygon(0 calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 0 100%); }
    100% { clip-path: polygon(86px 0, 112px 0, 26px 100%, 0 100%); }
  }
  .los .hero-bild img { opacity: 0; }
  .los .hero-bild.mz img { opacity: 1; transition: opacity 1.4s ease-in-out 1s; }
}

/* Mobil: Texte nutzen die Bildschirmbreite besser */
@media (max-width: 700px) {
  .sect-intro { padding-left: 0; }
  .leist-foto .service { padding: 22px 18px; }
  .partner-box { padding: 24px 20px; }
  .presse-karte-text, .news .txt { padding-inline: 20px; }
  .service li, .partner-box li { line-height: 1.5; margin-bottom: 8px; }
  .service p, .partner-box .sub, .sect-intro { line-height: 1.6; }
  .sect-breit { max-width: none; }
}

/* Web: Foto hinter Beschaffung nur noch als zarter Hintergrund */
@media (min-width: 961px) {
  .leist-foto .zahlen-grund { opacity: .22 !important; }
  .leist-foto::after { background: linear-gradient(180deg, rgba(14,14,14,.45), rgba(14,14,14,.3) 40%, rgba(14,14,14,.5)); }
}

/* Mobil: roter Balken wie am Desktop - duenne Linie unten, Keil, duenne Linie oben; Wischen von links */
@media (max-width: 960px) {
  .hero-bild::before, .los .hero-bild::before, .hero-bild.mz::before {
    clip-path: polygon(0 calc(100% - 6px), 2px calc(100% - 6px), 86px 0, 100% 0, 100% 6px, 110px 6px, 26px 100%, 0 100%) !important;
    opacity: 1 !important; transition: none !important;
    -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: left center; mask-position: left center;
    -webkit-mask-size: 0% 100%; mask-size: 0% 100%;
    animation: none !important; }
  .hero-bild.mz::before { animation: mobil-wisch 1.9s linear .15s forwards !important; }
  @keyframes mobil-wisch {
    from { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
    to   { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  }
}

/* Web: Foto nur ganz dezent, scharf (kein Weichzeichner der Kacheln mehr) */
@media (min-width: 961px) {
  .leist-foto .zahlen-grund { opacity: .11 !important; filter: grayscale(.35); }
  .leist-foto .service { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.07); }
}

/* ===== Karte (Desktop): Infotafel LINKS NEBEN der Karte, verdeckt nichts ===== */
.ort-ring, .ort-puls { pointer-events: none; }
@media (min-width: 1101px) {
  .karte-block .wrap { max-width: 1680px; }
  .karte-raster { grid-template-columns: 230px minmax(0, 600px) 1fr; gap: var(--s5); align-items: center; }
  .karte-tafel { position: relative; grid-column: 1; grid-row: 1; width: auto; z-index: auto;
    pointer-events: auto; min-height: 300px; align-self: center; justify-self: stretch; }
  .karte-feld { grid-column: 2; grid-row: 1; }
  .karte-seite { display: block; grid-column: 3; grid-row: 1; }
}
@media (min-width: 1101px) {
  .karte-raster { align-items: start; }
  .karte-tafel { align-self: center; }
  .karte-feld { align-self: center; }
  .karte-zahl { margin-bottom: var(--s4); }
  .karte-liste { grid-template-columns: repeat(2, 1fr); gap: 6px var(--s4); }
  .karte-liste .ll { height: 76px; }
  .karte-liste .ll img { max-height: 70px; }
  .karte-liste button { padding: 2px; }
}

/* Karten-Platzhalter (Klick laedt Google Maps) */
.map-laden { position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; background: var(--papier-2);
  color: var(--tinte); font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.3; display: grid; place-content: center; gap: 6px; text-align: center; padding: var(--s4); }
.map-laden small { font-weight: 400; font-size: .78rem; color: var(--tinte-weich); }
.map-laden:hover { background: #e4e6e0; }
.map-box iframe[hidden] { display: none; }

/* Desktop: Tafel steht links neben der Karte; vertikale Lage setzt das Skript (Hoehe des Markers) */
@media (min-width: 1101px) {
  .karte-tafel { align-self: stretch; }
  .karte-tafel .ort-blase { top: 0; left: 0; width: 100%; transform: translateX(-14px);
    transition: opacity .35s var(--kurve), transform .45s var(--kurve), top .35s var(--kurve); }
  .karte-tafel .ort-blase.an { transform: none; }
}

@media (min-width: 1101px) { .karte-feld, .karte-tafel, .karte-seite { align-self: start; } .karte-tafel { align-self: stretch; } }

/* Logos einheitlich: jedes fuellt dieselbe Box (contain), kleine Dateien werden mit hochskaliert */
@media (min-width: 1101px) {
  .karte-liste .ll { height: 72px; padding: 0 6px; }
  .karte-liste .ll img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
}
@media (min-width: 1101px) {
  .karte-liste li { height: 72px; }
  .karte-liste button { height: 100%; padding: 0; }
  .karte-liste .ll { display: block; height: 100%; width: 100%; padding: 0 6px; box-sizing: border-box; }
  .karte-liste .ll img { display: block; width: 100%; height: 100%; object-fit: contain; }
}

@media (min-width: 1101px) { .karte-liste .ll { display: grid; place-items: center; } .karte-liste .ll img { max-width: 100%; } }