/* MakeCloudEasy – Komponenten, die theme.json nicht abdeckt. */

:root {
	--mce-azure: var(--wp--preset--color--azure, #0F6CBD);
	--mce-copilot: var(--wp--preset--color--copilot, #5B3FD9);
	--mce-agents: var(--wp--preset--color--agents, #B45309);
	--mce-teal: var(--wp--preset--color--teal, #0B7A75);
	--mce-navy: var(--wp--preset--color--navy, #0B1B33);
	--mce-line: var(--wp--preset--color--line, #E3E5E8);
	--mce-surface: var(--wp--preset--color--surface, #F3F6FA);
	--mce-subtle: var(--wp--preset--color--ink-subtle, #5B6472);
	--mce-track: var(--mce-azure);
	--mce-track-soft: var(--wp--preset--color--azure-soft, #E6F1FB);
}
.mce-track-ai { --mce-track: var(--mce-copilot); --mce-track-soft: var(--wp--preset--color--copilot-soft, #EFEBFF); }
.mce-track-agents { --mce-track: var(--mce-agents); --mce-track-soft: var(--wp--preset--color--agents-soft, #FFF3E5); }
.mce-track-security { --mce-track: var(--mce-teal); --mce-track-soft: var(--wp--preset--color--teal-soft, #E2F5F3); }

html { scroll-padding-top: 24px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, summary):focus-visible { outline: 2px solid var(--mce-azure); outline-offset: 3px; border-radius: 4px; }

/* ---------- Header ---------- */
.mce-strip { display: flex; height: 4px; }
.mce-strip span { display: block; }
.mce-strip span:nth-child(1) { flex: 2; background: var(--mce-azure); }
.mce-strip span:nth-child(2) { flex: 1; background: var(--mce-copilot); }
.mce-strip span:nth-child(3) { flex: 1; background: var(--mce-teal); }

.mce-topbar { font-size: 13px; }
.mce-topbar a { color: #E8EAED; }
.mce-topbar p { margin: 0; }

.mce-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--wp--preset--color--ink) !important; text-decoration: none !important; line-height: 1; }
.mce-logo svg { flex: 0 0 auto; }
.mce-logo em { font-style: normal; color: var(--mce-azure); }

.mce-header .wp-block-navigation-item__content { padding: 10px 12px; border-radius: 8px; }
.mce-header .wp-block-navigation-item__content:hover { background: var(--mce-surface); text-decoration: none; }
.mce-header .current-menu-item > .wp-block-navigation-item__content { color: var(--mce-azure); }
.mce-header .wp-block-search__button { width: 44px; height: 44px; border-radius: 99px; background: var(--mce-surface); color: var(--wp--preset--color--ink); padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; }
.mce-header .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; }
.mce-header .wp-block-search__input { border-radius: 99px; border: 1px solid var(--mce-line); padding: 8px 16px; font-size: 15px; }

/* ---------- Chips / Kategorien ---------- */
.mce-chip, .mce-term {
	display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border-radius: 99px;
	font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none !important;
	background: var(--wp--preset--color--azure-soft); color: var(--mce-azure) !important;
}
.mce-chip--ai, .mce-term--ai { background: var(--wp--preset--color--copilot-soft); color: var(--mce-copilot) !important; }
.mce-chip--agents, .mce-term--agents { background: var(--wp--preset--color--agents-soft, #FFF3E5); color: var(--mce-agents) !important; }
.mce-chip--security, .mce-term--security { background: var(--wp--preset--color--teal-soft); color: var(--mce-teal) !important; }
.mce-chip:hover, .mce-term:hover { filter: brightness(0.96); }
a.mce-chip { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-block-post-terms .wp-block-post-terms__separator { display: none; }

/* Kategorie-Text (ohne Pille) in kompakten Listen */
.mce-terms-plain .mce-term { background: none; padding: 0; min-height: 0; }

/* ---------- Startseite ---------- */
.mce-hero-title { font-size: clamp(40px, calc((100vw - 48px) / 11.4), 104px) !important; line-height: 0.95 !important; letter-spacing: -0.045em !important; }
.mce-rule { border-bottom: 2px solid var(--wp--preset--color--ink); }

.mce-latest .wp-block-post { padding: 20px 0; border-bottom: 1px solid var(--mce-line); }
.mce-latest .wp-block-post-title { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin-top: 6px; }
.mce-eyebrow { font-size: 13px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mce-subtle); }

.mce-topic { transition: border-color .15s, transform .15s; height: 100%; }
.mce-topic:hover { border-color: var(--mce-azure) !important; transform: translateY(-2px); }
.mce-topic .mce-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.mce-topic h3 a { color: inherit; }
.mce-topic h3 a::after { content: ""; position: absolute; inset: 0; }
.mce-topic { position: relative; }

.mce-avatar { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }

/* Karten-Grid */
.mce-grid .wp-block-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mce-line); border-radius: 16px; overflow: hidden; transition: border-color .15s, transform .15s; }
.mce-grid .wp-block-post:hover { border-color: var(--mce-azure); transform: translateY(-2px); }
.mce-grid .mce-card--ai:hover { border-color: var(--mce-copilot); }
.mce-grid .mce-card--agents:hover { border-color: var(--mce-agents); }
.mce-grid .mce-card--security:hover { border-color: var(--mce-teal); }
.mce-grid .wp-block-post-featured-image { margin: 0; border-radius: 0; }
.mce-grid .wp-block-post-featured-image img { border-radius: 0; }
.mce-grid .mce-card-body { padding: 22px 24px 26px; }
.mce-grid .wp-block-post-title { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.mce-grid .wp-block-post-excerpt { font-size: 16px; color: var(--wp--preset--color--ink-muted); }
.mce-grid .wp-block-post-excerpt__more-text { display: none; }

/* Bildplatzhalter, wenn kein Beitragsbild gesetzt ist */
.mce-featured .wp-block-post-featured-image:empty,
.wp-block-post-featured-image:not(:has(img)) { display: none; }

/* ---------- Beitrag ---------- */
.mce-breadcrumb { font-size: 14px; color: var(--mce-subtle); }
.mce-breadcrumb a { color: var(--mce-subtle); }
.mce-lead, .mce-lead p { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--ink-muted); }
.mce-meta { border-top: 1px solid var(--mce-line); border-bottom: 1px solid var(--mce-line); padding: 18px 0; font-size: 15px; }
.mce-meta .wp-block-post-author { align-items: center; }
.mce-meta .wp-block-post-author__avatar img { border-radius: 50%; width: 44px; height: 44px; }
.mce-meta .wp-block-post-author__name { font-weight: 600; margin: 0; }

.mce-article { gap: clamp(32px, 5vw, 56px); }
.mce-article > .mce-aside { flex: 1 1 220px; max-width: 260px; }
.mce-article > .mce-body { flex: 999 1 560px; min-width: 0; max-width: 760px; }
@media (max-width: 900px) {
	.mce-article > .mce-aside { max-width: none; flex-basis: 100%; }
}

.mce-toc { position: sticky; top: 32px; font-size: 14px; }
.mce-toc__title { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mce-subtle); margin: 0 0 14px; }
.mce-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--mce-line); }
.mce-toc li a { display: block; padding: 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--mce-subtle); line-height: 1.4; text-decoration: none; }
.mce-toc li a:hover { color: var(--wp--preset--color--ink); }
.mce-toc li a.is-active { border-left-color: var(--mce-track); color: var(--wp--preset--color--ink); font-weight: 600; }
.mce-toc:empty { display: none; }
@media (max-width: 900px) { .mce-toc { position: static; } .mce-toc ol { display: none; } .mce-toc.is-open ol { display: block; } .mce-toc__title { cursor: pointer; } }

.mce-share { display: flex; gap: 8px; margin-top: 28px; }
.mce-share button, .mce-share a { width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--mce-line); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--ink); cursor: pointer; text-decoration: none; font: 700 14px var(--wp--preset--font-family--body); }
.mce-share button:hover, .mce-share a:hover { border-color: var(--mce-track); color: var(--mce-track); }

.mce-single .wp-block-post-content { font-size: 18px; line-height: 1.75; color: #232A33; }
.mce-single .wp-block-post-content > * + h2 { margin-top: 48px; }
.mce-single .wp-block-post-content > * + h3 { margin-top: 36px; }
.mce-single .wp-block-post-content a:not(.wp-element-button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mce-single .wp-block-post-content :where(ul, ol) li { margin-bottom: 8px; }
.mce-single .wp-block-post-content :not(pre) > code { font-family: var(--wp--preset--font-family--mono); font-size: .88em; background: var(--mce-surface); border: 1px solid var(--mce-line); padding: 1px 6px; border-radius: 6px; }
.mce-single .breadcrumb-track, .mce-single .mce-breadcrumb .mce-term { background: none; padding: 0; min-height: 0; font-size: 14px; }

/* Code-Block mit Kopfzeile */
.wp-block-code { position: relative; overflow-x: auto; border: 0; }
.wp-block-code code { font-family: inherit; white-space: pre; }
.mce-code { position: relative; margin-block: 32px; border-radius: 12px; overflow: hidden; background: var(--mce-navy); }
.mce-code .wp-block-code { margin: 0; border-radius: 0; }
.mce-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; border-bottom: 1px solid #1E3354; font: 500 13px var(--wp--preset--font-family--mono); color: #9FB3CC; }
.mce-code__copy { min-height: 36px; padding: 0 12px; background: #16294A; color: #E8EEF6; border: 0; border-radius: 6px; font: 500 12px var(--wp--preset--font-family--mono); cursor: pointer; }
.mce-code__copy:hover { background: #1F3A66; }

/* Hinweisboxen (Gruppen-Stile) */
.wp-block-group.is-style-mce-note,
.wp-block-group.is-style-mce-tip,
.wp-block-group.is-style-mce-ai,
.wp-block-group.is-style-mce-warning {
	position: relative; padding: 20px 24px 20px 58px; border-radius: 12px; margin-block: 32px; font-size: 16px; line-height: 1.6;
	background: var(--wp--preset--color--azure-soft);
}
.wp-block-group.is-style-mce-note > :first-child,
.wp-block-group.is-style-mce-tip > :first-child,
.wp-block-group.is-style-mce-ai > :first-child,
.wp-block-group.is-style-mce-warning > :first-child { margin-top: 0; }
.wp-block-group.is-style-mce-note > * + *,
.wp-block-group.is-style-mce-tip > * + *,
.wp-block-group.is-style-mce-ai > * + *,
.wp-block-group.is-style-mce-warning > * + * { margin-top: 6px; }
.wp-block-group.is-style-mce-note::before,
.wp-block-group.is-style-mce-tip::before,
.wp-block-group.is-style-mce-ai::before,
.wp-block-group.is-style-mce-warning::before {
	content: ""; position: absolute; left: 22px; top: 22px; width: 22px; height: 22px;
	background: currentColor; color: var(--mce-azure);
	-webkit-mask: var(--mce-icon) center / contain no-repeat; mask: var(--mce-icon) center / contain no-repeat;
}
.wp-block-group.is-style-mce-note { --mce-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-mce-note > :first-child strong { color: var(--wp--preset--color--azure-dark); }
.wp-block-group.is-style-mce-tip { background: var(--wp--preset--color--teal-soft); --mce-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-mce-tip::before { color: var(--mce-teal); }
.wp-block-group.is-style-mce-tip > :first-child strong { color: #075A56; }
.wp-block-group.is-style-mce-ai { background: var(--wp--preset--color--copilot-soft); --mce-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-mce-ai::before { color: var(--mce-copilot); }
.wp-block-group.is-style-mce-ai > :first-child strong { color: #4630B0; }
.wp-block-group.is-style-mce-warning { background: #FFF3E5; --mce-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-mce-warning::before { color: #B45309; }
.wp-block-group.is-style-mce-warning > :first-child strong { color: #92400E; }

.wp-block-group.is-style-mce-card { background: #fff; border: 1px solid var(--mce-line); border-radius: 16px; padding: 28px; }

.wp-block-button.is-style-mce-ghost .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--mce-line); }
.wp-block-button.is-style-mce-ghost .wp-block-button__link:hover { border-color: var(--mce-azure); color: var(--mce-azure); background: transparent; }

ol.is-style-mce-steps { list-style: none; counter-reset: mce-step; padding-left: 0; }
ol.is-style-mce-steps > li { counter-increment: mce-step; position: relative; padding-left: 48px; margin-bottom: 18px; }
ol.is-style-mce-steps > li::before { content: counter(mce-step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--mce-track-soft); color: var(--mce-track); font: 700 15px/32px var(--wp--preset--font-family--display); text-align: center; }

.wp-block-image figcaption { font-size: 14px; color: var(--mce-subtle); text-align: left; }
.wp-block-image img { border: 1px solid var(--mce-line); }

/* Autorenbox */
.mce-authorbox .wp-block-post-author-biography { color: #C5D0DE; font-size: 16px; line-height: 1.6; }
.mce-authorbox .wp-block-post-author__avatar img, .mce-authorbox img.avatar { border-radius: 50%; }
.mce-authorbox a { color: #fff; }

/* Archiv-Kopf */
.mce-archive-head .wp-block-query-title { font-size: var(--wp--preset--font-size--display); }
.mce-track-ai .mce-archive-head .wp-block-query-title { color: var(--mce-copilot); }
.mce-track-security .mce-archive-head .wp-block-query-title { color: var(--mce-teal); }
.mce-track-agents .mce-archive-head .wp-block-query-title { color: var(--mce-agents); }
.wp-block-query-title span { color: var(--mce-track); }

/* Pagination */
.wp-block-query-pagination { gap: 8px; font-weight: 600; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 99px; padding: 0 12px; }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--ink); color: #fff; }

/* Footer */
.mce-footer a { color: var(--mce-subtle); }
.mce-footer a:hover { color: var(--wp--preset--color--ink); }

/* Suche */
.mce-searchform .wp-block-search__input { border-radius: 99px; border: 1px solid var(--mce-line); padding: 12px 20px; font-size: 17px; }
.mce-searchform .wp-block-search__button { border-radius: 99px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Header: Menü nie in sich umbrechen; auf Tablets rutscht es in eine eigene Zeile unter das Logo */
.mce-header .wp-block-navigation__container { flex-wrap: nowrap; }
header.mce-header > .wp-block-group > .wp-block-group { flex-wrap: nowrap; }
@media (min-width: 600px) and (max-width: 960px) {
	header.mce-header > .wp-block-group { flex-wrap: wrap; row-gap: 12px; }
	.mce-header .wp-block-navigation-item__content { padding: 8px 10px; }
}

/* Tabellen */
.wp-block-table { margin-block: 32px; overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.wp-block-table th { text-align: left; font-weight: 600; background: var(--mce-surface); color: var(--wp--preset--color--ink); }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--mce-line); padding: 10px 14px; vertical-align: top; }
.wp-block-table thead { border-bottom: 2px solid var(--wp--preset--color--ink); }
.wp-block-table code { white-space: normal; overflow-wrap: anywhere; }
.mce-single .wp-block-post-content :not(pre) > code { overflow-wrap: anywhere; }
.wp-block-table.has-fixed-layout table, .wp-block-table table.has-fixed-layout { table-layout: auto; }

/* Inhaltsverzeichnis + Teilen gemeinsam mitlaufen lassen */
.mce-toc { position: static; }
@media (min-width: 901px) {
	.mce-article > .mce-aside { position: sticky; top: 32px; align-self: flex-start; max-height: calc(100vh - 64px); overflow-y: auto; }
	.admin-bar .mce-article > .mce-aside { top: 64px; }
}
/* Tabellen: nicht mitten im Wort umbrechen */
.wp-block-table td, .wp-block-table th, .wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th { word-break: normal; overflow-wrap: normal; hyphens: auto; }
.wp-block-table td:first-child strong { white-space: nowrap; }