/* Blog: Uebersicht, Kategorieseiten und die Typografie der Beitraege.
   Erzeugt nicht, sondern von Hand geschrieben; scripts/build-blog.py haengt
   diese Datei an die Seiten, die sie brauchen.

   WARUM ES SIE GIBT

   Die Blogseiten kamen als Webflow-Export und wurden im Browser zurechtgestrichen:
   23 Stylesheets, rund 80 KB, per JavaScript nachgeladen, nachdem der Browser
   die Seite schon einmal gezeichnet hatte. Sichtbar als kurzes Aufblitzen des
   alten Aussehens (Luca, 06.09.2026). Diese Datei nimmt deren Platz ein, kommt
   aber im Kopf und damit vor dem ersten Anstrich.

   Der Aufbau bleibt, wie er war — Titelblock, Kategoriereiter, Kartenraster.
   Neu sind Schrift, Farben und Abstaende: dieselben Werte wie auf den Seiten
   aus dem Entwurf, damit der Blog nicht laenger wie ein anderes Produkt aussieht.

   Die Klassennamen gehoeren dem Webflow-Export. Sie werden hier nur gelesen. */

:root{
  --bl-ink:#111214;
  --bl-muted:#6B6B70;
  --bl-faint:#8F8F94;
  --bl-line:rgba(17,18,20,0.10);
  --bl-surface:#F5F5F3;
  --bl-gutter:clamp(20px,3vw,40px);
  --bl-max:1280px;
}

/* Die Schrift muss an jedem Element stehen, nicht nur am Container: das
   vendorierte Webflow-Blatt benennt .bl-title, h1 und die Kartenklassen
   einzeln, und gegen eine eigene Regel hilft Vererbung nicht. */
.bl-hero,.bl-grid-section,.bl-top,
.bl-eyebrow,.bl-title,.bl-sub,.bl-tab,
.bl-card,.bl-card-cat,.bl-card-title,.bl-card-excerpt,.bl-card-meta,
.bl-crumbs,.bl-crumb-a,.ba-title,.ba-body,.ba-body *,
.bl-top-title,.bl-feed-cat,.bl-feed-title,.bl-feed-meta{
  font-family:'Switzer',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.bl-hero,.bl-grid-section,.bl-top{
  -webkit-font-smoothing:antialiased;
  color:var(--bl-ink);
}

/* ── Kopf der Uebersicht ─────────────────────────────────────────────────── */

.bl-hero{
  background:#FFFFFF;
  padding:clamp(56px,8vw,96px) var(--bl-gutter) 0;
}
.bl-hero-inner{max-width:var(--bl-max);margin:0 auto}

.bl-eyebrow{
  display:block;
  font-size:12px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--bl-faint);
  margin:0 0 clamp(14px,1.6vw,20px);
}

.bl-title{
  font-size:clamp(30px,4.6vw,52px);
  font-weight:500;letter-spacing:-0.025em;line-height:1.06;
  color:var(--bl-ink);
  margin:0;
}

.bl-sub{
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.6;
  color:var(--bl-muted);
  max-width:60ch;
  margin:clamp(14px,1.8vw,20px) 0 0;
}
.bl-sub.w-dyn-bind-empty{display:none}

/* ── Kategoriereiter ─────────────────────────────────────────────────────── */

.bl-tabs{
  display:flex;align-items:flex-end;flex-wrap:nowrap;
  gap:clamp(18px,2.2vw,28px);
  max-width:var(--bl-max);margin:clamp(32px,5vw,56px) auto 0;
  border-bottom:1px solid var(--bl-line);
  overflow-x:auto;
  scrollbar-width:none;
  /* Der Rand soll die ganze Breite tragen, auch wenn die Reiter scrollen. */
  padding-bottom:0;
}
.bl-tabs::-webkit-scrollbar{display:none}
/* Webflow verschachtelt die Reiter in seine Sammlungs-Container. Alle drei
   Ebenen muessen durchsichtig werden, sonst ist jeder Reiter ein eigener
   Block und die Zeile bricht um. */
.bl-tabs .w-dyn-list,.bl-tabs .w-dyn-items,.bl-tabs .w-dyn-item{display:contents}

.bl-tab{
  display:block;flex:0 0 auto;
  font-size:14px;font-weight:500;line-height:1;
  color:var(--bl-muted);
  text-decoration:none;
  padding:0 0 14px;
  border-bottom:2px solid transparent;
  transition:color 0.2s,border-color 0.2s;
  white-space:nowrap;
}
.bl-tab:hover{color:var(--bl-ink)}
.bl-tab.bl-tab-active,.bl-tab.w--current{
  color:var(--bl-ink);
  border-bottom-color:var(--bl-ink);
}

/* ── Kartenraster ────────────────────────────────────────────────────────── */

.bl-grid-section{
  background:#FFFFFF;
  padding:clamp(32px,5vw,56px) var(--bl-gutter) clamp(64px,10vw,120px);
}
/* Das vendorierte Blatt macht .bl-grid selbst zum Raster; die Sammlung
   landet dann in einer einzigen Spalte. Das Raster gehoert eine Ebene
   tiefer, auf die Liste der Eintraege. */
.bl-grid{display:block;max-width:var(--bl-max);margin:0 auto}
.bl-grid .w-dyn-list{display:block}
.bl-grid .w-dyn-items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(28px,3.4vw,44px) clamp(20px,2.4vw,32px);
  padding:0;margin:0;list-style:none;
}
.bl-grid .w-dyn-item{margin:0}

.bl-card{
  display:grid;gap:12px;
  text-decoration:none;color:inherit;
}
.bl-card-media{
  aspect-ratio:4/3;
  border-radius:16px;
  overflow:hidden;
  background:var(--bl-surface);
}
.bl-card-media img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 0.45s cubic-bezier(0.2,0.6,0.2,1);
}
.bl-card:hover .bl-card-media img{transform:scale(1.03)}

.bl-card-cat{
  font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bl-faint);
  margin-top:2px;
}
.bl-card-title{
  font-size:clamp(17px,1.35vw,20px);
  font-weight:500;letter-spacing:-0.01em;line-height:1.3;
  color:var(--bl-ink);
  margin:0;
}
.bl-card:hover .bl-card-title{text-decoration:underline;text-underline-offset:3px}
.bl-card-excerpt{
  font-size:15px;line-height:1.6;color:var(--bl-muted);margin:0;
  /* Drei Zeilen, damit die Karten in einer Reihe gleich hoch beginnen. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.bl-card-meta{
  display:flex;gap:14px;align-items:center;
  font-size:13px;color:var(--bl-faint);
}
/* Der Slug steht im Markup, damit die Filterung ihn lesen konnte. Er ist
   keine Anzeige. */
.bl-card-slug{display:none}

/* ── Kategorieseite ──────────────────────────────────────────────────────── */

.ba-wrap.bl-hero{padding-bottom:clamp(64px,10vw,120px)}
.bl-crumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13px;color:var(--bl-faint);
  margin:0 0 clamp(14px,1.6vw,20px);
}
.bl-crumb-a{color:var(--bl-faint);text-decoration:none}
.bl-crumb-a:hover{color:var(--bl-ink);text-decoration:underline;text-underline-offset:3px}
.ba-body{
  font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--bl-muted);
  max-width:60ch;margin:clamp(14px,1.8vw,20px) 0 0;
}
.ba-body .w-dyn-bind-empty{display:none}
.bl-hub .bl-grid{margin-top:clamp(36px,5vw,56px)}

/* ── Der Aufmacher-Block der englischen Uebersicht ───────────────────────── */

.bl-top{
  background:var(--bl-surface);
  padding:clamp(48px,7vw,88px) var(--bl-gutter);
}
.bl-top-inner{max-width:var(--bl-max);margin:0 auto}
.bl-top-head{margin:0 0 clamp(24px,3vw,36px)}
.bl-top-title{
  font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-0.02em;
  color:var(--bl-ink);margin:0;
}
.bl-top-grid{
  display:grid;gap:clamp(28px,3.4vw,44px);
  grid-template-columns:1fr;
}
@media (min-width:900px){.bl-top-grid{grid-template-columns:1.1fr 0.9fr}}
.bl-top-feed{display:grid;gap:0;align-content:start}
.bl-feed-row{
  display:grid;gap:6px;
  padding:clamp(14px,1.8vw,18px) 0;
  border-bottom:1px solid var(--bl-line);
  text-decoration:none;color:inherit;
}
.bl-feed-row:first-child{padding-top:0}
.bl-feed-row:last-child{border-bottom:0}
.bl-feed-cat{
  font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bl-faint);
}
.bl-feed-title{
  font-size:clamp(16px,1.2vw,18px);font-weight:500;line-height:1.35;
  color:var(--bl-ink);margin:0;
}
.bl-feed-row:hover .bl-feed-title{text-decoration:underline;text-underline-offset:3px}
.bl-feed-meta{font-size:13px;color:var(--bl-faint)}

/* ── Beitragsseiten ──────────────────────────────────────────────────────── */
/* Die Beitragsseiten bringen ihr Layout selbst mit. Ihre Ueberschriften haengen
   an den Variablen --b-display und --b-sans, die scripts/build-blog.py auf
   Switzer stellt. Der Fliesstext haengt an keiner der beiden: er erbt von
   <body>, und dort steht Roboto aus dem Webflow-Blatt. */
.bl2-lead,.bl2-prose,.bl2-prose p,.bl2-prose li,.bl2-prose td,.bl2-prose th,
.bl2-tldr__item,.bl2-faq__a,.bl2-person__role,.bl2-sources__list{
  font-family:'Switzer',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ── Telefon ─────────────────────────────────────────────────────────────── */

@media (max-width:639px){
  .bl-tabs{gap:16px}
  .bl-card-excerpt{-webkit-line-clamp:2}
}