/* Titel & Tags – Frontend-Styles
 *
 * Steuerung über CSS-Custom-Properties, die der Block per inline-style setzt.
 * Mobile-Overrides werden zusätzlich pro Block-Instanz via <style> mit
 * konfigurierbarem Breakpoint injiziert (siehe titel-tags.php).
 *
 * !important wird gezielt eingesetzt, damit globale Theme-Heading-Styles
 * (h1/h2 …) sicher überschrieben werden.
 */

.ttp-hero {
	position: relative;
	padding: var(--ttp-pad-y, 64px) var(--ttp-pad-x, 40px);
	border-radius: 16px;
	overflow: visible;
	margin: 24px 0;
	box-sizing: border-box;
}

.ttp-hero.ttp-bg-transparent {
	background-color: transparent !important;
}

.ttp-hero-inner {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
}

.ttp-align-left   .ttp-hero-inner { text-align: left; }
.ttp-align-center .ttp-hero-inner { text-align: center; }
.ttp-align-right  .ttp-hero-inner { text-align: right; }

.ttp-hero .ttp-title {
	font-family: var(--ttp-title-font, inherit) !important;
	font-size: var(--ttp-title-size, 5rem) !important;
	font-weight: var(--ttp-title-weight, 900) !important;
	text-transform: var(--ttp-title-transform, none) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.025em !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: pre-wrap;
	word-break: break-word;
	hyphens: auto;
	color: inherit !important;
}

.ttp-hero .ttp-tag {
	position: absolute;
	left: var(--ttp-x, 50%);
	top: var(--ttp-y, 50%);
	display: inline-block;
	padding: 0.4em 0.75em;
	font-family: var(--ttp-tag-font, inherit) !important;
	font-size: var(--ttp-s, 1em);
	font-weight: var(--ttp-tag-weight, 800) !important;
	text-transform: var(--ttp-tag-transform, uppercase) !important;
	text-decoration: none !important;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
	letter-spacing: 0.02em;
	line-height: 1.1;
	z-index: 2;
	transform: translate(-50%, -50%) rotate(var(--ttp-r, 0deg));
	transform-origin: center center;
	transition: filter 0.2s ease;
	will-change: transform;
}

.ttp-hero .ttp-tag:hover,
.ttp-hero .ttp-tag:focus {
	filter: brightness(1.08);
	text-decoration: none !important;
}