:root{ --ue-gap:28px; }

.ue-seite .page-title{ font-weight:300; max-width:25ch; text-wrap:balance; }
.ue-seite .page-title .accent{ font-weight:600; }
.ue-seite.v2 .page-sub{ font-size:19px; line-height:1.5; max-width:64ch; }
@media (max-width:640px){
  .ue-seite.v2 .page-sub{ font-size:18px; text-wrap:pretty; }
  .ue-br{ display:none; }
}

.ue-kopf{ flex-wrap:wrap; row-gap:10px; }
.ue-kopf h2{ white-space:nowrap; }
.ue-filter{ margin-left:auto; display:flex; flex-wrap:wrap; gap:6px; align-self:center; }
.ue-filter button{ appearance:none; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  color:var(--txt-dim); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); padding:5px 10px;
  transition:color .15s ease, border-color .15s ease, background .15s ease; }
.ue-filter button b{ font-weight:500; color:var(--txt-faint); margin-left:6px; }
.ue-filter button:hover{ color:var(--accent-txt); border-color:var(--accent-line); }
.ue-filter button.on{ color:var(--accent-txt); background:var(--acc-soft); border-color:var(--accent-line); font-weight:600; }
.ue-filter button.on b{ color:var(--accent-txt); }

.ue-oben{ position:relative; z-index:0; }
.ue-oben::before{ content:""; position:absolute; z-index:-2; top:-28px; left:-32px; right:-22px; bottom:-72px;
  background:linear-gradient(to bottom, var(--bg-2) 0, var(--bg-2) calc(100% - 160px), var(--bg) 100%); pointer-events:none; }

.ue-oben + .sec{ position:relative; z-index:1; }
.ue-seite .page-head::before{ display:none; }
.ue-band{ position:relative; padding-block:var(--ue-gap) 8px; }

.ue-fenster{ position:relative; display:flex; flex-direction:column; min-width:0; box-sizing:border-box; container-type:inline-size;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 2px 4px rgba(16,32,43,.05), 0 18px 34px -24px rgba(16,32,43,.42);
  color:var(--txt); text-decoration:none; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
@media (hover:hover) and (pointer:fine){
  .ue-fenster:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:0 2px 4px rgba(16,32,43,.05), 0 26px 44px -26px rgba(10,20,40,.45); }
  .ue-fenster:hover .ue-pfad{ color:var(--accent-txt); }
  .ue-fenster:hover .ue-titel::after{ opacity:1; transform:none; }
}
.ue-fenster:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .ue-fenster{ transition:none; } .ue-fenster:hover{ transform:none; } }

.ue-leiste{ flex:0 0 auto; display:flex; align-items:center; gap:6px; height:32px; box-sizing:border-box; padding:0 12px;
  border-bottom:1px solid var(--line); background:var(--panel-2); }
.ue-leiste i{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.ue-leiste i:nth-child(1){ background:#e0655b; } .ue-leiste i:nth-child(2){ background:#e3b341; } .ue-leiste i:nth-child(3){ background:#3fb950; }
.ue-pfad{ margin-left:8px; min-width:0; font-family:var(--mono); font-size:11px; color:var(--txt-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s ease; }

.ue-buehne{ position:relative; flex:0 0 auto; overflow:hidden; background:var(--panel-2); }
.ue-medium{ position:relative; overflow:hidden; background:var(--panel-2); }
.ue-medium > img, .ue-medium > video{ display:block; width:100%; height:100%; }
.ue-medium iframe{ position:absolute; top:0; left:0; width:1280px; height:800px; border:0; transform-origin:0 0;
  pointer-events:none; background:#fff; }
.ue-serie{ display:flex; gap:4px; width:100%; height:100%; }
.ue-serie-bild{ position:relative; display:block; flex:0 0 auto; height:100%; overflow:hidden; }
.ue-serie-bild img{ display:block; width:100%; height:100%; }
.ue-serie-bild em{ position:absolute; left:8px; bottom:8px; font-style:normal; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(12,18,32,.66); border-radius:2px; padding:2px 6px; }

.ue-text{ flex:0 0 auto; box-sizing:border-box; padding:12px 15px 13px; display:flex; flex-direction:column; gap:3px;
  min-width:0; border-top:1px solid var(--line); }

.ue-art{ display:flex; align-items:center; flex-wrap:wrap; row-gap:2px; margin-bottom:4px; font-size:12.5px; line-height:1.4;
  color:var(--txt-faint); }
.ue-typ{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--accent-txt); }
.ue-typ .ico{ width:22px; height:22px; padding:4px; box-sizing:border-box; flex:0 0 auto; border-radius:6px;
  background:color-mix(in srgb, var(--accent) 12%, var(--panel)); stroke:currentColor; fill:none; stroke-width:1.8; }
.ue-unter::before{ content:"·"; margin:0 6px; }
.ue-titel{ margin:0; font-size:16px; font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--txt); }
.ue-titel::after{ content:" →"; display:inline-block; margin-left:4px; color:var(--accent-txt); opacity:0; transform:translateX(-4px);
  transition:opacity .15s ease, transform .15s ease; }

.ue-satz{ margin:0; font-size:14px; font-weight:300; line-height:1.5; color:var(--txt-dim); text-wrap:pretty; }
@container (max-width:300px){ .ue-titel{ font-size:15px; } .ue-satz{ font-size:13.5px; } .ue-art{ font-size:12px; } }

.ue-mauer{ display:flex; gap:var(--ue-gap); align-items:flex-start; }
.ue-spalte{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--ue-gap); }

.ue-mehr{ display:flex; justify-content:center; margin-top:var(--ue-gap); }
.ue-mehr:empty{ display:none; }
.ue-mehr button{ appearance:none; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--accent-txt);
  background:var(--panel); border:1px solid var(--accent-line); border-radius:var(--r); padding:11px 20px;
  transition:border-color .15s ease, background .15s ease; }
.ue-mehr button:hover{ border-color:var(--accent); background:var(--acc-soft); }

@media (max-width:640px){
  .ue-kopf .ue-filter{ margin-left:0; width:100%; flex-wrap:nowrap; gap:6px; }
  .ue-filter button{ flex:1 1 auto; min-width:0; padding:7px 6px; text-align:center; white-space:nowrap; }
  .ue-filter button b{ display:none; }
}
@media (max-width:370px){
  .ue-kopf .ue-filter{ gap:4px; }
  .ue-filter button{ font-size:11px; letter-spacing:0; padding:7px 4px; }
}