/* Blog der Übersicht (Nutzer 22.10.2026, Regeln in dev/regeln/uebersicht.md, "Blog"; gewählt "Technik-Blog, ruhig",
   "Lesespalte mit Termin-Karte", "Nur Punktraster", "Ruhig"). Vorbild die Blogs von Linear und Vercel: schmale
   Lesespalte, große Überschrift in der Seitenschrift, Termin und Referenten in JetBrains Mono wie die Pille im Hero der
   Übersicht, Punktraster aus dem Hero als Titelfläche, viel Weißraum. Keine Bewegung außer beim Überfahren der Knöpfe.
   Pille, Kalenderblatt und Knopf folgen der Rubrik #webinar der Übersicht (uebersicht.css), die Seite lädt uebersicht.css
   aber nicht. Darkmode in der Form html[data-bs-theme="dark"] … wie auf der Übersicht. */

/* JetBrains Mono wie auf der Übersicht; paket-bauen.py lädt die Schrift beim Bauen als lokale Datei (DSGVO) */
@import url("fonts/blog-fonts.css");

.bl { position: relative; isolation: isolate; --bl-mono: "JetBrains Mono", ui-monospace, "Liberation Mono", monospace; }
.bl-wrap { max-width: 64rem; margin-inline: auto; padding-inline: 5vw; box-sizing: content-box; }

/* ---------- Titel ---------- */

/* Punktraster wie im Hero der Übersicht (16 px, 8 %), als weiche Wolke hinter dem oberen Teil der Seite */
.bl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44rem;
  z-index: -1;
  background-image: radial-gradient(rgb(27 54 97 / .08) 1px, transparent 1.3px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 68% 42%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 60% at 68% 42%, #000 40%, transparent 100%);
  pointer-events: none;
}
/* Termin als Zeile wie die Pille im Hero der Übersicht (Feld "Neu", Nutzer 22.10.2026) */
.bl-live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.4rem;
  padding: .3rem .85rem .3rem .3rem;
  border: 1px solid rgb(27 54 97 / .16);
  border-radius: 999px;
  background: #fff;
  color: #3d3a35;
  font-family: var(--bl-mono);
  font-size: .82rem;
  line-height: 1.2;
  white-space: nowrap;
}
.bl-live .bi { color: #1b3661; font-size: .95em; }
.bl-live-new {
  flex: none;
  padding: .24rem calc(.5rem - .06em) .2rem .5rem;
  border-radius: 999px;
  background: #fcd34d;
  color: #1b3661;
  font-family: Outfit, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bl-head h1 {
  max-width: 46rem;
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #141210;
  text-wrap: balance;
}
.bl-lead { max-width: 40rem; margin: 0 0 1.1rem; font-size: 1.15rem; line-height: 1.55; color: #5c564c; }
.bl-meta { margin: 0; font-family: var(--bl-mono); font-size: .85rem; color: #7a7368; }

/* ---------- Spalten: Titel, Termin-Karte, Lesespalte ----------
   Schmal untereinander (Titel, Karte, Beitrag). Ab 1100 px links die Karte, oben bündig mit der Überschrift (unter der
   Zeile mit dem Termin) und beim Scrollen unter der Kopfzeile mitlaufend; rechts Titel und Beitrag in einer Spalte
   (Nutzer 22.10.2026 nach dem Test: "quadrat nach links", gewählt "Links neben dem Titel"). */
.bl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; padding-top: 8.5rem; padding-bottom: 5rem; }
@media (min-width: 1100px) {
  /* linke Kante wie der Hero-Text der Übersicht (Nutzer 22.10.2026: "weiter nach links", gewählt "Kante des Hero-Texts"):
     höchstens 84rem breit mit 5vw Rand wie .uv-hero-grid, Spalten von links; rechts bleibt Fläche für das Punktraster */
  .bl-grid { max-width: 84rem; grid-template-columns: 18rem minmax(0, 42rem); justify-content: start; gap: 3.2rem 4rem; }
  .bl-head { grid-column: 2; grid-row: 1; }
  .bl-body { grid-column: 2; grid-row: 2; }
  .bl-card {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: 6.5rem;
    /* Höhe der Termin-Zeile samt Abstand (.bl-live), damit die Karte mit der Überschrift beginnt */
    margin-top: calc(.82rem * 1.2 + .72rem + 2px + 1.4rem);
  }
}
@media (max-width: 1099.98px) { .bl-head, .bl-body, .bl-card { max-width: 42rem; box-sizing: border-box; } }

.bl-body h2 {
  margin: 2.6rem 0 .8rem;
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #141210;
}
.bl-body h2:first-child { margin-top: 0; }
.bl-body p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.65; color: #3d3a35; }

/* Kundenvorgang als nummerierte Stationen, Nummern in Monospace */
.bl-steps { margin: 0 0 1.2rem; padding: 0; list-style: none; counter-reset: bl-step; border-top: 1px solid rgb(27 54 97 / .1); }
.bl-steps li {
  counter-increment: bl-step;
  display: flex;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgb(27 54 97 / .1);
  font-size: 1.02rem;
  font-weight: 600;
  color: #141210;
}
.bl-steps li::before { content: counter(bl-step, decimal-leading-zero); min-width: 1.6rem; font-family: var(--bl-mono); font-weight: 400; color: #7a7368; }

/* Themen als feine Etiketten in Monospace */
.bl-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.bl-tags li {
  padding: .28rem .65rem;
  border: 1px solid rgb(27 54 97 / .16);
  border-radius: 6px;
  font-family: var(--bl-mono);
  font-size: .8rem;
  color: #3d3a35;
}

/* Ablauf mit Uhrzeiten */
.bl-time { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.bl-time li { display: flex; gap: 1rem; padding: .35rem 0; font-size: 1.02rem; color: #141210; }
.bl-time span { min-width: 3.4rem; font-family: var(--bl-mono); color: #1b3661; }

.bl-end { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid rgb(27 54 97 / .1); }
.bl-end p { font-weight: 600; color: #141210; }

/* Termin-Karte wie die Rubrik #webinar der Übersicht: Kalenderblatt, Fakten, Knopf */
.bl-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.4rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
}
.bl-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  width: 4.2rem;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .14);
  line-height: 1;
}
.bl-cal-mon { align-self: stretch; padding: .3rem 0 .26rem; background: #1b3661; color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.bl-cal-day { padding: .4rem 0 .16rem; font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; color: #141210; }
.bl-cal-time { padding-bottom: .45rem; font-family: var(--bl-mono); font-size: .66rem; color: #5c564c; }
.bl-card-title { margin: .1rem 0 .7rem; font-size: 1.05rem; font-weight: 650; line-height: 1.25; color: #141210; }
.bl-card-title span { display: block; margin-top: .2rem; font-family: var(--bl-mono); font-size: .8rem; font-weight: 400; color: #5c564c; }
.bl-facts { margin: 0; padding: 0; list-style: none; }
.bl-facts li { display: flex; align-items: baseline; gap: .5rem; padding: .18rem 0; font-size: .9rem; line-height: 1.4; color: #3d3a35; }
.bl-facts .bi { color: #1b3661; }
/* Knopf und Satz nach dem Termin über die volle Breite; schmal rechts (ab 1100 px) alles untereinander */
.bl-card > .bl-btn,
.bl-card > .bl-danach-text { grid-column: 1 / -1; }
@media (min-width: 1100px) { .bl-card { grid-template-columns: minmax(0, 1fr); } }
.bl-danach-text { margin: 0; font-size: .92rem; line-height: 1.5; color: #3d3a35; }

/* Knopf in Navy wie "Zum Forum" der Übersicht, Bewegung aus .hp-beat (homepage.css) */
.bl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  background: #1b3661;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.bl-btn:hover { color: #fff; }
.bl-btn:focus-visible { outline: 2px solid #1b3661; outline-offset: 3px; }

/* Vor und nach dem Webinar (Klasse bl-danach am html, gesetzt im head ab 04.11.2026 16:00 Uhr deutscher Zeit) */
html:not(.bl-danach) .bl-danach-text { display: none; }
html.bl-danach .bl-vorher { display: none !important; }

@media (max-width: 767.98px) {
  .bl-grid { padding-top: 6.4rem; }
  .bl-wrap { padding-inline: 1.1rem; }
  .bl-live { font-size: .76rem; gap: .4rem; }
  .bl-lead { font-size: 1.05rem; }
  .bl-body p { font-size: 1rem; }
}
@media (max-width: 399.98px) { .bl-live { gap: .28rem; padding-inline: .26rem .5rem; font-size: .72rem; } }

/* ---------- Darkmode ---------- */

html[data-bs-theme="dark"] .bl::before { background-image: radial-gradient(rgb(140 186 242 / .09) 1px, transparent 1.3px); }
html[data-bs-theme="dark"] .bl-live { background: #161b22; border-color: #30363d; color: #c9d1d9; }
html[data-bs-theme="dark"] .bl-live .bi,
html[data-bs-theme="dark"] .bl-facts .bi,
html[data-bs-theme="dark"] .bl-time span { color: #8cbaf2; }
html[data-bs-theme="dark"] .bl-head h1,
html[data-bs-theme="dark"] .bl-body h2,
html[data-bs-theme="dark"] .bl-steps li,
html[data-bs-theme="dark"] .bl-time li,
html[data-bs-theme="dark"] .bl-end p,
html[data-bs-theme="dark"] .bl-card-title,
html[data-bs-theme="dark"] .bl-cal-day { color: #e6edf3; }
html[data-bs-theme="dark"] .bl-lead,
html[data-bs-theme="dark"] .bl-body p,
html[data-bs-theme="dark"] .bl-facts li,
html[data-bs-theme="dark"] .bl-tags li,
html[data-bs-theme="dark"] .bl-danach-text { color: #9ca3af; }
html[data-bs-theme="dark"] .bl-end p { color: #e6edf3; }
html[data-bs-theme="dark"] .bl-meta,
html[data-bs-theme="dark"] .bl-steps li::before,
html[data-bs-theme="dark"] .bl-card-title span,
html[data-bs-theme="dark"] .bl-cal-time { color: #8b949e; }
html[data-bs-theme="dark"] .bl-steps,
html[data-bs-theme="dark"] .bl-steps li,
html[data-bs-theme="dark"] .bl-end { border-color: #30363d; }
html[data-bs-theme="dark"] .bl-tags li { border-color: #30363d; }
html[data-bs-theme="dark"] .bl-card { background: #161b22; border-color: #30363d; box-shadow: none; }
html[data-bs-theme="dark"] .bl-cal { background: #0d1117; border-color: #30363d; }
html[data-bs-theme="dark"] .bl-cal-mon { box-shadow: inset 0 -1px 0 rgb(140 186 242 / .35); }
/* Knopf bleibt Navy wie der Gesprächs-Knopf der Kopfzeile, mit hellem Rand gegen den dunklen Grund */
html[data-bs-theme="dark"] .bl-btn { box-shadow: inset 0 0 0 1px rgb(140 186 242 / .35); }
html[data-bs-theme="dark"] .bl-btn:focus-visible { outline-color: #8cbaf2; }