/* Quintenzirkel Site – layout.css: Kopf, Hero, Quintenband, Abschnitte, Abschluss, Fuß */
/* Kopf */
.qz-top{background:var(--hero-bg);color:var(--hero-fg)}
.qz-top nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.qz-brand{font-family:var(--f-display);font-size:1.35rem;font-weight:700}
.qz-brand a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.qz-brand img{width:36px!important;height:36px;border-radius:9px}
.qz-menu{display:flex;gap:18px;flex-wrap:wrap;font-size:.95rem}
.qz-menu a{color:#cfdcff;text-decoration:none}
.qz-menu a:hover,.qz-menu a:focus-visible{color:#fff;text-decoration:underline}

/* Hero */
/* Text und Zirkel auf einer gemeinsamen Mittelachse; Abstand Zirkel → oberer Fensterrand = Zirkel → gelbe Leiste.
   Dafür ist der untere Innenabstand um die Höhe der Kopfzeile (--qz-head-h) größer als der obere. */
.qz-hero{--qz-hero-pad:40px;--qz-head-h:64px;background:var(--hero-bg);color:var(--hero-fg);padding-block:var(--qz-hero-pad) calc(var(--qz-hero-pad) + var(--qz-head-h));overflow:hidden}
.qz-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.qz-hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:800;color:#fff}
.qz-hero h1 em{font-style:italic;color:var(--gold)}
.qz-hero .qz-lead{font-size:1.2rem;color:#d6e1ff;margin-top:16px;max-width:34ch}
.qz-hero .qz-eyebrow{color:var(--gold)}
.qz-hero-copy{display:grid;gap:6px;padding-block:0}
.qz-hero-shot{align-self:center}
.qz-hero-shot img{display:block;width:100%;max-width:600px;height:auto;margin-inline:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.4))}

/* Quintenband */
.qz-ribbon{background:var(--gold);color:#0b2a6f;overflow:hidden;white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:1rem;padding-block:7px}
.qz-ribbon span{display:inline-block;padding-inline:11px}
.qz-ribbon i{font-style:normal;opacity:.55;font-family:var(--f-mono);font-size:.72rem;padding-inline:3px}
.qz-ribbon-track{display:inline-block;animation:qz-slide 40s linear infinite}
@keyframes qz-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.qz-ribbon-track{animation:none}}

/* Abschnitte */
.qz-section{padding-block:72px}
.qz-head{display:grid;gap:10px;max-width:640px;margin-bottom:40px}
.qz-head h2{font-size:clamp(2rem,4vw,2.8rem);color:var(--navy)}
.qz-head p{color:var(--muted)}

.qz-section--flush{padding-block-start:0}

/* Abschluss */
.qz-cta{background:var(--hero-bg);color:#fff;text-align:left}
.qz-cta .qz-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding-block:56px}
.qz-cta img{width:120px;height:120px;border-radius:28px}
.qz-cta h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:#fff}
.qz-cta p{color:#d6e1ff;margin-top:6px}

.qz-foot{background:var(--paper);color:var(--muted);font-size:.9rem}
.qz-foot .qz-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px;border-top:1px solid var(--line)}
.qz-foot a{color:var(--muted)}
.qz-foot .qz-legal{display:flex;gap:16px;flex-wrap:wrap}

@media (max-width:820px){
  .qz-hero-grid{grid-template-columns:minmax(0,1fr)}
  .qz-cta .qz-wrap{grid-template-columns:minmax(0,1fr)}
  .qz-hero{padding-block:24px 32px}
  .qz-hero-copy{padding-block:0 8px}
}
.qz-head--tight{margin-bottom:0}