/* Artikel-Detail — gleiche Leser-Ansicht wie index.html (Redaktions-Vorschau) */
:root{
  --article-close-ink:var(--detail-close-ink, #1b1a18);
  --article-close-ink-hover:var(--detail-close-ink-hover, #9a948c);
  --image-overlay-rgb:255, 249, 242;
}

body.article-open .app-scroll{
  filter:blur(14px) saturate(115%);
}
body.article-open header::before{
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:linear-gradient(to bottom, rgba(251,250,248,.62), rgba(251,250,248,.38));
}

.article-view{
  display:none;position:fixed;inset:0;z-index:400;overflow:hidden;
  flex-direction:column;box-sizing:border-box;
  background:rgba(251,250,248,.25);
  transition:opacity .45s var(--ease),visibility .45s,background .45s var(--ease);
  padding:0 32px 0;
}
.article-view.open{
  display:flex;opacity:1;visibility:visible;pointer-events:auto;
}
.article-sheet{
  position:relative;z-index:1;flex:1 1 auto;min-height:0;width:100%;
  max-width:1180px;margin:0 auto;
  border:1px solid var(--line);border-bottom:none;
  background:var(--paper);
  box-shadow:var(--shadow-lift);
  overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;
}
.article-top{position:relative;flex-shrink:0}
.article-top .article-close{
  position:absolute;
  top:calc(var(--header-h) + 8px);
  right:calc(14px + env(safe-area-inset-right, 0px));
  z-index:12;width:auto;height:auto;padding:6px;
  border:none;border-radius:0;background:none;
  color:var(--article-close-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:color .35s var(--ease);
}
.article-close svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round}
.article-close:hover,.article-close:active{color:var(--article-close-ink-hover);background:none}
.article-view .hero{
  position:relative;flex-shrink:0;width:100%;
  height:clamp(200px, 38vw, min(52vh, 520px));
  min-height:200px;max-height:min(52vh, 520px);overflow:hidden;
}
.article-view .hero .img{
  position:absolute;inset:0;width:100%;height:100%;
  background-size:cover;background-position:center;background-color:var(--line);
}
.article-view .hero::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top, var(--paper) 0%, rgba(var(--image-overlay-rgb), .2) 45%, transparent 72%);
}
.article-view .inner{
  position:relative;flex:1 0 auto;max-width:680px;width:100%;margin:0 auto;
  padding:0 32px 80px;box-sizing:border-box;
}
.article-view.no-hero .inner{padding-top:calc(var(--header-total) + 36px)}
.article-cat-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:9px 0 14px;
}
.article-view .cat{
  font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--accent);
}
.article-view .article-date{
  font-family:var(--sans);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:500;white-space:nowrap;text-align:right;
}
.article-view h1{
  font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,42px);
  line-height:1.08;letter-spacing:-.03em;margin-bottom:18px;
}
.article-view .meta-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--sans);font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:36px;
  padding-bottom:28px;border-bottom:1px solid var(--line);
}
.article-view .lead{
  font-family:var(--display);
  font-size:19px;line-height:1.62;font-weight:500;
  color:#3d3832;margin-bottom:32px;
  letter-spacing:-.01em;
}
.article-view .content p{
  font-size:16px;line-height:1.75;color:var(--muted);margin-bottom:1.25em;
}
.article-view .content p:first-child{font-size:16px;color:var(--muted);font-weight:400}
.article-view .content h3,
.article-view .content .detail-draft-h3{
  font-family:var(--display);font-size:20px;font-weight:600;line-height:1.3;
  margin:1.5em 0 .75em;color:var(--ink);
}
.article-view .content h4,
.article-view .content .detail-draft-h4{
  font-family:var(--display);font-size:17px;font-weight:600;line-height:1.35;
  margin:1.25em 0 .5em;color:var(--ink);
}
.article-view .content hr.detail-draft-hr{
  border:none;border-top:1px solid var(--line);margin:2em 0;
}

html[data-theme="dark"] .article-view{background:rgba(31,30,28,.35)}
html[data-theme="dark"] .article-view .lead{color:var(--accent)}
html[data-theme="dark"] .article-view .content p,
html[data-theme="dark"] .article-view .content p:first-child{color:var(--ink)}
html[data-theme="dark"] body.article-open header::before{
  background:linear-gradient(to bottom, rgba(36,34,32,.58), rgba(36,34,32,.34));
}

@media(min-width:881px){
  .article-top .article-close{
    top:calc(var(--header-total) + 10px);right:20px;
  }
}

@media(max-width:880px){
  body.article-open{
    overflow:auto;height:auto;min-height:100%;
    background:var(--paper);background-image:none;
  }
  body.article-open .app-shell{display:none!important}
  body.article-open .article-view.open{
    display:block;position:relative;inset:auto;z-index:1;
    overflow:visible;opacity:1;visibility:visible;pointer-events:auto;
    padding:0;margin:0;background:transparent;transition:none;
  }
  body.article-open .article-sheet{
    position:static;display:block;width:100%;height:auto;margin:0;
    border:none;border-radius:0;box-shadow:none;
    background:var(--paper);overflow:visible;
  }
  body.article-open .article-view .inner{
    max-width:none;padding-left:20px;padding-right:20px;
    padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    background:var(--paper);
  }
  body.article-open .article-top{margin:0;padding:0;line-height:0}
  body.article-open .article-top .article-close{
    position:absolute;
    top:calc(10px + env(safe-area-inset-top, 0px));
    right:calc(14px + env(safe-area-inset-right, 0px));
    z-index:20;line-height:normal;color:var(--article-close-ink);
  }
  body.article-open .article-view.no-hero .article-top{
    height:0;overflow:visible;line-height:normal;
  }
  body.article-open .article-view.no-hero .inner{
    padding-top:calc(44px + env(safe-area-inset-top, 0px));
  }
  body.article-open .app-scroll{filter:none!important}
}

@media(max-width:600px){
  body.article-open .article-view .inner{padding-left:18px;padding-right:18px}
}