/* Voice package assistant ("Erzähl’s uns, wir schnüren dein Paket"): the box on /medienpakete/ and the popup that the
   menus open on every page (public/js/sprach-paket.js). Loaded with a content hash (mitVersion), the server caches /css for a year. */
.pf-sprach[hidden], .pf-sprach-panel[hidden] { display: none !important; }
.pf-sprach { position: relative; isolation: isolate; margin: 0 auto 8px; padding: 26px 26px 24px; border-radius: 26px; corner-shape: superellipse(2);
  background: radial-gradient(50% 80% at 8% 0%, rgba(70,191,186,.16), transparent 70%), radial-gradient(45% 70% at 100% 100%, rgba(90,140,240,.12), transparent 70%), linear-gradient(180deg, #f7f9fb, #eef3f7);
  box-shadow: 0 0 0 1px rgba(10,20,48,.06), 0 24px 50px -36px rgba(10,20,48,.4); }
/* head: text left, the picture (voice memo becomes a note, the note a ticked packing slip) right; on phones the picture comes first */
.pf-sprach-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 430px); gap: 10px 26px; align-items: center; }
.pf-sprach-ill { display: block; width: 100%; height: auto; margin: -10px -8px -14px 0; }
.pf-sprach-los svg { width: 18px; height: 18px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-sprach-los { display: inline-flex; align-items: center; }
.pf-sprach-kicker { font-size: 14px; font-weight: 600; color: #0b7470; }
.pf-sprach-titel { margin-top: 4px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: #0a1430; text-wrap: balance; }
.pf-sprach-klein { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: #5a6a7e; }
.pf-sprach-knoepfe, .pf-sp-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pf-sprach-panel { margin-top: 18px; padding: 20px 20px 18px; border-radius: 20px; corner-shape: superellipse(2); background: rgba(255,255,255,.86);
  box-shadow: 0 0 0 1px rgba(10,20,48,.06), 0 14px 30px -24px rgba(10,20,48,.35); animation: sp-rein .35s cubic-bezier(.2,.7,.2,1); }
@keyframes sp-rein { from { opacity: 0; translate: 0 10px; } }
.pf-sp-titel { font-size: 16.5px; font-weight: 700; color: #0a1430; }
.pf-sp-frage { font-size: 18px; font-weight: 700; line-height: 1.35; color: #0b7470; outline: none; }
.pf-sp-text { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: #4a5a70; }
.pf-sp-text a { color: #0b7470; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pf-sp-zusammen { margin-top: 8px; font-size: 17px; line-height: 1.55; color: #0a1430; outline: none; }
.pf-sp-buehne { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.pf-sp-kugel { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8be3de, #2f9fb0 70%); box-shadow: 0 14px 30px -12px rgba(11,116,112,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.pf-sp-kugel svg { position: relative; z-index: 1; width: 28px; height: 28px; fill: none; stroke: #ffffff; stroke-width: 1.9; stroke-linecap: round; }
.pf-sp-kugel i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(70,191,186,.55); transform: scale(calc(1 + var(--pegel, 0) * .55)); opacity: calc(.15 + var(--pegel, 0) * .7);
  transition: transform .12s linear, opacity .12s linear; }
.pf-sp-kugel i:nth-child(2) { inset: -10px; transform: scale(calc(1 + var(--pegel, 0) * .35)); opacity: calc(.1 + var(--pegel, 0) * .5); }
.pf-sp-kugel i:nth-child(3) { inset: -20px; border-color: rgba(90,140,240,.35); transform: scale(calc(1 + var(--pegel, 0) * .2)); opacity: calc(.06 + var(--pegel, 0) * .35); }
.pf-sp-pegel { flex: 1; display: flex; align-items: center; gap: 4px; height: 56px; }
/* waiting: a light travels from listening to understanding to the package that gets tied */
.pf-sp-warten { display: block; }
.pf-sp-ablauf { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; margin-top: 16px; }
.pf-sp-bahn { position: absolute; left: 16%; right: 16%; top: 27px; height: 2px; background: rgba(10,20,48,.1); border-radius: 2px; }
.pf-sp-bahn b { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #46BFBA; box-shadow: 0 0 0 6px rgba(70,191,186,.18), 0 0 18px #46BFBA;
  animation: pf-sp-licht 3.6s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes pf-sp-licht { 0% { left: 0; } 40% { left: 50%; } 80%, 100% { left: calc(100% - 10px); } }
.pf-sp-st { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pf-sp-st svg { width: 56px; height: 56px; padding: 14px; border-radius: 18px; corner-shape: superellipse(2); fill: none; stroke: #0b7470; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(10,20,48,.07), 0 12px 24px -16px rgba(10,20,48,.4); animation: pf-sp-an 3.6s ease-in-out infinite; animation-delay: calc(var(--n) * 1.2s); }
@keyframes pf-sp-an { 0%, 30%, 100% { transform: none; box-shadow: 0 0 0 1px rgba(10,20,48,.07), 0 12px 24px -16px rgba(10,20,48,.4); }
  12% { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 2px rgba(70,191,186,.55), 0 16px 30px -14px rgba(11,116,112,.55); } }
.pf-sp-st small { font-size: 12.5px; font-weight: 600; color: #5a6a7e; }
.pf-sp-deckel { transform-box: fill-box; transform-origin: 0% 100%; animation: pf-sp-deckel 3.6s ease-in-out infinite; }
@keyframes pf-sp-deckel { 0%, 60% { transform: rotate(-28deg) translateY(-2px); } 75%, 100% { transform: none; } }
.pf-sp-band { stroke: #46BFBA; stroke-dasharray: 40; stroke-dashoffset: 40; animation: pf-sp-band 3.6s ease-in-out infinite; }
@keyframes pf-sp-band { 0%, 75% { stroke-dashoffset: 40; } 95%, 100% { stroke-dashoffset: 0; } }
/* result: what we understood, as cards */
.pf-sp-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.pf-sp-karte { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; corner-shape: superellipse(2);
  background: linear-gradient(160deg, #ffffff, #f2f7f9); box-shadow: 0 0 0 1px rgba(10,20,48,.07), 0 10px 22px -16px rgba(10,20,48,.35);
  animation: pf-sp-karte .55s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes pf-sp-karte { from { opacity: 0; transform: translateY(10px) rotateX(-40deg); } }
.pf-sp-karte svg { grid-row: 1 / 3; width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: rgba(70,191,186,.14); fill: none; stroke: #0b7470; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-sp-karte span { font-size: 12px; font-weight: 600; color: #5a6a7e; }
.pf-sp-karte b { font-size: 14px; line-height: 1.3; color: #0a1430; }
.pf-sp-themen { margin-top: 12px; font-size: 14px; line-height: 1.8; color: #4a5a70; }
.pf-sp-themen span { margin-right: 6px; }
.pf-sp-themen b { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: #0a1430; }
.pf-sp-themen b::before { content: ''; width: 9px; height: 5px; border-left: 2px solid #46BFBA; border-bottom: 2px solid #46BFBA; transform: rotate(-45deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pf-sp-bahn b, .pf-sp-st svg, .pf-sp-deckel, .pf-sp-band, .pf-sp-karte { animation: none !important; } .pf-sp-band { stroke-dashoffset: 0; } }
.pf-sp-pegel i { flex: 1; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #46BFBA, #3f8fd8); transform: scaleY(var(--h, .12)); transition: transform .08s linear; }
.pf-sp-zeit { margin-top: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: #5a6a7e; }
.pf-sp-stopp { display: inline-flex; align-items: center; gap: 8px; }
.pf-sp-stopp i { width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.pf-sp-label { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #0a1430; }
.pf-sp-feld { width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(10,20,48,.14); background: #ffffff; font: inherit; font-size: 15px; line-height: 1.5; color: #0a1430; resize: vertical; }
.pf-sp-feld:focus { outline: 2px solid #46BFBA; outline-offset: 1px; }
.pf-sp-warten { display: flex; align-items: center; gap: 14px; }
.pf-sp-punkte { display: inline-flex; gap: 5px; }
.pf-sp-punkte i { width: 9px; height: 9px; border-radius: 50%; background: #46BFBA; animation: pf-sp-puls 1s ease-in-out infinite; }
.pf-sp-punkte i:nth-child(2) { animation-delay: .15s; } .pf-sp-punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes pf-sp-puls { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.pf-sp-transkript { margin-top: 12px; font-size: 13.5px; color: #5a6a7e; }
.pf-sp-transkript summary { cursor: pointer; font-weight: 600; color: #0b7470; }
.pf-sp-transkript p { margin-top: 6px; font-style: italic; line-height: 1.55; }
.pf-sp-fertig { margin: 0; font-weight: 600; color: #0b7470; }
@media (max-width: 720px) {
  .pf-sprach-kopf { grid-template-columns: minmax(0, 1fr); }
  .pf-sprach-ill { order: -1; max-width: 400px; margin: -4px auto 2px; }
}
@media (max-width: 640px) { .pf-sprach { padding: 20px 18px 18px; } .pf-sprach-panel { padding: 16px 14px; } }
@media (prefers-reduced-motion: reduce) { .pf-sp-punkte i { animation: none; opacity: .7; } .pf-sprach-panel { animation: none; } }

/* ── popup (opened from the menus on any page) ── */
.sp-dialog { width: min(600px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; overflow: visible; background: none; color: #0a1430; }
.sp-dialog::backdrop { background: rgba(6,14,36,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sp-dialog[open] { animation: sp-auf .4s cubic-bezier(.2,.8,.2,1); }
.sp-dialog[open]::backdrop { animation: sp-schleier .3s ease; }
@keyframes sp-auf { from { opacity: 0; translate: 0 18px; scale: .97; } }
@keyframes sp-schleier { from { opacity: 0; } }
.sp-dialog .pf-sprach { max-height: calc(100dvh - 32px); margin: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 40px 90px -30px rgba(6,14,36,.6); }
.sp-dialog .pf-sprach-kopf { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sp-dialog .pf-sprach-ill { order: -1; width: min(100%, 460px); margin: 0 auto 2px; transition: width .35s ease, margin .35s ease; }
/* once the conversation runs, the picture steps back and the start buttons make room for it */
.sp-dialog .sp-laeuft .pf-sprach-ill { width: min(66%, 280px); margin-bottom: -6px; }
.sp-dialog .sp-laeuft .pf-sprach-knoepfe, .sp-dialog .sp-laeuft .pf-sprach-klein { display: none; }
.sp-zu { position: absolute; z-index: 2; right: 12px; top: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.85); color: #0a1430; box-shadow: 0 0 0 1px rgba(10,20,48,.08), 0 8px 18px -10px rgba(10,20,48,.4); transition: background .15s ease; }
.sp-zu:hover { background: #ffffff; }
.sp-zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sp-dialog .pf-k { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border: 0; cursor: pointer;
  border-radius: 14px; corner-shape: superellipse(2); background: #F2F4F7; color: #0a1430; font: inherit; font-size: 15px; font-weight: 600; transition: background .15s ease; }
.sp-dialog .pf-k:hover { background: #e3e8ee; }
.sp-dialog .pf-k-an { background: #0a1430; color: #ffffff; }
.sp-dialog .pf-k-an:hover { background: #14264a; }
.sp-dialog .pf-k-leise { background: none; color: #0b7470; padding-left: 8px; padding-right: 8px; }
.sp-dialog .pf-k-leise:hover { background: none; text-decoration: underline; }
.sp-dialog :is(.pf-k, .sp-zu, a):focus-visible { outline: 2px solid #007398; outline-offset: 2px; }
.sp-dialog .pf-ki-marke { padding: 2px 6px; border-radius: 6px; background: #0a1430; color: #ffffff; font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .04em; }
.sp-dialog .pf-sprach-titel { padding-right: 8px; font-size: clamp(20px, 4.6vw, 24px); }
html:has(.sp-dialog[open]) { overflow: hidden; }
/* phones: a sheet from the bottom edge */
@media (max-width: 640px) {
  .sp-dialog { width: 100vw; max-height: 94dvh; margin: auto 0 0; }
  .sp-dialog .pf-sprach { max-height: 94dvh; border-radius: 26px 26px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .sp-dialog .pf-sprach-ill { width: calc(100% - 40px); margin-left: 0; }
  .sp-dialog[open] { animation-name: sp-hoch; }
  @keyframes sp-hoch { from { translate: 0 60px; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .sp-dialog[open], .sp-dialog[open]::backdrop { animation: none; } .sp-dialog .pf-sprach-ill { transition: none; } }