/* =====================================================================================
   Kapitel 7 · fünf Beispielseiten für junge Creator, im Browserfenster gezeichnet.
   Jede hat ihre eigene Bildwelt; Bilder in bild/art/ (selbst erzeugt, kunst.py).
   Maße in cqw/cqh beziehen sich auf den Bildschirm im Gerät (.schirm).
   ===================================================================================== */
.mini {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 2cqh; padding: 0 3.2cqw 3cqh;
  font-family: "Mona Sans", var(--schrift); line-height: 1.2;
}
.mini::after { content: ""; position: absolute; inset: 0; background: url("../bild/art/korn.png"); opacity: .07; mix-blend-mode: overlay; pointer-events: none; }
.mini p { margin: 0; }
.mini img { display: block; }
.m-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 2.4cqw; min-height: max(38px, 9cqh); font-size: clamp(10px, 1.35cqw, 14px); }
.m-logo { font-size: clamp(14px, 2.3cqw, 24px); }
.m-menue { display: flex; gap: 2.2cqw; margin-left: auto; opacity: .75; white-space: nowrap; }
.m-knopf { display: inline-flex; align-items: center; padding: .72em 1.35em; border-radius: 99px; font-weight: 800; font-size: clamp(10px, 1.4cqw, 15px); white-space: nowrap; }
.m-play { position: relative; flex: none; width: max(28px, 4.4cqw); height: max(28px, 4.4cqw); border-radius: 50%; }
.m-play::after { content: ""; position: absolute; left: 39%; top: 31%; border-style: solid; border-width: .5em 0 .5em .82em; border-color: transparent transparent transparent currentColor; font-size: clamp(9px, 1.3cqw, 14px); }
.m-welle { flex: 1; display: flex; align-items: center; gap: 3px; height: max(22px, 4.6cqh); }
.m-welle i { flex: 1; height: 100%; border-radius: 3px; transform-origin: 50% 50%; animation: welle 1.2s ease-in-out infinite; }
.m-welle i:nth-child(2n) { animation-delay: -.35s; }
.m-welle i:nth-child(3n) { animation-delay: -.7s; }
.m-welle i:nth-child(5n) { animation-delay: -.95s; }
.m-welle i:nth-child(7n) { animation-delay: -.2s; }
@keyframes welle { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }

/* ---------- 1 · vexa: Streamraum bei Nacht. Indigo, Violett, Koralle, Eisblau ---------- */
.m-stream { background: radial-gradient(70% 70% at 85% 0%, #3b1a8f, transparent 65%), #160c3d; color: #eef0ff; }
.m-stream .m-logo {
  font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(90deg, #c9f2ff, #9b7bff 55%, #ff5d73); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m-live { display: inline-flex; align-items: center; gap: .45em; padding: .38em .85em; border-radius: 99px; background: #ff5d73; color: #fff; font-weight: 800; }
.m-live i { width: .5em; height: .5em; border-radius: 50%; background: #fff; animation: blinken 1.2s infinite; }
@keyframes blinken { 50% { opacity: .25; } }
.m-buehne { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(201, 242, 255, .18), 0 24px 60px -20px rgba(124, 77, 255, .7); }
.m-szene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.m-hud { position: absolute; z-index: 1; padding: .4em .75em; border-radius: 8px; background: rgba(22, 12, 61, .72); backdrop-filter: blur(6px); font-size: clamp(9px, 1.15cqw, 12px); font-weight: 700; }
.m-hud-l { left: 1.4cqw; top: 1.6cqh; }
.m-hud-r { right: 1.4cqw; top: 1.6cqh; display: inline-flex; align-items: center; gap: .45em; }
.m-hud-r i { width: .5em; height: .5em; border-radius: 50%; background: #ff5d73; }
.m-cam {
  position: absolute; z-index: 1; left: 1.4cqw; bottom: 1.6cqh; width: max(54px, 11cqw); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, #7c4dff, #ff5d73); box-shadow: 0 0 0 3px #160c3d, 0 0 0 5px #ff5d73;
}
.m-cam svg { width: 100%; height: 100%; fill: #160c3d; }
.m-cam svg rect { fill: #c9f2ff; }
.m-chat {
  position: absolute; z-index: 1; right: 1.4cqw; bottom: 1.6cqh; width: 28cqw; padding: 1.2cqh 1.1cqw; display: grid; gap: .8cqh;
  border-radius: 12px; background: rgba(22, 12, 61, .62); backdrop-filter: blur(10px); border: 1px solid rgba(201, 242, 255, .16);
  font-size: clamp(9px, 1.15cqw, 12px);
}
.m-chat b { margin-right: .45em; color: #c9f2ff; }
.m-chat p:nth-child(2) b { color: #ff9bab; }
.m-chat p:nth-child(3) b { color: #b49bff; }
.m-unten { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.4cqw; }
.m-stream .m-titel { font-family: "Archivo", sans-serif; font-stretch: 112%; font-weight: 800; font-size: clamp(13px, 2.3cqw, 24px); letter-spacing: -.015em; }
.m-ziel { display: grid; grid-template-columns: 1fr auto; gap: .5cqh 1cqw; font-size: clamp(9px, 1.15cqw, 12px); }
.m-ziel span { opacity: .75; }
.m-ziel i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(238, 240, 255, .14); overflow: hidden; }
.m-ziel em { display: block; width: 87%; height: 100%; background: linear-gradient(90deg, #7c4dff, #ff5d73); }
.m-stream .m-knopf { background: #eef0ff; color: #160c3d; }

/* ---------- 2 · JUNO: Chrom auf Kirsche ---------- */
.m-rap { background: radial-gradient(90% 80% at 20% 30%, #6e0d27, #2a0410 70%); color: #fff2f5; }
.m-rap .m-logo { font-family: "Archivo", sans-serif; font-stretch: 62%; font-weight: 900; font-size: clamp(18px, 3cqw, 32px); letter-spacing: .14em; }
.m-rap-feld { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr; gap: 4cqw; align-items: center; }
.m-platte { position: relative; height: min(58cqh, 40cqw); aspect-ratio: 1; margin-right: 10cqw; }
.m-vinyl {
  position: absolute; top: 4%; left: 40%; height: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #ff7aa8 0 9%, #1a0208 9.5% 11%, #111 11.5%), repeating-radial-gradient(circle, #151515 0 2px, #222 2px 4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: drehen 6s linear infinite;
}
.m-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 40%, rgba(255, 255, 255, .14) 48%, transparent 56%); }
@keyframes drehen { to { transform: rotate(1turn); } }
.m-cover { position: relative; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 30px 60px -16px rgba(0, 0, 0, .7); }
.m-rap-text { display: grid; gap: 2.2cqh; justify-items: start; }
.m-pille { padding: .4em .9em; border-radius: 99px; border: 1px solid rgba(255, 242, 245, .4); font-size: clamp(9px, 1.2cqw, 12px); font-weight: 650; }
.m-rap .m-gross {
  font-family: "Archivo", sans-serif; font-stretch: 62%; font-weight: 900; font-size: clamp(44px, 13cqw, 150px); line-height: .82; letter-spacing: -.01em;
  background: linear-gradient(175deg, #ffffff 0%, #c9c9d8 35%, #6b6b7e 52%, #f1f1fa 66%, #9a9ab0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m-knoepfe { display: flex; gap: 1.2cqw; flex-wrap: wrap; }
.m-rap .m-knopf { background: #ff7aa8; color: #2a0410; }
.m-rap .m-knopf-leer { background: transparent; color: #fff2f5; box-shadow: inset 0 0 0 1.5px rgba(255, 242, 245, .6); }
.m-tour { display: flex; gap: 1.6cqw; flex-wrap: wrap; font-size: clamp(9px, 1.2cqw, 12px); opacity: .9; }
.m-tour b { color: #ff7aa8; margin-right: .3em; }
.m-rap .m-spieler {
  display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqh 1.4cqw; border-radius: 14px;
  background: rgba(255, 242, 245, .08); border: 1px solid rgba(255, 242, 245, .14); backdrop-filter: blur(10px); font-size: clamp(9px, 1.2cqw, 12px);
}
.m-rap .m-play { background: #fff2f5; color: #2a0410; }
.m-spur { font-weight: 750; white-space: nowrap; }
.m-rap .m-welle i { background: rgba(255, 242, 245, .35); }
.m-rap .m-welle i:nth-child(-n+12) { background: #ff7aa8; }
.m-spieler em { font-style: normal; opacity: .7; white-space: nowrap; }

/* ---------- 3 · DRIFT: Beton, Tinte, Signalorange ---------- */
.m-drop { background: #d9d4cc; color: #151515; }
.m-band {
  position: absolute; left: 0; top: 36%; white-space: nowrap; pointer-events: none;
  font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 900; font-size: clamp(60px, 19cqw, 220px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(21, 21, 21, .16); animation: band 22s linear infinite;
}
@keyframes band { to { transform: translateX(-50%); } }
.m-drop .m-logo { font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 900; letter-spacing: .02em; }
.m-korb { padding: .35em .8em; border-radius: 99px; background: #151515; color: #d9d4cc; font-weight: 700; }
.m-drop-feld { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 3cqw; align-items: center; }
.m-drop-text { display: grid; gap: 1.8cqh; justify-items: start; }
.m-drop .m-titel { font-family: "Archivo", sans-serif; font-stretch: 112%; font-weight: 900; font-size: clamp(18px, 4cqw, 44px); line-height: .95; letter-spacing: -.025em; }
.m-drop .m-unter { font-size: clamp(10px, 1.5cqw, 16px); }
.m-preis { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(16px, 3cqw, 32px); color: #ff5b14; }
.m-groessen { display: flex; gap: .8cqw; }
.m-groessen span { display: grid; place-items: center; min-width: max(26px, 4cqw); height: max(26px, 4cqw); border-radius: 8px; border: 1.5px solid #151515; font-weight: 750; font-size: clamp(9px, 1.25cqw, 13px); }
.m-groessen .an { background: #151515; color: #d9d4cc; }
.m-drop .m-knopf { background: #ff5b14; color: #151515; }
.m-ware { position: relative; height: 100%; display: grid; place-items: center; }
.m-kreis { position: absolute; width: min(92%, 64cqh); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a4d, #ff5b14 60%, #e04608); }
.m-ware img { position: relative; width: min(96%, 66cqh); height: auto; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .35)); transform: rotate(-6deg); }
.m-sticker {
  position: absolute; right: 2%; top: 10%; display: grid; place-items: center; width: max(64px, 12cqw); aspect-ratio: 1; border-radius: 50%;
  background: #f4ff6b; color: #151515; text-align: center; font-size: clamp(9px, 1.2cqw, 12px); line-height: 1.1; transform: rotate(12deg); box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
.m-sticker b { font-family: ui-monospace, "Consolas", monospace; font-size: clamp(10px, 1.6cqw, 16px); }

/* ---------- 4 · Zwei Mics, kein Plan: Nachtblau und Sonnengelb ---------- */
.m-pod { background: #0d1b4c; color: #f4f6ff; }
.m-pod .m-logo { font-family: "Gloock", Georgia, serif; font-weight: 400; color: #ffd447; }
.m-pod-feld { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr; gap: 4cqw; align-items: center; }
.m-pod .m-cover { height: min(62cqh, 36cqw); width: auto; aspect-ratio: 1; border-radius: 18px; transform: rotate(-4deg); box-shadow: 18px 22px 0 #ff5b8a; }
.m-pod-text { display: grid; gap: 2cqh; }
.m-folge { font-size: clamp(10px, 1.35cqw, 14px); color: #ffd447; font-weight: 650; }
.m-pod .m-titel { font-family: "Gloock", Georgia, serif; font-size: clamp(18px, 4cqw, 44px); line-height: 1.02; text-wrap: balance; }
.m-pod .m-spieler { display: flex; align-items: center; gap: 1.4cqw; font-size: clamp(9px, 1.2cqw, 12px); }
.m-pod .m-play { background: #ffd447; color: #0d1b4c; }
.m-pod .m-welle i { background: #ffd447; }
.m-pod .m-welle i:nth-child(n+11) { background: rgba(255, 212, 71, .3); }
.m-folgen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqh; font-size: clamp(10px, 1.35cqw, 14px); }
.m-folgen li { display: flex; gap: 1cqw; align-items: baseline; padding: .7em .9em; border-radius: 12px; background: rgba(244, 246, 255, .07); }
.m-folgen b { font-family: "Gloock", Georgia, serif; font-weight: 400; color: #ff5b8a; }

/* ---------- 5 · miraa: Pfirsich, Flieder, drei Handys ---------- */
.m-tok { background: radial-gradient(60% 80% at 90% 20%, #ffb3d1, transparent 60%), radial-gradient(70% 80% at 10% 90%, #c8b6ff, transparent 60%), #ffe9dc; color: #2b1238; }
.m-tok .m-logo { font-weight: 900; font-stretch: 118%; }
.m-tok .m-nav .m-knopf { margin-left: auto; background: #2b1238; color: #ffe9dc; }
.m-tok-feld { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 3cqw; align-items: center; }
.m-tok-text { display: grid; gap: 2cqh; }
.m-tok .m-gross { font-weight: 900; font-stretch: 122%; font-size: clamp(30px, 8.4cqw, 96px); line-height: .88; letter-spacing: -.045em; }
.m-tok .m-unter { font-size: clamp(11px, 1.7cqw, 18px); font-weight: 550; max-width: 26ch; }
.m-zahlen { display: flex; gap: 1.2cqw; flex-wrap: wrap; }
.m-zahlen span { position: relative; display: grid; padding: .7em 1em; border-radius: 16px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(8px); font-size: clamp(9px, 1.15cqw, 12px); box-shadow: 0 8px 20px -10px rgba(43, 18, 56, .35); }
.m-zahlen b { font-size: clamp(14px, 2.4cqw, 26px); font-weight: 900; font-stretch: 112%; letter-spacing: -.02em; }
.m-mini { display: flex; align-items: flex-end; gap: 3px; height: 1.6em; margin-top: .4em; }
.m-mini em { width: 6px; border-radius: 2px; background: #ff5d8a; }
.m-mini em:nth-child(1) { height: 35%; } .m-mini em:nth-child(2) { height: 50%; } .m-mini em:nth-child(3) { height: 45%; } .m-mini em:nth-child(4) { height: 72%; } .m-mini em:nth-child(5) { height: 100%; }
.m-handys { position: relative; height: 100%; min-height: 0; }
.m-handy {
  position: absolute; top: 50%; left: 50%; height: min(74cqh, 100%); aspect-ratio: 9 / 18.5; border-radius: 18px; overflow: hidden;
  border: 4px solid #2b1238; background: #2b1238; box-shadow: 0 24px 40px -14px rgba(43, 18, 56, .55);
}
.m-handy img { width: 100%; height: 100%; object-fit: cover; }
.m-handy em { position: absolute; left: 8%; right: 8%; bottom: 6%; font-style: normal; font-weight: 750; font-size: clamp(8px, 1.1cqw, 11px); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.m-handy.h1 { transform: translate(-118%, -48%) rotate(-9deg) scale(.9); }
.m-handy.h2 { z-index: 2; transform: translate(-50%, -50%); }
.m-handy.h3 { transform: translate(28%, -48%) rotate(9deg) scale(.9); }
.m-marken { display: flex; align-items: center; gap: 2.6cqw; flex-wrap: wrap; font-size: clamp(9px, 1.25cqw, 13px); }
.m-marken span { opacity: .6; }
.m-marken b { font-weight: 900; letter-spacing: .06em; opacity: .75; }
.m-marken b.i { font-family: "Gloock", Georgia, serif; font-weight: 400; letter-spacing: 0; font-size: 1.25em; }

/* ---------- Schmales Fenster (Handy) ---------- */
@container (max-width: 560px) {
  .mini { gap: 1.6cqh; padding-inline: 4cqw; }
  .m-menue { display: none; }
  .m-chat { display: none; }
  .m-unten { grid-template-columns: 1fr auto; }
  .m-ziel { display: none; }
  .m-rap-feld { grid-template-columns: 1fr; gap: 2cqh; }
  .m-platte { height: 26cqh; margin-right: 0; }
  .m-rap .m-gross { font-size: clamp(44px, 22cqw, 110px); }
  .m-tour { display: none; }
  .m-spur { display: none; }
  .m-drop-feld { grid-template-columns: 1fr; gap: 1cqh; }
  .m-ware { order: -1; height: 30cqh; }
  .m-kreis { width: 28cqh; }
  .m-ware img { width: 30cqh; }
  .m-sticker { width: 58px; }
  .m-drop .m-titel { font-size: clamp(18px, 8cqw, 34px); }
  .m-pod-feld { grid-template-columns: 1fr; gap: 2cqh; align-items: start; }
  .m-pod .m-cover { height: 24cqh; }
  .m-pod .m-titel { font-size: clamp(18px, 7.4cqw, 32px); }
  .m-folgen li:nth-child(2) { display: none; }
  .m-tok-feld { grid-template-columns: 1fr; gap: 1cqh; }
  .m-tok .m-gross { font-size: clamp(30px, 15cqw, 70px); }
  .m-handys { height: 34cqh; }
  .m-handy { height: 34cqh; }
  .m-marken { display: none; }
  .m-tok .m-nav .m-knopf { font-size: 10px; padding: .6em 1em; }
}