/* Mediakits: Zahlen, Demografie-Balken, Kundenstimmen, Netzwerk */
.mk-held { padding-top: calc(var(--kopf-h) + 60px); padding-bottom: 80px; }
.mk-h1 { font-size: clamp(64px, 10vw, 190px); margin: 0 0 18px; }
.mk-unter { font-size: clamp(22px, 2vw, 32px); font-weight: 800; margin: 0 0 50px; color: var(--nebel); }
.mk-zahlen { display: flex; flex-wrap: wrap; gap: 28px 60px; margin: 0 0 46px; }
.mk-zahl { display: grid; gap: 4px; border-left: 2px solid var(--sunset); padding-left: 20px; }
.mk-zahl b { font-size: clamp(40px, 4.6vw, 80px); font-weight: 900; line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mk-zahl span { color: var(--nebel); font-size: 17px; max-width: 18em; }
.mk-held--stadt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 50px 70px; align-items: center; }
.mk-held-text { container-type: inline-size; }
/* #Stadt nie mitten im Wort umbrechen (Vince 05.10.: #BERLI/N): Groesse aus Spaltenbreite und Zeichenzahl (--z).
   Faktor 0.7: gemessen in Gabarito Kontur hoechstens 0.662 je Zeichen (#München, #Dortmund); in Avenir waren es 0.78 */
.mk-tag { font-size: min(clamp(70px, 11vw, 210px), calc(100cqi / (var(--z, 8) * 0.7))); white-space: nowrap; color: transparent; -webkit-text-stroke: 2px var(--sunset); margin: .14em 0 10px; line-height: .85; }   /* oben Platz fuer Umlautpunkte (#MÜNCHEN) */
.mk-h1-klein { font-size: clamp(28px, 3vw, 50px); font-weight: 900; text-transform: uppercase; line-height: 1; margin: 0 0 24px; letter-spacing: -0.01em; }
.mk-held-text .fliess { margin-bottom: 34px; }
.mk-bild { aspect-ratio: 9 / 16; width: 100%; max-width: 380px; justify-self: end; transform: rotate(3deg); box-shadow: 0 50px 120px -40px rgba(0,0,0,.9); }
.mk-satz-gross { font-size: clamp(50px, 7.4vw, 140px); margin: 0 0 30px; }
.mk-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: end; }
.mk-probleme { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.mk-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 26px 26px 26px 6px; padding: clamp(26px, 2.6vw, 38px); display: grid; gap: 14px; align-content: start; }
.mk-karte p { margin: 0; color: var(--nebel); }
/* Lange deutsche Woerter ("Maßgeschneiderter") passen sonst nicht in die Drittel-Spalte */
.mk-karte .h3 { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.12; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.mk-nr { font-size: 58px; font-weight: 900; line-height: .8; color: transparent; -webkit-text-stroke: 1.6px var(--sunset); }
.mk-loesung { margin-top: 50px; padding: 34px; border-radius: 26px; background: linear-gradient(120deg, rgba(255,87,87,.18), rgba(255,87,87,.04)); border: 1px solid rgba(255,87,87,.35); }
.mk-loesung ul, .mk-spalte ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.mk-loesung li, .mk-spalte li { padding-left: 30px; position: relative; color: var(--nebel); }
.mk-loesung li::before, .mk-spalte li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; background: var(--sunset); border-radius: 50% 50% 50% 2px; transform: rotate(-45deg); }
.mk-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.mk-spalte { border-top: 2px solid var(--sunset); padding-top: 26px; }
.mk-vorteile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.mk-vorteile li { display: grid; gap: 12px; align-content: start; }
.mk-vorteile p { margin: 0; color: var(--nebel); }
.mk-marke { font-size: clamp(30px, 3vw, 50px); font-weight: 900; text-transform: uppercase; line-height: .9; color: var(--sunset); }
.mk-stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mk-stimme { margin: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 22px; padding: 24px; display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; align-content: start; }
.mk-ava { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; background: var(--sunset); color: var(--sunset-tief); display: grid; place-items: center; font-weight: 900; }
.mk-stimme:nth-child(even) .mk-ava { background: var(--weiss); }
.mk-stimme blockquote { margin: 0; }
.mk-stimme blockquote p { margin: 0 0 6px; }
.mk-stimme figcaption { grid-column: 2; display: grid; font-size: 15px; }
.mk-stimme figcaption span { color: var(--grau); }
.mk-ziel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-bottom: 50px; align-items: start; }
.gross-zahl b { font-size: clamp(56px, 6.4vw, 120px); }
.mk-kaufkraft p { color: var(--nebel); margin: 10px 0 0; }
.mk-reich { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 46px; }
.mk-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 50px); }
.mk-block h3 { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin: 0 0 18px; }
.balken { display: grid; grid-template-columns: 7em 1fr 4.2em; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 16px; }
.balken i { display: block; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--sunset) var(--w), rgba(255,255,255,.08) var(--w)); }
.balken b { text-align: right; font-variant-numeric: tabular-nums; }
.js .balken i { background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.js .balken i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--sunset); border-radius: 10px; transform-origin: left; transform: scaleX(var(--fuell, 1)); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.geschlecht { height: 54px; border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: var(--f) 1fr; font-weight: 800; font-size: 15px; }
.geschlecht span { display: flex; align-items: center; padding: 0 14px; white-space: nowrap; }
.geschlecht .f { background: var(--sunset); color: var(--sunset-tief); }
.geschlecht .m { background: rgba(255,255,255,.12); justify-content: flex-end; }
.mk-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); counter-reset: s; }
.mk-schritte li { counter-increment: s; display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--linie); padding-top: 24px; }
.mk-schritte li::before { content: "0" counter(s); font-size: 46px; font-weight: 900; color: var(--sunset); line-height: 1; }
.mk-schritte p { margin: 0; color: var(--nebel); }
.mk-stand { margin-top: 40px; color: var(--grau); font-size: 14px; }
.mk-netz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; border-top: 1px solid var(--linie); }
.mk-netz li { border-bottom: 1px solid var(--linie); }
.mk-netz a, .mk-netz li > span { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 18px 0; text-decoration: none; }
.mk-netz b { font-size: clamp(22px, 2vw, 32px); font-weight: 900; text-transform: uppercase; }
.mk-netz span span, .mk-netz a > span { grid-column: 1; color: var(--nebel); font-size: 15px; }
.mk-netz svg { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--sunset); align-self: center; transition: transform .3s; }
.mk-netz a:hover svg { transform: translateX(6px); }
.mk-netz a:hover b { color: var(--sunset); }
.mk-haken { list-style: none; margin: 28px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; color: var(--nebel); }
.mk-haken li::before { content: "✓ "; color: var(--sunset); font-weight: 900; }
@media (max-width: 860px) {
  .mk-held--stadt, .mk-zwei, .mk-ziel { grid-template-columns: 1fr; }
  .mk-bild { max-width: 300px; justify-self: center; }
  .mk-probleme, .mk-spalten, .mk-vorteile, .mk-stimmen, .mk-demo, .mk-schritte, .mk-netz { grid-template-columns: 1fr; }
  .mk-reich { grid-template-columns: 1fr 1fr; }
  .mk-zahl b { font-size: clamp(32px, 9vw, 48px); }
  .balken { grid-template-columns: 6em 1fr 3.8em; font-size: 15px; }
}

/* Staedte-Raster mit Kanal-Logos (Vince 05.10.) */
.mk-netz a, .mk-netz li > span { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.mk-netz-logo { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 50%; display: block; }
.mk-netz a > b, .mk-netz a > span, .mk-netz li > span > b, .mk-netz li > span > span { grid-column: 2; }
.mk-netz a > svg { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 560px) { .mk-netz a, .mk-netz li > span { grid-template-columns: 44px minmax(0, 1fr) auto; } .mk-netz-logo { width: 44px; height: 44px; } }

/* ===== Folien-Deck: seitlich wischen statt senkrecht scrollen (Vince 05.10., wie das Mediakit bis 16.09.) =====
   Nur mit JS (html.mk-deck-an, mediakit.js); ohne JS bleibt die senkrechte Seite. Jede Folie scrollt bei Bedarf in sich,
   seitlich rastet das Deck pro Folie ein (scroll-snap). --p = Abstand der Folie zur Mitte (-1..1) fuer die Parallaxe. */
.mk-steuer[hidden] { display: none !important; }
.mk-deck-an .nach-oben, .mk-deck-an .schwebe-tat { display: none !important; }
html.mk-deck-an, .mk-deck-an body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.mk-deck-an .mk-deck { position: fixed; inset: 0; z-index: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.mk-deck-an .mk-deck::-webkit-scrollbar { display: none; }
.mk-deck-an .mk-folie { --p: 0; flex: 0 0 100%; width: 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; padding-block: calc(var(--kopf-h) + 12px) calc(118px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
/* Inhalt mittig, aber bei Ueberlaenge oben beginnen (auto-Raender statt justify-content: center) */
.mk-deck-an .mk-folie > * { width: 100%; flex-shrink: 0; }   /* sonst schrumpft .innen (margin auto) auf Inhaltsbreite, die Container-Spalte im Kopf auf 0 */
.mk-deck-an .mk-folie > :first-child { margin-top: auto; }
.mk-deck-an .mk-folie > :last-child { margin-bottom: auto; }
.mk-deck-an .abschnitt + .abschnitt { border-top: 0; }
.mk-deck-an .mk-folie [id] { scroll-margin-top: calc(var(--kopf-h) + 60px); }
.mk-deck-an .mk-held { padding-block: 0; }
.mk-deck-an .kopfzeile { margin-bottom: clamp(26px, 5vh, 56px); }
.mk-deck-an .schluss-band { padding-block: 0; overflow: visible; }
.mk-deck-an .mk-folie--schluss .fuss { margin-top: clamp(60px, 10vh, 120px); background: none; }
.mk-deck-an .mk-folie--schluss { padding-bottom: 0; }
.mk-deck-an .mk-folie--schluss .fuss { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
/* Hintergrund wandert mit dem Fortschritt durchs Deck */
.mk-deck-an .seiten-hinten { transform: scale(1.14) translate3d(calc(var(--fortschritt, 0) * -5%), 0, 0); }

/* Groessen im Deck: an die Fensterhoehe gebunden (eine Folie soll auf 900px Hoehe passen) und nie breiter als die Spalte
   fuers laengste Wort (--lw setzt mediakit.js; Faktor 0.68, gemessen hoechstens 0.622 je Zeichen in Gabarito), sonst lief ZUSAMMENARBEIT am iPhone raus */
.mk-deck-an .mk-folie .h2 { --gr: clamp(34px, min(6.2vw, 8.4svh), 112px); }
.mk-deck-an .mk-h1 { --gr: clamp(50px, min(10vw, 15svh), 190px); }
.mk-deck-an .mk-satz-gross { --gr: clamp(44px, min(7.4vw, 12svh), 140px); }
.mk-deck-an .schluss-band .gross { --gr: clamp(44px, min(8.4vw, 11svh), 150px); }
.mk-deck-an .mk-folie .gross:not(.mk-tag) { font-size: min(var(--gr, 1em), calc((100vw - 2 * var(--rand)) / (var(--lw, 8) * .68))); }
.mk-deck-an .mk-tag { font-size: min(clamp(70px, 11vw, 210px), calc(100cqi / (var(--z, 8) * 0.7)), 17svh); }
.mk-deck-an .mk-folie--schluss .gross + .stark { margin-top: clamp(26px, 4.5vh, 50px); }

/* Parallaxe beim Wischen: Ueberschriften laufen schneller, das Bild gegenlaeufig */
.mk-deck-an .mk-folie .kopfzeile, .mk-deck-an .mk-folie .mk-zieh, .mk-deck-an .mk-tag, .mk-deck-an .mk-held > .augen, .mk-deck-an .mk-h1,
.mk-deck-an .mk-satz-gross, .mk-deck-an .schluss-band .gross { transform: translate3d(calc(var(--p) * 24vw), 0, 0); }
.mk-deck-an .mk-folie .mk-bild { transform: translate3d(calc(var(--p) * -14vw), 0, 0) rotate(calc(3deg + var(--p) * -8deg)); }
.mk-deck-an .schluss-band .zeichen { transform: rotate(calc(var(--p) * 90deg)) scale(calc(1 - var(--pa, 0) * .4)); }

/* Einflug beim ersten Zeigen einer Folie (Klasse .gesehen), gestaffelt ueber --i */
.mk-deck-an .mk-einflug { opacity: 0; transform: translate3d(90px, 0, 0) rotate(1.5deg); transition: opacity .6s ease, transform 1s cubic-bezier(.16,.8,.2,1); transition-delay: calc(var(--i, 0) * 75ms + 140ms); }
.mk-deck-an .gesehen .mk-einflug { opacity: 1; transform: none; }
.mk-deck-an .mk-folie:not(.gesehen) .balken i { --fuell: 0; }
.mk-deck-an .balken i::after { transition-delay: .45s; }

/* Beispiel-Reels */
.mk-reels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.mk-reels a { display: grid; gap: 4px; text-decoration: none; }
.mk-reel { display: block; aspect-ratio: 9 / 16; width: 100%; max-height: calc(100svh - var(--kopf-h) - 360px); min-height: 260px; margin-bottom: 10px; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.mk-reels a:hover .mk-reel { transform: translateY(-8px) rotate(-1.2deg); }
.mk-reel .ig-profil { padding: 10px; font-size: 13px; }
.mk-reel .ig-leiste { bottom: 18px; }
.mk-reel-zahl { color: var(--nebel); font-size: 15px; } .mk-reel-zahl b { font-size: 22px; font-weight: 900; color: var(--weiss); font-variant-numeric: tabular-nums; }
.mk-reel-name { font-weight: 800; font-size: 18px; line-height: 1.1; } .mk-reel-ort { color: var(--grau); font-size: 14px; }
.mk-deck-an .mk-reels { --reel-h: max(230px, calc(100svh - var(--kopf-h) - 460px)); width: fit-content; max-width: 100%; grid-template-columns: repeat(4, minmax(0, calc(var(--reel-h) * 9 / 16))); }
.mk-deck-an .mk-reel { max-height: var(--reel-h); min-height: 0; }
/* Ueberregionales Mediakit: alle Reels in einer Reihe ueber die ganze Breite (Vince 05.10.), schrumpfen auf die Breite */
.mk-deck-an .mk-reels--n { width: 100%; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 26px); }   /* Spalten teilen die volle Breite; Hoehe bleibt durch --reel-h begrenzt */
/* schmale Spalten (7 Reels, kleine Laptops): Unterschriften schrumpfen mit, lange Namen wie "Traumhausverlosung" schoben sonst die Karte in die Nachbarspalte */
.mk-reels--n > li { min-width: 0; }
.mk-reels--n .mk-reel-name { font-size: clamp(14px, 1.15vw, 18px); overflow-wrap: anywhere; }
.mk-reels--n .mk-reel-zahl { font-size: clamp(12px, .95vw, 15px); } .mk-reels--n .mk-reel-zahl b { font-size: clamp(17px, 1.4vw, 22px); }
.mk-reels--n .mk-reel-ort { font-size: clamp(12px, .9vw, 14px); }

/* Steuerleiste */
.mk-steuer { position: fixed; z-index: 55; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 8px; border-radius: 999px; background: rgba(7,6,6,.74); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); }
.mk-pfeil { flex: none; width: 52px; height: 52px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; transition: opacity .3s, transform .3s; }
.mk-pfeil .pinknopf { width: 44px; height: 44px; }
.mk-pfeil:hover .pinknopf::before { transform: rotate(-45deg) scale(1.08); }
.mk-geist { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; transition: background .25s; }
.mk-pfeil:hover .mk-geist { background: rgba(255,255,255,.08); }
.mk-geist svg { width: 20px; height: 20px; transform: rotate(180deg); }
.mk-pfeil:disabled { opacity: .28; cursor: default; }
.mk-pfeil:focus-visible { outline: 2px solid var(--sunset); outline-offset: 2px; border-radius: 50%; }
.mk-weiter.lockt .pinknopf { animation: mk-locken 1.8s ease-in-out infinite; }
@keyframes mk-locken { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
.mk-mitte { display: grid; gap: 8px; width: clamp(200px, 26vw, 360px); min-width: 0; }
.mk-zaehler { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); white-space: nowrap; min-width: 0; }
.mk-zaehler b { font-size: 17px; letter-spacing: .02em; color: var(--weiss); font-variant-numeric: tabular-nums; }
.mk-zaehler .mk-titel { font-style: normal; color: var(--nebel); margin-left: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk-punkte { display: flex; gap: 5px; }
.mk-punkte button { position: relative; flex: 1 1 0; min-width: 6px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.16); cursor: pointer; transition: background .35s, flex-grow .45s cubic-bezier(.2,.7,.2,1); }
.mk-punkte button::after { content: ""; position: absolute; inset: -12px 0; }
.mk-punkte button.war { background: rgba(255,87,87,.45); }
.mk-punkte button[aria-current="true"] { background: var(--sunset); flex-grow: 3; }
.mk-tipp { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(7,6,6,.8); white-space: nowrap; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nebel); transition: opacity .5s; pointer-events: none; }
.mk-tipp-touch { display: none; }
@media (pointer: coarse) { .mk-tipp-touch { display: inline; } .mk-tipp-maus { display: none; } }
.mk-steuer.benutzt .mk-tipp { opacity: 0; }

@media (max-width: 860px) {
  .mk-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-deck-an .mk-reels { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-reel, .mk-deck-an .mk-reel { max-height: none; min-height: 0; }
  .mk-deck-an .mk-folie { padding-block: calc(var(--kopf-h) + 4px) calc(104px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .mk-steuer { left: var(--rand); right: var(--rand); transform: none; gap: 10px; padding: 6px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mk-mitte { width: auto; flex: 1; }
  .mk-pfeil { width: 46px; height: 46px; }
  .mk-pfeil .pinknopf, .mk-geist { width: 38px; height: 38px; }
  .mk-zaehler .mk-titel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-deck-an .mk-einflug { opacity: 1; transform: none; transition: none; }
  .mk-deck-an .mk-folie .kopfzeile, .mk-deck-an .mk-folie .mk-zieh, .mk-deck-an .mk-tag, .mk-deck-an .mk-held > .augen, .mk-deck-an .mk-h1,
  .mk-deck-an .mk-satz-gross, .mk-deck-an .schluss-band .gross, .mk-deck-an .schluss-band .zeichen, .mk-deck-an .seiten-hinten { transform: none; }
  .mk-deck-an .mk-folie .mk-bild { transform: rotate(3deg); }
  .mk-weiter.lockt .pinknopf { animation: none; }
}