/* A.0.99.0 — die Influencer im Studio von daumenkino (tafeln/influencer.js, daten/daumenkino.js): Adressleiste wie bei Placebo,
   oben der Kopf der Plattform, links dein Team (Profil, Plan für Tag und Nacht, Shitstorm-Wetter), rechts das gemalte Handy mit Video
   oder Beitrag. Farben der Plattform: Tinte, Violett, Pink, Gelb (die drei Blätter des Zeichens). */

.tafel.dk-tafel {
  --dk-tinte: #1d1a2b; --dk-tinte2: #3b3552; --dk-violett: #6b4eff; --dk-violett2: #5236e0; --dk-pink: #ff4f8b; --dk-gelb: #ffd23f;
  --dk-papier: #f7f5fc; --dk-hell: #efebfa; --dk-linie: #e2dcf0; --dk-leise: #6e6888; --dk-gut: #1f9d6a; --dk-rot: #d6334f; --dk-nacht: #2a2650;
  width: min(98%, 64em); height: min(100%, 46em); background: var(--dk-papier); color: var(--dk-tinte); border: 1px solid #b9b2c9; border-radius: .55em;
}
.dk-tafel .tafel-kopf { background: linear-gradient(#f1eef7, #e4dfee); color: var(--dk-tinte); padding: .3em .35em .3em .6em; border-bottom: 1px solid var(--dk-linie); }
.dk-tafel .tafel-kopf h2 { flex: 1; min-width: 0; font-family: var(--schrift); font-weight: 700; font-size: .8em; letter-spacing: 0; padding: .22em .85em;
  border-radius: 999px; background: #fff; border: 1px solid var(--dk-linie); color: var(--dk-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-tafel .tafel-kopf h2::before { content: '🔒 '; font-size: .9em; }
.dk-tafel .tafel-zu { color: var(--dk-tinte); width: 1.9em; height: 1.6em; border-radius: .35em; display: grid; place-items: center; background: transparent; }
.dk-tafel .tafel-zu:hover, .dk-tafel .tafel-zu:focus-visible { background: #d93a3a; color: #fff; outline: none; }
.dk-tafel .tafel-inhalt { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dk-tafel .tafel-fuss { background: var(--dk-hell); border-top: 1px solid var(--dk-linie); }
.dk { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dk .knopf:focus-visible { outline: 2px solid var(--dk-violett); outline-offset: 2px; }
.dk p { margin: 0; }

/* Kopf der Plattform */
.dk-kopf { flex: none; display: flex; align-items: center; gap: .9em; padding: .45em 1em; background: var(--dk-tinte); color: #fff; }
.dk-logo { display: flex; align-items: center; gap: .35em; }
.dk-logo-bild { width: 2.1em; height: 2.1em; flex: none; }
.dk-logo b { font: 700 1.45em/1 var(--zier); letter-spacing: -.01em; }
.dk-logo small { padding: .15em .5em; border-radius: 999px; background: var(--dk-violett); font: 800 .7em/1.2 var(--schrift); letter-spacing: .06em; text-transform: uppercase; }
.dk-claim { color: #d6d2e8; font-weight: 700; font-size: .88em; }
.dk-claim i { color: #fff; }
.dk-kanal { margin-left: auto; display: flex; align-items: center; gap: .35em; padding: .2em .7em .2em .5em; border-radius: 999px; background: rgba(255, 255, 255, .1);
  font-size: .85em; white-space: nowrap; min-width: 0; }
.dk-kanal b { overflow: hidden; text-overflow: ellipsis; }
.dk-kanal small { color: #d6d2e8; font-weight: 700; margin-right: .15em; }
.dk-kanal .logo { width: 1.5em; height: 1.5em; flex: none; }

/* Seite: links das Team, rechts das Handy (bleibt beim Rollen stehen) */
.dk-haupt { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 1.2em; padding: .9em 1em 1.1em; align-items: start; }
.dk h3 { display: flex; align-items: baseline; gap: .45em; margin: 0 0 .35em; font: 700 1.08em/1.2 var(--zier); color: var(--dk-tinte); }
.dk h3 small { font: 700 .72em/1 var(--schrift); color: var(--dk-leise); }
.dk-heute { font-size: .82em; font-weight: 600; color: var(--dk-leise); margin-bottom: .7em !important; }
.dk-heute b { color: var(--dk-tinte); }
.dk-klein { font-size: .78em; color: var(--dk-leise); line-height: 1.4; font-weight: 600; margin-top: .8em !important; }

/* Ein Influencer: Profil (Knopf: aufs Handy), Zahlen, was er gerade tut, der Plan */
.dk-karte { display: flex; flex-direction: column; gap: .5em; padding: .55em .7em .7em; margin-bottom: .7em; background: #fff; border: 2px solid var(--dk-linie);
  border-radius: .8em; box-shadow: 0 .12em .35em rgba(29, 26, 43, .07); }
.dk-karte.an { border-color: var(--dk-violett); box-shadow: 0 .2em .7em rgba(107, 78, 255, .2); }
.dk .dk-profil { display: flex; align-items: center; gap: .6em; width: 100%; padding: 0; text-align: left; color: inherit; background: none; border: 0; box-shadow: none;
  cursor: pointer; font: inherit; }
.dk .dk-profil:hover:not(:disabled) { background: none; }
.dk-ring { flex: none; display: grid; place-items: center; width: 3.1em; height: 3.1em; padding: .16em; border-radius: 50%; background: #c9c3d8; }
.dk-ring.aktiv { background: conic-gradient(var(--dk-violett), var(--dk-pink), var(--dk-gelb), var(--dk-violett)); }
.dk-ring.fort { background: #5b8fd9; }
.dk-ring.gesperrt { background: var(--dk-rot); }
.dk-ring img, .dk-ring > span { width: 100%; height: 100%; border-radius: 50%; border: .14em solid #fff; object-fit: cover; display: grid; place-items: center; background: #fff; }
.dk-ring.gesperrt img { filter: grayscale(1); }
.dk-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-wer b { font: 700 1.05em/1.15 var(--zier); }
.dk-wer small { font-weight: 700; font-size: .8em; color: var(--dk-violett2); }
.dk-chip { flex: none; padding: .2em .6em; border-radius: 999px; font: 800 .72em/1.2 var(--schrift); text-transform: uppercase; letter-spacing: .04em; background: var(--dk-hell); color: var(--dk-leise); }
.dk-chip.aktiv { background: #e3f6ec; color: var(--dk-gut); }
.dk-chip.aktiv::before { content: '● '; }
.dk-chip.fort { background: #e3ecfa; color: #2f62ad; }
.dk-chip.gesperrt { background: #fde5ea; color: var(--dk-rot); }
.dk-zahlen { display: flex; gap: .5em; }
.dk-zahlen > span { flex: 1; display: flex; flex-direction: column; padding: .3em .55em; border-radius: .55em; background: var(--dk-papier); }
.dk-zahlen b { font: 700 1.05em/1.2 var(--zier); }
.dk-zahlen small { font-size: .74em; font-weight: 700; color: var(--dk-leise); }
.dk-taetigkeit { font-size: .82em; font-weight: 600; color: var(--dk-leise); line-height: 1.35; }
.dk-taetigkeit.gesperrt { color: var(--dk-rot); font-weight: 700; }
.dk-taetigkeit.fort { color: #2f62ad; }

/* Der Plan: tagsüber Videos (Schalter), nachts Beiträge (Wahl), das Band über 24 Stunden */
.dk-plan { display: flex; flex-direction: column; gap: .4em; }
.dk-schicht { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .4em .5em; border-radius: .6em;
  border: 1px solid var(--dk-linie); background: var(--dk-papier); }
.dk-schicht.tag.an { background: #fff8de; border-color: #f5d978; }
.dk-schicht.nacht.an { background: #ece9fb; border-color: #c4b9f7; }
.dk-wann { display: flex; flex-direction: column; align-items: center; font-size: 1.25em; line-height: 1; }
.dk-wann small { font: 800 .52em/1.2 var(--schrift); color: var(--dk-leise); margin-top: .2em; white-space: nowrap; }
.dk-was { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.dk-was > b { font: 700 .98em/1.2 var(--zier); }
.dk-was > small { font-size: .8em; font-weight: 600; color: var(--dk-tinte2); line-height: 1.3; }
.dk-wetter { font-size: .74em; font-weight: 700; color: var(--dk-leise); }
.dk .dk-schalter { position: relative; width: 4.2em; padding: .35em .5em .35em 1.9em; border-radius: 999px; border: 0; background: #cfc9dc; color: #fff;
  font: 800 .8em/1.1 var(--schrift); text-align: left; box-shadow: inset 0 .1em .2em rgba(0, 0, 0, .15); cursor: pointer; }
.dk .dk-schalter::before { content: ''; position: absolute; left: .3em; top: 50%; width: 1.25em; height: 1.25em; margin-top: -.625em; border-radius: 50%; background: #fff;
  box-shadow: 0 .1em .2em rgba(0, 0, 0, .25); transition: left .15s; }
.dk .dk-schalter.an { background: var(--dk-gut); padding: .35em 1.9em .35em .7em; }
.dk .dk-schalter.an::before { left: calc(100% - 1.55em); }
.dk .dk-schalter:hover:not(:disabled) { filter: brightness(1.05); }
.dk .dk-wahl { padding: .35em .75em; border-radius: 999px; border: 2px solid var(--dk-violett); background: #fff; color: var(--dk-violett2); font: 800 .8em/1.1 var(--schrift); cursor: pointer; }
.dk .dk-wahl.an { background: var(--dk-violett); color: #fff; }
.dk .dk-ruhe { align-self: flex-start; padding: .3em .7em; border-radius: 999px; border: 1px solid var(--dk-linie); background: #fff; color: var(--dk-tinte2); font: 700 .8em/1.1 var(--schrift); cursor: pointer; }
.dk-tagesplan { margin: .15em .2em .3em; }
.dk-tp-band { position: relative; display: flex; height: 1.05em; border-radius: 999px; overflow: hidden; border: 1px solid var(--dk-linie); }
.dk-tp-band i { display: flex; align-items: center; justify-content: center; height: 100%; font: 800 .62em/1 var(--schrift); font-style: normal; color: #6b5300; letter-spacing: .05em; text-transform: uppercase; }
.dk-tp-band i.nacht { background: linear-gradient(#3b3552, #1d1a2b); }
.dk-tp-band i.tag { background: #ece8f3; }
.dk-tp-band i.tag.an { background: linear-gradient(#ffe7a6, #ffcf63); }
.dk-tp-punkt { position: absolute; top: 50%; width: .62em; height: .62em; margin: -.31em 0 0 -.31em; border-radius: 50%; background: var(--dk-pink); box-shadow: 0 0 0 .14em rgba(255, 79, 139, .35); }
.dk-tp-jetzt { position: absolute; top: -.1em; bottom: -.1em; width: 2px; margin-left: -1px; background: var(--dk-violett); box-shadow: 0 0 0 1px #fff; }
.dk-tp-uhr { position: relative; height: 1.1em; margin-top: .15em; font-size: .68em; font-weight: 700; color: var(--dk-leise); }
.dk-tp-uhr span { position: absolute; transform: translateX(-50%); }
.dk-tp-uhr span:first-child { transform: none; }
.dk-tp-uhr span:last-child { transform: translateX(-100%); }

/* Rechts: das Handy */
.dk-seite { position: sticky; top: 0; display: flex; flex-direction: column; gap: .5em; width: min(19em, 40vh); }
@media (max-height: 500px) { .dk-titel, .dk-unterzeile { display: none; } }
.dk-titel { font: 700 .8em/1.2 var(--schrift); text-transform: uppercase; letter-spacing: .1em; color: var(--dk-leise); }
.dk-titel b { text-transform: none; letter-spacing: 0; color: var(--dk-tinte); }
.dk-reiter { display: flex; padding: .2em; border-radius: 999px; background: var(--dk-hell); }
.dk .dk-reiter .knopf { flex: 1; padding: .35em .5em; border-radius: 999px; border: 0; background: none; color: var(--dk-leise); font: 800 .78em/1.1 var(--schrift); box-shadow: none; cursor: pointer; }
.dk .dk-reiter .knopf.an { background: #fff; color: var(--dk-tinte); box-shadow: 0 .1em .3em rgba(29, 26, 43, .15); }
.dk-unterzeile { font-size: .8em; font-weight: 600; font-style: italic; color: var(--dk-leise); line-height: 1.35; }
/* overflow: clip statt hidden (A.0.98.0: hidden gab der Zeile im schmalen Raster 0 px Höhe) */
.dk-buehne { position: relative; container-type: inline-size; aspect-ratio: 2 / 3; border-radius: .8em; overflow: clip; background: #e8e2d6;
  box-shadow: 0 .45em 1.1em rgba(29, 26, 43, .25); }
.dk-buehne.dk-nacht { background: #141230; }
/* hineingezoomt auf den Bildschirm (Mitte bei 50 % / 43 % des Bilds) */
.dk-zoom { position: absolute; inset: 0; transform: scale(1.4); transform-origin: 50% 43%; }
.dk-hand { display: block; width: 100%; height: 100%; object-fit: cover; }
.dk-band { position: absolute; z-index: 2; top: 3.5cqw; left: 3.5cqw; padding: 1.4cqw 3.2cqw; border-radius: 999px; background: var(--dk-tinte2); color: #fff;
  font: 800 4cqw/1 var(--schrift); letter-spacing: .04em; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .3); }
.dk-band.live { background: var(--dk-rot); }
.dk-band.live::before { content: '● '; animation: dk-blinken 1.4s steps(2, start) infinite; }
.dk-band.aus { background: #7d7791; }
.dk-band.nachts { background: var(--dk-nacht); }
@keyframes dk-blinken { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .dk-band.live::before { animation: none; } }

/* Der Bildschirm (in % des Bilds, daten/daumenkino.js HANDY): Schrift in cqw seiner Breite */
.dk-schirm { position: absolute; container-type: inline-size; overflow: clip; border-radius: 11% / 5.2%; box-sizing: border-box; }
.dk-video { background: #222; color: #fff; }
.dk-raum { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(1.4px) saturate(1.05); transform: scale(1.08); }
.dk-figur { position: absolute; left: 50%; top: 9%; height: 172%; transform: translateX(-50%); }
.dk-video::before, .dk-video::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.dk-video::before { top: 0; height: 24%; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.dk-video::after { bottom: 0; height: 48%; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.dk-oben { position: absolute; z-index: 1; top: 7cqw; left: 0; right: 0; display: flex; justify-content: center; gap: 5cqw; font: 700 6.4cqw/1 var(--schrift);
  text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .5); }
.dk-oben span { color: rgba(255, 255, 255, .78); }
.dk-oben b { border-bottom: .8cqw solid #fff; padding-bottom: 1.2cqw; }
.dk-leiste { position: absolute; z-index: 1; right: 2.5cqw; bottom: 34%; display: flex; flex-direction: column; align-items: center; gap: 4.5cqw;
  font-size: 9.5cqw; line-height: 1; text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .5); }
.dk-leiste > span { display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.dk-leiste small { font: 800 4.6cqw/1 var(--schrift); }
.dk-mini { position: relative; display: block; width: 14cqw; height: 14cqw; border-radius: 50%; border: .7cqw solid #fff; overflow: hidden; background: #fff; flex: none; }
.dk-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-leiste .dk-mini { overflow: visible; }
.dk-leiste .dk-mini img { border-radius: 50%; }
.dk-leiste .dk-mini i { position: absolute; left: 50%; bottom: -3cqw; width: 6cqw; height: 6cqw; margin-left: -3cqw; border-radius: 50%; background: var(--dk-pink); color: #fff;
  font: 800 5cqw/6cqw var(--schrift); font-style: normal; text-align: center; text-shadow: none; }
.dk-unten { position: absolute; z-index: 1; left: 4cqw; right: 19cqw; bottom: 6cqw; display: flex; flex-direction: column; gap: 1.6cqw; text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .55); }
.dk-unten > b { font: 800 7.2cqw/1.1 var(--schrift); }
.dk-unten p { font: 600 6.9cqw/1.25 var(--schrift); }
.dk-unten p b { font-weight: 800; }
.dk-unten small { font: 700 5.2cqw/1.2 var(--schrift); color: rgba(255, 255, 255, .85); }
.dk-unten .dk-ton { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-lauf { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1.3cqw; background: rgba(255, 255, 255, .3); }
.dk-lauf b { display: block; height: 100%; background: #fff; }

/* Nachts: der Beitrag im dunklen Modus. Der Rand sitzt im inneren Kasten — cqw misst die Innenbreite des Bildschirms, ein Rand am
   Bildschirm selbst machte alle Schrift darin kleiner (gesperrt: 5 statt 10 px) */
.dk-dunkel { background: radial-gradient(circle at 50% 0, #1d1936, #0f0d1a 70%); color: #ecebf5; }
.dk-innen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 5cqw; padding: 4cqw 5cqw 5cqw; box-sizing: border-box; }
.dk-status { display: flex; justify-content: space-between; padding: 0 3cqw; font: 800 4.6cqw/1 var(--schrift); }
.dk-status span { letter-spacing: .05em; font-size: .9em; }
.dk-app { font: 700 7cqw/1 var(--zier); padding: 1cqw 1cqw 0; }
.dk-post { display: flex; flex-direction: column; gap: 2.8cqw; padding: 4cqw; border-radius: 4cqw; background: #1f1b38; box-shadow: 0 0 0 .5cqw #2c2750; }
.dk-post header { display: flex; align-items: center; gap: 2.4cqw; }
.dk-post header > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dk-post header b { font: 800 5.6cqw/1.15 var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-post header small { font: 700 4.3cqw/1.2 var(--schrift); color: #a29cc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-post .dk-mini { width: 12cqw; height: 12cqw; border-width: .5cqw; }
.dk-post p { font: 600 6.6cqw/1.3 var(--schrift); }
.dk-post p b { color: #ff8fb3; }
.dk-tags { font: 700 4.8cqw/1.2 var(--schrift); color: #a99bff; }
.dk-reaktion { display: flex; gap: 5cqw; font: 800 5cqw/1 var(--schrift); color: #c9c4e0; }
.dk-kommentare { display: flex; flex-direction: column; gap: 2.4cqw; padding: 0 2cqw; }
.dk-kommentare p { font: 600 5.3cqw/1.3 var(--schrift); color: #c9c4e0; padding-left: 3cqw; border-left: .8cqw solid #3b3560; }
.dk-ruhig .dk-innen { justify-content: center; text-align: center; gap: 3cqw; padding: 8cqw; }
.dk-ruhig .dk-status { position: absolute; top: 4cqw; left: 5cqw; right: 5cqw; }
.dk-ruhig p { font: 600 7.2cqw/1.35 var(--schrift); color: #c9c4e0; }
.dk-ruhig p b { color: #fff; }
.dk-mond { font-size: 20cqw !important; line-height: 1 !important; color: var(--dk-gelb) !important; }

/* Ohne Influencer: was sie tun, mit einem Beispielvideo */
.dk-leer h3 { font-size: 1.45em; margin-bottom: .3em; }
.dk-leer > p { font-weight: 600; line-height: 1.4; }
.dk-drei { list-style: none; display: flex; flex-direction: column; gap: .55em; margin: .8em 0 !important; padding: 0; }
.dk-drei li { display: flex; flex-direction: column; gap: .15em; padding: .6em .8em; border-radius: .7em; background: #fff; border: 1px solid var(--dk-linie); border-left: .35em solid var(--dk-gelb); }
.dk-drei li.nacht { border-left-color: var(--dk-violett); }
.dk-drei li.sturm { border-left-color: var(--dk-pink); }
.dk-drei b { font: 700 1.02em/1.2 var(--zier); }
.dk-drei span { font-size: .88em; font-weight: 600; color: var(--dk-tinte2); line-height: 1.38; }
.dk-weg { padding: .6em .8em; border-radius: .7em; background: #ece9fb; font-weight: 600; line-height: 1.4; }

/* Die Seite „gegen wen?“ */
.dk-wahlseite { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .9em 1em 1.1em; display: flex; flex-direction: column; gap: .8em; }
.dk-wahl-kopf { display: flex; align-items: center; gap: .8em; padding: .6em .8em; border-radius: .8em; background: #1d1a33; color: #ecebf5; }
.dk-wahl-kopf p { font-size: .9em; font-weight: 600; line-height: 1.4; }
.dk-ziele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.dk .dk-ziel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .1em .45em; padding: .45em .65em .55em; text-align: left;
  color: var(--dk-tinte); background: #fff; border: 2px solid var(--dk-linie); border-radius: .65em; cursor: pointer; font: inherit; }
.dk .dk-ziel:hover:not(:disabled) { border-color: #c4b9f7; background: #fff; }
.dk .dk-ziel.an { border-color: var(--dk-pink); background: #fff1f6; }
.dk-rang { font: 800 .85em/1 var(--schrift); color: var(--dk-violett2); }
.dk-ziel-name { font: 700 .95em/1.2 var(--zier); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-ziel small { grid-column: 2; font-size: .76em; font-weight: 700; color: var(--dk-leise); }
.dk-ruf { grid-column: 1 / -1; display: block; height: .3em; border-radius: 999px; background: var(--dk-hell); overflow: hidden; }
.dk-ruf b { display: block; height: 100%; background: linear-gradient(90deg, var(--dk-violett), var(--dk-pink)); }
.dk .dk-niemand { display: block; text-align: center; font-weight: 800; }

/* Schmaler (Handy quer, ~650 px): das Handy bleibt rechts, nur kleiner; ganz schmal eine Spalte, das Handy unter dem Team */
@container (max-width: 760px) {
  .dk-haupt { gap: .8em; padding: .7em .8em 1em; }
  .dk-claim { display: none; }
  .dk-ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 540px) {
  .dk-haupt { grid-template-columns: minmax(0, 1fr); }
  .dk-seite { position: static; justify-self: center; width: min(17em, 100%); }
  .dk-kanal small { display: none; }
  .dk-ziele { grid-template-columns: minmax(0, 1fr); }
  .dk-zahlen { flex-direction: column; }
}