/* ============================================================
   plugin-manager.de — Site-Layer (Seiten-Patterns über dem Designsystem)
   ============================================================ */

/* Hero */
.hero { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem); }
.hero--home { background: linear-gradient(180deg, var(--color-bg-brand-tint) 0%, var(--color-bg) 100%); text-align: center; }
.hero--home .text-lead { margin-inline: auto; }
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.hero--home .hero__ctas { justify-content: center; }

/* Produkt-Hero (T3): Text + Mockup */
.hero--product { background: linear-gradient(180deg, var(--color-bg-brand-tint) 0%, var(--color-bg) 100%); }
.hero--product .hero__grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 64rem) { .hero--product .hero__grid { grid-template-columns: 1.1fr 1fr; } }

/* Browser-Mockup (Bildkonzept §1.3) */
.mockup { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); overflow: hidden; }
.mockup__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-bg-subtle); }
.mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.mockup__url { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-faint); margin-left: var(--space-2); }
.mockup__body { aspect-ratio: 16/10; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--color-bg-subtle), var(--color-bg-subtle) 12px, var(--color-bg) 12px, var(--color-bg) 24px); color: var(--color-ink-faint); font-size: var(--text-caption); text-align: center; padding: var(--space-4); }
.mockup__body img { width: 100%; height: 100%; object-fit: cover; }

/* Sektions-Template P18 (alternierend) */
.feature-row { display: grid; gap: var(--space-8); align-items: center; }
.feature-row + .feature-row { margin-top: var(--space-16); }
@media (min-width: 64rem) {
  .feature-row { grid-template-columns: 1fr 1.15fr; }
  .feature-row--flip .feature-row__text { order: 2; }
}
.feature-row__metric { font-family: var(--font-mono); font-size: var(--text-small); color: var(--color-accent-strong); font-weight: var(--font-weight-medium); }

/* Sektionsköpfe */
.section-head { max-width: 46rem; margin-bottom: var(--space-12); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Footer */
.site-footer { background: var(--pm-ink-950); color: #B7BFCB; padding-block: var(--space-16) var(--space-8); font-size: var(--text-small); }
.site-footer a { color: #D5DAE2; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: #fff; margin: 0 0 var(--space-4); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__bottom { border-top: 1px solid #263248; padding-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; color: #8B95A5; font-size: var(--text-caption); }

/* Mobile-Navigation */
.nav-burger { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: transparent; color: var(--color-ink); cursor: pointer; }
@media (min-width: 64rem) { .nav-burger { display: none; } }
.site-header__nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-4); box-shadow: var(--shadow-2); }

/* Changelog (T3 §6 / T11) */
.changelog { font-family: var(--font-mono); font-size: var(--text-small); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.changelog__row { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-6); align-items: baseline; }
.changelog__row + .changelog__row { border-top: 1px solid var(--color-border); }
.changelog__version { font-weight: var(--font-weight-medium); color: var(--color-ink); min-width: 5rem; }
.changelog__date { color: var(--color-ink-faint); font-size: var(--text-caption); }
.changelog__note { flex: 1 1 100%; color: var(--color-ink-secondary); font-family: var(--font-sans); }

/* Doku-Artikel (T5) */
.doc-layout { display: grid; gap: var(--space-12); }
@media (min-width: 64rem) { .doc-layout { grid-template-columns: minmax(0,1fr) 16rem; } }
.doc-toc { position: sticky; top: 5rem; align-self: start; font-size: var(--text-small); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); border-left: 2px solid var(--color-border); }
.doc-toc a { display: block; padding: var(--space-1) var(--space-4); color: var(--color-ink-secondary); text-decoration: none; }
.doc-toc a:hover { color: var(--color-accent-strong); }
.doc-steps { counter-reset: step; }
.doc-steps > li { list-style: none; counter-increment: step; position: relative; padding-left: var(--space-12); margin-bottom: var(--space-8); }
.doc-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: var(--text-small); }
.code-block { position: relative; font-family: var(--font-mono); font-size: var(--text-small); background: var(--pm-ink-950); color: #D5DAE2; border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); overflow-x: auto; }

/* Prose (Blog/Doku/Rechtstexte) */
.prose { max-width: 46rem; }
.prose h2 { font-size: var(--text-h2); margin: var(--space-12) 0 var(--space-4); }
.prose h3 { font-size: var(--text-h3); margin: var(--space-8) 0 var(--space-3); }
.prose p, .prose ul, .prose ol { color: var(--color-ink-secondary); }
.prose li { margin-bottom: var(--space-2); }

/* Utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.center{text-align:center}
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Consent-Banner (Google Tag Manager) ---------- */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  padding: var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 32px rgba(11, 18, 32, 0.12);
  color: var(--color-ink);
}
.consent__inner {
  max-width: var(--container-max, 72rem); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8);
}
.consent__body { flex: 1 1 28rem; min-width: 0; }
.consent__title { margin: 0 0 var(--space-1); font-weight: var(--font-weight-semibold); font-size: var(--text-body); }
.consent__text { margin: 0; font-size: var(--text-small); color: var(--color-ink-secondary); }
.consent__text a { color: var(--color-link); text-decoration: underline; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
@media (max-width: 40rem) {
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1 1 auto; }
}
/* Platz unter dem Footer, solange der Banner sichtbar ist */
.has-consent-banner body { padding-bottom: 11rem; }
@media (min-width: 40rem) { .has-consent-banner body { padding-bottom: 7rem; } }
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in 240ms ease-out; }
  @keyframes consent-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* Footer-Button "Cookie-Einstellungen" — sieht aus wie die Nachbar-Links */
.consent-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: #D5DAE2; cursor: pointer; text-decoration: none;
}
.consent-link:hover { color: #fff; }