/*
 * gridline – Akzente der Blöcke. Wird auf der Website und im Editor-Canvas geladen
 * (theme.json: editorStyles); enthält deshalb keine globalen Regeln für body/html.
 */

/* Überschriften: schmal, Großbuchstaben, wie Startnummern und Werbetafeln */
.blk-heading { font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
h2.blk-heading { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 3.25rem; }
/* Schräger grüner Streifen vor H2 */
h2.blk-heading::before { content: ""; display: inline-block; width: .5em; height: .72em; margin-right: .4em; background: var(--gl-signal); transform: skewX(calc(-1 * var(--gl-slant))); vertical-align: -.02em; }
h3.blk-heading { font-size: 1.45rem; letter-spacing: .02em; }

/* Hero auf Containerbreite (bündig mit Logo und Menü) */
.blk-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(2.5rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem);
    margin-inline: calc(50% - min(50vw - var(--blk-gutter), var(--gl-container) / 2));
    margin-bottom: 2.5rem;
}
.blk-hero__kicker { font: 600 .78rem/1.4 var(--gl-mono); letter-spacing: .12em; color: var(--gl-signal); margin-bottom: 1.25rem; }
.blk-hero__kicker::before { content: ""; display: inline-block; width: 1.6em; height: .55em; margin-right: .7em; background: repeating-linear-gradient(90deg, var(--gl-signal) 0 .3em, transparent .3em .5em); transform: skewX(calc(-1 * var(--gl-slant))); }
h1.blk-hero__title { font: 800 clamp(3rem, 9vw, 6.5rem)/.92 var(--gl-display); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 1.5rem; max-width: 14ch; }
.blk-hero__lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; max-width: 48ch; color: var(--gl-text); }
.blk-hero__image { border: 1px solid var(--gl-border); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); border-radius: 0; }

/* Buttons: schräg angeschnitten */
.btn { border-radius: 0; padding: .85rem 1.6rem; font: 700 1.05rem/1 var(--gl-display); text-transform: uppercase; letter-spacing: .06em; clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%); transition: background-color .2s, color .2s, transform .2s; }
.btn--primary:hover { background: var(--gl-signal-strong); border-color: var(--gl-signal-strong); color: var(--gl-signal-ink); transform: translateY(-1px); }
.btn--secondary { clip-path: none; border-radius: var(--gl-radius); }
.btn--secondary:hover { background: var(--gl-signal-glow); color: var(--gl-signal-strong); }

/* Spalten mit Zwischenüberschrift als Karten */
.blk-columns__col:has(> h3.blk-heading:first-child) { padding: 1.5rem 1.5rem 1.25rem; background: var(--gl-bg-raised); border: 1px solid var(--gl-border); border-top: 3px solid var(--gl-signal); }
.blk-columns__col > .blk-heading:first-child { margin-top: 0; }
.blk-columns__col > h2.blk-heading:first-child { margin-top: .25rem; }
.blk-columns__col p:last-child { margin-bottom: 0; }

/* Flächen */
.blk-section--bg-light { background: linear-gradient(180deg, var(--gl-surface), var(--gl-bg-raised)); border: 1px solid var(--gl-border); }
.blk-section--bg-accent { background: repeating-linear-gradient(calc(90deg + var(--gl-slant)), transparent 0 28px, rgb(0 0 0 / 6%) 28px 30px), var(--gl-signal); }
.blk-section--bg-accent h2.blk-heading::before { background: var(--gl-signal-ink); }
.blk-section--bg-accent .btn--primary { background: var(--gl-signal-ink); border-color: var(--gl-signal-ink); color: var(--gl-signal); }
.blk-callout { border-radius: 0; }
.blk-image img { border-radius: 0; border: 1px solid var(--gl-border); }
.blk-image figcaption { font: 500 .78rem/1.5 var(--gl-mono); }
.blk-quote { border-left-color: var(--gl-signal); }

/* Zahlen in Tabellen und Zusammenfassungen: Monospace, wie ein Timing-Screen */
.blk-table td { font-variant-numeric: tabular-nums; }
.blk-summary { border-left: 3px solid var(--gl-signal); }

/* FAQ */
.blk-faq__item summary { list-style: none; position: relative; padding-right: 2rem; }
.blk-faq__item summary::-webkit-details-marker { display: none; }
.blk-faq__item summary::after { content: "+"; position: absolute; right: .25rem; font: 400 1.3rem/1 var(--gl-mono); color: var(--gl-signal); top: 1rem; }
.blk-faq__item[open] summary::after { content: "–"; }

/* Beitragskarten */
.blk-postlist--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 960px) { .blk-postlist--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blk-postlist--cards { grid-template-columns: 1fr; } }
.blk-postlist__title { font: 700 1.3rem/1.15 var(--gl-display); text-transform: uppercase; text-decoration: none; }

/* Seitentitel wie auf der Website */
h1.page__title { font: 800 clamp(2.6rem, 6vw, 4.2rem)/.95 var(--gl-display); text-transform: uppercase; margin: 0 0 1.25rem; }

/* Lange Wörter (z. B. „Datenschutzerklärung“) in großen Überschriften trennen statt überlaufen */
h1.page__title, h1.blk-hero__title, .blk-heading { hyphens: auto; overflow-wrap: break-word; }