/* Teilen & Kontakte im Promoter-Portal (10.10.2026) und die oeffentliche Story-Seite /s/{token}. Nur Variablen aus meeyo.css —
   heller und dunkler Modus kommen damit von selbst. */
.tl { margin-bottom: 14px }
.tl .chip { cursor: pointer; border-radius: 999px }
.tl-kit { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 18px; align-items: start }
.tl-bild { margin: 0 }
.tl-bild img { width: 100%; aspect-ratio: 1200 / 628; object-fit: cover; border-radius: var(--radius); background: var(--nacht); border: 1px solid var(--linie); display: block }
.tl-bild figcaption { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px }
.tl-label { font-weight: 700 }
.tl textarea { width: 100%; font: inherit; font-size: .92rem; padding: 10px 12px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); resize: vertical }
.tl-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 }
.tl-zeile input, .tl-zeile select { flex: 1 1 140px; min-width: 0 }
.knopf.klein { padding: 8px 14px; font-size: .9rem }
.tl-kanaele { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px }
.tl-k { padding: 11px 12px; border-radius: var(--radius-klein); font-weight: 700; color: #fff; text-align: left; border: 0; cursor: pointer }
.tl-k::before { content: "↗ "; opacity: .8 }
.tl-wa { background: #1f9d55 } .tl-fb { background: #1f5fd1 } .tl-ig { background: linear-gradient(100deg, #e1306c, #8b3dff) }
.tl-li { background: #0a66c2 } .tl-x { background: #111; border: 1px solid #333 } .tl-tg { background: #2a9fd8 }
.tl-hinweis { border-left: 3px solid var(--gelb); padding-left: 10px }

/* Stories */
.tl-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px }
.tl-story { background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column }
.tl-story img, .tl-story video { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; display: block; background: #000 }
.tl-story .tl-st-info { padding: 9px 10px; display: grid; gap: 6px; font-size: .86rem }
.tl-story label.wahl { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: .86rem }
.tl-story .tl-st-url { display: flex; gap: 6px } .tl-story .tl-st-url input { flex: 1; min-width: 0; font-size: .78rem; padding: 4px 6px }
.tl-story.geschuetzt { opacity: .75 }

/* Kontakte */
.tl-dsg { border: 1px solid var(--gelb); background: color-mix(in srgb, var(--gelb) 10%, transparent); border-radius: var(--radius-klein); padding: 10px 12px; margin-bottom: 14px }
.tl-dsg p { margin: 4px 0 0; font-size: .9rem }
.tl-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.tl-kform { gap: 10px } .tl-kform h3 { margin: 0 }
.tl-gruppenwahl { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 10px; display: block }
.tl-gruppenwahl > div { display: flex; flex-wrap: wrap; gap: 6px 14px }
.tl-gruppenwahl label { display: inline-flex; gap: 5px; align-items: center; font-weight: 500 }
.tl-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 10px }
.tl-gruppe { background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 10px; display: grid; gap: 6px }
.tl-gruppe b { display: flex; justify-content: space-between; gap: 6px } .tl-gruppe select { font-size: .85rem; padding: 4px 6px }
.tl-gruppe .tl-weg { background: none; border: 0; color: var(--nebel); padding: 0; cursor: pointer; font-size: .85rem }
.tl-nachrichten { display: grid; gap: 8px; padding-left: 20px }
.tl-nachrichten li { background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 10px }
.tl-nachrichten li.offen { opacity: .55 }
.tl-nachrichten p { margin: 4px 0; font-size: .86rem; color: var(--nebel) }
.tl-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px }
.tl-kliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.tl-kliste li { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 10px; flex-wrap: wrap }
.tl-kliste small { color: var(--nebel) }
.tl-kliste .tl-k-knoepfe { display: flex; gap: 6px }
.tl-gefahr { margin-left: auto } .tl-gefahr.scharf { background: var(--rot); color: #fff }
@media (max-width: 760px) { .tl-kit, .tl-zwei { grid-template-columns: 1fr } }

/* Oeffentliche Story-Seite */
.s-seite { min-height: 100vh }
.s-rahmen { max-width: 980px; margin: 0 auto; padding: 22px 18px 30px; display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: 28px; align-items: center }
.s-marke { grid-column: 1 / -1; font-size: 1.6rem }
.s-medien { margin: 0; border-radius: 26px; overflow: hidden; border: 3px solid transparent; background: linear-gradient(var(--nacht), var(--nacht)) padding-box, var(--verlauf) border-box; position: relative }
.s-medien img, .s-medien video { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; display: block; background: #000; position: relative }
/* 24.10. (Owner): die geteilte Story ganz zeigen (contain); dahinter dasselbe Bild weichgezeichnet statt schwarzer Balken */
.s-medien img.s-hg { position: absolute; inset: 0; height: 100%; object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.15); transform: scale(1.15) }
.s-medien figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.55); color: #fff; padding: 5px 11px; border-radius: 999px; font-size: .85rem }
.s-ruf h1 { margin-bottom: .3em }
.s-qr { display: flex; gap: 12px; align-items: center; margin-top: 18px; color: var(--nebel) }
.s-qr img { background: #fff; border-radius: 10px; padding: 6px }
@media (max-width: 700px) { .s-rahmen { grid-template-columns: 1fr } .s-medien { max-width: 380px; margin: 0 auto } }
/* Haken klein und ohne Pillen-Rahmen (das globale label/input-Raster gilt hier nicht) */
.tl input[type=checkbox] { width: auto; height: auto; margin: 0; flex: 0 0 auto }
.tl label.wahl { display: flex; flex-direction: row; width: auto; margin: 0; grid-template-columns: none; gap: 8px; align-items: flex-start; background: none; border: 0; padding: 0; border-radius: 0; font-weight: 500 }
.tl-story .tl-st-url { flex-wrap: wrap } .tl-story .tl-st-url input { flex: 1 1 100% }

/* ══ 11.10.2026 (Owner): App zeigen = die App · Material in Gruppen · Werbetexte als Karten ══════════════════════════════
   Nur Tokens aus meeyo.css (--pflaume, --nacht, --linie, --milch, --nebel, --verlauf) — hell und dunkel kommen von selbst. */
.mg-kopf, .mg, .mg-zwei, .wt-kopf, .wt-teil, .az-film-box, .az-zwei, .az-bilder-box, #bib-einreichen { margin-bottom: 16px }
.mg, .wt-teil { scroll-margin-top: 96px }
.mg > header, .wt-teil > header { flex-wrap: wrap; row-gap: 2px } .mg > header .klein, .az-bilder-box > header .klein { color: var(--nebel) }
.mg-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px } .mg-sprung .chip, .wt-filter .chip, #ton-wahl .chip { cursor: pointer; border-radius: 999px }
.mg-kopf .tinu-mitsenden:not([hidden]) { margin-top: 12px }
.mg-knoepfe, .az-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0 }
.mg-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px }
.mg-filmraster { grid-template-columns: repeat(auto-fit, minmax(220px, 290px)) }
.mg-karte { background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; margin: 0 }
.mg-karte b { font-size: .95rem } .mg-karte small { color: var(--nebel); font-size: .8rem; line-height: 1.4 }
.mg-karte .mg-film, .mg-karte .pr-vorschau-film { width: 100%; margin: 0 0 4px; border-radius: 18px; box-shadow: none }
.mg-karte .mg-knoepfe { margin-top: auto; padding-top: 4px }
.mg .pr-video-laden { background: var(--nacht); border: 1px solid var(--linie); margin: 16px 0 0 }
.mg-bilder { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.25fr) minmax(280px, 1fr); gap: 18px; align-items: start; margin-top: 10px }
.mg-status { display: grid; grid-template-columns: 130px 1fr; gap: 14px; background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px }
.mg-status-bild { margin: 0 } .mg-status-bild img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 12px; display: block; background: var(--pflaume) }
.mg-schritte { margin: 6px 0 8px; padding-left: 20px; font-size: .88rem; display: grid; gap: 4px }
.mg-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px } .mg-zwei .mg { margin: 0 }
.mg-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.mg .material { margin-top: 12px } .mg .druck-verweis { margin: 14px 0 0 }
@media (max-width: 1700px) { .mg-bilder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .mg-status { grid-column: 1 / -1 } }
@media (max-width: 760px) { .mg-bilder, .mg-zwei { grid-template-columns: minmax(0, 1fr) } .mg-filmraster { grid-template-columns: minmax(0, 1fr) }
  .mg-karte .mg-film, .mg-karte .pr-vorschau-film { width: min(100%, 300px); align-self: center } .mg-status { grid-template-columns: 96px 1fr } }

/* App zeigen */
.az-film { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center }
.az-film-rahmen { width: 100%; justify-self: stretch }
.az-film-text h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; margin: 2px 0 10px }
.az-film-text p { max-width: 40em; line-height: 1.55 } .az-film-text .klein { color: var(--nebel) }
.az-marke { margin: 0; font-weight: 800; letter-spacing: .14em; font-size: .8rem; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
.az-zwei { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px } .az-zwei > .cms-box { margin: 0 }
.az-laden-innen { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start }
.az-laden-innen p { margin: 0 0 10px; line-height: 1.5 }
.az-qr { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 16px; display: block }
.az-adresse code { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em }
.az-schritte { list-style: none; counter-reset: az; margin: 0; padding: 0; display: grid; gap: 12px }
.az-schritte li { counter-increment: az; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: start }
.az-schritte li::before { content: counter(az); grid-row: span 3; width: 34px; height: 34px; border-radius: 99px; background: var(--verlauf); color: #fff; display: grid; place-items: center; font-weight: 800 }
.az-schritte b { display: block } .az-schritte span { color: var(--nebel); font-size: .9rem; line-height: 1.45 }
.az-code:empty { display: none } .az-code { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--linie); font-weight: 800; letter-spacing: .08em }
.az-bilder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px }
.az-bilder figure { margin: 0 } .az-bilder img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 20px; border: 1px solid var(--linie); background: var(--nacht) }
.az-bilder figcaption { font-size: .82rem; color: var(--nebel); margin-top: 8px; line-height: 1.4 }
@media (max-width: 1100px) { .az-zwei { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 760px) { .az-film { grid-template-columns: minmax(0, 1fr) } .az-film-rahmen { width: min(100%, 300px); justify-self: center }
  .az-laden-innen { grid-template-columns: minmax(0, 1fr) } .az-qr { margin: 0 auto }
  .az-bilder { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px }
  .az-bilder figure { scroll-snap-align: start } }

/* Werbetexte */
.wt-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px }
.wt-flabel { min-width: 64px; font-size: .8rem; font-weight: 700; color: var(--nebel); text-transform: uppercase; letter-spacing: .06em }
.wt-filter .chips, #ton-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 }
.wt-teil > header { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px } .wt-teil > header h3 { margin: 0; font-size: 1.02rem }
.wt-teil #ton-wahl { margin-bottom: 6px } .wt-teil #ton-wofuer { margin: 4px 0 12px; color: var(--nebel) }
.wt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; align-items: stretch }
.wt-karte { background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 15px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.wt-karte > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.wt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border-radius: 99px; font-size: .78rem; font-weight: 700; color: #fff; background: var(--violett) }
.wt-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.wt-k-whatsapp { background: #1f9d55 } .wt-k-instagram { background: linear-gradient(100deg, #e1306c, #8b3dff) } .wt-k-story { background: linear-gradient(100deg, #ff4f7a, #e0802a) }
.wt-k-tiktok { background: #111; border: 1px solid #333 } .wt-k-facebook { background: #1f5fd1 } .wt-k-linkedin { background: #0a66c2 } .wt-k-email { background: #6b5d78 } .wt-k-weitere { background: #4b3a5c }
.wt-zweck { font-size: .74rem; font-weight: 700; color: var(--nebel); border: 1px solid var(--linie); border-radius: 99px; padding: 3px 9px }
.wt-karte h4 { margin: 2px 0 0; font-size: .98rem } .wt-karte h4 span { color: var(--nebel); font-weight: 600 }
.wt-hinweis { margin: 0; color: var(--nebel); font-size: .84rem; line-height: 1.45 }
.wt-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 11px 13px; font-size: .9rem; line-height: 1.55; color: var(--milch); max-height: 300px; overflow-y: auto; flex: 1 1 auto }
.wt-karte > footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.wt-zeichen { margin-right: auto; font-size: .78rem; color: var(--nebel); font-variant-numeric: tabular-nums } .wt-zeichen.ueber { color: var(--rot); font-weight: 700 }
.wt-leer:not([hidden]) { margin: 4px 0 12px }

/* 14.10.2026: «Gratis-Chat bewerben» (_gratis_bewerben.html, gratis_bewerben.js) */
.gb-kurz { font-weight: 600; margin: 0 0 14px }
.gb-liste { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; line-height: 1.45 }
.gb-link code { word-break: break-all }
.gb-kanaele { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px }
.gb-kanal { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 12px; background: var(--nacht); display: flex; flex-direction: column; gap: 6px }
.gb-kanal .gb-text { margin: 0; font-size: .9rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; flex: 1 }
.gb-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 }
.gb-karte { width: 100%; height: auto; border-radius: var(--radius-klein); display: block; margin-bottom: 8px; background: var(--nacht) }
#gratis-bewerben > header { justify-content: space-between; flex-wrap: wrap }
/* 15.10.2026: Kurzfilm + «So baut das System …» im Gratis-Chat-Kit */
.gb-film-wahl { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px }
.gb-film-video { display: block; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; margin: 0 auto 8px; border-radius: var(--radius-klein); background: #000; object-fit: contain }
.gb-film-video.quadrat { aspect-ratio: 1; max-width: 360px }
.gb-sys-unter { font-weight: 600 }
.gb-sys-schritte b { font-weight: 600; line-height: 1.45 }
.gb-sys-abo { margin: 12px 0 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--nebel); font-size: .9rem }
.gb-band { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 79, 122, .14); border: 1px dashed rgba(255, 79, 122, .6); font-weight: 700; font-size: .85rem }
.gb-sys-vertrag { margin-top: 10px } .gb-sys-vertrag summary { cursor: pointer; font-weight: 600 }
.gb-sys-recht { border-left: 3px solid var(--korall, #ff4f7a); padding-left: 10px; margin-top: 12px }
@media (max-width: 700px) { .gb-kanaele { grid-template-columns: 1fr } }