/* Verlag-OS 0.35 — Familien-Template-System. Inhalt bleibt gleich, Haltung wechselt. */

body[class*="vos-template-"] {
  font-family: var(--vos-sans);
  color: var(--vos-text);
  background-color: var(--vos-papier);
}

body[class*="vos-template-"] h1,
body[class*="vos-template-"] h2,
body[class*="vos-template-"] h3,
body[class*="vos-template-"] .site-brand {
  font-family: var(--vos-serif);
}

/* Klassisch: der ruhige Verlag-OS-Grundcharakter. */
.vos-template-klassisch .site-header { border-bottom-color: color-mix(in srgb, var(--vos-tinte) 15%, transparent); }
.vos-template-klassisch .hero { border-bottom: 1px solid color-mix(in srgb, var(--vos-tinte) 12%, transparent); }

/* Editorial: schwebender Kopf, asymmetrische Flächen und größere Typografie. */
.vos-template-editorial .site-header {
  width: min(1180px, calc(100% - 32px));
  margin: 16px auto 0;
  border: 1px solid color-mix(in srgb, var(--vos-tinte) 14%, transparent);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(23, 29, 38, .08);
}
.vos-template-editorial .site-header__inner { padding-block: 13px; }
.vos-template-editorial h1 { font-size: clamp(2.7rem, 6.5vw, 5.7rem); line-height: .94; }
.vos-template-editorial .hero__inner { position: relative; }
.vos-template-editorial .hero__inner::before {
  content: '';
  position: absolute;
  inset: -2rem auto -2rem -7vw;
  width: 24vw;
  max-width: 330px;
  background: color-mix(in srgb, var(--vos-tinte) 8%, transparent);
  z-index: -1;
}
.vos-template-editorial .section-title { max-width: 16ch; }

/* Magazin: kontrastreicher Kopf und bildstarke Programmbühnen. */
.vos-template-magazin .site-header {
  background: var(--vos-tinte);
  border-bottom-color: transparent;
}
.vos-template-magazin .site-brand,
.vos-template-magazin .site-nav a,
.vos-template-magazin .site-cart-mini { color: #fff; }
.vos-template-magazin .site-nav a::after { background: var(--vos-gold); }
.vos-template-magazin .site-nav-toggle { color: #fff; border-color: rgba(255,255,255,.35); }
.vos-template-magazin .hero {
  color: #fff;
  background:
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--vos-bordeaux) 72%, transparent), transparent 38%),
    linear-gradient(135deg, var(--vos-tinte-dunkel), var(--vos-tinte));
}
.vos-template-magazin .hero h1,
.vos-template-magazin .hero h2,
.vos-template-magazin .hero .eyebrow { color: #fff; }
.vos-template-magazin .hero p { color: rgba(255,255,255,.82); }
.vos-template-magazin .book-card { border-radius: 3px; }

/* Stile können die Geometrie bewusst leicht verschieben. */
.vos-theme-pur { --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; }
.vos-theme-kontrast a:focus-visible,
.vos-theme-kontrast button:focus-visible { outline: 3px solid var(--vos-gold); outline-offset: 3px; }
.vos-theme-premium .site-header { box-shadow: 0 12px 34px rgba(23, 25, 31, .07); }

.vos-demo-banner {
  position: relative;
  z-index: 90;
  display: flex;
  justify-content: center;
  gap: .75rem;
  align-items: center;
  padding: .55rem 1rem;
  background: #241b2e;
  color: #fff;
  font: 600 .82rem/1.35 var(--vos-sans, sans-serif);
  text-align: center;
}
.vos-demo-banner a { color: #f0cf84; text-decoration: underline; }

@media (max-width: 820px) {
  .vos-template-editorial .site-header { width: 100%; margin: 0; border-width: 0 0 1px; border-radius: 0; }
  .vos-template-editorial .hero__inner::before { display: none; }
  .vos-template-magazin .site-nav { background: var(--vos-tinte-dunkel); }
}

@media (prefers-reduced-motion: reduce) {
  body[class*="vos-template-"] * { scroll-behavior: auto !important; transition-duration: .001ms !important; }
}