@font-face{font-family:"Archivo MM";src:url(../fonts/archivo.woff) format("woff");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
/* Portalübersicht medien-mannheim.de
   Passend zum Seitenstil von medien-mannheim.de: dunkelblau, Cyan als einzige Akzentfarbe, Schrift der Website,
   Monospace für Kennzeichnungen, eckige Kacheln mit feiner Linie. Hintergrund bleibt der der Website. */
.pl,.pl-doc{
  --pl-cyan:#5CC8E4; --pl-cyan-ink:#06141F; --pl-text:#E9EFF5; --pl-muted:#9DAFC0;
  --pl-line:rgba(130,175,210,.18); --pl-tile:rgba(255,255,255,.025); --pl-grid:rgba(130,175,210,.06);
  --pl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  position:relative; isolation:isolate; overflow:hidden; color:var(--pl-text); color-scheme:dark;
  background:transparent; font:inherit; line-height:1.55;
  padding-block:0 clamp(48px,7vw,88px);
}
.pl *,.pl *::before,.pl *::after{box-sizing:border-box}
.pl a{color:inherit}
:where(.pl) :where(h1,h2,p,ul){text-transform:none}
.pl-wrap{max-width:1200px; margin-inline:auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Kopf: Raster wie im Kopf der Website, darüber Netz und Hologramm */
.pl-hero{position:relative; padding-block:clamp(48px,8vw,104px) clamp(32px,5vw,56px);
  background-image:linear-gradient(var(--pl-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pl-grid) 1px,transparent 1px); background-size:44px 44px}
.pl-net{position:absolute; inset:0; width:100%; height:100%; z-index:-1; display:block;
  -webkit-mask-image:linear-gradient(#000 70%,transparent); mask-image:linear-gradient(#000 70%,transparent)}
.pl-kicker{margin:0 0 18px; font-family:var(--pl-mono); font-size:.78rem; letter-spacing:.06em; color:var(--pl-cyan)}
.pl-title{font:inherit; font-weight:800; font-size:clamp(2rem,5.4vw,4.1rem); line-height:1.06; letter-spacing:-.02em; margin:0; max-width:16ch; text-wrap:balance; color:var(--pl-text)}
.pl-title em{font-style:normal; color:var(--pl-cyan)}
.pl-rot{position:relative; display:inline-flex; vertical-align:bottom; height:1.1em; overflow:hidden; color:var(--pl-cyan); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pl-rot__list{display:flex; flex-direction:column; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pl-rot__list span{display:block; height:1.1em; line-height:1.1em; white-space:nowrap}
.pl-lead{max-width:56ch; margin:22px 0 0; font-size:clamp(1rem,1.3vw,1.12rem); color:var(--pl-muted)}
.pl-stats{display:flex; flex-wrap:wrap; gap:12px clamp(20px,4vw,48px); margin:32px 0 0; padding:18px 0 0; list-style:none; border-top:1px solid var(--pl-line)}
.pl-stats li{display:flex; align-items:baseline; gap:10px; margin:0; padding:0; font-size:.9rem; color:var(--pl-muted)}
.pl-stats li::before{content:none!important}
.pl-stats b{font-family:var(--pl-mono); font-weight:700; font-size:1.05rem; color:var(--pl-cyan); font-variant-numeric:tabular-nums}

/* Filter */
.pl-filter{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.pl-filter button{appearance:none; cursor:pointer; font-family:var(--pl-mono); font-size:.8rem; color:var(--pl-muted); background:var(--pl-tile);
  border:1px solid var(--pl-line); border-radius:3px; padding:8px 13px; display:inline-flex; gap:8px; align-items:center; transition:color .2s,border-color .2s,background .2s}
.pl-filter button small{font-size:.72rem; opacity:.75}
.pl-filter button:hover{color:var(--pl-text); border-color:var(--pl-cyan)}
.pl-filter button[aria-pressed="true"]{color:var(--pl-cyan-ink); background:var(--pl-cyan); border-color:var(--pl-cyan)}
.pl-filter button:focus-visible,.pl-card:focus-visible,.pl-btn:focus-visible{outline:2px solid var(--pl-cyan); outline-offset:3px}

/* Kacheln */
.pl-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr)); gap:14px}
.pl-grid li{min-width:0; display:flex; margin:0; padding:0; border:0; background:none; list-style:none}
.pl-grid > li::before,.pl-grid > li::after{content:none!important; display:none!important}
.pl-grid li[hidden]{display:none!important}
.pl-card{--mx:50%; --my:0%; position:relative; flex:1; display:flex; flex-direction:column; gap:12px; padding:20px 20px 16px; text-decoration:none;
  border-radius:4px; border:1px solid var(--pl-line); background:var(--pl-tile); overflow:hidden; transition:border-color .25s,transform .25s,background .25s}
.pl-card::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--brand) 16%,transparent),transparent 65%)}
.pl-card::after{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--brand); opacity:.7}
.pl-card:hover,.pl-card:focus-visible{border-color:color-mix(in srgb,var(--brand) 60%,var(--pl-line)); transform:translateY(-2px)}
.pl-card:hover::before,.pl-card:focus-visible::before{opacity:1}
.pl-card__logo{height:50px; display:flex; align-items:center}
.pl-logo{height:40px; width:auto; max-width:100%; display:block; overflow:visible}
.pl-card__tag{align-self:flex-start; font-family:var(--pl-mono); font-size:.72rem; letter-spacing:.04em; color:var(--pl-cyan)}
.pl-card__text{margin:0; color:#C6D2DE; font-size:.94rem; flex:1}
.pl-card__foot{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--pl-line); font-family:var(--pl-mono); font-size:.78rem; color:var(--pl-muted)}
.pl-card__foot b{font-weight:400; overflow-wrap:anywhere}
.pl-card__arrow{flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:3px; border:1px solid var(--pl-line); color:var(--pl-text); transition:background .25s,border-color .25s,color .25s}
.pl-card:hover .pl-card__arrow{background:var(--pl-cyan); border-color:var(--pl-cyan); color:var(--pl-cyan-ink)}
.pl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hinweis als zwölfte Kachel */
.pl-grid li.pl-grid__note{display:flex}
.pl-note{flex:1; margin:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px; border-radius:4px;
  border:1px dashed color-mix(in srgb,var(--pl-cyan) 55%,transparent); background:color-mix(in srgb,var(--pl-cyan) 6%,transparent)}
.pl-note p{margin:0; color:var(--pl-muted); font-size:.94rem}
.pl-note strong{color:var(--pl-text)}
.pl-btn{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; font-size:.95rem; line-height:1.3; border-radius:3px; font-weight:700; text-decoration:none; color:var(--pl-cyan-ink)!important; background:var(--pl-cyan)}
.pl-btn:hover{filter:brightness(1.08)}

/* Kompakte Variante (Startseite): ohne Kopfbild */
.pl--kompakt{padding-block:clamp(40px,6vw,72px)}
.pl-head{margin-bottom:24px}
.pl-head .pl-kicker{margin-bottom:10px}
.pl-title--s{font-size:clamp(1.6rem,3.2vw,2.5rem); max-width:24ch}
.pl-head .pl-lead{margin-top:12px}

@media (max-width:560px){.pl-card{padding:18px 16px 14px}}
@media (prefers-reduced-motion:reduce){.pl *{transition:none!important; animation:none!important} .pl-card:hover{transform:none}}

/* Unterseite eines Portals: Kopf */
.pl--detail{padding-block:0}
.pl-hero--detail{padding-block:clamp(28px,5vw,64px) clamp(32px,5vw,56px)}
.pl-back{margin:0 0 24px; font-family:var(--pl-mono); font-size:.82rem}
.pl-back a{color:var(--pl-cyan); text-decoration:none}
.pl-back a:hover{text-decoration:underline}
.pl-dhead{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,5vw,64px); align-items:center}
.pl-dlogo{position:relative; display:grid; place-items:center; aspect-ratio:16/10; padding:12%; border:1px solid var(--pl-line); border-radius:4px;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 65%),rgba(255,255,255,.02); overflow:hidden}
.pl-dlogo .pl-logo{height:auto; width:100%; max-height:none; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--brand) 55%,transparent)); animation:pl-float 6s ease-in-out infinite}
.pl-dring{position:absolute; left:15%; right:15%; bottom:9%; height:14%; border-radius:50%; border:2px solid var(--pl-cyan); box-shadow:0 0 22px var(--pl-cyan),inset 0 0 18px rgba(92,200,228,.35); opacity:.75}
.pl-dlogo::after{content:""; position:absolute; left:20%; right:20%; top:0; bottom:16%; background:linear-gradient(to top,rgba(92,200,228,.22),transparent); pointer-events:none}
@keyframes pl-float{50%{transform:translateY(-6px)}}
.pl-title--d{font-size:clamp(2rem,4.4vw,3.4rem); max-width:none}
.pl-dact{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0}
.pl-btn--ghost{background:transparent; color:var(--pl-text)!important; border:1px solid var(--pl-line)}
.pl-btn--ghost:hover{border-color:var(--pl-cyan)}
@media (max-width:820px){.pl-dhead{grid-template-columns:1fr} .pl-dlogo{max-width:420px}}

/* Unterseite: Text aus dem Beitrag */
.pl-doc{color:var(--pl-text); max-width:1200px; margin-inline:auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-bottom:clamp(40px,6vw,72px)}
.pl-doc section{padding-block:clamp(22px,3vw,34px); border-top:1px solid var(--pl-line)}
.pl-doc h2{font-size:clamp(1.3rem,2.2vw,1.7rem); margin:0 0 12px; color:var(--pl-text)}
.pl-doc p,.pl-doc li{color:#C6D2DE; max-width:68ch}
.pl-doc ul{margin:0; padding-left:1.1em}
.pl-doc a{color:var(--pl-cyan)}
.pl-doc__split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px)}
.pl-facts{list-style:none; padding:0!important; display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:16px!important}
.pl-facts li{font-size:.94rem}
.pl-facts span{font-family:var(--pl-mono); font-size:.78rem; color:var(--pl-cyan); margin-right:6px}
@media (max-width:720px){.pl-doc__split{grid-template-columns:1fr}}