/* works.css — Styles der CMS-gerenderten Works-Seite.
   Ersetzt die component-scoped Styles aus werke.astro/WorkPanel.
   Layout-Formeln identisch mit dem Editor (siehe render_works.php). */

.page-title{font-weight:400;font-size:1.6rem;margin:0 0 3rem}

/* Desktop: Inhalt + Rail nebeneinander, Rail sticky in eigener Spalte */
.works-layout{padding-block:3rem 2rem;display:grid;
  grid-template-columns:minmax(0,1fr) max-content;
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
.works-main{min-width:0}
.series-toggle{display:none}
.rail-backdrop{display:none}
.series[hidden]{display:none}

/* Bausteine: individueller Abstand aus dem CMS */
.cms-item{margin-bottom:var(--gap,112px)}
.cms-item:last-child{margin-bottom:0}

/* Werk: Breite + mitwachsende Bildhöhengrenze — Formeln == Editor */
.cms-work{width:var(--w,100%);margin:0 auto}
.cms-stage{display:grid;place-items:center;padding:1.5rem;
  min-height:200px;border-radius:0}
.cms-row{display:flex;align-items:center;gap:.5rem;width:100%;justify-content:center}
.cms-frames{min-width:0;display:grid;place-items:center}
.cms-img{max-width:100%;width:auto;height:auto;display:block;
  max-height:calc(74vh * var(--ws,1));object-fit:contain;cursor:zoom-in}
.cms-img[hidden]{display:none}
.cms-noimg{color:var(--muted,#a5a5a5);font-size:.85rem}

.cms-caption{text-align:center;margin:1.5rem 0 0;font-size:.9rem;
  color:var(--secondary);letter-spacing:.01em}
.cms-caption .t{color:var(--foreground)}

.cms-note{max-width:34rem;margin:0 auto;text-align:justify;
  color:var(--secondary);font-size:.95rem;hyphens:auto}

/* Carousel (mehrere Ansichten) */
.cms-arrow{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--secondary);
  opacity:.55;transition:opacity .2s,color .2s;-webkit-tap-highlight-color:transparent}
.cms-arrow:hover,.cms-arrow:focus-visible{opacity:1;color:var(--foreground);outline:none}
.cms-dots{display:flex;gap:.45rem;margin-top:.9rem;justify-content:center}
.cms-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:var(--foreground);opacity:.25;cursor:pointer;transition:opacity .2s;
  -webkit-tap-highlight-color:transparent}
.cms-dot:hover,.cms-dot:focus-visible{opacity:.55;outline:none}
.cms-dot[aria-current="true"]{opacity:.9}

/* Serien-Rail */
.series-rail{position:sticky;top:6rem;align-self:start;justify-self:end}
.series-rail ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:.4rem;text-align:right}
.rail-item{border:0;background:none;cursor:pointer;font:inherit;text-align:right;
  text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:500;
  color:var(--secondary);opacity:.6;padding:.35rem 0;
  transition:opacity .2s,color .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.rail-item:hover,.rail-item:focus-visible{opacity:1;outline:none}
.rail-item[aria-current="true"]{opacity:1;color:var(--foreground)}

/* Website-Suche über der Rail (Mathias 12) */
.site-search{position:relative;margin:0 0 1.25rem;width:11.5rem}
.site-search input{width:100%;font:inherit;font-size:.82rem;padding:.4rem .55rem;
  color:var(--foreground);background:transparent;
  border:1px solid var(--divider);border-radius:3px}
.site-search input::placeholder{color:var(--muted,#a5a5a5)}
.site-search input:focus{outline:none;border-color:var(--secondary)}
.site-search-results{position:absolute;top:calc(100% + 4px);right:0;width:16rem;
  z-index:20;background:var(--background);border:1px solid var(--divider);
  border-radius:3px;box-shadow:0 8px 24px rgba(0,0,0,.10);
  max-height:300px;overflow-y:auto;padding:.25rem 0;text-align:left}
.site-search-results[hidden]{display:none}
.ss-item{display:block;width:100%;text-align:left;padding:.45rem .7rem;
  font-size:.82rem;line-height:1.35;border:0;background:none;cursor:pointer;
  color:var(--foreground);font-family:inherit}
.ss-item:hover,.ss-item.sel{background:var(--divider)}
.ss-series{display:block;font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted,#a5a5a5)}
.ss-empty{padding:.45rem .7rem;font-size:.8rem;color:var(--muted,#a5a5a5)}

/* Treffer-Anblitzen */
@keyframes cms-hit{0%,100%{outline:2px solid transparent}25%{outline:2px solid var(--foreground)}}
.cms-work.hit{animation:cms-hit 1.2s ease 1;outline-offset:6px}

/* Hover-Vorschau links neben der Rail (Desktop) */
.series-preview{position:fixed;left:0;top:0;width:min(28vw,360px);
  pointer-events:none;z-index:5}
.series-preview[hidden]{display:none}
.series-preview img{width:100%;height:auto;display:block}
@media(max-width:1199px){.series-preview{display:none}}

/* Zoom-Overlay (Bild-only, ersetzt WorkModal auf dieser Seite) */
.cms-zoom{border:0;padding:.5rem;background:var(--background);
  max-width:96vw;margin:auto;border-radius:4px}
.cms-zoom::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.cms-zoom img{display:block;max-width:min(1400px,92vw);max-height:86vh;
  max-height:86dvh;width:auto;height:auto}
.cms-zoom-close{position:absolute;top:.4rem;right:.4rem;width:26px;height:26px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(0,0,0,.08);cursor:pointer;font-size:1.4rem;line-height:1;
  color:var(--secondary);z-index:2;-webkit-tap-highlight-color:transparent}
:root[data-theme="dark"] .cms-zoom-close{background:rgba(255,255,255,.1)}

/* ---------------- Mobile ---------------- */
@media(max-width:900px){
  .works-layout{display:block;padding-block:0 2rem}

  .works-head{position:sticky;top:var(--header-h,4.5rem);z-index:4;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin:0 0 1.75rem;padding:.55rem 0;background:var(--background);
    border-bottom:1px solid var(--divider)}
  .page-title{margin:0;font-size:1.1rem}

  .series-toggle{display:inline-flex;align-items:center;gap:.4rem;border:0;
    background:none;cursor:pointer;font:inherit;text-transform:uppercase;
    letter-spacing:.06em;font-size:.8rem;font-weight:500;color:var(--secondary);
    padding:.35rem .1rem .35rem .5rem;-webkit-tap-highlight-color:transparent}
  .series-toggle[aria-expanded="true"]{color:var(--foreground)}

  .series-rail{position:fixed;top:var(--drawer-top,8rem);left:0;right:0;z-index:6;
    background:var(--background);border-bottom:1px solid var(--divider);
    padding:.5rem 0 .75rem;max-height:calc(100vh - var(--drawer-top,8rem));
    overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s,transform .18s,visibility .18s}
  .series-rail.is-open{opacity:1;visibility:visible;transform:none}
  .series-rail ul{flex-direction:column;gap:0;text-align:left;padding-inline:1.25rem}
  .rail-item{width:100%;text-align:left;font-size:.9rem;padding:.75rem 0}
  .site-search{width:auto;margin:0 1.25rem .5rem}
  .site-search-results{left:0;right:0;width:auto}

  .rail-backdrop{display:block;position:fixed;top:var(--drawer-top,8rem);
    left:0;right:0;bottom:0;z-index:5;background:rgba(0,0,0,.35);
    opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
  .rail-backdrop.is-open{opacity:1;visibility:visible}

  /* Mobile-Layoutregeln: Größen sind ein Desktop-Konzept, Lücken gestaucht */
  .cms-work{width:100%}
  .cms-img{max-height:74vh}
  .cms-item{margin-bottom:min(calc(var(--gap,112px) * .55),18vh)}
}

@media(prefers-reduced-motion:reduce){
  .cms-work.hit{animation:none}
  .series-rail,.rail-backdrop{transition:none}
}

/* ---------------- Landing (CMS-gerendert) ---------------- */
.cms-landing{padding-block:6rem 2rem}
@media(max-width:900px){.cms-landing{padding-block:3rem 2rem}}