/* Gemeinsame Bausteine aller Fachbereichs-Plakate (Marketing, Webdesign, KI).
   Jedes Plakat ist ein .poster mit container-type:inline-size: 100cqw = Breite, Höhe = 125cqw (4:5).
   Pro Plakat anpassbar über Variablen am .poster:
   --cta-fg, --cta-ring        Farbe der Link-Zeile unten und ihres Kringels
   --cur-hot-bg, --cur-hot-fg  Farbe des Cursors über Links/Buttons */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");font-weight:300 800;font-style:normal;font-display:swap}

/* Einbettung: Plakat füllt den iframe, die Seite selbst scrollt nie */
html,body{margin:0;height:100%}
body{position:fixed;inset:0;overflow:clip;padding:0}
.poster{container-type:inline-size;position:absolute;inset:0;overflow:hidden;isolation:isolate;font-family:Montserrat,system-ui,sans-serif}

/* ---------- Ein Cursor für alle Plakate ---------- */
@media (hover:hover) and (pointer:fine){html,html *{cursor:none!important}}
.pcur{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .15s}
.pcur.is-on{opacity:1}
.pcur.is-rest{transition:opacity .15s,transform .7s cubic-bezier(.3,1.4,.5,1)}
.pcur__arrow{position:absolute;left:-3px;top:-2px;width:26px;height:auto;overflow:visible;transition:transform .2s cubic-bezier(.3,1.7,.5,1),opacity .15s}
.pcur__arrow path{fill:#fff;stroke:#0c0f26;stroke-width:2.6;stroke-linejoin:round}
.pcur__hot{position:absolute;left:-22px;top:-22px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--cur-hot-bg,#d7ff4a);color:var(--cur-hot-fg,#0c0f26);border:2px solid var(--cur-hot-fg,#0c0f26);
  transform:scale(.3);opacity:0;transition:transform .25s cubic-bezier(.3,1.7,.5,1),opacity .15s}
.pcur__hot svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pcur.is-hot .pcur__arrow{opacity:0;transform:scale(.5)}
.pcur.is-hot .pcur__hot{opacity:1;transform:none}
.pcur__label{position:absolute;left:22px;top:24px;white-space:nowrap;padding:5px 10px;border-radius:999px;
  font:700 12px/1.1 Montserrat,system-ui,sans-serif;letter-spacing:.01em;background:#0c0f26;color:#fff;border:1.5px solid #fff;
  opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .2s}
.pcur.is-hot .pcur__label{left:28px;top:12px}
/* am rechten Rand öffnet sich das Schild nach links, damit es nicht aus dem Plakat ragt */
.pcur.is-flip .pcur__label{left:auto;right:12px}
.pcur.is-flip.is-hot .pcur__label{left:auto;right:28px}
.pcur.has-label .pcur__label{opacity:1;transform:none}

/* ---------- Link-Zeile unten: überall gleiche Stelle, Größe und Bewegung ---------- */
.pcta{position:absolute;z-index:30;left:6cqw;bottom:5.5cqw;display:inline-flex;align-items:center;gap:1.4cqw;
  padding:1.6cqw 3.2cqw;font:800 4.6cqw/1 Montserrat,system-ui,sans-serif;letter-spacing:-.015em;
  color:var(--cta-fg,#fff);text-decoration:none}
.pcta>svg{position:absolute;left:-1.5cqw;top:-1.8cqw;width:calc(100% + 3cqw);height:calc(100% + 3.6cqw);overflow:visible;pointer-events:none}
.pcta path{fill:none;stroke:var(--cta-ring,#ff3d4f);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:30;
  transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.pcta i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.pcta:hover path,.pcta:focus-visible path{stroke-dashoffset:0}
.pcta:hover i,.pcta:focus-visible i{transform:translate(.8cqw,-.8cqw) scale(1.15)}
.pcta:focus-visible{outline:3px solid var(--cta-ring,#fff);outline-offset:4px;border-radius:8px}

/* ---------- Ausgabe-Etikett: Nummer und letztes Update auf einer Linie ----------
   Beide Spalten haben dasselbe Raster: oben die Überschrift (gleiche Schrift, gleiche Höhe),
   unten der Wert. align-items:last baseline setzt "№N" und das Datum auf dieselbe Grundlinie.
   Breite ergibt sich aus dem Inhalt. */
.plabel{position:absolute;z-index:8;display:flex;align-items:last baseline;width:max-content;background:#fff;color:#0c0f26;
  border:.55cqw solid #0c0f26;border-radius:1.6cqw;
  transform:rotate(3deg);box-shadow:.9cqw .9cqw 0 #05071a;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.plabel:hover{transform:rotate(-1.5deg) scale(1.04)}
.plabel__num,.plabel__r{display:flex;flex-direction:column;padding:2cqw 2.6cqw 2.2cqw}
.plabel__num{align-self:stretch;background:#0c0f26;color:#fff;border-radius:.9cqw 0 0 .9cqw}
.plabel__num small,.plabel__k{font:700 2.5cqw/1 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.plabel__k{color:#5a6085}
.plabel__num b{font:800 10cqw/.82 Montserrat,sans-serif;letter-spacing:-.05em;margin-top:auto;padding-top:1.4cqw}
.plabel__ago{font:600 2.8cqw/1.2 Montserrat,sans-serif;color:#5a6085;margin-top:.9cqw}
.plabel__d{font:800 4.8cqw/1 Montserrat,sans-serif;letter-spacing:-.02em;margin-top:.5cqw}

@media (prefers-reduced-motion:reduce){.pcur,.pcur *,.pcta *,.plabel{transition:none!important}}