/* v192 – zentrale UI-Komponentenbibliothek
   Eine gemeinsame Darstellung für Accordion, Karten, Code, Callouts, Toolbar und Navigation. */
:root{
  --component-radius:16px;
  --component-gap:1rem;
  --component-border:color-mix(in srgb,var(--line) 82%,var(--accent) 18%);
  --component-head:linear-gradient(90deg,color-mix(in srgb,var(--surface2) 94%,var(--accent) 6%),var(--surface2));
}

/* Accordion / Hauptkapitel */
details.chapter, details.lab{
  border:1px solid var(--component-border)!important;
  border-radius:var(--component-radius)!important;
  background:var(--surface)!important;
  overflow:hidden!important;
  box-shadow:var(--ui-shadow-sm,0 8px 24px rgba(15,23,42,.08))!important;
}
details.chapter>summary, details.lab>summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:.75rem!important;
  min-height:58px!important;
  padding:.9rem 1rem!important;
  color:var(--text)!important;
  background:var(--component-head)!important;
  cursor:pointer!important;
  list-style:none!important;
}
details.chapter>summary::-webkit-details-marker,details.lab>summary::-webkit-details-marker{display:none!important}
/* Kritischer Fix: Ein einzelner Titel-Span darf niemals als vermeintliches Metafeld verschwinden. */
details.chapter>summary>span:first-child,
details.lab>summary>span:first-child{
  display:block!important;
  min-width:0!important;
  color:var(--text)!important;
  font-weight:820!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}
details.chapter>summary>span+span:not(.tag),
details.lab>summary>span+span:not(.tag){display:none!important}
details.chapter>summary>.tag,details.lab>summary>.tag{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  margin:0!important;
  white-space:nowrap!important;
}
details.chapter>summary::after,details.lab>summary::after{
  content:""!important;
  width:.72rem!important;height:.72rem!important;
  border-right:2px solid var(--muted)!important;
  border-bottom:2px solid var(--muted)!important;
  transform:rotate(45deg)!important;
  transition:transform .18s ease!important;
  margin:0 .2rem .25rem .35rem!important;
}
details.chapter[open]>summary::after,details.lab[open]>summary::after{transform:rotate(225deg)!important;margin-bottom:-.2rem!important}
details.chapter[open]>summary,details.lab[open]>summary{border-bottom:1px solid var(--component-border)!important}
.chapter-body{padding:clamp(1rem,2vw,1.35rem)!important}
.ui-title-fallback{color:var(--warn)!important}

/* Karten */
.card,.modern-entry-card,.reader-route-grid article,.progress-panel,.source-card{
  border:1px solid var(--component-border)!important;
  border-radius:var(--component-radius)!important;
  background:color-mix(in srgb,var(--surface) 97%,var(--accent) 3%)!important;
  box-shadow:var(--ui-shadow-sm,0 8px 24px rgba(15,23,42,.08))!important;
}

/* Codekarte: exakt ein Rahmen, eine Kopfzeile, ein Copy-Button */
.code-wrap{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,auto)!important;
  margin:1rem 0!important;
  border:1px solid #334155!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#0f172a!important;
  box-shadow:0 14px 32px rgba(2,6,23,.22)!important;
}
.code-wrap>.code-head,.code-wrap>.code-title{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.75rem!important;
  min-height:44px!important;
  margin:0!important;
  padding:.55rem .65rem .55rem .9rem!important;
  color:#e2e8f0!important;
  background:#1e293b!important;
  border:0!important;
  border-bottom:1px solid #334155!important;
  font-weight:750!important;
}
.code-wrap>.copy,.code-wrap>.copy-btn{
  position:static!important;
  inset:auto!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
  width:38px!important;height:38px!important;min-width:38px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #475569!important;border-radius:10px!important;
  background:#f8fafc!important;color:#0f172a!important;
  z-index:auto!important;
}
.code-wrap>pre.code,.code-wrap>.code{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  min-width:0!important;
}
/* Legacy-Struktur ohne Header: Button wird in eine von JS erzeugte Kopfzeile verschoben. */
.code-wrap>.copy-btn:first-child+pre.code{border-radius:0!important}

/* Callouts */
.callout,.warning,.info,.tip,.architecture-note{
  border:1px solid var(--component-border)!important;
  border-left-width:5px!important;
  border-radius:14px!important;
  background:color-mix(in srgb,var(--surface2) 94%,var(--accent) 6%)!important;
  padding:1rem!important;
}

/* Toolbar und Navigation */
.app-bar,.topbar{gap:.45rem!important}
.app-bar .icon-btn,.topbar .icon-btn{flex:0 0 auto!important}

@media(max-width:720px){
  details.chapter>summary,details.lab>summary{grid-template-columns:minmax(0,1fr) auto!important;padding:.8rem .85rem!important}
  details.chapter>summary>.tag,details.lab>summary>.tag{display:none!important}
  .chapter-body{padding:.9rem!important}
}
@media print{
  details.chapter>summary,details.lab>summary{display:flex!important;color:#111!important;background:#eef2f7!important}
  details.chapter>summary::after,details.lab>summary::after{display:none!important}
  .code-wrap>.copy,.code-wrap>.copy-btn{display:none!important}
}


/* v194 – exakt eine Codekarte und eine Copy-Schaltfläche */
.code-wrap[data-ui-component="code-card"]{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid var(--line,#334155)!important;
  border-radius:14px!important;
  background:#0f172a!important;
  box-shadow:0 12px 28px rgba(15,23,42,.14)!important;
}
.code-wrap[data-ui-component="code-card"]>.code-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.75rem!important;
  min-height:48px!important;
  padding:.35rem .45rem .35rem .9rem!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid #334155!important;
  border-radius:0!important;
  background:#1e293b!important;
  color:#e2e8f0!important;
}
.code-wrap[data-ui-component="code-card"]>.code-head>.code-title{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-weight:700!important;
}
.code-wrap[data-ui-component="code-card"]>.code-head>.copy-btn{
  position:static!important;
  inset:auto!important;
  flex:0 0 40px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  border:1px solid #cbd5e1!important;
  border-radius:10px!important;
  background:#f8fafc!important;
  color:#0f172a!important;
  box-shadow:none!important;
  transform:none!important;
}
.code-wrap[data-ui-component="code-card"]>.code-head>.copy-btn svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
.code-wrap[data-ui-component="code-card"]>pre.code{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.code-wrap[data-ui-component="code-card"] .code-card-header,
.code-wrap[data-ui-component="code-card"] .code-card-shell{display:contents!important}
@media(max-width:640px){.code-wrap[data-ui-component="code-card"]>.code-head>.copy-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}}
@media print{.code-wrap[data-ui-component="code-card"]>.code-head>.copy-btn{display:none!important}}


/* v195 – moderne, einheitliche PDF-Fachbibliothek */
.pdf-library-section{padding:clamp(1.15rem,2vw,1.7rem)!important}
.pdf-library-intro{max-width:78ch;margin:0 0 1.15rem;color:var(--muted,var(--text-muted,#64748b))}
.pdf-library-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;align-items:stretch}
.pdf-library-card{--pdf-accent:var(--accent,#0ea5e9);position:relative;display:flex;flex-direction:column;min-width:0;min-height:220px;padding:1.05rem;border:1px solid color-mix(in srgb,var(--pdf-accent) 38%,var(--line,#cbd5e1));border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--pdf-accent) 7%,var(--surface,#fff)) 0%,var(--surface,#fff) 56%);box-shadow:0 10px 28px rgba(15,23,42,.07);overflow:hidden}
.pdf-library-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--pdf-accent)}
.pdf-library-card--book{--pdf-accent:#1fb6d8}.pdf-library-card--refactor{--pdf-accent:#35c99a}.pdf-library-card--legacy{--pdf-accent:#9a7af1}.pdf-library-card--inventory{--pdf-accent:#f0b429}.pdf-library-card--quality{--pdf-accent:#ef6f91}
.pdf-library-card-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.pdf-library-icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--pdf-accent) 14%,var(--surface,#fff));color:var(--pdf-accent)}
.pdf-library-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pdf-library-badge{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:.28rem .5rem;border-radius:999px;background:#f43f5e;color:white;font-size:.72rem;font-weight:800;letter-spacing:.06em}
.pdf-library-card h3{margin:0 0 .55rem;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.25;color:var(--text,#0f172a)}
.pdf-library-card p{margin:0 0 1rem;line-height:1.55;color:var(--muted,var(--text-muted,#64748b))}
.pdf-library-action{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;padding:.78rem .9rem;border-radius:12px;background:var(--pdf-accent);color:#fff!important;text-decoration:none!important;font-weight:800;box-shadow:0 7px 18px color-mix(in srgb,var(--pdf-accent) 25%,transparent)}
.pdf-library-action:hover{transform:translateY(-1px);filter:brightness(1.03)}
.pdf-library-action:focus-visible{outline:3px solid color-mix(in srgb,var(--pdf-accent) 40%,white);outline-offset:3px}
[data-theme="dark"] .pdf-library-card,.dark .pdf-library-card{background:linear-gradient(180deg,color-mix(in srgb,var(--pdf-accent) 13%,#101827) 0%,#101827 58%);box-shadow:0 14px 32px rgba(0,0,0,.28)}
@media(max-width:1200px){.pdf-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.pdf-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pdf-library-grid{grid-template-columns:1fr}.pdf-library-card{min-height:0}}
@media print{.pdf-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pdf-library-action{display:none}.pdf-library-card{min-height:0;box-shadow:none}}