/* ==========================================================================
   SIMPLY the BEST – Block-Styles (Frontend + Editor)
   Werte aus dem Original abgenommen: Text #434e4e, Orange #f07c00, Rot #c90c0f,
   Überschriften Playfair Display 400, Untertitel Nanum Gothic, Text DM Sans.
   ========================================================================== */

:root {
	--stb-dark: #434e4e;
	--stb-orange: #f07c00;
	--stb-red: #c90c0f;
	--stb-accent: var(--stb-orange);
	--stb-button-font: var(--wp--preset--font-family--nanum);
	--stb-section-space: clamp(56px, 8vw, 100px);

	--stb-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285 239c9 9 9 25 0 34L93 465c-9 9-25 9-34 0s-9-25 0-34l175-175L59 81c-9-9-9-25 0-34s25-9 34 0z'/%3E%3C/svg%3E");
	--stb-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470 105c12 12 12 32 0 45L210 410c-12 12-32 12-45 0L42 287c-12-12-12-32 0-45s32-12 45 0l101 100 237-237c12-12 32-12 45 0z'/%3E%3C/svg%3E");
}

/* Akzentfarbe: Rot für Verlag/top magazin – per Seiten-Einstellung (Body-Klasse) oder Gruppen-Stil */
.stb-accent-red,
.is-style-stb-accent-red {
	--stb-accent: var(--stb-red);
	--stb-button-font: var(--wp--preset--font-family--playfair);
}
.is-style-stb-accent-orange {
	--stb-accent: var(--stb-orange);
	--stb-button-font: var(--wp--preset--font-family--nanum);
}

/* Rote Buttons nutzen im Original Playfair, orange Buttons Nanum Gothic */
.wp-block-button__link.has-stb-red-background-color { font-family: var(--wp--preset--font-family--playfair); }
.wp-block-button__link.has-stb-orange-background-color { font-family: var(--wp--preset--font-family--nanum); }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

/* „the“ in SIMPLY the BEST: in Überschriften kursiv setzen → orange, fett */
:is(h1, h2, h3, .wp-block-heading) em {
	color: var(--stb-orange);
	font-weight: 700;
	font-style: italic;
}

/* Untertitel unter Überschriften */
p.is-style-stb-subtitle {
	font-family: var(--wp--preset--font-family--nanum);
	font-size: var(--wp--preset--font-size--subtitle);
	line-height: 1.2;
	margin-top: 0.15em;
}
p.is-style-stb-subtitle:not(.has-text-color) { color: var(--stb-accent); }

/* Überschrift + Untertitel rücken eng zusammen */
.wp-block-heading + p.is-style-stb-subtitle { margin-block-start: 0.2em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-block-button__link { min-width: 222px; text-align: center; transition: background-color .2s ease; }
.wp-block-button__link:focus-visible { outline: 3px solid var(--stb-dark); outline-offset: 3px; }

/* Textlink mit Pfeil und Unterstrich („Über uns“, „Weiterlesen“) */
.wp-block-button.is-style-stb-link .wp-block-button__link {
	min-width: 0;
	background: transparent !important;
	color: var(--stb-dark) !important;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	padding: 2px 8px 6px 20px;
	border-bottom: 2px solid var(--stb-accent);
	position: relative;
	text-decoration: none;
}
.wp-block-button.is-style-stb-link .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 8px;
	height: 11px;
	transform: translateY(-60%);
	background: currentColor;
	-webkit-mask: var(--stb-ico-chevron) center / contain no-repeat;
	mask: var(--stb-ico-chevron) center / contain no-repeat;
}
.wp-block-button.is-style-stb-link .wp-block-button__link:hover { color: var(--stb-accent) !important; }

/* --------------------------------------------------------------------------
   Listen mit Pfeil / Haken, zweispaltig
   -------------------------------------------------------------------------- */
ul:is(.is-style-stb-chevron, .is-style-stb-check) {
	list-style: none;
	padding-left: 0;
	font-size: 16px;
	columns: 2 260px;
	column-gap: 40px;
}
ul:is(.is-style-stb-chevron, .is-style-stb-check) li {
	position: relative;
	padding-left: 22px;
	margin: 0 0 18px;
	break-inside: avoid;
}
ul:is(.is-style-stb-chevron, .is-style-stb-check) li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--stb-ico-chevron) left center / contain no-repeat;
	mask: var(--stb-ico-chevron) left center / contain no-repeat;
}
ul.is-style-stb-check li::before {
	-webkit-mask-image: var(--stb-ico-check);
	mask-image: var(--stb-ico-check);
}

/* --------------------------------------------------------------------------
   Gruppen: Abschnitt, Schritte, Karte, graue Box
   -------------------------------------------------------------------------- */
.stb-section { padding-top: var(--stb-section-space); padding-bottom: var(--stb-section-space); }

.wp-block-group.is-style-stb-card {
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
	padding: 22px 22px 24px;
}
.wp-block-group.is-style-stb-card > * { margin-block: 0; }
.wp-block-group.is-style-stb-card h3 {
	font-family: var(--wp--preset--font-family--nanum);
	font-size: 20px;
	margin-bottom: 14px;
}
.wp-block-group.is-style-stb-card p { font-size: 16px; color: var(--stb-accent); }

.wp-block-group.is-style-stb-panel { background: var(--wp--preset--color--stb-light); padding: 28px; }
.wp-block-group.is-style-stb-panel h3 { color: var(--stb-orange); font-family: var(--wp--preset--font-family--nanum); }

/* Nummerierte Schritte: jede direkte Untergruppe bekommt eine Kreiszahl */
.wp-block-group.is-style-stb-steps { counter-reset: stb-step; max-width: 660px; margin-inline: auto; }
.wp-block-group.is-style-stb-steps > .wp-block-group {
	counter-increment: stb-step;
	position: relative;
	padding-left: 60px;
	min-height: 44px;
	margin-block: 0 clamp(40px, 6vw, 80px);
}
.wp-block-group.is-style-stb-steps > .wp-block-group::before {
	content: counter(stb-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--stb-accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 28px;
	line-height: 42px;
	text-align: center;
}
.wp-block-group.is-style-stb-steps > .wp-block-group > * { margin-block: 0 6px; }
.wp-block-group.is-style-stb-steps h3 { font-size: 28px; }
.wp-block-group.is-style-stb-steps p { font-size: 16px; }

/* --------------------------------------------------------------------------
   Bildkacheln (zwei große Teaser nebeneinander)
   -------------------------------------------------------------------------- */
.wp-block-columns.is-style-stb-tiles { gap: 4px !important; margin-block: 0; }
.wp-block-columns.is-style-stb-tiles > .wp-block-column > .wp-block-cover { height: 100%; }
.wp-block-cover .wp-block-cover__inner-container > .wp-block-buttons { margin-block: 0; }

/* Kachel mit Icon (Event-Seite) */
.wp-block-cover.is-style-stb-tile .wp-block-cover__inner-container { text-align: center; }
.wp-block-cover.is-style-stb-tile h3 {
	font-family: var(--wp--preset--font-family--nanum);
	color: #fff;
	font-size: var(--wp--preset--font-size--subtitle);
	margin-top: 14px;
}

/* Icon im Kreis: Absatz mit Stil „Icon im Kreis“ + optional Klasse stb-icon--mikrofon / --glas / --baum */
p.is-style-stb-icon {
	--stb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21l2-7.5L2 9h7z'/%3E%3C/svg%3E");
	width: 66px;
	height: 66px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--stb-accent);
	position: relative;
	font-size: 0;
	color: transparent;
	overflow: hidden;
}
p.is-style-stb-icon::after {
	content: "";
	position: absolute;
	inset: 18px;
	background: #fff;
	-webkit-mask: var(--stb-ico) center / contain no-repeat;
	mask: var(--stb-ico) center / contain no-repeat;
}
p.is-style-stb-icon.stb-icon--mikrofon { --stb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a4 4 0 0 0 4-4V5a4 4 0 1 0-8 0v6a4 4 0 0 0 4 4zm7-4h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21H8v2h8v-2h-3v-3.1A7 7 0 0 0 19 11z'/%3E%3C/svg%3E"); }
p.is-style-stb-icon.stb-icon--glas { --stb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12l-1 7a5 5 0 0 1-4 4.9V20h4v2H7v-2h4v-6.1A5 5 0 0 1 7 9z'/%3E%3C/svg%3E"); }
p.is-style-stb-icon.stb-icon--baum { --stb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l5 6h-3l4 5h-3l5 6h-7v5h-2v-5H4l5-6H6l4-5H7z'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   Zahlenband
   -------------------------------------------------------------------------- */
p.is-style-stb-counter {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1;
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Bilder, Logos, Linien
   -------------------------------------------------------------------------- */
.wp-block-image.is-style-stb-shadow img { box-shadow: 0 3px 14px rgba(0, 0, 0, .22); }

.wp-block-gallery.is-style-stb-logos { gap: 40px 48px !important; align-items: center; }
.wp-block-gallery.is-style-stb-logos .wp-block-image { justify-content: center; align-items: center; }
.wp-block-gallery.is-style-stb-logos .wp-block-image img {
	width: 100% !important;
	height: 110px !important;
	object-fit: contain !important;
}

.wp-block-separator.is-style-stb-line {
	border: 0;
	border-top: 2px solid var(--stb-dark);
	opacity: 1;
	width: 100%;
	max-width: none;
}

/* --------------------------------------------------------------------------
   Formulare (Contact Form 7, WPForms, Kommentare …)
   -------------------------------------------------------------------------- */
:where(.entry-content, .editor-styles-wrapper) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select) {
	width: 100%;
	border: 1px solid #cfd4d4;
	border-radius: 0;
	padding: 9px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--stb-dark);
	background: #fff;
}
:where(.entry-content) :is(input, textarea, select):focus-visible { outline: 2px solid var(--stb-accent); outline-offset: 1px; }
:where(.entry-content) label { font-size: 16px; }
:where(.entry-content) :is(input[type="submit"], button[type="submit"], .wpcf7-submit) {
	background: var(--stb-accent);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-family: var(--stb-button-font);
	font-size: 22px;
	padding: 12px 32px;
	min-width: 266px;
	cursor: pointer;
}
:where(.entry-content) :is(input[type="submit"], button[type="submit"], .wpcf7-submit):hover { background: var(--stb-dark); }
.wpcf7-form p { margin-block: 0 16px; }
.wpcf7-acceptance label { display: flex; gap: 8px; align-items: flex-start; }

/* Hilfsklassen aus den Vorlagen */
.wp-block-group.stb-narrow { max-width: 640px; }
.wp-block-columns.stb-event-tiles { gap: clamp(12px, 2.4vw, 36px); padding-inline: clamp(0px, 1.2vw, 18px); }
.wp-block-group.stb-form-slot { max-width: 660px; }
.wp-block-columns.is-style-stb-tiles .wp-block-button__link { min-width: 312px; }

@media (max-width: 781px) {
	.wp-block-columns.is-style-stb-tiles { gap: 4px !important; }
	.wp-block-columns.is-style-stb-tiles .wp-block-cover { min-height: 360px !important; }
	.wp-block-columns.is-style-stb-tiles .wp-block-button__link { min-width: 222px; }
	.entry-content > .wp-block-cover.alignfull { min-height: 70vh !important; }
	.wp-block-cover.is-style-stb-tile { min-height: 300px !important; }
}