/* ============================================================
   Werbe · Atelier Klassen — silo.css
   Nur auf den vier Leistungs-Unterseiten geladen — bewusst NICHT in
   styles.css: Die Startseite zahlt sonst die Bytes in ihrer FCP-Kette.
   ============================================================ */

/* ---------- Silo-Unterseiten (Leistungsbereiche) ---------- */
.silo-kopf {
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(48px, 7vw, 88px);
}
.brotkrumen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--grau-auf-navy);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.brotkrumen a { color: var(--hell-auf-navy); text-decoration: none; border-bottom: 1px solid rgba(227, 181, 88, 0.4); }
.brotkrumen a:hover, .brotkrumen a:focus-visible { color: var(--gold); border-color: var(--gold); }
.brotkrumen span[aria-current] { color: var(--gold); }
.silo-kopf h1 { color: #fff; font-size: clamp(1.8rem, 4.4vw, 3rem); max-width: 26ch; text-wrap: balance; }
/* Lange Komposita (Fahrzeugbeschriftung, Marketingberatung) sprengen sonst 320px —
   Silbentrennung nur dort, wo sie gebraucht wird, nicht in breiten Headlines */
@media (max-width: 480px) {
  .silo-kopf h1, .silo-block h2 { hyphens: auto; overflow-wrap: break-word; }
}
.silo-lead { margin-top: 1em; max-width: 62ch; color: var(--grau-auf-navy); font-size: 1.08rem; }
.silo-cta-zeile { margin-top: 1.6em; }

.silo-block.getont { background: var(--paper-tief); }
.silo-prosa { max-width: 68ch; display: grid; gap: 1em; margin-top: clamp(18px, 3vw, 28px); color: var(--ink-soft); }
.silo-prosa a { color: var(--gold-ink); }
.silo-prosa h3 { font-family: var(--font-display); color: var(--ink); margin-bottom: 0.2em; }

.begriffe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px) clamp(24px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 40px);
}
.begriffe > div { border-top: 1px solid rgba(0, 51, 102, 0.15); padding-top: 14px; }
.begriffe dt { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.begriffe dd { color: var(--ink-soft); font-size: 0.95rem; }

.silo-referenzen .logo-reihe { margin-top: clamp(20px, 3vw, 32px); }

.ablauf {
  list-style: none;
  counter-reset: ablauf;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  margin-top: clamp(24px, 4vw, 40px);
  max-width: 720px;
}
.ablauf li { counter-increment: ablauf; position: relative; padding-left: 64px; }
.ablauf li::before {
  content: counter(ablauf);
  position: absolute;
  left: 0; top: 2px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  color: var(--gold-ink);
  border: 1px solid var(--gold-ink);
  border-radius: 50%;
}
.ablauf h3 { font-family: var(--font-display); margin-bottom: 0.3em; }
.ablauf p { color: var(--ink-soft); }

.pruef-raster {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  margin-top: clamp(24px, 4vw, 40px);
}
.pruef-raster li { background: #fff; border: 1px solid var(--paper-tief); border-radius: 6px; padding: 20px; }
.pruef-raster h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.4em; }
.pruef-raster p { font-size: 0.92rem; color: var(--ink-soft); }

.ergebnis-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(24px, 4vw, 40px);
}
.ergebnis-karten > div { border-top: 2px solid var(--gold); padding-top: 16px; }
.ergebnis-karten h3 { font-family: var(--font-display); margin-bottom: 0.4em; }
.ergebnis-karten p { font-size: 0.95rem; color: var(--ink-soft); }
.unabhaengig { margin-top: clamp(32px, 5vw, 56px); }

.silo-schluss .zwischenruf-dunkel { text-align: center; }
.zwischenruf-dunkel > p:first-child { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.65rem); margin-bottom: 1em; color: #fff; }
.quernav { margin-top: clamp(48px, 7vw, 80px); border-top: 1px solid rgba(167, 180, 201, 0.14); padding-top: clamp(28px, 4vw, 44px); }
.quernav-titel { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.quernav ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.quernav a {
  display: block;
  text-decoration: none;
  background: var(--navy);
  border: 1px solid rgba(227, 181, 88, 0.16);
  border-radius: 6px;
  padding: 18px 20px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.quernav a:hover, .quernav a:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.quernav strong { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; color: #fff; margin-bottom: 4px; }
.quernav span { font-size: 0.88rem; color: var(--grau-auf-navy); }

@media (max-width: 780px) {
  .begriffe { grid-template-columns: 1fr; }
  .ergebnis-karten { grid-template-columns: 1fr; }
  .quernav ul { grid-template-columns: 1fr; }
}