/* =========================================================
   TAOM Blocks – NUR neue Stile (v3)
   ---------------------------------------------------------
   Basis-Klassen wie .hero, .card, .section, .btn, .kicker,
   .chips, .fw-grid, .cta-band, .flowcard, .grid, .ticks …
   kommen aus EUREM Theme „taom-theme“ und werden hier
   bewusst NICHT mehr definiert (kein Konflikt, keine Dopplung).
   Dieses Stylesheet ergänzt nur, was das Theme noch nicht kennt:
   die drei TAOM-Blöcke (Karte-Varianten, Diagramm, Grafik) und
   den Video-Blockstil.
   ========================================================= */

/* ---------- Karte: Farbvarianten (Standard/WRICEF/AI/BTP) ---------- */
.card--standard { border-left: 5px solid #5aa172; }
.card--wricef   { border-left: 5px solid #d98a3d; }
.card--ai       { border-left: 5px solid #5a86c2; }
.card--btp      { border-left: 5px solid #8f72b5; }
.card .card__link {
	display: inline-block;
	margin-top: 10px;
	font-weight: 700;
	color: #0a6fc0;
	text-decoration: none;
}
.card .card__link:hover { text-decoration: underline; }

/* ---------- Diagramm aus Text (Mermaid) ---------- */
.taom-diagram { margin: 0 0 1rem; padding: 0; }
.taom-diagram .mermaid {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(16,42,67,.08);
	text-align: center;
}
.taom-diagram__cap {
	color: #5b6a7a;
	font-size: 13px;
	text-align: center;
	margin-top: 8px;
}
/* Editor-Ansicht */
.taom-diagram.is-editing {
	background: #f8fbff;
	border: 1px dashed #bcd7f2;
	border-radius: 12px;
	padding: 12px;
}
.taom-diagram__preview {
	min-height: 60px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px;
	margin-top: 8px;
	overflow: auto;
	text-align: center;
}
.taom-diagram__preview svg { max-width: 100%; height: auto; }
.taom-diagram__hint,
.taom-diagram__err { color: #8a97a8; font-size: 12px; padding: 12px; }
.taom-diagram__err { color: #c0392b; }

/* ---------- Grafik (Chart.js) ---------- */
.taom-chart,
.taom-chart-edit {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(16,42,67,.08);
	max-width: 720px;
	margin: 0 auto 1rem;
}
.taom-chart canvas,
.taom-chart-edit canvas { max-width: 100%; }

/* ---------- Video-Blockstil „TAOM (gerahmt)“ ---------- */
.is-style-taom-video,
.wp-block-video.is-style-taom-video,
.wp-block-embed.is-style-taom-video {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(16,42,67,.08);
	border: 1px solid #e2e8f0;
}

/* ---------- Sidebar-Bausteine (kompakt) ---------- */
.taom-sb{ padding:18px 20px; }
.taom-sb h3{ margin-top:0; }
.taom-sb p{ font-size:14px; margin:0 0 12px; }
.taom-sb .wp-block-buttons{ margin:0; }

.taom-sb-cta{
	background:linear-gradient(135deg,#0a93f0,#0a6fc0);
	color:#fff;border-radius:14px;padding:20px 22px;
	box-shadow:0 10px 26px rgba(16,42,67,.14);
}
.taom-sb-cta h3{ color:#fff; margin-top:0; font-size:18px; }
.taom-sb-cta p{ color:#e6f2ff; font-size:14px; margin:0 0 14px; }
.taom-sb-cta .btn-ghost .wp-block-button__link{
	background:#fff !important;color:#0a6fc0 !important;border:0 !important;font-weight:700;
}
.taom-sb-cta .btn-ghost .wp-block-button__link:hover{ background:#eaf4ff !important; }


/* =========================================================
   TAOM Blog-Bausteine (v1) – Layouts für Beiträge/Seiten
   Klassen bpx-*: Karten-Raster, Vergleichstabelle, Highlight,
   SVG-Figur, CTA. Nutzbar in Gutenberg (Editor + Frontend)
   über die TAOM-Muster. Basisfarben aus dem TAOM-Theme.
   ========================================================= */
.bpx-eyebrow{display:inline-block;color:#0b5fd7;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin:0 0 6px;}
.bpx-lead{font-size:1.25rem;line-height:1.6;color:#334155;font-weight:500;}
.bpx-meta{color:#5f6b7a;font-size:.95rem;font-weight:600;}
.bpx-fig{margin:34px 0;border:1px solid #dce4ef;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 16px 38px rgba(8,37,91,.08);}
.bpx-fig svg{width:100%;height:auto;display:block;padding:10px 14px;}
.bpx-fig figcaption{padding:13px 18px;color:#5f6b7a;font-size:.92rem;background:#fbfcfe;border-top:1px solid #dce4ef;}
.bpx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0;}
.bpx-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:820px){.bpx-grid,.bpx-grid.two{grid-template-columns:1fr;}}
.bpx-card{background:#fff;border:1px solid #e6eaf0;border-left:4px solid #0b5fd7;border-radius:12px;padding:18px;box-shadow:0 8px 22px rgba(8,37,91,.05);}
.bpx-card h4{margin:0 0 6px;color:#08255b;font-size:1.05rem;}
.bpx-card p{margin:0;color:#4a5567;font-size:.95rem;line-height:1.55;}
.bpx-card.taom{border-left-color:#0d8a78;}
.bpx-highlight{background:#f4f7fb;border-radius:14px;padding:22px 24px;margin:30px 0;border:1px solid #e3eaf4;}
.bpx-highlight h3{margin:0 0 8px;color:#08255b;}
.bpx-highlight p{margin:0;color:#33475b;}
.bpx-compare{margin:22px 0;}
.bpx-compare table{width:100%;border-collapse:collapse;font-size:.98rem;}
.bpx-compare th{background:#08255b;color:#fff;text-align:left;padding:12px 14px;}
.bpx-compare td{border:1px solid #e3eaf4;padding:11px 14px;vertical-align:top;color:#33475b;}
.bpx-compare tr:nth-child(even) td{background:#f8fafd;}
.bpx-tag{font-weight:800;color:#08255b;font-size:1.25rem;margin:26px 0;}
.bpx-cta{background:linear-gradient(135deg,#08255b,#0b5fd7);color:#fff;border-radius:18px;padding:30px 32px;margin:38px 0 8px;box-shadow:0 18px 40px rgba(8,37,91,.18);}
.bpx-cta img{height:34px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1);}
.bpx-cta h3{color:#fff;margin:0 0 10px;font-size:1.4rem;}
.bpx-cta p{color:#e6f0ff;margin:0;}