/*
 * maxanoo – 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.
 */

/* Zwischenüberschriften mit "//" – wie ein Code-Kommentar */
h2.blk-heading { font-size: clamp(1.55rem, 3vw, 2rem); letter-spacing: -.02em; margin-top: 3rem; }
h2.blk-heading::before { content: "//"; font: 500 .62em var(--mx-mono); color: var(--mx-signal); margin-right: .55em; vertical-align: .18em; letter-spacing: 0; }
h3.blk-heading { letter-spacing: -.01em; }

/* Hero: Mint-Schimmer (das Raster kommt vom Seitenhintergrund, siehe theme.css „Hintergründe“) */
/* Hero auf Containerbreite (bündig mit Logo und Menü), nicht nur Lesebreite */
.blk-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
    margin-inline: calc(50% - min(50vw - var(--blk-gutter), var(--mx-container) / 2));
    margin-bottom: 3rem;
}
.blk-hero::before {
    content: "";
    position: absolute;
    inset: -2rem calc(50% - 50vw) 0;
    z-index: -1;
    background: radial-gradient(60rem 26rem at 18% 0%, var(--backdrop-glow, var(--mx-signal-glow)), transparent 70%);
    opacity: .75;
}
.blk-hero__kicker { font: 500 .8rem/1.4 var(--mx-mono); letter-spacing: .08em; color: var(--mx-signal); margin-bottom: 1.25rem; }
.blk-hero__kicker::before { content: "▍"; margin-right: .5em; }
h1.blk-hero__title { font: 700 clamp(2.6rem, 7vw, 5rem)/1 var(--mx-display); letter-spacing: -.045em; margin: 0 0 1.5rem; max-width: 16ch; }
.blk-hero__lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; max-width: 46ch; }

/* Buttons */
.btn { border-radius: 10px; padding: .8rem 1.4rem; transition: box-shadow .2s, transform .2s, background-color .2s; }
.btn--primary:hover { background: var(--mx-signal-strong); border-color: var(--mx-signal-strong); color: var(--mx-signal-ink); box-shadow: 0 0 0 4px var(--mx-signal-glow), 0 10px 30px -10px var(--mx-signal); transform: translateY(-1px); }
.btn--secondary:hover { background: var(--mx-signal-glow); color: var(--mx-signal-strong); }

/* Karten und Flächen */
.blk-section--bg-light { background: linear-gradient(180deg, var(--mx-surface), var(--mx-bg-raised)); border: 1px solid var(--mx-border); }
.blk-section--bg-accent { background: radial-gradient(circle at 20% 0%, var(--mx-signal-strong), var(--mx-signal) 60%); }
.blk-callout { border-radius: 0 var(--mx-radius) var(--mx-radius) 0; }
/* Beitragskarten: drei nebeneinander, auf Tablets zwei, auf Handys eine */
.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--cards .blk-postlist__item { position: relative; display: flex; flex-direction: column; gap: .4rem; background: var(--mx-bg-raised); transition: border-color .2s, transform .2s; }
.blk-postlist__title { font: 650 1.15rem/1.3 var(--mx-display); letter-spacing: -.01em; text-decoration: none; }
.blk-postlist__title:hover { color: var(--mx-signal); }
.blk-postlist--cards .blk-postlist__title::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.blk-postlist--cards time { order: -1; }
.blk-postlist__item p { color: var(--mx-muted); font-size: .95rem; }
.blk-postlist--cards .blk-postlist__item:hover { border-color: var(--mx-signal); transform: translateY(-2px); }
.blk-postlist time { font-family: var(--mx-mono); font-size: .78rem; }
.blk-code pre { border-radius: var(--mx-radius); }
.blk-code__filename { color: var(--mx-signal); }
.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(--mx-mono); color: var(--mx-signal); top: 1rem; }
.blk-faq__item[open] summary::after { content: "–"; }

/* Seitentitel wie auf der Website */
.page__title { font: 700 clamp(2.2rem, 5.2vw, 3.6rem)/1.05 var(--mx-display); letter-spacing: -.035em; margin: 0 0 1.25rem; }