/*
 * Hotel Hirsch Leonberg – Anpassungen 2026
 * Wird nach allen Theme-Styles geladen (functions.php, Priorität 99) und überschreibt
 * die festen Pixelgrößen aus den Theme-Optionen (style_dynamic.css).
 * Die Theme-Optionen in der Datenbank bleiben unverändert.
 */

/* ------------------------------------------------------------------
 * Überschriften: fluide Größen (Befund C5)
 * Mobil (360 px) → Desktop (1280 px), dazwischen stufenlos.
 * Desktop-Maximum = bisherige Werte 47 / 43 / 39 / 35 px.
 * Formel: clamp(min, a + b·vw, max), b = (max − min) / 920 px, a = min − b · 360 px
 * In px statt rem: das Theme setzt die Grundschrift fest auf 14 px, rem wären daher 12,5 % zu klein.
 * ------------------------------------------------------------------ */
/* Selektoren bewusst doppelt: css/hirsch-custom.css setzt mobil „html h1 { 2rem }“ und
   „.wpb_wrapper h2 { 30px }“ / „h3, h4 { 27px }“ – gleiche Spezifität, diese Datei lädt später und gewinnt. */
h1, html h1, .wpb_wrapper h1 { font-size: clamp(28px, 20.57px + 2.065vw, 47px); line-height: 1.25; }
h2, .wpb_wrapper h2          { font-size: clamp(24px, 16.57px + 2.065vw, 43px); line-height: 1.25; }
h3, .wpb_wrapper h3          { font-size: clamp(21px, 13.96px + 1.957vw, 39px); line-height: 1.3;  }
h4, .wpb_wrapper h4          { font-size: clamp(18px, 11.35px + 1.848vw, 35px); line-height: 1.3;  }

/* Sperrung relativ zur Schriftgröße statt fester 2 px / 1 px: wird mobil automatisch kleiner */
h1, h2 { letter-spacing: 0.04em; }
h3, h4 { letter-spacing: 0.025em; }

/* Startseite: drei Teaser-Spalten (#teaser_container) stehen erst ab 992 px nebeneinander und sind
   dann nur ca. 270–350 px breit. 43 px Versalien passen dort nicht („ÖFFNUNGSZEITEN“) → kleiner, mitwachsend.
   Unter 992 px stehen die Spalten untereinander; dort gilt die Regel aus css/hirsch-custom.css (25 px). */
@media (min-width: 992px) {
	#teaser_container h2 { font-size: clamp(20px, 2.2vw, 30px); }
}

/* „Suchen & Buchen“ über der Schnellbuchung (full_width.php, Issue #15): echte h2 im Stil der
   Seitenüberschriften. Doppelte Klasse, damit die allgemeinen h2-Größen oben nicht greifen. */
.qb_wrapper_custom .qb-headline {
	display: block;
	margin: 40px 0 20px;
	text-align: center;
	font-size: clamp(22px, 19.65px + 0.65vw, 26px);   /* 22 px (360) → 26 px (1280) */
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #472918;
}

/* DIRS21-Gutschein-Shop (Issue #19): Das Widget setzt sich auf ca. 50em Breite und rechnet Innenabstände
   zusätzlich drauf (content-box). In schmaleren Spalten ragte es dadurch rechts aus dem Inhaltsbereich. */
.d21-voucherShop { max-width: 100%; }
.d21-voucherShop .d21-widget-container { width: auto !important; max-width: 100% !important; }
.d21-voucherShop *, .d21-voucherShop *::before, .d21-voucherShop *::after { box-sizing: border-box; }
.d21-voucherShop .d21-container-view { min-width: 0 !important; }

/* Lange Wörter in Versalien (z. B. „VERANSTALTUNGEN“) dürfen umbrechen statt aus dem Bild zu laufen */
h1, h2, h3, h4 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ------------------------------------------------------------------
 * Kontrast (Befund C4, WCAG AA ≥ 4,5 : 1 auf Weiß)
 * H3 #999 (2,8 : 1) → #6b6b6b (5,3 : 1), H4 #aaa (2,3 : 1) → #757575 (4,6 : 1)
 * Nur die Standardfarbe; eingefärbte Überschriften (z. B. auf Bildern) behalten ihre Farbe.
 * ------------------------------------------------------------------ */
h3 { color: #6b6b6b; }
h4 { color: #757575; }

/* ------------------------------------------------------------------
 * Laufschrift (Issue #10, Shortcode [leonberg_ticker], includes/leonberg-ticker.php)
 * Grundgestaltung kommt aus css/hirsch-custom.css („Marquee 2022/2026“: #start_news, .marquee-*).
 * ------------------------------------------------------------------ */
.leonberg-ticker { display: flex; align-items: center; gap: 12px; }
.leonberg-ticker .marquee-wrapper { flex: 1 1 auto; min-width: 0; }
.leonberg-ticker__controls { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding-right: 8px; }

/* Pause per Knopf (Tastatur/Touch), bei Hover und wenn ein Element im Ticker den Fokus hat */
.leonberg-ticker.is-paused .marquee-track,
.leonberg-ticker:focus-within .marquee-track { animation-play-state: paused; }

.leonberg-ticker__pause {
	width: 32px; height: 32px; padding: 0;
	border: 1px solid currentColor; border-radius: 50%;
	background: transparent; color: #472918; font-size: 11px; line-height: 30px;
	cursor: pointer;
}
.leonberg-ticker__pause:hover { background: #472918; color: #fff; }
.leonberg-ticker__pause:focus-visible,
.leonberg-ticker__link:focus-visible { outline: 2px solid #472918; outline-offset: 2px; }
.leonberg-ticker__link { font-size: 14px; font-weight: 600; color: #472918; white-space: nowrap; text-decoration: underline; }

/* „Bewegung reduzieren“: kein Lauftext, sondern stehender, umbrechender Text (einmal) */
@media (prefers-reduced-motion: reduce) {
	.leonberg-ticker .marquee-wrapper { white-space: normal; }
	.leonberg-ticker .marquee-track { animation: none; display: block; }
	.leonberg-ticker .leonberg-ticker__item + .leonberg-ticker__item { display: none; }
	.leonberg-ticker__pause { display: none; }
}

/* nur für Screenreader sichtbar */
.leonberg-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}