/* Probelauf: interaktiver Einstieg vor der Anmeldung (Prototyp, Luca 25.10.2026, dritte Fassung).
   Jede Phase passt auf einen Bildschirm (Handy und Laptop), nichts scrollt. Werte der Fragen-Animation nach InVideo gemessen. */
body.neu:has(.pl) .fuss { display: none; }
body.neu:has(.pl) .glut { height: clamp(120px, 14vw, 190px) !important; }   /* Kopf-Licht bleibt über dem Inhalt */
html:has(.pl), body.neu:has(.pl) { overflow: hidden; overscroll-behavior: none; }
body.neu:has(.pl) main { min-height: 0; }
.pl { --bz: cubic-bezier(.22, 1, .36, 1); --nr: #ff8a2a; --hoehe: calc(100svh - var(--plk, 72px));
  position: relative; display: flex; flex-direction: column; height: var(--hoehe); padding: clamp(8px, 1.8vh, 22px) var(--rand) clamp(12px, 2.4vh, 28px); overflow: hidden; }
.pl-licht { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(44% 46% at 50% 0%, rgba(255,122,26,.13), transparent 70%), radial-gradient(60% 40% at 50% 112%, rgba(255,110,26,.12), transparent 70%); }
.pl > section { position: relative; z-index: 1; flex: 1; min-height: 0; }
.pl [hidden] { display: none !important; }
.pl h1, .pl h2 { font-family: var(--schrift); font-weight: 500; letter-spacing: -.025em; line-height: 1.06; color: var(--text); }
.pl .rein { animation: pl-rein .32s var(--bz) both; }
.pl .raus { animation: pl-raus .22s var(--bz) both; }
@keyframes pl-rein { from { opacity: 0; transform: translateY(10px); } }
@keyframes pl-raus { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pl-dreh { to { transform: rotate(360deg); } }
@keyframes pl-blink { 50% { opacity: 0; } }
.pl-nr { font: italic 400 30px/1 Newsreader, Georgia, serif; color: var(--nr); letter-spacing: -.01em; font-variant-numeric: lining-nums; }

/* Pille wie auf der Startseite */
.pl-pille { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 999px; background: var(--glas), rgba(14,14,16,.6); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); font: 500 13.5px/1 var(--schrift); color: #e8e5de; }
.pl-pille .punkt { width: 7px; height: 7px; border-radius: 50%; background: #ff9a3c; box-shadow: 0 0 0 3px rgba(255,154,60,.18); }
.pl-pille .punkt.gruen { background: #37d67a; box-shadow: 0 0 0 3px rgba(55,214,122,.16); }

/* ================= 1: Fragen ================= */
.pl-fragen { display: flex; flex-direction: column; width: 100%; max-width: 980px; margin: 0 auto; }
.pl-leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; flex: none; height: 46px; margin-top: 10px; }   /* Luca 26.10.: mittig, etwas größer, etwas tiefer; Balken genau in der Mitte, Pfeil links, Zähler rechts */
.pl-leiste .pl-zurueck { grid-column: 1; justify-self: end; }
.pl-leiste .pl-balken { grid-column: 2; }
.pl-leiste .pl-zaehler { grid-column: 3; justify-self: start; }
.pl-zurueck { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; }
.pl-zurueck:hover { background: rgba(255,255,255,.1); }
.pl-zurueck svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-balken { display: flex; gap: 7px; width: 176px; }
.pl-balken i { flex: 1; height: 5px; border-radius: 9px; background: rgba(255,255,255,.12); transition: background .3s; }
.pl-balken i.an { background: var(--verlauf); }
.pl-zaehler { font: 500 16px/1 var(--schrift); color: var(--leise); font-variant-numeric: tabular-nums; }
.pl-weg { margin-left: auto; font: 500 14px/1 var(--schrift); color: var(--leise); text-decoration: none; }
.pl-weg:hover { color: var(--text); }
.pl-frage-feld { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: 4vh; }
.pl .pl-frage { min-height: 1.06em; margin: 0; max-width: 820px; font-size: clamp(30px, min(4.4vw, 6.2vh), 56px); }
.pl :is(h1, h2) em { margin-right: -.13em; }   /* kein Loch vor „?“ und „.“ */
.pl-frage .cursor { display: inline-block; width: .42em; height: .86em; margin-left: .06em; vertical-align: -.06em; background: currentColor; opacity: .5; animation: pl-blink 1s steps(1) infinite; }
/* Tippen: alle Zeichen stehen schon unsichtbar da, damit der Titel nie von einer in zwei Zeilen springt */
.pl-frage .z { visibility: hidden; }   /* nicht opacity: das Akzentwort malt seinen Verlauf per background-clip: text auch durch unsichtbare Zeichen */
.pl-frage .z.da { visibility: visible; }
.pl-frage .z.cur { position: relative; }
.pl-frage .z.cur::after { content: ""; position: absolute; left: 100%; top: .1em; width: .08em; height: .86em; margin-left: .04em; border-radius: 1px; background: rgba(255,255,255,.5); }
.pl-frage em .z.cur::after { background: rgba(255,138,42,.7); }
.pl .pl-unter { min-height: 1.5em; margin: clamp(10px, 1.6vh, 16px) 0 0; max-width: 560px; font: 400 clamp(15px, 1.25vw, 17px)/1.5 var(--schrift); color: #c2c0ba;
  opacity: 0; filter: blur(8px); transform: translateY(6px); transition: opacity .9s var(--bz), filter .9s var(--bz), transform .9s var(--bz); }
.pl .pl-unter.da { opacity: 1; filter: blur(0); transform: none; }
/* Antworten erscheinen nacheinander, jede knapp eine Sekunde aus der Unschärfe (Luca 25.10.) */
.pl .auf { animation: pl-auf .9s var(--bz) both; animation-delay: calc(var(--i, 0) * 120ms); }
@keyframes pl-auf { from { opacity: 0; filter: blur(10px) var(--dim, grayscale(0) brightness(1)); transform: translateY(12px); } }   /* ohne „to“: danach gelten wieder die eigenen Werte (z. B. Weiter gesperrt) */
/* Wechsel zur nächsten Frage: alles geht gemeinsam weich raus */
.pl .weich-raus { opacity: 0 !important; filter: blur(8px); transform: translateY(-6px); transition: opacity .35s var(--bz), filter .35s var(--bz), transform .35s var(--bz); }
.pl .weich-raus .auf { animation: none; }
.pl .vor > * { opacity: 0; pointer-events: none; }   /* Antworten warten unsichtbar auf ihren Platz, bis der Titel fertig getippt ist */
.pl-antworten { width: 100%; margin-top: clamp(18px, 3.6vh, 40px); }

/* nummerierte Antworten (Frage 1) */
.pl-liste { display: grid; gap: 10px; width: 100%; max-width: 620px; margin: 0 auto; }
.pl-opt { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 30px; align-items: center; gap: 14px; width: 100%; min-height: clamp(62px, 8.6vh, 76px); padding: 10px 18px 10px 20px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: var(--glas), rgba(16,16,17,.9); box-shadow: var(--kante); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .18s, background-color .18s, opacity .2s, transform .18s var(--bz); }
.pl-opt:hover, .pl-art:hover { border-color: rgba(255,150,50,.5); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,140,40,.09), rgba(255,140,40,0) 70%), rgba(16,16,17,.92); box-shadow: var(--kante), 0 14px 36px -18px rgba(255,120,30,.6); }
.pl-opt:active { transform: scale(.99); }
.pl-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pl-opt .pl-nr { justify-self: start; }
.pl-opt b { display: block; font: 500 17px/1.25 var(--schrift); letter-spacing: -.01em; }
.pl-opt small { display: block; margin-top: 3px; font: 400 14px/1.35 var(--schrift); color: var(--leise); }
.pl-opt .zu { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.55); transition: all .2s; }
.pl-opt .zu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-opt:hover .zu, .pl-art:hover .zu { border-color: transparent; background: var(--verlauf); color: #17110a; }
.pl-opt.an, .pl-art.an { border-color: rgba(255,166,61,.75); background: linear-gradient(180deg, rgba(255,140,40,.16), rgba(255,140,40,.04)), rgba(16,16,17,.92);
  box-shadow: var(--kante), 0 0 0 1px rgba(255,150,50,.35), 0 16px 40px -18px rgba(255,120,30,.75); }
.pl-opt.an .zu, .pl-art.an .zu { border-color: transparent; background: var(--verlauf); color: #17110a; }
.wartet .pl-opt:not(.an), .wartet .pl-art:not(.an) { opacity: .4; }

/* Arten mit echten 16:9-Videos (Frage 2), so hell wie in der Bibliothek */
.pl-arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); width: 100%; }
.pl-art { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(16,16,17,.92); box-shadow: var(--kante);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s, opacity .2s, transform .18s var(--bz); }
.pl-art .film { position: relative; aspect-ratio: 16 / 9; background: #0d0d0e; }
.pl-art video, .pl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-art video { opacity: 0; transition: opacity .6s var(--bz); }   /* erst sichtbar, wenn es wirklich läuft: kein Sprung vom Standbild */
.pl-art video.laeuft { opacity: 1; }
.pl-art .unten { display: grid; grid-template-columns: auto minmax(0, 1fr) 30px; align-items: center; gap: 12px; padding: 14px 16px 16px; }
.pl-art .pl-nr { font-size: 26px; }
.pl-art b { display: block; font: 500 17px/1.2 var(--schrift); }
.pl-art .zu { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.55); transition: all .2s; }
.pl-art .zu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-art small { display: block; margin-top: 3px; font: 400 13.5px/1.35 var(--schrift); color: var(--leise); }

/* Name und Farbe (Frage 3) */
.pl-name { width: 100%; max-width: 560px; margin: 0 auto; display: grid; gap: clamp(14px, 2.2vh, 22px); text-align: left; }
.pl-eingabefeld { position: relative; }
.pl-eingabefeld input { width: 100%; height: clamp(56px, 7.4vh, 66px); padding: 0 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: var(--glas), rgba(14,14,15,.92);
  box-shadow: var(--kante); color: #fff; font: 500 clamp(19px, 2vw, 22px)/1 var(--schrift); letter-spacing: -.01em; outline: none; transition: border-color .18s; }
.pl .pl-eingabefeld input:focus, .pl .pl-eingabefeld input:focus-visible { outline: none; border-color: rgba(255,166,61,.6); box-shadow: var(--kante), 0 0 0 4px rgba(255,140,40,.12); }
.pl-eingabefeld input::placeholder { color: #8d8b85; }
.pl-eingabefeld .rest { position: absolute; right: 16px; top: 50%; translate: 0 -50%; font: 500 12.5px/1 var(--schrift); color: #8d8b85; font-variant-numeric: tabular-nums; }
.pl-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-zeile > span { width: 100%; margin-bottom: 2px; font: 500 13.5px/1 var(--schrift); color: var(--leise); }
.pl-zeile > span b { margin-left: 4px; font-weight: 600; color: #fff; }
/* acht Standardfarben, Schwarz und Weiß mit sichtbarem Rand, gewählt mit orangem Ring */
.pl-farbe { position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--f); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: transform .15s var(--bz), box-shadow .2s; }
.pl-farbe:hover { transform: scale(1.1); }
.pl-farbe.an { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 3px #0a0a0b, 0 0 0 5px #ffa24a, 0 6px 18px -4px rgba(255,130,40,.6); }
.pl-farbe:focus-visible { outline: 2px solid #ffa24a; outline-offset: 4px; }
.pl-weiter { justify-self: start; }
.pl-weiter[disabled] { --dim: grayscale(.7) brightness(.5); filter: blur(0) var(--dim); pointer-events: none; }   /* gleiche Filterliste wie im Einblenden: sonst springt er kurz orange auf (Luca 26.10.) */   /* nicht über opacity: die Einblende-Animation (.auf) würde sie überschreiben */
.pl .pl-name.vor > .pl-weiter { opacity: 0; }   /* Luca 26.10.: Weiter erst mit den anderen Teilen, nicht schon während der Titel tippt */
.knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ================= 2: Vorführung ================= */
.pl-demo { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 18px); width: 100%; max-width: 1400px; margin: 0 auto; }
.pl-schritte { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: none; margin: 0; padding: 0; }
.pl-schritte li { display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; padding: 0 14px; border-radius: 13px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025);
  color: #8d8b85; font: 500 14px/1.2 var(--schrift); transition: all .3s var(--bz); }
.pl-schritte li .pl-nr { font-size: 21px; color: #9a7350; transition: color .3s; }
.pl-schritte li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-schritte li.jetzt { border-color: rgba(255,166,61,.5); background: linear-gradient(180deg, rgba(255,140,40,.12), rgba(255,140,40,.03)); color: #fff; }
.pl-schritte li.jetzt .pl-nr { color: var(--nr); }
.pl-schritte li.fertig { color: #c9c6bf; }
.pl-schritte li.fertig .pl-nr { color: var(--nr); }
.pl-schritte li .ok { display: none; width: 18px; height: 18px; margin-left: auto; flex: none; border-radius: 50%; background: var(--verlauf); }
.pl-schritte li.fertig .ok { display: grid; place-items: center; }
.pl-schritte li .ok svg { width: 11px; height: 11px; fill: none; stroke: #17110a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Aktionsknopf auf der Bühne und im Coach, leuchtet, wenn er dran ist */
.pl-aktion { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(255,255,255,.07); color: #fff; font: 600 14.5px/1 var(--schrift); white-space: nowrap; cursor: pointer; transition: background .18s, border-color .18s, transform .15s; }
.pl-aktion:hover { background: rgba(255,255,255,.12); }
.pl-aktion:active { transform: scale(.97); }
.pl-aktion svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-aktion.ziel, .pl-senden.ziel { background: var(--verlauf); border-color: transparent; color: #17110a; filter: brightness(1.08) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); animation: pl-puls 1.6s ease-out infinite; }
.pl-aktion.ok { background: #37d67a; border-color: transparent; color: #06210f; animation: pl-ok .35s var(--bz); }
.pl-aktion.ok svg { stroke-width: 2.6; }
.pl-aktion.ok::after { content: ''; width: 17px; flex: none; }   /* unsichtbares Gegenstück zum Haken: das Wort „Kopiert“ steht genau in der Mitte (Luca 26.10.) */
@keyframes pl-ok { from { background-color: #ff9a3c; } }   /* nur die Farbe wechselt, der Knopf bleibt gleich groß */
@keyframes pl-puls { 0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 0 rgba(255,140,40,.55); } 70%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 12px rgba(255,140,40,0); } }

/* Bühne: ein Fenster, das von der Bibliothek zur AI wechselt */
.pl-buehne { position: relative; flex: 1; min-width: 0; min-height: 0; }
.pl-bib, .pl-ki { position: absolute; inset: 0; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; overflow: hidden;
  background: var(--glas), rgba(12,12,13,.94); box-shadow: var(--kante); }
/* Wechsel Bibliothek → AI wie ein Tab-Wechsel: das Fenster bleibt stehen, nur der Inhalt blendet über (kein leeres Loch dazwischen) */
.pl-bib.weg-links { animation: pl-weg-l .55s var(--bz) both; z-index: 1; }
.pl-ki.von-rechts { animation: pl-von-r .55s var(--bz) both; }
@keyframes pl-weg-l { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(6px); } }
@keyframes pl-von-r { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
.pl-fenster-kopf { display: flex; align-items: center; gap: 12px; flex: none; height: 44px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.pl-ampel { display: flex; gap: 6px; }
.pl-ampel i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.pl-fenster-kopf { display: grid; grid-template-columns: 1fr auto 1fr; }
.pl-adresse { flex: 1; text-align: center; font: 500 13px/1 var(--schrift); color: #8d8b85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-marke-uebung { justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,166,61,.35);
  background: rgba(255,140,40,.1); font: 600 12px/1 var(--schrift); color: #ffb15c; white-space: nowrap; }
.pl-marke-uebung::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff9a3c; }
.pl-bib-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(14px, 1.8vw, 22px); }
.pl-bib-video { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.pl-bib-video video { display: block; width: min(100cqw, 100cqh * 16 / 9); height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: #0d0d0e; object-fit: cover; }
.pl-bib-info { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; }
.pl-bib-info b { display: block; font: 500 18px/1.2 var(--schrift); }
.pl-bib-info small { display: block; margin-top: 4px; font: 400 13.5px/1.3 var(--schrift); color: var(--leise); }
#pl-prompt-kopieren { flex: none; }   /* nie zusammendrücken: mit „Kopiert“ bleibt der Knopf genau so groß wie vorher (Luca 26.10.) */
.pl-bib-info .fuer { white-space: nowrap; }

/* AI-Fenster */
.pl-verlauf { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 18px clamp(14px, 2vw, 26px); overflow: hidden; }
.pl-leer { margin: auto; text-align: center; font: 500 15px/1.5 var(--schrift); color: #8d8b85; }
.pl-leer b { display: block; margin-bottom: 4px; font: 500 clamp(20px, 2vw, 26px)/1.2 var(--schrift); color: #d8d5ce; letter-spacing: -.02em; }
.pl-msg { display: flex; gap: 12px; max-width: 100%; animation: pl-rein .32s var(--bz) both; }
.pl-msg.ich { align-self: flex-end; max-width: min(560px, 92%); flex-direction: column; align-items: flex-end; gap: 8px; }
.pl-msg.ich .text { padding: 12px 15px; border-radius: 16px 16px 4px 16px; background: rgba(255,255,255,.08); font: 400 14.5px/1.5 var(--schrift); color: #ece9e2; }
.pl-msg.ich .anh { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pl-msg.ki .ava { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(180deg, #2a2a2e, #18181b); border: 1px solid rgba(255,255,255,.12); }
.pl-msg.ki .ava svg { width: 16px; height: 16px; fill: none; stroke: #ffa24a; stroke-width: 2; stroke-linecap: round; }
.pl-msg.ki .koerper { flex: 0 1 auto; max-width: 560px; min-width: 0; display: grid; gap: 8px; padding-top: 5px; }
.pl-status { display: flex; align-items: center; gap: 10px; font: 500 14px/1.35 var(--schrift); color: #d6d3cc; animation: pl-rein .3s var(--bz) both; }
.pl-status .s { flex: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--gold); border-radius: 50%; animation: pl-dreh .7s linear infinite; }
.pl-status > span:last-child { flex: 1 1 auto; min-width: 0; }   /* Haken bleibt neben dem Text, auch wenn der Text umbricht (360 px) */
.pl-status.ok .s { border: 0; background: #37d67a; animation: none; display: grid; place-items: center; }
.pl-status.ok .s::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border: 2px solid #fff; border-top: 0; border-right: 0; rotate: -45deg; }
.pl-status .alt { color: #ff8f7a; text-decoration: line-through; text-decoration-color: rgba(255,143,122,.6); }
.pl-status .neu { color: #8fe0ad; }
.pl-status .fl { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.pl-eingabe { flex: none; margin: 0 clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px); padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035); transition: border-color .2s; }
.pl-eingabe.offen { border-color: rgba(255,166,61,.5); }
.pl-anhaenge { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-anhaenge:not(:empty) { margin-bottom: 10px; }
.pl-anhang { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 7px 12px 7px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.05); animation: pl-anhang .36s var(--bz) both; }
@keyframes pl-anhang { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.pl-anhang .bild { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #f4f8f7; overflow: hidden; }
.pl-anhang .bild.doc { background: rgba(255,255,255,.08); }
.pl-anhang .bild.video { width: 48px; background: #111; }
.pl-anhang .bild.video img { width: 100%; height: 100%; object-fit: cover; }
.pl-anhang .bild.doc svg { width: 17px; height: 17px; fill: none; stroke: #e8e5de; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-anhang b { display: block; font: 600 13px/1.2 var(--schrift); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-anhang small { display: block; font: 400 12px/1.2 var(--schrift); color: var(--leise); }
.pl-anhang > span:last-child { min-width: 0; }
.pl-eingabe-zeile { display: flex; align-items: flex-end; gap: 10px; }
.pl-feld { flex: 1; min-width: 0; min-height: 42px; padding: 10px 6px; font: 400 15px/1.5 var(--schrift); color: #fff; }
.pl-feld:empty::before { content: attr(data-leer); display: block; overflow: hidden; color: #8d8b85; white-space: nowrap; text-overflow: ellipsis; }   /* schmales Handy: eine Zeile statt Wort für Wort untereinander */
.pl-feld .cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: #ffa24a; animation: pl-blink 1s steps(1) infinite; }
.pl-senden { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .2s, opacity .2s; }
.pl-senden[disabled] { opacity: .35; cursor: default; }
.pl-senden svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ================= 3: Ergebnis =================
   Laptop: Film links, Karte rechts, die Karte ist genau so hoch wie der Film (Luca 25.10.). Tablet und Handy: Karte unter dem Film, gleich breit. */
.pl-ergebnis { --kw: clamp(360px, 27vw, 420px); --lu: clamp(16px, 1.8vw, 26px);
  display: grid; grid-template-columns: auto var(--kw); justify-content: center; align-content: center; align-items: stretch; gap: var(--lu);
  width: 100%; max-width: 1600px; margin: 0 auto; container-type: size; animation: pl-rein .5s var(--bz) both; }
.pl-erg-film { display: flex; flex-direction: column; gap: var(--lu); min-width: 0; }
.pl-reiter { display: flex; gap: 4px; flex: none; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.04); }
/* unten links (gegenüber dem Ton-Knopf): oben stehen in den Filmen die Überschriften */
.pl-rahmen .pl-reiter { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(10,10,11,.62); border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pl-reiter button { min-height: 36px; padding: 0 15px; border: 0; border-radius: 9px; background: none; color: #a5a39c; font: 500 14px/1 var(--schrift); cursor: pointer; white-space: nowrap; }
.pl-reiter button.an { background: rgba(255,255,255,.1); color: #fff; }
.pl-reiter[hidden] { display: none; }
.pl-rahmen { position: relative; flex: none; width: min(100cqw - var(--kw) - var(--lu), (100cqh - var(--sh, 150px) - var(--lu)) * 16 / 9); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #e6efed;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -40px rgba(0,0,0,.9); }
/* Film schon während der Übung laden (probelauf.js filmLaden): Ergebnis unsichtbar, aber mit echter Fläche, damit der Film sich richtig aufbaut */
.pl > .pl-ergebnis.vorladen[hidden] { display: flex !important; position: absolute; inset: 0; z-index: -1; visibility: hidden; pointer-events: none; overflow: hidden; animation: none; }
.pl-rahmen iframe { position: absolute; left: 0; top: 0; width: calc(100% + 2px); height: calc(100% + 2px); border: 0; pointer-events: none; }   /* 2 px Überstand: Safari rundet das iframe auf ganze Pixel ab, sonst heller Streifen unten/rechts (Luca 27.10.) */   /* echte Größe, der Film verkleinert sich selbst per zoom (probelauf/zoom.js): kein Absturz am iPhone */
.pl-rahmen video { position: absolute; left: 0; top: 0; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; background: #000; }
.pl-ton { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(10,10,11,.6); color: #fff; cursor: pointer; backdrop-filter: blur(8px); }
.pl-ton svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-ton .an { display: none; } .pl-ton.laut .an { display: inline; } .pl-ton.laut .aus { display: none; }

.pl-erg-karte { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 0; overflow: hidden; container: karte / size; padding: clamp(20px, 1.9vw, 28px); border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
  background: radial-gradient(110% 60% at 100% 0%, rgba(255,122,26,.13), transparent 70%), var(--glas), rgba(14,14,15,.92); box-shadow: var(--kante); animation: pl-karte .7s .2s var(--bz) both; }
@keyframes pl-karte { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } }
/* „Was du noch wissen solltest“ (Luca 26.10.): rot markiert, damit man es wirklich liest */
.pl-wissen { position: relative; flex: none; min-width: 0; padding: 16px 18px 18px; border: 1px solid rgba(255,77,61,.5); border-radius: 16px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,60,40,.16), transparent 70%), rgba(255,60,40,.04); box-shadow: 0 0 34px -14px rgba(255,60,40,.55); animation: pl-karte .7s .45s var(--bz) both; }
.pl .pl-erg-karte .pl-wissen h2 { margin: 0; font-size: var(--wh, 34px); line-height: 1.04; letter-spacing: -.035em; white-space: nowrap; }
/* „Demo!“ wie die orangen Akzentwörter, nur in Rot (Luca 26.10.) */
body.neu .pl-wissen h2 em { background-image: linear-gradient(100deg, #ff3b30 0%, #ff9a8a 22%, #d61f14 46%, #ff6b57 70%, #ff3b30 100%); filter: drop-shadow(0 0 12px rgba(255,60,40,.22)); }
@keyframes farbe-schrift-rot { 0%, 100% { color: #ff4a3a; } 30% { color: #ff9a8a; } 62% { color: #d8281c; } }
@media (max-width: 860px), (hover: none) { body.neu .pl-wissen h2 em { background: none; color: #ff4a3a; filter: none; animation-name: farbe-schrift-rot; } }
@supports (-webkit-touch-callout: none) { body.neu .pl-wissen h2 em { background: none; color: #ff4a3a; filter: none; animation-name: farbe-schrift-rot; } }
.pl-erg-karte > .pl-wissen { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }   /* keine leere Mitte: der Kasten füllt bis zum Rabatt */
.pl-wissen-satz { margin: 10px 0 0; font: 400 15px/1.45 var(--schrift); color: #d6d3cc; text-wrap: pretty; }
.pl-wissen-satz b { font-weight: 600; color: #fff; }
/* hohe Karte (Laptop): alles etwas größer, keine leere Mitte */
@container karte (min-height: 540px) {
  .pl .pl-wissen { padding: 18px 20px 20px; }
  .pl .pl-wissen-satz { margin-top: 14px; font-size: 16.5px; line-height: 1.5; }
  .pl .pl-erg-karte .pl-prozent { font-size: 84px; }
}
/* Karte so hoch wie der Film (1440×900: 529 px): Kleingedrucktes weg, damit „Rabatt sichern“ ganz drin bleibt */
@container karte (max-height: 600px) { .pl .pl-erg-karte .pl-erg-fein, .pl .pl-uhr-text { display: none; } }
/* Laptop mit 900 px Höhe und weniger (Karte 471 bis 600 px): etwas enger, sonst ragte „Rabatt sichern“ unten 1,4 px aus der Karte (27.10.) */
@container karte (min-height: 471px) and (max-height: 600px) {
  .pl .pl-wissen { padding: 14px 18px 15px; }
  .pl .pl-wissen-satz { margin-top: 8px; font-size: 14.5px; }
  .pl .pl-erg-unten { gap: 10px; }
  .pl .pl-ang-oben { gap: 10px 18px; padding: 14px 20px 15px; }
  .pl .pl-erg-karte .pl-prozent { font-size: 66px; }
}
/* niedrige Karte (z. B. 1000×508): Rabatt flach wie am Handy, Kleingedrucktes weg */
@container karte (max-height: 470px) {
  .pl .pl-erg-karte .pl-erg-fein, .pl .pl-angebot-marke, .pl .pl-uhr-text { display: none; }
  .pl .pl-ang-oben { grid-template-areas: "p t"; padding: 11px 14px 12px; }
  .pl .pl-ang-unten { padding: 9px 14px 12px; }
  .pl .pl-uhr b { min-width: 34px; height: 30px; font-size: 16px; border-radius: 8px; }
  .pl .pl-uhr small { font-size: 9.5px; }
  .pl .pl-uhr > i { padding-top: 6px; font-size: 14px; }
  .pl .pl-erg-karte .pl-prozent { font-size: 50px; }
  .pl .pl-wissen { padding: 12px 14px 14px; }
  .pl .pl-wissen-satz { margin-top: 7px; font-size: 13.5px; line-height: 1.38; }
}
/* „So einfach geht's“ unter dem Film (Luca 26.10.): ein Satz an die AI → ein ganz neues Video. Genau so breit wie der Film. */
.pl-so { width: 0; min-width: 100%; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.7fr); align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.9vw, 26px);
  border: 1px solid rgba(255,166,61,.4); border-radius: 22px; background: radial-gradient(90% 140% at 0% 0%, rgba(255,122,26,.2), transparent 65%), var(--glas), rgba(16,14,13,.94);
  box-shadow: var(--kante), 0 30px 60px -40px rgba(255,110,20,.6); animation: pl-karte .7s .35s var(--bz) both; }
.pl .pl-so h3 { margin: 0; font: 500 clamp(26px, 2.3vw, 36px)/1.05 var(--schrift); letter-spacing: -.03em; color: #fff; }
.pl .pl-so h3 em { font: italic 400 1.08em/1 Newsreader, Georgia, serif; color: #ff8a2a; margin-right: -.06em; }
.pl-so-kopf small { display: block; margin-top: 8px; font: 400 13.5px/1.4 var(--schrift); color: #a5a39c; }
.pl-so-ablauf { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.pl-so-prompt { padding: 13px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px 18px 6px 18px; background: rgba(255,255,255,.07); font: 500 15px/1.4 var(--schrift); color: #fff; }
.pl-so-pfeil { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--verlauf); color: #17110a; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 24px -6px rgba(255,130,30,.8); }
.pl-so-pfeil svg, .pl-so-stern svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-so-neu { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-so-stern { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,166,61,.5); background: rgba(255,140,40,.14); color: #ffb15c; }
.pl-so-stern svg { fill: currentColor; stroke-width: 1.2; }
.pl-so-neu b { display: block; font: 600 16px/1.25 var(--schrift); color: #fff; }
.pl-so-neu small { display: block; margin-top: 3px; font: 400 13px/1.35 var(--schrift); color: #c2c0ba; }
.pl-erg-unten { display: grid; gap: 12px; }
.pl-erg-unten .pl-konto { width: 100%; margin: 0; }
.pl .pl-erg-fein { display: block; font: 400 12.5px/1.45 var(--schrift); color: #8d8b85; text-align: center; }

/* Übungsmodus-Zeichen mitten in der Kopfleiste (ab „Los geht's“, liegt über der Abdunklung) */
html.pl-uebt .kopf .haupt { visibility: hidden; }
.pl-rec { position: fixed; z-index: 335; translate: -50% -50%; display: inline-flex; align-items: center; gap: 11px; height: 44px; padding: 0 20px 0 17px; border-radius: 999px; pointer-events: none;
  border: 1px solid rgba(255,80,66,.6); background: linear-gradient(180deg, rgba(255,59,48,.22), rgba(255,59,48,.07)), rgba(16,12,12,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 26px -6px rgba(255,59,48,.85); color: #fff; font: 600 17px/1 var(--schrift); letter-spacing: -.01em; white-space: nowrap;
  animation: pl-rec-rein .6s var(--bz) both; transition: opacity .45s, filter .45s; }
.pl-rec i { width: 11px; height: 11px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px 1px rgba(255,59,48,.9); animation: pl-rec 1.4s ease-in-out infinite; }
.pl-rec.fort, .pl-rec.weg { opacity: 0; filter: blur(6px); }   /* weg: die Blase braucht den Platz (kleines Handy) */
@keyframes pl-rec { 50% { opacity: .3; box-shadow: 0 0 4px 0 rgba(255,59,48,.4); } }
@keyframes pl-rec-rein { from { opacity: 0; filter: blur(8px); } }
@media (max-width: 640px) { .pl-rec { gap: 9px; height: 40px; padding: 0 17px 0 15px; font-size: 16px; } }
@media (max-width: 380px) { .pl-rec { gap: 7px; height: 36px; padding: 0 12px 0 11px; font-size: 14.5px; } .pl-rec i { width: 9px; height: 9px; } }


/* ================= Einführung: abdunkeln, Lichtkegel, Tipp ================= */
.pl-dunkel { position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0; transition: opacity .3s var(--bz); }
.pl-dunkel.an { opacity: 1; }
.pl-sperre { position: absolute; inset: 0; pointer-events: auto; }
/* Luca 26.10.: alles etwas dunkler, nur die Ziele hell. Gezeichnet auf einer Leinwand (probelauf.js, licht()).
   Vorher eine Fläche mit Klasse „leer“: site.css hat .leer (max-width 520 px, mittig), dadurch war nur ein Streifen in der Mitte dunkel. */
.pl-schleier { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-blase { position: absolute; width: min(360px, calc(100vw - 32px)); padding: 16px 18px 18px; border: 1px solid rgba(255,166,61,.38); border-radius: 18px; pointer-events: auto;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,122,26,.14), transparent 60%), rgba(19,19,21,.98); box-shadow: 0 30px 70px -20px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
  transition: left .45s var(--bz), top .45s var(--bz); }
/* Schatten immer vom Ziel weg (Luca 26.10.: der Schatten nach unten hat den Knopf darunter grau gemacht) */
.pl-blase.oben { box-shadow: 0 -26px 60px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.pl-blase.links { box-shadow: -26px 8px 60px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.pl-blase.rechts { box-shadow: 26px 8px 60px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.pl-blase.unten { box-shadow: 0 26px 60px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.pl-blase.rein { animation: pl-blase .38s var(--bz) both; }
@keyframes pl-blase { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.pl-blase.stups { animation: pl-stups .4s ease-in-out; }
@keyframes pl-stups { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.pl-blase-kopf { display: flex; align-items: center; gap: 9px; font: 500 13px/1 var(--schrift); color: #d8b48a; }
.pl-blase-kopf .pl-nr { font-size: 24px; }
.pl-punkte { display: flex; gap: 4px; margin-left: auto; }
.pl-blase-kopf > span:nth-child(2) { white-space: nowrap; }
@media (max-width: 360px) { .pl-blase-kopf .pl-punkte { display: none; } }
.pl-punkte i { width: 16px; height: 4px; border-radius: 9px; background: rgba(255,255,255,.14); }
.pl-punkte i.f { background: rgba(255,166,61,.55); }
.pl-punkte i.j { background: var(--verlauf); }
.pl-gut { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--verlauf); }
.pl-gut svg { width: 13px; height: 13px; fill: none; stroke: #17110a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pl .pl-blase h3 { margin: 12px 0 0; font: 500 27px/1.1 var(--schrift); letter-spacing: -.02em; color: #fff; }
.pl .pl-blase p { margin: 8px 0 0; font: 400 15px/1.45 var(--schrift); color: #c9c6bf; }   /* Luca 26.10.: Überschrift groß, Text höchstens zwei Zeilen */
.pl-blase p b { color: #fff; font-weight: 600; }
.pl .pl-blase-klein { display: block; margin-top: 10px; font: 500 12.5px/1.3 var(--schrift); color: #8d8b85; }
.pl-blase .pfeil { position: absolute; left: var(--px, 50%); width: 14px; height: 14px; margin-left: -7px; rotate: 45deg; background: var(--zipfel, rgb(19,19,21)); border: 1px solid rgba(255,166,61,.38); border-radius: 0; padding: 0; box-shadow: none; display: none; }   /* site.css hat eine runde .pfeil-Klasse */
.pl-blase.unten .pfeil { display: block; top: -8px; border-right: 0; border-bottom: 0; }
.pl-blase.rechts .pfeil { display: block; top: var(--py, 50%); left: -8px; margin: -7px 0 0; border-top: 0; border-right: 0; }
.pl-blase.oben .pfeil { display: block; bottom: -8px; border-left: 0; border-top: 0; }
.pl-blase.links .pfeil { display: block; top: var(--py, 50%); left: auto; right: -8px; margin: -7px 0 0; border-bottom: 0; border-left: 0; }
/* zwischen zwei Schritten: die Blase geht weich, der Schleier bleibt */
/* „fort“ statt „weg“: site.css hat eine Klasse .weg (Karten mit Rand und Abstand), die sonst beim Ausblenden mitgreift */
.pl-blase.fort { opacity: 0; filter: blur(6px); transform: translateY(4px) scale(.98); pointer-events: none; transition: opacity .28s var(--bz), filter .28s var(--bz), transform .28s var(--bz); }

/* „Hier klicken“ mit Pfeil neben dem Ziel. Text und Pfeil stehen einzeln: der Pfeil ist so lang wie der Weg bis zum Ziel (Luca 26.10.: „einfach den Pfeil länger machen“) */
.pl-hier { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; filter: blur(6px); transition: opacity .45s var(--bz), filter .45s var(--bz);
  font: italic 400 24px/1 Newsreader, Georgia, serif; color: #ff9a3c; white-space: nowrap; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.pl-hier span, .pl-hier svg { position: absolute; left: 0; top: 0; }
.pl-hier svg { overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: 1.1s ease-in-out infinite; }
.pl-hier svg.r { animation-name: pl-stoss-r; } .pl-hier svg.l { animation-name: pl-stoss-l; } .pl-hier svg.d { animation-name: pl-stoss-d; } .pl-hier svg.u { animation-name: pl-stoss-u; }
@keyframes pl-stoss-r { 50% { transform: translateX(5px); } } @keyframes pl-stoss-l { 50% { transform: translateX(-5px); } }
@keyframes pl-stoss-d { 50% { transform: translateY(5px); } } @keyframes pl-stoss-u { 50% { transform: translateY(-5px); } }
.pl-hier.an { opacity: 1; filter: blur(0); }
.pl-hier.fort, .pl-hier.kurz span { display: none; }
.pl-blase.hier-drin { padding-bottom: 44px; }
@media (max-width: 640px) { .pl-hier { font-size: 21px; } }
.pl-hier.klein { font-size: 16px; }   /* wenig Platz (kleines Handy): kleinere Schrift statt nur Pfeil (Luca 26.10.) */

/* Startkarte: Übungsmodus */
.pl-pille.pl-uebung { border-color: rgba(255,166,61,.4); background: linear-gradient(180deg, rgba(255,140,40,.14), rgba(255,140,40,.04)), rgba(14,14,16,.6); color: #ffcf9a; }
.pl-pille .leise { color: #a5a39c; font-weight: 500; }
/* Startkarte in der Mitte: jetzt kommt eine Vorführung */
.pl-blase.pl-mitte { width: min(540px, calc(100vw - 32px)); padding: clamp(22px, 3vw, 32px); border-radius: 24px; }
.pl .pl-blase.pl-mitte h2 { margin: 16px 0 0; font-size: clamp(28px, 3vw, 40px); }
.pl .pl-blase.pl-mitte p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; }
.pl-blase.pl-mitte .knopf { width: 100%; margin-top: 20px; }

/* ================= Schritt 3: Finder wie am Mac (dunkles Erscheinungsbild) ================= */
.pl-finder { position: absolute; z-index: 5; right: clamp(16px, 2vw, 28px); top: 62px; display: flex; width: min(470px, calc(100% - 32px)); height: 290px; overflow: hidden; border-radius: 12px;
  background: #1e1e1e; box-shadow: 0 0 0 .5px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 70px -10px rgba(0,0,0,.75), 0 10px 24px -8px rgba(0,0,0,.6);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--schrift); -webkit-font-smoothing: antialiased; color: #e5e5e7; }
.pl-finder.rein { animation: pl-finder .5s var(--bz) both; }
.pl-finder.fort { animation: pl-finder-weg .35s var(--bz) both; }
@keyframes pl-finder { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pl-finder-weg { to { opacity: 0; transform: translateY(8px); } }
.fi-seite { display: flex; flex-direction: column; flex: none; width: 150px; padding: 12px 8px; background: rgba(46,46,48,.92); border-right: 1px solid rgba(0,0,0,.6); }
.fi-ampel { display: flex; gap: 8px; height: 12px; margin: 2px 0 18px 6px; }
.fi-ampel i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.fi-ampel i:nth-child(2) { background: #febc2e; } .fi-ampel i:nth-child(3) { background: #28c840; }
.fi-gruppe { margin: 0 0 4px 8px; font-weight: 600; font-size: 11px; line-height: 1; color: rgba(235,235,245,.45); }
.fi-eintrag { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px; border-radius: 6px; font-weight: 400; font-size: 13px; line-height: 1; color: #e5e5e7; white-space: nowrap; }
.fi-eintrag svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #2f8cff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fi-eintrag.an { background: rgba(255,255,255,.1); }
.fi-haupt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fi-leiste { display: flex; align-items: center; gap: 12px; flex: none; height: 50px; padding: 0 14px; border-bottom: 1px solid rgba(0,0,0,.55); background: #2a2a2c; }
.fi-leiste .fi-ampel { display: none; margin: 0 4px 0 0; }
.fi-pfeile { display: flex; gap: 6px; }
.fi-pfeile svg, .fi-werkzeug svg { width: 17px; height: 17px; fill: none; stroke: rgba(235,235,245,.75); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fi-pfeile svg.aus { stroke: rgba(235,235,245,.25); }
.fi-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13.5px; line-height: 1; color: #f2f2f7; }
.fi-werkzeug { display: flex; gap: 14px; }
.fi-inhalt { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, 86px); justify-content: start; align-content: start; gap: 12px 4px; padding: 16px 12px; }   /* feste Spalten wie die Symbolansicht am Mac (Luca 26.10.: vorher zu weit auseinander) */
.fi-objekt { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; }
.fi-ordner { width: 64px; height: 52px; margin: 6px 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.fi-bild { display: grid; place-items: center; width: 76px; height: 64px; border-radius: 6px; }
.fi-name { max-width: 100%; padding: 2px 6px; border-radius: 4px; font-weight: 400; font-size: 12px; line-height: 1.2; color: #e5e5e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-logo { cursor: grab; }
/* beide Dateien gleich große Kästen (Luca 26.10.: die orangen Rahmen gleich groß), der Inhalt sitzt mittig darin */
.fi-logo .fi-bild { width: 82px; height: 64px; }
.fi-film { position: relative; display: block; width: 78px; height: 49px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.4); }
.fi-film img { width: 100%; height: 100%; object-fit: cover; }
.fi-film i { position: absolute; right: 3px; bottom: 3px; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,.65); font: 600 9px/1.2 var(--schrift); font-style: normal; color: #fff; }
.fi-video.gewaehlt .fi-bild { background: rgba(255,255,255,.12); }
.fi-logo .fi-bild { transition: background .15s; }
.fi-logo.gewaehlt .fi-bild { background: rgba(255,255,255,.12); }
.fi-logo.ziel .fi-bild { animation: fi-puls 1.6s ease-out infinite; }
@keyframes fi-puls { 0% { box-shadow: 0 0 0 2px rgba(255,154,60,.95), 0 0 0 2px rgba(255,140,40,.5); } 70%, 100% { box-shadow: 0 0 0 2px rgba(255,154,60,.95), 0 0 0 12px rgba(255,140,40,0); } }
.fi-logo.gewaehlt .fi-name { background: #0a64d6; color: #fff; }
.fi-status { flex: none; height: 26px; display: grid; place-items: center; border-top: 1px solid rgba(0,0,0,.5); background: #2a2a2c; font-weight: 400; font-size: 11px; line-height: 1; color: rgba(235,235,245,.55); }
.pl-kachel.fi { width: 68px; height: 48px; padding: 0 5px; border-radius: 4px; font-size: 12.5px; box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.08); }
.pl-kachel.fi.dunkel { box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.14); }
/* der Spot verdeckt die Datei nicht: Ziel ist das ganze Objekt */
.pl-finder .fi-logo:focus-visible { outline: 2px solid #2f8cff; outline-offset: 2px; border-radius: 6px; }

/* Drag and Drop: Mac-Zeiger und halb durchsichtige Kopie der Datei */
.pl-zeiger { position: fixed; z-index: 330; width: 22px; height: 30px; margin: -2px 0 0 -3px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: opacity .3s; }
.pl-zeiger svg { display: block; width: 100%; height: 100%; }
.pl-zeiger .plus { position: absolute; left: 14px; top: 20px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #28c840; color: #fff;
  font: 700 14px/1 -apple-system, sans-serif; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.4); opacity: 0; transform: scale(.4); transition: opacity .18s, transform .22s var(--bz, ease); }
.pl-zeiger.kopie .plus { opacity: 1; transform: none; }
.pl-zeiger.fort { opacity: 0; }
.pl-geist { position: fixed; z-index: 325; margin: 0; pointer-events: none; opacity: .72; color: #e5e5e7; }
.pl-geist .fi-name { max-width: none; overflow: visible; background: #0a64d6; color: #fff; }
.pl-geist-hinten { position: absolute; left: 14px; top: -10px; z-index: -1; margin: 0; }   /* zweite Datei schräg dahinter, wie am Mac beim Ziehen mehrerer Dateien */
.pl-geist-hinten .fi-name { visibility: hidden; }
.pl-geist-zahl { position: absolute; right: -6px; top: -4px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff3b30; color: #fff;
  font: 700 13px/1 -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.pl-geist.los { opacity: 0; filter: blur(3px); transition: opacity .3s, filter .3s; }
.pl-eingabe.drop { border-color: rgba(47,140,255,.85); background: rgba(47,140,255,.08); box-shadow: 0 0 0 4px rgba(47,140,255,.18); }
.pl-anhang.neu { animation: pl-anh-neu .45s var(--bz) both; }
@keyframes pl-anh-neu { from { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.04); } to { opacity: 1; transform: none; } }
.pl-kachel { display: grid; place-items: center; flex: none; width: 92px; height: 56px; padding: 0 8px; border-radius: 12px; background: #f4f4f2; color: var(--f); overflow: hidden;
  font: 700 15px/1 var(--schrift); letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.pl-kachel.dunkel { background: #1a1a1d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pl-kachel.klein { width: 34px; height: 34px; padding: 0; border-radius: 9px; font-size: 17px; }
.pl-anhang .bild:has(.pl-kachel) { background: none; }

/* Antwort der AI mit Ideen für neue Videos */
.pl .pl-ki-text { margin: 2px 0 0; font: 400 14.5px/1.5 var(--schrift); color: #e2dfd8; }
.pl-ki-text b { color: #fff; font-weight: 600; }
.pl-ideen { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-ideen span { padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); font: 500 13px/1.3 var(--schrift); color: #d6d3cc; }
#pl-ansehen { justify-self: start; margin-top: 4px; }
.koerper.rein { animation: pl-rein .4s var(--bz) both; }

/* Rabatt im Ergebnis: Gutschein-Ticket (Luca 26.10.: groß, präsent, „wirklich geil“). Zwei Hälften mit Stanzkerben an der Linie dazwischen. */
.pl-angebot { --kerbe: 11px; --ticket: radial-gradient(130% 120% at 0% 0%, rgba(255,122,26,.30), transparent 62%), radial-gradient(90% 120% at 100% 100%, rgba(255,80,20,.18), transparent 70%), linear-gradient(180deg, #2a1a0e, #1a120c);
  position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; filter: drop-shadow(0 22px 34px rgba(255,110,20,.28)); animation: pl-frei .7s .55s var(--bz) both; }
@keyframes pl-frei { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.pl-ang-oben, .pl-ang-unten { position: relative; overflow: hidden; background: var(--ticket); background-attachment: local; }
.pl-ang-oben { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "m m" "p t"; align-items: center; gap: 12px 18px; padding: 16px 20px 18px; border-radius: 18px 18px 0 0;
  border: 1px solid rgba(255,166,61,.5); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-mask: radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; }
.pl-ang-unten { display: grid; grid-template-columns: auto auto; grid-template-areas: "k u" "z z"; justify-content: space-between; align-items: center; gap: 8px 14px; padding: 14px 20px 17px; border-radius: 0 0 18px 18px;
  border: 1px solid rgba(255,166,61,.5); border-top: 0;
  -webkit-mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; }
/* Stanzlinie zwischen den Kerben */
.pl-ang-unten::before { content: ""; position: absolute; left: calc(var(--kerbe) + 8px); right: calc(var(--kerbe) + 8px); top: 0; border-top: 2px dashed rgba(255,166,61,.38); }
/* Glanz, der alle paar Sekunden über das Ticket läuft (nur transform) */
/* Glanz als nahtlose Schleife (Luca 26.10.: setzte sich sichtbar zurück): zwei gleiche Hälften, eine Hälfte weit wandern, dann passt der Anfang genau */
.pl-ang-oben::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; pointer-events: none;
  background: linear-gradient(100deg, transparent 8%, rgba(255,220,170,.14) 25%, transparent 42%, transparent 58%, rgba(255,220,170,.14) 75%, transparent 92%);
  animation: pl-glanz 7s linear infinite; }
@keyframes pl-glanz { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.pl-angebot-marke { grid-area: m; justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(255,140,40,.16); box-shadow: inset 0 0 0 1px rgba(255,166,61,.45);
  font: 600 12.5px/1 var(--schrift); color: #ffc58a; white-space: nowrap; margin-bottom: 10px; }   /* −10 % mit mehr Abstand darunter (Luca 26.10.) */
.pl-angebot-marke i { width: 7px; height: 7px; border-radius: 50%; background: #ff8a2a; box-shadow: 0 0 0 0 rgba(255,138,42,.6); animation: pl-puls 3.2s ease-out infinite; }   /* Luca 26.10.: blinkte viel zu schnell */
@keyframes pl-puls { 60%, 100% { box-shadow: 0 0 0 7px rgba(255,138,42,0); } }
.pl-prozent { grid-area: p; display: inline-flex; align-items: flex-start; font: italic 400 76px/.86 Newsreader, Georgia, serif; letter-spacing: -.04em; white-space: nowrap;
  padding: .12em .14em .14em .06em; margin: -.12em -.14em -.14em -.06em;   /* Luca 26.10.: die „10“ war abgeschnitten (Verlauf malt nur in der Box, kursive Ziffern ragen darüber hinaus) */
  color: #ff8a2a; background: linear-gradient(100deg, #ff7a1a 0%, #ffd08a 24%, #e2520f 48%, #ffa24a 72%, #ff7a1a 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: pl-verlauf 6s linear infinite; }
.pl-prozent span { margin: .1em 0 0 .06em; font-size: .52em; }
@keyframes pl-verlauf { to { background-position: 300% 0; } }
@media (max-width: 860px), (hover: none) { .pl-prozent { background: none; -webkit-text-fill-color: currentColor; animation-name: farbe-schrift; } }
@supports (-webkit-touch-callout: none) { .pl-prozent { background: none; -webkit-text-fill-color: currentColor; animation-name: farbe-schrift; } }
.pl-angebot-text { grid-area: t; min-width: 0; }
.pl-angebot-text b { display: block; font: 600 20px/1.22 var(--schrift); color: #fff; text-wrap: balance; }
.pl-angebot-text small { display: block; margin-top: 6px; font: 500 14px/1.35 var(--schrift); color: #d8b48a; }
.pl-angebot-text small span { white-space: nowrap; }
.pl-angebot-text s { color: #8d8b85; }
.pl-angebot-text strong { font-weight: 700; color: #ffb15c; font-size: 1.1em; }
.pl-uhr-kopf { grid-area: k; font: 600 16.5px/1.2 var(--schrift); color: #f0dcc4; }   /* Luca 26.10.: größer */
.pl-uhr { grid-area: u; display: inline-flex; align-items: flex-start; gap: 5px; }
.pl-uhr > span { display: grid; justify-items: center; gap: 4px; }
.pl-uhr b { display: grid; place-items: center; min-width: 46px; height: 42px; padding: 0 6px; border-radius: 10px; background: rgba(10,8,6,.55); box-shadow: inset 0 0 0 1px rgba(255,166,61,.3), inset 0 1px 0 rgba(255,255,255,.08);
  font: 700 23px/1 var(--schrift); font-variant-numeric: tabular-nums; color: #fff; }
.pl-uhr .sek b { background: var(--verlauf); color: #17110a; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 18px -4px rgba(255,130,30,.8); }
.pl-uhr b.neu { animation: pl-ziffer .35s var(--bz); }
@keyframes pl-ziffer { from { transform: translateY(-6px); opacity: .35; } }
.pl-uhr small { font: 600 10.5px/1 var(--schrift); color: #b9a58e; letter-spacing: .02em; }
.pl-uhr > i { align-self: flex-start; padding-top: 10px; font: 700 18px/1 var(--schrift); font-style: normal; color: #ffb15c; animation: pl-blink 1s steps(1) infinite; }
@keyframes pl-blink { 50% { opacity: .25; } }
.pl-uhr-text { grid-area: z; display: block; font: 500 12.5px/1.3 var(--schrift); color: #bdb9b0; font-variant-numeric: tabular-nums; }
/* Ablauf-Leiste wie eine Batterie (Luca 26.10.): etwas dicker, schräge Streifen hell/dunkel, die langsam nach links weglaufen */
.pl-uhr-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.07); }
.pl-uhr-balken i { display: block; width: 100%; height: 100%; border-radius: 0 3px 3px 0; transition: width 1s linear;
  background: repeating-linear-gradient(-55deg, #ffa24a 0 7px, #e2661c 7px 14px); background-size: 34.2px 100%; animation: pl-akku 1.6s linear infinite; }
@keyframes pl-akku { to { background-position: -34.2px 0; } }
.pl-angebot.aus { opacity: .55; filter: grayscale(1); }
.pl-angebot.aus :is(.pl-uhr > i, .pl-ang-oben::after, .pl-uhr-balken i) { animation: none; }
@media (prefers-reduced-motion: reduce) { .pl-angebot *, .pl-angebot ::after { animation: none !important; } }

/* ================= Tablet und Handy ================= */
/* Ergebnis untereinander: Tablet hochkant und Handy. Niedrige Fenster (z. B. 1000×508) behalten Film und Karte nebeneinander. */
@media (max-width: 1080px) and (min-height: 641px), (max-width: 760px) {
  /* Film, „So einfach“ und Karte als Gruppe in der Mitte, alle so breit wie der Film (--vw); der Film nimmt den Platz, den die anderen übrig lassen (--kh, --sh misst das Skript) */
  .pl-ergebnis { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; }
  .pl-erg-film { flex: none; align-items: center; gap: 14px; }
  .pl-rahmen { width: min(100cqw, (100cqh - var(--kh, 260px) - var(--sh, 150px) - 28px) * 16 / 9); }
  .pl-so { width: var(--vw, 100%); min-width: 0; }
  .pl-erg-karte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; width: var(--vw, 100%); min-width: min(100cqw, 540px); padding: 18px 20px; border-radius: 20px; height: auto; overflow: visible; container-type: normal; }
  .pl .pl-erg-karte .pl-erg-fein { display: none; }   /* Tablet quer: Karte flach, damit der Film groß bleibt */
}
/* niedriges Fenster nebeneinander: „So einfach“ in einer flachen Zeile */
@media (max-height: 640px) and (min-width: 761px) {
  .pl-so { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px 14px; border-radius: 18px; }
  .pl .pl-so h3 { font-size: 22px; }
  .pl-so-kopf small, .pl-so-neu small { display: none; }
  .pl-so-ablauf { gap: 10px; }
  .pl-so-prompt { padding: 9px 12px; font-size: 13.5px; }
  .pl-so-pfeil { width: 30px; height: 30px; }
  .pl-so-stern { width: 34px; height: 34px; border-radius: 10px; }
  .pl-so-neu b { font-size: 14.5px; }
}
@media (max-width: 1080px) {
  .pl-finder { top: 54px; }
}
@media (max-width: 760px) {
  .pl { padding-top: 6px; }
  .pl[data-phase="demo"] { padding-top: 12px; }   /* Abstand zur Kopf-Kapsel wie ihr Seitenrand */
  .pl-balken { width: 128px; }
  .pl-leiste { height: 44px; margin-top: 8px; gap: 14px; }
  .pl-zurueck { width: 40px; height: 40px; }
  .pl-zaehler { font-size: 15px; }
  .pl-frage-feld { padding-bottom: 2vh; }
  .pl-opt { grid-template-columns: 36px minmax(0, 1fr) 26px; gap: 10px; padding: 8px 14px 8px 16px; border-radius: 16px; }
  .pl-opt .pl-nr { font-size: 26px; }
  .pl-opt b { font-size: 16px; }
  .pl-opt small { font-size: 13.5px; }
  .pl-opt .zu, .pl-art .zu { width: 26px; height: 26px; }
  .pl-arten { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pl-art { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; border-radius: 16px; }
  .pl-art .film { margin: 8px 0 8px 8px; border-radius: 10px; overflow: hidden; }
  .pl-art .unten { grid-template-columns: auto minmax(0, 1fr) 26px; padding: 10px 12px; gap: 10px; }
  .pl-art .pl-nr { font-size: 22px; }
  .pl-art b { font-size: 16px; }
  .pl-art small { font-size: 13px; }
  .pl-farbe { width: 34px; height: 34px; }
  .pl-zeile { gap: 7px; }
  .pl-weiter { width: 100%; }
  .pl-schritte { gap: 6px; }
  .pl-schritte li { justify-content: center; height: 36px; padding: 0 6px; border-radius: 11px; }
  .pl-schritte li .t, .pl-schritte li .ok { display: none !important; }
  .pl-schritte li .pl-nr { font-size: 19px; }
  .pl-bib, .pl-ki { border-radius: 20px; }
  .pl-fenster-kopf { height: 38px; padding: 0 12px; }
  .pl-adresse { font-size: 12px; text-align: left; }
  .pl-fenster-kopf { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .pl-marke-uebung { height: 22px; padding: 0 8px; font-size: 11.5px; }
  .pl-finder { left: 10px; right: 10px; top: 48px; width: auto; height: 236px; }
  .fi-seite { display: none; }
  .fi-leiste { height: 44px; padding: 0 12px; gap: 10px; }
  .fi-leiste .fi-ampel { display: flex; }
  .fi-werkzeug svg:nth-child(2) { display: none; }
  .fi-inhalt { padding: 14px 10px; }
  .pl-bib-inhalt { padding: 10px; gap: 10px; }
  .pl-bib-video { flex: none; container-type: normal; }
  .pl-bib-video video { width: 100%; border-radius: 12px; }
  .pl-bib-info b { font-size: 16px; }
  .pl-bib-info small { font-size: 12.5px; }
  .pl-bib-info .fuer { display: block; } .pl-bib-info .pkt { display: none; }   /* Handy: „für Claude“ ganz in die nächste Zeile (Luca 26.10.) */
  .pl-verlauf { padding: 12px; gap: 10px; }
  .pl-msg.ich .text { font-size: 13.5px; padding: 10px 12px 0; border-bottom: 10px solid transparent; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pl-msg.ki { gap: 9px; }
  .pl-msg.ki .ava { width: 26px; height: 26px; }
  .pl-status { font-size: 13px; gap: 8px; }
  .pl .pl-ki-text { font-size: 13.5px; }
  .pl-ideen span { font-size: 12.5px; padding: 6px 9px; }
  .pl-eingabe { margin: 0 8px 8px; padding: 8px; border-radius: 15px; }
  .pl-feld { font-size: 14px; min-height: 38px; padding: 8px 4px; }
  .pl-senden { width: 38px; height: 38px; }
  .pl-aktion { min-height: 38px; padding: 0 13px; font-size: 14px; }
  .pl-blase { padding: 14px 16px 16px; }
  .pl .pl-blase h3 { font-size: 23px; margin-top: 10px; }
  .pl .pl-blase p { font-size: 14.5px; }
  .pl .pl-blase.pl-mitte h2 { font-size: 27px; }
  .pl .pl-blase.pl-mitte p { font-size: 14.5px; }
  .pl-ergebnis { gap: 12px; padding-top: 4px; }
  .pl-erg-karte { display: flex; align-items: stretch; gap: 14px; width: 100%; padding: 16px; border-radius: 18px; }
  .pl-rahmen { border-radius: 14px; }
  .pl-reiter .nm { display: none; }
  .pl-reiter button { padding: 0 18px; }
  .pl-wissen { padding: 13px 14px 14px; border-radius: 14px; }
  .pl-wissen-satz { margin-top: 7px; font-size: 13.5px; line-height: 1.4; }
  .pl-erg-unten .pl-konto { min-height: 50px; }
  .pl-erg-karte { padding: 12px; gap: 10px; }
  /* Handy: Ticket flacher, damit der Film groß bleibt */
  .pl-angebot { --kerbe: 9px; }
  .pl-ang-oben { grid-template-columns: auto auto; justify-content: center; grid-template-areas: "p t"; gap: 6px 14px; padding: 12px 17px 13px 14px; border-radius: 16px 16px 0 0; }   /* Handy: −10 % und „auf jeden Plan“ zusammen mittig (Luca 27.10.); rechts 3 px mehr: die kursive −10 % hat links Luft im Zeichen, so sitzt die sichtbare Schrift genau mittig */
  .pl-ang-unten { padding: 10px 14px 13px; border-radius: 0 0 16px 16px; }
  .pl-angebot-marke, .pl-uhr-text { display: none; }   /* Luca 26.10.: Std/Min/Sek auch am Handy */
  .pl-uhr small { font-size: 9.5px; }
  .pl-uhr b { min-width: 36px; height: 32px; font-size: 17px; border-radius: 8px; }
  .pl-uhr > i { padding-top: 7px; font-size: 15px; }
  .pl-uhr-kopf { font-size: 15px; }
  .pl-angebot-text b { font-size: 16px; }
  .pl-angebot-text small { margin-top: 3px; font-size: 13px; }
  .pl-finder.zwei .fi-inhalt { grid-template-columns: repeat(auto-fill, 66px); gap: 12px 10px; padding: 14px 8px; }   /* alle vier in einer Reihe, Rahmen berühren sich nicht (Luca 26.10.) */
  .pl-finder.zwei .fi-bild { width: 64px; }
  .pl-finder.zwei .fi-logo .fi-bild { width: 64px; height: 56px; }
  .pl-finder.zwei .fi-film { width: 60px; height: 38px; }
  .pl-finder.zwei .pl-mini.web { zoom: .78; }   /* Webseite passt in den Kasten (vorher breiter als der Rahmen) */
  .pl-finder.zwei .pl-mini.ig { zoom: .9; }
  .pl-finder.zwei .fi-name { padding: 2px 4px; font-size: 11.5px; }
  .pl-prozent { font-size: 52px; }
  .pl-erg-unten { gap: 10px; }
  .pl-ergebnis .pl-erg-film { gap: 12px; }
  .pl-so { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px 16px; border-radius: 18px; }   /* volle Breite, nicht --vw: sonst schaukeln sich Film und Fenster gegenseitig klein */
  .pl .pl-so h3 { font-size: 24px; }
  .pl-so-kopf small { margin-top: 5px; font-size: 13px; }
  .pl-so-ablauf { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pl-so-prompt { padding: 10px 13px; font-size: 14px; }
  .pl-so-pfeil { display: none; }
  .pl-so-stern { width: 36px; height: 36px; border-radius: 11px; }
  .pl-so-neu b { font-size: 15px; }
  .pl .pl-erg-fein { display: none; }
}
@media (max-height: 720px) and (max-width: 760px) {
  .pl .pl-unter { display: none; }
  .pl .pl-erg-fein { display: none; }
}
/* sehr niedriges Handy (iPhone SE mit Safari-Leisten, 375×548): der Film bleibt groß, Karte und Rabatt darunter scrollen (vorher Film nur 120 px breit) */
@media (max-height: 600px) and (max-width: 760px) {
  .pl-ergebnis { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 8px; }
  .pl-ergebnis::-webkit-scrollbar { display: none; }
  .pl-rahmen { width: max(min(100cqw, (100cqh - var(--kh, 260px) - var(--sh, 150px) - 28px) * 16 / 9), min(100cqw, 320px)); }
}
@media (pointer: coarse) { .pl .pl-blase-klein { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::before, .pl *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Claude, schlicht nachgebaut (Luca 26.10.): nur Neuer Chat, Artefakte, Geplant, Anpassungen; Farben wie Claude dunkel ---------- */
.pl-ki { background: #262624; }
.cl { --cl-grund: #262624; --cl-seite: #1f1e1d; --cl-text: #f5f4ef; --cl-leise: #a6a39a; --cl-linie: rgba(255,255,255,.09); --cl-feld: #30302e; --cl-orange: #d97757;
  flex: 1; min-height: 0; display: flex; color: var(--cl-text); font-family: var(--schrift); }
.cl svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cl-funke svg, .cl-gruss svg, .cl-ava-ki svg { stroke: none; }
.cl-seite { flex: none; width: 196px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 12px; background: var(--cl-seite); border-right: 1px solid var(--cl-linie); }
.cl-marke { display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 0 12px 6px; }
.cl-wort { display: block; height: 21px; color: var(--cl-text); }
.cl-wort svg { display: block; height: 100%; width: auto; }
.cl-marke .cl-funke { display: none; }
.cl-funke { display: grid; place-items: center; width: 22px; height: 22px; }
.cl-funke svg { width: 22px; height: 22px; }
.cl-nav { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: #dcdad3; font: 500 14px/1 var(--schrift); text-align: left; white-space: nowrap; cursor: default; }
button.cl-nav { cursor: pointer; }
.cl-nav svg { flex: none; width: 18px; height: 18px; color: var(--cl-leise); }
.cl-nav span { overflow: hidden; text-overflow: ellipsis; }
.cl-nav.an { background: rgba(255,255,255,.08); color: #fff; }
.cl-nav.an svg { color: #fff; }
#cl-neu svg { color: var(--cl-orange); }
.cl-nav.ziel { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,166,61,.65); }
.cl-ich { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 6px 0; border-top: 1px solid var(--cl-linie); min-width: 0; }
.cl-ava { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font: 700 14px/1 var(--schrift); font-style: normal; }
.cl-ich.weiss .cl-ava { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.cl-ich span { min-width: 0; }
.cl-ich b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.2 var(--schrift); color: var(--cl-text); }
.cl-ich small { display: block; font: 400 12px/1.2 var(--schrift); color: var(--cl-leise); }
.cl-haupt { position: relative; flex: 1; min-width: 0; min-height: 0; }
.cl-ansicht { position: absolute; inset: 0; display: none; }
.cl-ansicht.an { display: flex; animation: cl-rein .35s var(--bz) both; }
@keyframes cl-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cl-chat { flex-direction: column; }
.cl-chat .pl-eingabe { position: relative; width: min(680px, calc(100% - 28px)); margin: 0 auto 14px; border-color: rgba(255,255,255,.12); background: var(--cl-feld); border-radius: 20px; }
.cl-chat .pl-eingabe.offen { border-color: rgba(255,255,255,.2); }
.cl-chat .pl-verlauf { width: min(720px, 100%); margin: 0 auto; }
.cl-gruss { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cl-gruss svg { flex: none; width: clamp(28px, 2.6vw, 36px); height: clamp(28px, 2.6vw, 36px); }
.cl-gruss b { margin: 0; font: 400 clamp(24px, 2.6vw, 34px)/1.15 Georgia, 'Times New Roman', serif; color: #e9e6dd; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cl-ava-ki { background: none !important; border: 0 !important; }
.cl-ava-ki svg { width: 24px !important; height: 24px !important; }
.pl-feld.tippbar { cursor: text; }
.pl-feld.ziel { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,166,61,.6); }
.cl-strich { color: #fff; }
.cl-chip { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; padding: 2px 8px 2px 6px; border-radius: 7px; background: rgba(217,119,87,.18); color: #f3b89f; font: 600 .92em/1.35 var(--schrift); vertical-align: 1px; white-space: nowrap; }
.cl-chip svg { width: 14px; height: 14px; }
.pl-msg.ich .text .cl-chip { font-size: .9em; }
/* Slash-Menü über der Eingabe */
.cl-slash { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 3; display: grid; gap: 2px; max-width: 420px; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  background: #30302e; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.cl-slash.rein { animation: cl-menue .26s var(--bz) both; }
.cl-slash.fort { animation: cl-menue .18s var(--bz) reverse both; }
@keyframes cl-menue { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.cl-slash-kopf { padding: 6px 10px 4px; font: 600 11.5px/1 var(--schrift); color: var(--cl-leise); }
.cl-slash-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--cl-text); text-align: left; font-family: var(--schrift); }
button.cl-slash-eintrag { cursor: pointer; background: rgba(255,255,255,.07); }
.cl-slash-eintrag.ziel { box-shadow: inset 0 0 0 1px rgba(255,166,61,.7); }
.cl-slash-eintrag.aus { opacity: .5; }
.cl-slash-eintrag .ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.07); }
button.cl-slash-eintrag .ic { background: rgba(217,119,87,.2); color: #f3b89f; }
.cl-slash-eintrag .ic svg { width: 16px; height: 16px; }
.cl-slash-eintrag > span:nth-child(2) { flex: 1; min-width: 0; }
.cl-slash-eintrag b { display: block; font: 600 13.5px/1.25 var(--schrift); }
.cl-slash-eintrag small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.25 var(--schrift); color: var(--cl-leise); }
.cl-slash-eintrag .neu { flex: none; padding: 3px 7px; border-radius: 6px; background: rgba(55,214,122,.16); color: #7fe0a6; font: 600 11px/1 var(--schrift); }
/* Anpassungen und Skill hochladen */
.cl-anp, .cl-hoch { flex-direction: column; padding: clamp(18px, 2.6vw, 34px) clamp(16px, 3.4vw, 48px); overflow: hidden; }
.cl-titel { margin: 0; font: 400 clamp(24px, 2.4vw, 32px)/1.15 Georgia, 'Times New Roman', serif; color: var(--cl-text); letter-spacing: -.01em; }
.cl-reiter { display: flex; gap: 22px; margin-top: 16px; border-bottom: 1px solid var(--cl-linie); }
.cl-reiter span { padding: 0 0 10px; font: 500 14px/1 var(--schrift); color: var(--cl-leise); }
.cl-reiter span.an { color: var(--cl-text); box-shadow: inset 0 -2px 0 var(--cl-text); }
.cl-werkzeug { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.cl-wahl { display: flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.06); }
.cl-wahl span { padding: 7px 12px; border-radius: 8px; font: 500 13px/1 var(--schrift); color: var(--cl-leise); }
.cl-wahl span.an { background: rgba(255,255,255,.1); color: var(--cl-text); }
.cl-suche { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--cl-linie); border-radius: 10px; font: 400 13px/1 var(--schrift); color: var(--cl-leise); }
.cl-suche svg { flex: none; width: 15px; height: 15px; }
.cl-hinzu-halter { position: relative; flex: none; }
.cl-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06);
  color: var(--cl-text); font: 500 13.5px/1 var(--schrift); white-space: nowrap; cursor: pointer; }
.cl-knopf svg { width: 16px; height: 16px; }
.cl-knopf svg.ab { width: 14px; height: 14px; margin-left: -2px; transition: rotate .2s; }
.cl-knopf.offen svg.ab { rotate: 180deg; }
.cl-knopf.ziel, .cl-knopf.hell.ziel { border-color: transparent; background: var(--verlauf); color: #17110a; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); animation: pl-puls 1.6s ease-out infinite; }
.cl-knopf.hell { background: #f5f4ef; border-color: transparent; color: #1f1e1d; }
.cl-knopf.hell[disabled] { opacity: .4; cursor: default; }
.cl-knopf.leise { background: none; border-color: transparent; color: var(--cl-leise); cursor: default; }
.cl-dreh { width: 14px; height: 14px; border: 2px solid rgba(0,0,0,.2); border-top-color: currentColor; border-radius: 50%; animation: pl-dreh .7s linear infinite; }
.cl-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; display: grid; gap: 1px; width: 226px; padding: 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #30302e; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.cl-menue.rein { animation: cl-menue .24s var(--bz) both; transform-origin: top right; }
.cl-menue > * { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #dcdad3; font: 500 13.5px/1 var(--schrift); text-align: left; white-space: nowrap; }
.cl-menue > button { cursor: pointer; }
.cl-menue svg { flex: none; width: 17px; height: 17px; color: var(--cl-leise); }
.cl-menue > button.ziel { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,166,61,.7); }
.cl-liste { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.cl-leerliste { padding: 22px 18px; border: 1px dashed rgba(255,255,255,.14); border-radius: 14px; text-align: center; font: 400 13.5px/1.5 var(--schrift); color: var(--cl-leise); }
.cl-leerliste b { display: block; margin-bottom: 2px; font: 500 14.5px/1.4 var(--schrift); color: #dcdad3; }
.cl-skill { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.04); }
.cl-skill.neu { animation: pl-anh-neu .45s var(--bz) both; }
.cl-skill .ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(217,119,87,.2); color: #f3b89f; }
.cl-skill .ic svg { width: 19px; height: 19px; }
.cl-skill .tx { flex: 1; min-width: 0; }
.cl-skill b { display: block; font: 600 14.5px/1.25 var(--schrift); }
.cl-skill small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12.5px/1.3 var(--schrift); color: var(--cl-leise); }
.cl-schalter { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background .3s; }
.cl-schalter::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate .3s var(--bz); }
.cl-skill.an { border-color: rgba(55,214,122,.4); }
.cl-skill.an .cl-schalter { background: #37b36b; }
.cl-skill.an .cl-schalter::after { translate: 16px 0; }
.cl-zurueck { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font: 500 13px/1 var(--schrift); color: var(--cl-leise); }
.cl-zurueck svg { width: 15px; height: 15px; }
.pl .cl-unter { margin: 8px 0 0; max-width: 560px; font: 400 13.5px/1.5 var(--schrift); color: var(--cl-leise); }
.cl-label { display: block; margin-top: 16px; font: 600 13px/1 var(--schrift); color: #dcdad3; }
.cl-ablage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 86px; margin-top: 8px; padding: 12px; border: 1.5px dashed rgba(255,255,255,.2); border-radius: 14px; transition: border-color .25s, background .25s; }
.cl-ablage-leer { display: flex; align-items: center; gap: 9px; max-width: 420px; text-align: center; font: 400 13px/1.45 var(--schrift); color: var(--cl-leise); }
.cl-ablage-leer svg { flex: none; width: 20px; height: 20px; }
.cl-ablage.drop { border-color: rgba(217,119,87,.8); background: rgba(217,119,87,.07); }
.cl-ablage.voll { border-style: solid; border-color: rgba(255,255,255,.14); }
.cl-ablage.voll .cl-ablage-leer { display: none; }
.cl-datei { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05); animation: pl-anh-neu .45s var(--bz) both; }
.cl-datei .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(217,119,87,.2); color: #f3b89f; }
.cl-datei .ic svg { width: 17px; height: 17px; }
.cl-datei b { display: block; font: 600 13.5px/1.25 var(--schrift); }
.cl-datei small { display: block; font: 400 12px/1.25 var(--schrift); color: var(--cl-leise); }
/* Ladebalken der .zip-Datei (Luca 27.10.): schlicht wie bei Claude, dünne Bahn in Claude-Orange, Zahl daneben */
.cl-datei { max-width: 100%; box-sizing: border-box; }
.cl-datei .tx { flex: 1; min-width: 0; }
.cl-datei .tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lade { display: flex; align-items: center; gap: 9px; margin-top: 7px; width: 190px; max-width: 100%; }
.cl-lade-bahn { position: relative; flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.cl-lade-fuell { position: absolute; inset: 0; border-radius: inherit; background: var(--cl-orange); transform: scaleX(0); transform-origin: left; }
.cl-lade-zahl { flex: none; width: 36px; font: 500 11.5px/1 var(--schrift); font-style: normal; font-variant-numeric: tabular-nums; text-align: right; color: var(--cl-leise); }
.cl-lade.fertig .cl-lade-zahl { color: var(--cl-text); }
.cl-regeln { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 3px; font: 400 12.5px/1.45 var(--schrift); color: var(--cl-leise); }
.cl-scan { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--cl-linie); border-radius: 12px; }
.cl-scan .s { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); }
.cl-scan.laeuft .s { border-top-color: var(--cl-orange); animation: pl-dreh .7s linear infinite; }
.cl-scan.ok { border-color: rgba(217,119,87,.35); background: rgba(217,119,87,.06); }
.cl-scan.ok .s { display: grid; place-items: center; border: 0; background: var(--cl-orange); }
.cl-scan.ok .s::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border: 2px solid #fff; border-top: 0; border-right: 0; rotate: -45deg; }
.cl-scan b { display: block; font: 600 13px/1.25 var(--schrift); }
.cl-scan small { display: block; font: 400 12.5px/1.3 var(--schrift); color: var(--cl-leise); }
.cl-scan.ok small { color: #f0b49c; }
.cl-fuss { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
/* Material im Finder und im Anhang: Instagram-Profil (hoch) und Webseite (quer), beide mit Name und Farbe */
.pl-mini { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); font-style: normal; }
.pl-mini i { display: block; font-style: normal; }
.pl-mini.ig { width: 36px; height: 56px; padding: 4px 3px; }
.pl-mini.ig .ig-kopf { display: flex;   /* nicht „kopf“: so heißt die Kopfleiste der Seite (site.css), am Laptop rutschte der Kopf aus dem Bild */  align-items: center; gap: 3px; }
.pl-mini.ig .av { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--f); color: var(--fa); font: 700 7px/1 var(--schrift); }
.pl-mini.weiss .av, .pl-mini.weiss .mk, .pl-mini.weiss .raster i:nth-child(odd) { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.35); }
.pl-mini.ig .zl { flex: 1; display: grid; gap: 2px; }
.pl-mini.ig .zl i { height: 2px; border-radius: 1px; background: #cfcfcf; }
.pl-mini.ig .zl i:first-child { background: #333; width: 80%; }
.pl-mini.ig .raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 6px; }
.pl-mini.ig .raster i { aspect-ratio: 1; background: var(--f); }
.pl-mini.ig .raster i:nth-child(even) { background: #1d1d1f; }
.pl-mini.web { width: 76px; height: 48px; background: #111; }
.pl-mini.web .nav { display: flex; align-items: center; justify-content: space-between; height: 9px; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pl-mini.web .lk { width: 18px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.4); }
.pl-mini.web .mk { display: grid; place-items: center; width: 6px; height: 6px; border-radius: 1.6px; background: var(--f); color: var(--fa); font: 700 4px/1 var(--schrift); }
.pl-mini.web .hero { display: flex; align-items: center; justify-content: center; gap: 3px; height: 39px; background: radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--f) 30%, transparent), transparent); }
.pl-mini.web .mk.gross { width: 13px; height: 13px; border-radius: 3.5px; font-size: 8px; }
.pl-mini.web b { max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 8px/1 var(--schrift); color: #fff; letter-spacing: -.02em; }
.pl-anhang .bild.mini { position: relative; width: 34px; height: 34px; background: rgba(255,255,255,.06); overflow: hidden; }
.pl-anhang .bild.mini .pl-mini { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.pl-anhang .bild.mini .pl-mini.ig { scale: .56; }
.pl-anhang .bild.mini .pl-mini.web { scale: .42; }
@media (max-width: 760px) {
  .cl-seite { width: 52px; padding: 10px 6px; align-items: center; }
  .cl-marke { margin: 0 0 8px; } .cl-marke .cl-wort { display: none; } .cl-marke .cl-funke { display: grid; }
  .cl-nav { justify-content: center; width: 40px; height: 40px; padding: 0; }
  .cl-nav span { display: none; }
  .cl-ich { padding: 8px 0 0; justify-content: center; } .cl-ich > span { display: none; }
  .cl-chat .pl-eingabe { width: auto; margin: 0 8px 8px; }
  .cl-anp, .cl-hoch { padding: 14px 14px; }
  .cl-reiter { gap: 16px; margin-top: 12px; }
  .cl-werkzeug { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .cl-suche { order: 3; flex-basis: 100%; }
  .cl-werkzeug:has(.cl-menue:not([hidden])) .cl-suche { opacity: 0; transition: opacity .2s; }   /* Menü offen: Suchfeld weg, sonst steht der Pfeil darauf (Luca 26.10.) */
  .cl-hinzu-halter { margin-left: auto; }
  .cl-regeln { display: none; }
  .cl-ablage { min-height: 70px; }
  .cl-gruss { flex-direction: column; gap: 8px; text-align: center; }
}
/* Logo.png im Finder: dasselbe Zeichen wie in den Filmen (marke.js), abgerundetes Quadrat in der Farbe mit dem Anfangsbuchstaben */
.pl-zeichen { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 48px; height: 48px; border-radius: 12.5px; background: var(--f); color: var(--a); font: 700 27px/.98 -apple-system, "SF Pro Display", Inter, Helvetica, Arial, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.08); }
.pl-zeichen.klein { width: 34px; height: 34px; border-radius: 9px; }
.pl-zeichen i { display: block; font-style: normal; white-space: nowrap; letter-spacing: -.02em; }
.pl-anhang .bild:has(.pl-zeichen) { background: none; }
@media (max-width: 380px) {   /* 360 px: alle vier weiter in einer Reihe (Luca 26.10.) */
  .pl-finder.zwei .fi-inhalt { grid-template-columns: repeat(auto-fill, 58px); gap: 12px 8px; }
  .pl-finder.zwei .fi-bild, .pl-finder.zwei .fi-logo .fi-bild { width: 58px; height: 52px; }
  .pl-finder.zwei .fi-film { width: 54px; height: 34px; }
  .pl-finder.zwei .pl-mini.web { zoom: .7; }
  .pl-finder.zwei .pl-mini.ig { zoom: .84; }
  .pl-finder.zwei .fi-name { padding: 2px 3px; font-size: 10.5px; }
  .pl-finder.zwei .fi-ordner { width: 54px; height: 44px; }
}

/* Frage 1 (Luca 26.10.): am Handy jede Erklärung fest in zwei Zeilen, am Laptop eine Zeile */
.pl-umbruch { display: none; }
@media (max-width: 640px) { .pl-umbruch { display: inline; } }