/*
 * Basis-Stile der Blöcke. Gilt für Frontend, Vorschau und Editor-Canvas (Puck übernimmt die
 * Stile der Host-Seite in seinen iframe).
 *
 * Alle Farben, Schriften und Abstände sind Custom Properties; ein Theme überschreibt sie
 * (z. B. public/themes/<name>/tokens.css). Die Werte hier sind ein neutrales helles Schema.
 */

:root {
    /* Farben */
    --blk-bg: #ffffff;
    --blk-text: #1f2933;
    --blk-heading: var(--blk-text);
    --blk-muted: #5f6b7a;
    --blk-surface: #f3f5f7;
    --blk-border: #e4e7eb;
    --blk-accent: #0f766e;
    --blk-accent-contrast: #ffffff;
    --blk-link: var(--blk-accent);
    --blk-info: #1d4ed8;
    --blk-tip: #067647;
    --blk-warning: #b54708;
    --blk-danger: #b42318;
    --blk-section-dark-bg: #1f2933;
    --blk-section-dark-text: #f5f7fa;

    /* Code und Syntax-Highlighting */
    --blk-code-bg: #f6f8fa;
    --blk-code-text: #24292e;
    --hl-comment: #6a737d;
    --hl-keyword: #d73a49;
    --hl-string: #032f62;
    --hl-number: #005cc5;
    --hl-title: #6f42c1;
    --hl-builtin: #22863a;
    --hl-meta: #735c0f;
    --hl-deletion: #b31d28;

    /* Typografie und Maße */
    --blk-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --blk-font-display: var(--blk-font);
    --blk-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --blk-measure: 70ch;
    --blk-wide: 1100px;
    --blk-gutter: 1.25rem; /* Seitenrand auf schmalen Bildschirmen */
    --blk-space: 1.25rem;
    --blk-radius: 8px;
}

.preview { margin: 0; background: var(--blk-bg); }
.page { max-width: var(--blk-measure); margin: 0 auto; padding: 2rem 1rem 4rem; color: var(--blk-text); font: 17px/1.65 var(--blk-font); }
.page h1, .blk-heading, .blk-hero__title { font-family: var(--blk-font-display); color: var(--blk-heading); }
.page h1 { font-size: 2.2rem; line-height: 1.2; margin: 0 0 var(--blk-space); }

.blk-heading { line-height: 1.25; margin: 2rem 0 .75rem; scroll-margin-top: 5rem; }
h2.blk-heading { font-size: 1.6rem; }
h3.blk-heading { font-size: 1.3rem; }
h4.blk-heading, h5.blk-heading, h6.blk-heading { font-size: 1.1rem; }

.blk-richtext { margin: 0 0 var(--blk-space); }
.blk-richtext > :first-child { margin-top: 0; }
.blk-richtext > :last-child { margin-bottom: 0; }
.blk-richtext a { color: var(--blk-link); }
.blk-richtext h2, .blk-richtext h3, .blk-richtext h4 { font-family: var(--blk-font-display); color: var(--blk-heading); line-height: 1.25; }
.blk-richtext blockquote { margin: var(--blk-space) 0; padding-left: 1rem; border-left: 3px solid var(--blk-accent); color: var(--blk-muted); }
.blk-richtext pre { overflow-x: auto; padding: 1rem; background: var(--blk-code-bg); color: var(--blk-code-text); border-radius: 6px; }
.blk-richtext code { font-family: var(--blk-mono); font-size: .9em; }

.blk-image { margin: var(--blk-space) 0; }
.blk-image img { display: block; max-width: 100%; height: auto; border-radius: var(--blk-radius); }
.blk-image--wide { margin-inline: calc(50% - min(50vw - var(--blk-gutter), var(--blk-wide) / 2)); }
.blk-image--full { margin-inline: calc(50% - 50vw); }
.blk-image--full img { border-radius: 0; width: 100%; }
.blk-image picture { display: contents; }
.blk-image figcaption { margin-top: .4rem; font-size: .9rem; color: var(--blk-muted); }

/* Ein Hero trägt die H1 selbst; dann entfällt die H1 des Layouts (Editor-Canvas) */
.page:has(.blk-hero) > .page__title { display: none; }

/* Buttons */
.btn { display: inline-block; padding: .7rem 1.3rem; border-radius: 6px; font-weight: 600; text-decoration: none; border: 2px solid var(--blk-accent); }
.btn--primary { background: var(--blk-accent); color: var(--blk-accent-contrast); }
.btn--secondary { background: transparent; color: var(--blk-accent); }
.blk-button { margin: var(--blk-space) 0; }

/* Hero */
.blk-hero { display: grid; gap: 2rem; align-items: center; margin: 0 0 2.5rem; }
.blk-hero--image { grid-template-columns: 1.2fr 1fr; }
.blk-hero__kicker { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; font-weight: 600; color: var(--blk-accent); }
.blk-hero__title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.blk-hero__lead { font-size: 1.2rem; color: var(--blk-muted); margin: 0 0 1.5rem; }
.blk-hero picture { display: block; }
.blk-hero__image { width: 100%; height: auto; border-radius: var(--blk-radius); display: block; }
@media (max-width: 760px) { .blk-hero--image { grid-template-columns: 1fr; } }

/* Abschnitt und Spalten */
.blk-section { margin: 2rem 0; }
.blk-section--wide { margin-inline: calc(50% - min(50vw - var(--blk-gutter), var(--blk-wide) / 2)); }
.blk-section--full { margin-inline: calc(50% - 50vw); padding-inline: var(--blk-gutter); }
.blk-section__inner { max-width: var(--blk-measure); margin: 0 auto; }
.blk-section--wide .blk-section__inner { max-width: var(--blk-wide); }
.blk-section__inner > :first-child { margin-top: 0; }
.blk-section__inner > :last-child { margin-bottom: 0; }
.blk-section--bg-light, .blk-section--bg-dark, .blk-section--bg-accent { padding: 2.5rem 1rem; border-radius: var(--blk-radius); }
.blk-section--full.blk-section--bg-light, .blk-section--full.blk-section--bg-dark, .blk-section--full.blk-section--bg-accent { border-radius: 0; }
.blk-section--bg-light { background: var(--blk-surface); }
.blk-section--bg-dark { background: var(--blk-section-dark-bg); color: var(--blk-section-dark-text); }
.blk-section--bg-accent { background: var(--blk-accent); color: var(--blk-accent-contrast); }
.blk-section--bg-dark a, .blk-section--bg-accent a, .blk-section--bg-accent .blk-heading { color: inherit; }

.blk-columns { display: grid; gap: 1.5rem 2rem; margin: var(--blk-space) 0; }
.blk-columns--2 { grid-template-columns: 1fr 1fr; }
.blk-columns--3 { grid-template-columns: repeat(3, 1fr); }
.blk-columns--4 { grid-template-columns: repeat(4, 1fr); }
.blk-columns--wide-left { grid-template-columns: 2fr 1fr; }
.blk-columns--wide-right { grid-template-columns: 1fr 2fr; }
.blk-columns__col > :first-child { margin-top: 0; }
@media (max-width: 760px) { .blk-columns { grid-template-columns: 1fr !important; } }

/* Hinweisbox, Kurzfassung, Zitat */
.blk-callout { --c: var(--blk-info); margin: var(--blk-space) 0; padding: 1rem 1.25rem; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); border-radius: 0 var(--blk-radius) var(--blk-radius) 0; }
.blk-callout--tip { --c: var(--blk-tip); }
.blk-callout--warning { --c: var(--blk-warning); }
.blk-callout--danger { --c: var(--blk-danger); }
.blk-callout__title { margin: 0 0 .4rem; color: var(--c); }
.blk-callout__body > :first-child { margin-top: 0; }
.blk-callout__body > :last-child { margin-bottom: 0; }

.blk-summary { margin: var(--blk-space) 0; padding: 1rem 1.25rem; background: var(--blk-surface); border: 1px solid var(--blk-border); border-radius: var(--blk-radius); }
.blk-summary__title { margin: 0 0 .4rem; }
.blk-summary ul { margin: 0; padding-left: 1.2rem; }

.blk-quote { margin: 2rem 0; }
.blk-quote blockquote { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--blk-accent); font-size: 1.15rem; font-style: italic; }
.blk-quote blockquote p { margin: 0; }
.blk-quote figcaption { margin-top: .5rem; color: var(--blk-muted); }

/* FAQ */
.blk-faq { margin: var(--blk-space) 0; border-top: 1px solid var(--blk-border); }
.blk-faq__item { border-bottom: 1px solid var(--blk-border); }
.blk-faq__item summary { cursor: pointer; padding: .9rem 0; font-weight: 600; color: var(--blk-heading); }
.blk-faq__answer { padding: 0 0 .5rem; }
.blk-faq__answer p { margin: 0 0 .75rem; }

/* Tabelle */
.blk-table { margin: var(--blk-space) 0; overflow-x: auto; }
.blk-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.blk-table caption { text-align: left; font-weight: 600; margin-bottom: .5rem; }
.blk-table th, .blk-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--blk-border); text-align: left; vertical-align: top; }
.blk-table thead th { border-bottom-width: 2px; color: var(--blk-heading); }

/* Code (serverseitig hervorgehoben) */
.blk-code { margin: var(--blk-space) 0; }
.blk-code__filename { font: .85rem var(--blk-mono); color: var(--blk-muted); margin-bottom: .3rem; }
.blk-code pre { margin: 0; padding: 1rem; overflow-x: auto; background: var(--blk-code-bg); color: var(--blk-code-text); border: 1px solid var(--blk-border); border-radius: 6px; font: .875rem/1.55 var(--blk-mono); }
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-type, .hljs-meta .hljs-keyword { color: var(--hl-keyword); }
.hljs-string, .hljs-addition, .hljs-regexp { color: var(--hl-string); }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-attr { color: var(--hl-number); }
.hljs-title, .hljs-section, .hljs-function .hljs-title { color: var(--hl-title); }
.hljs-built_in, .hljs-name, .hljs-tag { color: var(--hl-builtin); }
.hljs-deletion { color: var(--hl-deletion); }
.hljs-meta { color: var(--hl-meta); }

/* Beitragsliste */
.blk-postlist { list-style: none; margin: var(--blk-space) 0; padding: 0; }
.blk-postlist__item { padding: .75rem 0; border-bottom: 1px solid var(--blk-border); }
.blk-postlist__title { font-weight: 600; color: var(--blk-heading); }
.blk-postlist time { display: block; font-size: .85rem; color: var(--blk-muted); }
.blk-postlist__item p { margin: .3rem 0 0; }
.blk-postlist--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.blk-postlist--cards .blk-postlist__item { border: 1px solid var(--blk-border); border-radius: var(--blk-radius); padding: 1rem; }

/* Platzhalter im Editor */
.blk-placeholder { padding: 1.5rem; border: 2px dashed var(--blk-border); border-radius: 6px; color: var(--blk-muted); text-align: center; font-size: .9rem; }

/* Admin-Vorschau */
.preview__markdown { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--blk-border); font-size: .9rem; }
.preview__markdown pre { white-space: pre-wrap; background: var(--blk-surface); padding: 1rem; border-radius: 6px; }

/* Kontaktformular */
.blk-contact { margin: var(--blk-space) 0; }
.blk-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 620px) { .blk-contact__row { grid-template-columns: 1fr; } }
.blk-contact__field { margin: 0 0 1rem; }
.blk-contact__field label { display: block; margin-bottom: .35rem; font-weight: 600; color: var(--blk-heading); }
.blk-contact__field input, .blk-contact__field textarea { box-sizing: border-box; width: 100%; padding: .7rem .85rem; font: inherit; color: var(--blk-text); background: var(--blk-surface); border: 1px solid var(--blk-border); border-radius: var(--blk-radius); }
.blk-contact__field input:focus, .blk-contact__field textarea:focus { outline: 2px solid var(--blk-accent); outline-offset: 1px; border-color: var(--blk-accent); }
.blk-contact__field textarea { resize: vertical; min-height: 9rem; }
.blk-contact__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.blk-contact__privacy { font-size: .9rem; color: var(--blk-muted); }
.blk-contact__notice { padding: .9rem 1rem; border-radius: var(--blk-radius); border: 1px solid var(--blk-border); background: var(--blk-surface); }
.blk-contact__notice--ok { border-color: var(--blk-accent); }
.blk-contact__notice--error { border-color: #d64545; }