/* ============================================================
   speer-und-er.de – dediziertes Template
   Archiv-Ästhetik: Papier, Tiefdruck, Aktendeckel
   ============================================================ */

:root{
  --ink:#15161a;
  --ink-soft:#41454d;
  --ink-muted:#6b7079;
  --paper:#f4f2ec;
  --paper-2:#e9e5da;
  --paper-3:#dedacd;
  --line:#cfc9b9;
  --oxblood:#8b2c22;
  --oxblood-dark:#67201a;
  --dark:#131418;
  --dark-2:#1c1e24;
  --dark-3:#282b33;
  --sand:#b8a377;
  --maxw:1180px;
  --radius:2px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--oxblood-dark);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.narrow{max-width:790px;margin:0 auto}

/* ---------- Kopfleiste ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:var(--dark);
  border-bottom:1px solid #000;
}
.topbar__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 0 12px;
}
.brand{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand__mark{
  font-family:'Spectral',Georgia,serif;
  font-weight:600;font-size:1.32rem;letter-spacing:.22em;
  color:#f2efe6;text-transform:uppercase;
}
.brand__sub{
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sand);
}
.senders{display:flex;gap:10px;align-items:center}
.sender{
  border:1px solid #3b3e46;color:#cfcabb;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  padding:5px 10px;
}
.nav{
  border-top:1px solid #2a2d34;
  overflow-x:auto;
}
.nav ul{
  display:flex;list-style:none;gap:0;min-width:max-content;
}
.nav a{
  display:block;padding:12px 18px 11px;
  color:#b9b4a6;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;border-right:1px solid #24272e;
}
.nav a:hover{color:#fff;background:#22252c;text-decoration:none}
.nav a.is-active{color:#fff;box-shadow:inset 0 -3px 0 var(--oxblood)}
.nav li:first-child a{border-left:1px solid #24272e}

/* ---------- Kopfbereich ---------- */
.hero{
  background:var(--dark-2);
  color:#e8e4d9;
  position:relative;
  padding:74px 0 66px;
  border-bottom:5px solid var(--oxblood);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px);
  pointer-events:none;
}
.hero__inner{position:relative}
.eyebrow{
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--sand);margin-bottom:20px;
}
.hero h1{
  font-family:'Spectral',Georgia,serif;
  font-weight:600;line-height:1.1;
  font-size:clamp(2.05rem,5.2vw,3.5rem);
  letter-spacing:-.01em;max-width:20ch;
}
.hero__lead{
  margin-top:24px;max-width:66ch;
  font-size:1.1rem;color:#c8c3b4;line-height:1.72;
}
.hero__meta{
  margin-top:32px;padding-top:18px;border-top:1px solid #363a43;
  display:flex;flex-wrap:wrap;gap:26px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#918c7e;
}
.hero__meta span{color:#918c7e}

/* ---------- Abschnitte ---------- */
.section{padding:64px 0}
.section--alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--dark{background:var(--dark);color:#ddd8ca}
.section--dark h2,.section--dark h3{color:#f1eee4}

.kicker{
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--oxblood);margin-bottom:14px;
}
.section--dark .kicker{color:var(--sand)}

h2{
  font-family:'Spectral',Georgia,serif;
  font-weight:600;font-size:clamp(1.45rem,3vw,2.05rem);
  line-height:1.25;margin-bottom:20px;letter-spacing:-.005em;
}
h3{
  font-family:'Spectral',Georgia,serif;
  font-weight:600;font-size:1.12rem;line-height:1.35;margin-bottom:9px;
}
p{margin-bottom:20px}
p:last-child{margin-bottom:0}

/* ---------- Textkolumne ---------- */
.prose{max-width:74ch}
.prose h2{margin-top:46px}
.prose h2:first-child{margin-top:0}
.prose p{color:#26282d}
.prose--lead p:first-of-type{font-size:1.12rem;color:#1b1d21}

/* ---------- Etappen / Zeitleiste ---------- */
.eras{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:#fff}
.era{
  padding:30px 24px 32px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;background:#fbfaf6;
  transition:background .18s ease;
}
.era:last-child{border-right:none}
.era:hover{background:#fff}
.era__years{
  font-size:.7rem;letter-spacing:.2em;color:var(--oxblood);
  margin-bottom:12px;font-weight:600;
}
.era__title{
  font-family:'Spectral',Georgia,serif;font-weight:600;
  font-size:1.28rem;margin-bottom:12px;line-height:1.2;
}
.era__text{font-size:.93rem;color:var(--ink-soft);margin-bottom:20px;flex:1}
.era__link{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--oxblood);
  padding-bottom:3px;align-self:flex-start;
}
.era__link:hover{text-decoration:none;color:var(--oxblood)}

/* ---------- Zwei Spalten ---------- */
.cols{display:grid;grid-template-columns:1.35fr .85fr;gap:56px;align-items:start}

/* ---------- Zitat ---------- */
.quote{
  border-left:4px solid var(--oxblood);
  padding:6px 0 6px 26px;
  font-family:'Spectral',Georgia,serif;
  font-size:1.28rem;line-height:1.55;color:#22242a;
}
.quote cite{
  display:block;margin-top:14px;font-family:'Inter',sans-serif;
  font-style:normal;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-muted);
}

/* ---------- Notizkasten ---------- */
.note{
  background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--ink);padding:26px 26px 28px;
}
.note h3{margin-bottom:12px}
.note p{font-size:.95rem;color:var(--ink-soft)}
.note + .note{margin-top:22px}

/* ---------- Produktionsraster ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.fact{border-top:2px solid var(--ink);padding-top:16px}
.fact h3{font-size:1.02rem;margin-bottom:8px}
.fact p{font-size:.92rem;color:var(--ink-soft)}

/* ---------- Partnerkarten ---------- */
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{
  background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease;
}
.pcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,20,25,.11)}
.pcard__thumb{
  height:104px;position:relative;display:flex;align-items:center;justify-content:center;
}
.pcard__thumb span{
  font-family:'Spectral',Georgia,serif;font-size:1.5rem;
  letter-spacing:.14em;color:rgba(255,255,255,.92);
}
.t1{background:linear-gradient(135deg,#2f3e46,#5b7a6b)}
.t2{background:linear-gradient(135deg,#3d3a36,#8a7350)}
.t3{background:linear-gradient(135deg,#2c3a4f,#6d8aa8)}
.t4{background:linear-gradient(135deg,#4a2f33,#9a6a5c)}
.t5{background:linear-gradient(135deg,#33413a,#7c8f6a)}
.t6{background:linear-gradient(135deg,#2b2740,#6b5c9a)}
.pcard__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pcard__body h3{margin-bottom:8px}
.pcard__body p{font-size:.9rem;color:var(--ink-soft);margin-bottom:16px;flex:1}
.pcard__url{
  font-size:.72rem;letter-spacing:.04em;color:var(--oxblood-dark);
  word-break:break-all;border-top:1px solid var(--paper-3);padding-top:12px;
}

/* ---------- Weiterlesen ---------- */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nextcard{
  border:1px solid #35383f;padding:22px 22px 24px;background:#191b21;
  display:block;color:#ddd8ca;
}
.nextcard:hover{background:#20232a;text-decoration:none}
.nextcard span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}
.nextcard h3{margin:10px 0 8px;color:#f2efe6}
.nextcard p{font-size:.9rem;color:#a7a294}

/* ---------- Fußbereich ---------- */
.footer{background:var(--dark);color:#9d988a;padding:56px 0 30px;border-top:5px solid var(--oxblood)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.footer h4{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sand);margin-bottom:16px;font-weight:600;
}
.footer p{color:#8f8a7c;font-size:.9rem}
.footer ul{list-style:none}
.footer li{margin-bottom:9px}
.footer a{color:#c2bdae;font-size:.92rem}
.footer a:hover{color:#fff}
.footer__bottom{
  margin-top:44px;padding-top:20px;border-top:1px solid #2b2e35;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:.76rem;color:#7c7768;
}

/* ---------- Responsiv ---------- */
@media (max-width:1000px){
  .eras{grid-template-columns:repeat(2,1fr)}
  .era:nth-child(2n){border-right:none}
  .era:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .partners{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr;gap:40px}
  .next{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:640px){
  body{font-size:16px}
  .eras{grid-template-columns:1fr}
  .era{border-right:none;border-bottom:1px solid var(--line)}
  .era:last-child{border-bottom:none}
  .partners{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero{padding:52px 0 46px}
  .section{padding:46px 0}
  .topbar__row{flex-direction:column;align-items:flex-start;gap:10px}
}