/* Gense Automation · Blog
   Baut auf site.css auf (Farben, Schriften, Zollstock-Maß, Abschnittsflächen).
   Aufbau wie die Startseite: Kopfband in Signalrot oder Tinte, danach Abschnitte im Wechsel
   Weiß und Fläche, die Fragen auf Tinte, die Anfrage auf Signalrot. */

.blog main { padding: 0; }
.blog .abschnitt > * { max-width: 920px; }
.blog .abschnitt { padding-block: clamp(32px, 4.5vw, 64px) clamp(44px, 6vw, 88px); }
.blog .abschnitt-mass { margin-bottom: clamp(28px, 4vw, 52px); }
.blog .abschnitt-mass b.ohne-einheit::after { content: none; }
.beitrag-text .innen > *, .blog-uebersicht .innen > * { margin-inline: 0; }

/* Kopfband: ganze Fläche in Signalrot (Praxis) oder Tinte (Buchhaltung) */
.blog .beitrag-band { padding-bottom: clamp(96px, 12vw, 168px); }
.blog .beitrag-band.ohne-aufmacher { padding-bottom: clamp(44px, 6vw, 88px); }
.beitrag-kopf { margin-block: 0; }
.beitrag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.2em; font: 500 .8rem/1.4 var(--f-mono); letter-spacing: .02em; margin: 0 0 1.4em; }
.beitrag-meta b { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .45em .75em; }
.beitrag-band h1 { font-size: clamp(2.4rem, 1.4rem + 3.5vw, 4.3rem); line-height: 1.04; margin: 0 0 .5em; text-wrap: balance; }
.beitrag-lead { font: 500 clamp(1.2rem, 1.05rem + .6vw, 1.5rem) / 1.45 var(--f-kopf); max-width: 34em; margin: 0; }

.beitrag-band.rot h1 { color: var(--weiss); }
.beitrag-band.rot .beitrag-meta { color: var(--auf-rot-neben); }
.beitrag-band.rot .beitrag-meta b { background: var(--tinte); color: var(--weiss); }
.beitrag-band.rot .beitrag-lead { color: var(--auf-rot); }
.beitrag-band.dunkel h1 { color: var(--weiss); }
.beitrag-band.dunkel .beitrag-meta { color: var(--hell-grau); }
.beitrag-band.dunkel .beitrag-meta b { background: var(--rot); color: var(--weiss); }
.beitrag-band.dunkel .beitrag-lead { color: var(--hell); }

/* Grafik oben: schiebt sich über die Unterkante des Bands */
.beitrag-aufmacher { position: relative; z-index: 3; padding-inline: var(--rand); margin-top: calc(-1 * clamp(60px, 8vw, 112px)); }
.beitrag-aufmacher > figure { max-width: 920px; margin: 0 auto; }
.beitrag-aufmacher .beitrag-grafik { margin-bottom: clamp(8px, 2vw, 24px); }
.beitrag-grafik { margin: 0 auto clamp(36px, 5vw, 64px); }
.beitrag-grafik figcaption { margin-top: .8em; font: 400 .8rem/1.4 var(--f-mono); color: var(--grau); }
.bg {
  position: relative; overflow: hidden; container-type: inline-size; color: var(--tinte);
  border: var(--leiste) solid var(--tinte); background-color: var(--weiss);
  background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 5% 8%; background-position: -1px -1px;
  font: 400 clamp(11px, 2.1cqw, 17px) / 1.3 var(--f-text);
}
.bg svg { display: block; width: 100%; height: auto; }
.bg text { font-family: var(--f-text); }
.bg .mono { font-family: var(--f-mono); }

/* Fotos im Text (Symbolbilder) */
.beitrag-bild { margin: 1.8em 0 2.2em; }
.beitrag-bild img { display: block; width: 100%; height: auto; border: var(--leiste) solid var(--tinte); background: var(--flaeche); aspect-ratio: 3 / 2; object-fit: cover; }
.beitrag-bild figcaption { margin-top: .8em; font: 400 .8rem/1.4 var(--f-mono); color: var(--grau); }
.beitrag-fragen .beitrag-bild figcaption { color: var(--hell-grau); }

/* Text in den Abschnitten */
.beitrag-teil { font-size: var(--text-groesse); line-height: 1.65; scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.beitrag-teil .innen > * { max-width: 40em; }
.beitrag-teil .innen > .beitrag-grafik, .beitrag-teil .innen > .beitrag-bild, .beitrag-teil .innen > .tabelle-wrap { max-width: 100%; }
.beitrag-teil .innen > :last-child { margin-bottom: 0; }
.beitrag-teil p { margin: 0 0 1.15em; color: var(--tinte-weich); }
.beitrag-teil h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; }
.beitrag-teil h2::before { content: ""; display: block; width: 44px; height: 6px; background: var(--rot); margin-bottom: .55em; }
.beitrag-teil h3 { font: 600 var(--h3-groesse)/1.25 var(--f-kopf); margin: 1.6em 0 .4em; }
.beitrag-teil a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; font-weight: 600; }
.beitrag-teil:not(.dunkel) a:hover { color: var(--rot-dunkel, var(--rot)); }
.beitrag-teil code { font: 500 .88em var(--f-mono); background: var(--flaeche); padding: .1em .35em; }
.beitrag-teil strong { color: var(--tinte); }

/* Listen: eckige rote Punkte, nummerierte Schritte als Zeilen mit Zahl */
.beitrag-teil ul { list-style: none; padding: 0; margin: 0 0 1.3em; }
.beitrag-teil ul li { position: relative; margin: .5em 0; padding-left: 1.5em; color: var(--tinte-weich); }
.beitrag-teil ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: .55em; height: .55em; background: var(--rot); }
.beitrag-teil ol { list-style: none; padding: 0; margin: 0 0 1.4em; counter-reset: schritt; border-top: var(--leiste) solid var(--tinte); }
.beitrag-teil ol li { counter-increment: schritt; display: grid; grid-template-columns: 3.4em 1fr; margin: 0; padding: .85em 0 .9em; border-bottom: 1px solid var(--linie); color: var(--tinte-weich); }
.beitrag-teil ol li::before { content: counter(schritt, decimal-leading-zero); font: 600 .9rem/1.9 var(--f-mono); color: var(--rot-dunkel, var(--rot)); }

/* Kurz-gesagt-Kasten: ganze Fläche in Signalrot */
.beitrag-teil blockquote { max-width: 40em; margin: 2em 0; padding: 1.4em 1.6em 1.5em; background: var(--rot); color: var(--auf-rot); border: 0; }
.beitrag-teil blockquote::before { content: "Kurz gesagt"; display: block; font: 600 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--auf-rot-neben); margin-bottom: .8em; }
.beitrag-teil blockquote p { margin: 0 0 .6em; color: var(--auf-rot); }
.beitrag-teil blockquote p:last-child { margin-bottom: 0; }
.beitrag-teil blockquote strong { color: var(--weiss); }

/* Tabellen: Kopfzeile in Tinte */
.tabelle-wrap { max-width: 100% !important; overflow-x: auto; margin: 1.6em 0; background: var(--weiss); border: var(--leiste) solid var(--tinte); }
.beitrag-teil table { border-collapse: collapse; width: 100%; font-size: .94em; line-height: 1.45; min-width: 520px; }
.beitrag-teil th { text-align: left; font: 600 .74rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hell); background: var(--tinte); padding: .85em 1em; }
.beitrag-teil td { padding: .8em 1em; border-bottom: 1px solid var(--linie); vertical-align: top; color: var(--tinte-weich); transition: background-color .25s; }
.beitrag-teil tbody tr:last-child td { border-bottom: 0; }
.beitrag-teil tbody tr:hover td { background: var(--rot-hell); }
.beitrag-teil td:first-child { font-weight: 600; color: var(--tinte); white-space: nowrap; }

/* Häufige Fragen auf Tinte */
.beitrag-fragen p { color: var(--hell-grau); }
.beitrag-fragen h2 { color: var(--weiss); }
.beitrag-fragen h2::before { background: var(--rot-auf-tinte); }
.beitrag-fragen h3 { color: var(--weiss); margin: 0; padding: 1.3em 0 .45em; border-top: 1px solid var(--hell-linie); }
.beitrag-fragen h2 + h3 { margin-top: 1.3em; }
.beitrag-fragen h3::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .6em; background: var(--rot-auf-tinte); vertical-align: .12em; }
.beitrag-fragen a { color: var(--weiss); }
.beitrag-fragen code { background: var(--tinte-weich); color: var(--hell); }

/* Abschluss: Anfrage auf Signalrot, darunter Autor */
.beitrag-fuss { margin: 0; }
.beitrag-anfrage h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); margin: 0 0 .45em; color: var(--weiss); }
.beitrag-anfrage p { margin: 0 0 1.5em; color: var(--auf-rot); max-width: 34em; font-size: var(--text-groesse); }
.beitrag-schluss { padding-block: clamp(32px, 4vw, 56px); }
.beitrag-autor { display: flex; gap: 18px; align-items: center; }
.beitrag-autor img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; flex: none; }
.beitrag-autor p { margin: 0; color: var(--grau); font-size: .95rem; line-height: 1.5; }
.beitrag-autor b { color: var(--tinte); display: block; }
.beitrag-zurueck { margin: 28px 0 0; }

/* Übersicht */
.blog-uebersicht { padding-top: clamp(36px, 5vw, 72px); }
.blog-liste { list-style: none; margin: 0; padding: 0; border-top: var(--leiste) solid var(--tinte); }
.blog-eintrag { border-bottom: 1px solid var(--linie); }
.blog-eintrag a { display: grid; grid-template-columns: 9.5em 1fr; gap: 6px 32px; padding: 28px 20px 30px; transition: background-color .3s; }
.rubrik-praxis, .rubrik-angebote, .rubrik-baustelle, .rubrik-kundenservice { --akzent: var(--rot); }
.rubrik-buchhaltung, .rubrik-termine, .rubrik-buero, .rubrik-kundenpflege { --akzent: var(--tinte); }
.blog-eintrag .beitrag-meta { display: block; margin: .4em 0 0; color: var(--grau); }
.blog-eintrag .beitrag-meta b { display: block; width: fit-content; margin-bottom: .6em; padding: .35em .6em; background: var(--akzent, var(--rot)); color: var(--weiss); }
.blog-eintrag .beitrag-meta span { display: block; }
.blog-eintrag h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.15; margin: 0 0 .4em; text-wrap: balance; transition: color .25s; }
.blog-eintrag p { margin: 0; color: var(--tinte-weich); max-width: 38em; }
.blog-eintrag .weiter { display: inline-flex; align-items: center; gap: .45em; margin-top: .9em; font-weight: 600; }
.blog-eintrag .weiter .ico { width: 1.1em; height: 1.1em; transition: transform .25s var(--gleiten); }
.blog-eintrag a, .blog-eintrag a:hover { text-decoration: none; }
.blog-eintrag a:hover { background: var(--rot-hell); }
.blog-eintrag a:hover h2 { color: var(--rot-dunkel, var(--rot)); }
.blog-eintrag a:hover .weiter .ico { transform: translateX(6px); }
/* der neueste Beitrag als Tintenfläche mit roter Marke */
.blog-eintrag.neuester { margin-bottom: 18px; border-bottom: 0; }
.blog-eintrag.neuester a { background: var(--tinte); color: var(--hell); padding: 34px 24px 36px; }
.blog-eintrag.neuester .beitrag-meta { color: var(--hell-grau); }
.blog-eintrag.neuester .beitrag-meta b { background: var(--hell); color: var(--tinte); }
.blog-eintrag.neuester h2 { color: var(--weiss); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
.blog-eintrag.neuester p { color: var(--hell-grau); }
.blog-eintrag.neuester .weiter { color: var(--weiss); }
.blog-eintrag.neuester a:hover { background: var(--tinte-weich); }
.blog-eintrag.neuester a:hover h2 { color: var(--weiss); }
.neu-marke { display: inline-block; margin-bottom: 1em; padding: .45em .7em; background: var(--rot); color: var(--weiss); font: 600 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.blog-leer { color: var(--grau); }
@media (max-width: 640px) {
  .blog-eintrag a { grid-template-columns: 1fr; padding-inline: 18px 14px; }
  .blog-eintrag .beitrag-meta { display: flex; flex-wrap: wrap; gap: .4em 1em; }
  .blog-eintrag .beitrag-meta b { margin-bottom: 0; }
}

/* Vorschau-Hinweis bei Entwürfen */
.blog-entwurf { position: sticky; top: calc(var(--kopf-hoehe) + 16px); z-index: 40; margin: 0; padding: 10px var(--rand); background: var(--rot); color: var(--weiss); font: 600 .85rem/1.3 var(--f-mono); text-align: center; }

/* Lesefortschritt: roter Balken am oberen Rand (blog.js legt ihn an) */
.lesebalken { position: fixed; left: 0; top: 0; width: 100%; height: 4px; background: var(--rot); transform: scaleX(0); transform-origin: left center; z-index: 80; pointer-events: none; }

/* Bewegung: nur mit Skript und ohne „Bewegung reduzieren“, sonst steht alles gleich fertig da */
.blog-js .beitrag-band .innen > * { animation: band-ein .9s var(--gleiten) backwards; }
.blog-js .beitrag-band .innen > :nth-child(2) { animation-delay: .1s; }
.blog-js .beitrag-band .innen > :nth-child(3) { animation-delay: .22s; }
@keyframes band-ein { from { opacity: 0; transform: translateY(22px); } }
.blog-js .beitrag-teil .innen > *:not(.beitrag-grafik) { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .85s var(--gleiten); }
.blog-js .beitrag-teil .innen > *.da { opacity: 1; transform: none; }
.blog-js .beitrag-teil h2::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--gleiten) .15s; }
.blog-js .beitrag-teil h2.da::before { transform: scaleX(1); }

/* Bewegte Grafiken: ohne Bewegung gleich im Endzustand */
@media (prefers-reduced-motion: reduce) {
  .bg *, .bg *::before, .bg *::after { animation: none !important; transition: none !important; }
  .lesebalken { display: none; }
}

/* Start der Bewegung erst im Bild (blog.js) */
.bg-js .bg:not(.laeuft) * { animation-play-state: paused !important; }

/* Schmale Bildschirme: Grafik behält Lesegröße und lässt sich seitlich wischen */
@media (max-width: 760px) {
  .bg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bg svg { min-width: 760px; }
}