/* Hugos Tour: Newsletter-Section + Spiel-Dialog (Denis 19.10.2026).
   Entwurf https://claude.ai/artifact/BCRHEzrGTapt6qW5UcSmnx. Nur Theme-Tokens, keine neuen Farben. */

/* ---------- Section (Bestand .subscribe-block liefert Container, Linie, Titel- und Textstil) ---------- */
.hugo-tour-section__inner { flex: 1 1 100%; display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; column-gap: 64px; align-items: center; }
.hugo-tour-section__bild { position: relative; height: 260px; }
.hugo-tour-section__kreis { position: absolute; left: 30px; top: 0; width: 260px; height: 260px; border-radius: 50%; background: var(--primary-100, #FDF1D7); }
.hugo-tour-section__bild img { position: absolute; left: 0; top: 30px; width: 320px; height: auto; transform: rotate(-5deg); }
.hugo-tour-section__sticker { position: absolute; right: 2px; top: -6px; width: 92px; height: 92px; border-radius: 50%; background: var(--primary-300, #FFC46A); transform: rotate(-10deg); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(39, 37, 42, .08); color: #27252A; }
.hugo-tour-section__sticker b { font-family: var(--font3), Georgia, serif; font-weight: 400; font-size: 28px; line-height: 30px; }
.hugo-tour-section__sticker small { font-size: 12px; line-height: 14px; font-weight: 600; }
.hugo-tour-section__text { display: flex; flex-direction: column; gap: 16px; }
.hugo-tour-section .subscribe-block__desc { max-width: 500px; margin: 0; }
.hugo-tour-section__aktion { display: flex; flex-direction: column; gap: 14px; }
.hugo-tour-section__start { width: 100%; height: 56px; border: 0; border-radius: 28px; }
.hugo-tour-section__start span { display: inline-flex; align-items: center; gap: 10px; }
.hugo-tour-section__klein { margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: #666666; }
.hugo-tour-section__fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--background-borders, #E9E2D9); padding-top: 12px; }
.hugo-tour-section__fuss .button { background: none; border: 0; }
.hugo-tour-bedingungen { font-size: 12px; line-height: 18px; color: #666666; }
.hugo-tour-bedingungen summary { cursor: pointer; color: #444444; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; list-style: none; }
.hugo-tour-bedingungen summary::-webkit-details-marker { display: none; }
.hugo-tour-bedingungen p { margin: 8px 0 0; max-width: 360px; }
.hugo-tour-section__fuss .hugo-tour-bedingungen[open] { flex-basis: 100%; }
.hugo-tour-section__fuss:has(.hugo-tour-bedingungen[open]) { flex-wrap: wrap; }

@media (max-width: 1199px) {
	.hugo-tour-section__inner { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.hugo-tour-section__bild { width: 300px; height: 220px; justify-self: center; }
	.hugo-tour-section__kreis { left: 40px; width: 220px; height: 220px; }
	.hugo-tour-section__bild img { width: 280px; top: 20px; }
	.hugo-tour-section__aktion { max-width: 420px; }
}

/* ---------- Dialog ---------- */
.hugo-tour { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; overflow: hidden; color: #27252A; font-family: var(--font4), sans-serif; }
html:has(.hugo-tour[open]) { overflow: hidden; scrollbar-gutter: stable; } /* Scrollleiste behält ihren Platz, sonst springt die Seite */
.hugo-tour__titel:focus { outline: none; }
.hugo-tour::backdrop { background: rgba(39, 37, 42, .45); }
.hugo-tour__buehne { position: relative; width: 100%; height: 100%; background: var(--primary-100, #FDF1D7); overflow: hidden; }
@media (min-width: 600px) {
	.hugo-tour { width: min(420px, calc(92dvh * .5)); height: min(860px, 92dvh); margin: auto; border-radius: 24px; box-shadow: 0 24px 64px rgba(39, 37, 42, .12); }
}
.hugo-tour__welt { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; }
.hugo-tour__kopf { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 7; pointer-events: none; }
.hugo-tour__kopf { justify-content: flex-end; } .hugo-tour__kopf .hugo-tour__stand { margin-right: auto; } .hugo-tour__stand[hidden] { display: none; }
.hugo-tour__stand { margin: 0; height: 44px; padding: 0 16px; border-radius: 22px; background: #FFFFFF; display: flex; align-items: center; font-size: 14px; font-weight: 600; }
.hugo-tour__zu { pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; color: #27252A; cursor: pointer; }
.hugo-tour__zu:focus-visible, .hugo-tour button:focus-visible, .hugo-tour a:focus-visible { outline: 2px solid #27252A; outline-offset: 2px; }
.hugo-tour__hinweis { position: absolute; left: 0; right: 0; top: 62%; margin: 0; text-align: center; font-size: 20px; font-weight: 600; z-index: 4; pointer-events: none; animation: hugo-tour-puls 1.2s ease-in-out infinite; }
.hugo-tour__hinweis[hidden] { display: none; }
@keyframes hugo-tour-puls { 50% { opacity: .45; } }

.hugo-tour__ebene { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 76px 20px 24px; overflow-y: auto; }
.hugo-tour[data-zustand="start"] [data-ebene="start"],
.hugo-tour[data-zustand="aua"] [data-ebene="aua"],
.hugo-tour[data-zustand="gewonnen"] [data-ebene="gewonnen"],
.hugo-tour[data-zustand="formular"] [data-ebene="formular"],
.hugo-tour[data-zustand="danke"] [data-ebene="danke"] { display: flex; }
.hugo-tour[data-zustand="aua"] [data-ebene="aua"] { background: rgba(39, 37, 42, .28); }

.hugo-tour__hugo { position: relative; z-index: 1; width: 150px; height: auto; margin-bottom: -6px; }
.hugo-tour__hugo--gross { width: 210px; margin-bottom: -48px; }
.hugo-tour__oben { position: relative; z-index: 1; align-self: stretch; display: flex; align-items: flex-end; gap: 4px; padding-left: 20px; margin-bottom: -6px; }
.hugo-tour__oben .hugo-tour__hugo { margin-bottom: 0; width: 150px; }
.hugo-tour__blase { position: relative; z-index: 3; margin: 0 0 56px; padding: 12px 16px; border-radius: 18px; background: #FFFFFF; font-size: 14px; line-height: 20px; box-shadow: 0 4px 16px rgba(39, 37, 42, .08); }
.hugo-tour__blase b { font-weight: 600; }
.hugo-tour__blase::after { content: ''; position: absolute; left: -10px; bottom: 14px; border: 8px solid transparent; border-right: 12px solid #FFFFFF; border-left: 0; }
.hugo-tour__flieger { width: 260px; height: auto; transform: rotate(-6deg); margin-bottom: 16px; }

.hugo-tour__karte { position: relative; z-index: 2; align-self: stretch; background: #FFFFFF; border-radius: 24px; padding: 28px 22px 24px; box-shadow: 0 12px 32px rgba(39, 37, 42, .10); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.hugo-tour__titel { margin: 0; text-wrap: balance; font-family: var(--font3), Georgia, serif; font-weight: 400; font-size: 28px; line-height: 36px; }
.hugo-tour__text { margin: 0; text-wrap: pretty; font-size: 16px; line-height: 24px; color: #444444; }
.hugo-tour__klein { margin: 0; font-size: 12px; line-height: 18px; color: #666666; }
.hugo-tour__klein a { color: inherit; text-decoration: underline; }
.hugo-tour__schritte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.hugo-tour__schritte li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 22px; }
.hugo-tour__schritte span { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--primary-100, #FDF1D7); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.hugo-tour__knopf { width: 100%; height: 52px; border: 0; border-radius: 26px; }
.hugo-tour__karte .button_transparent { align-self: center; background: none; border: 0; }
.hugo-tour__pille { align-self: center; margin: 0; padding: 6px 14px; border-radius: 100px; background: var(--primary-100, #FDF1D7); font-size: 14px; line-height: 20px; font-weight: 600; }
.hugo-tour__gutschein { margin: 4px 8px; padding: 16px; border-radius: 18px; background: var(--primary-100, #FDF1D7); border: 1.5px dashed var(--primary-400, #FFAF54); }
.hugo-tour__gutschein b { display: block; font-family: var(--font3), Georgia, serif; font-weight: 400; font-size: 50px; line-height: 54px; }
.hugo-tour__gutschein span { font-size: 14px; line-height: 20px; color: #444444; }
.hugo-tour .hugo-tour-bedingungen { text-align: left; border-top: 1px solid var(--background-borders, #E9E2D9); padding-top: 12px; }
.hugo-tour .hugo-tour-bedingungen summary { text-align: center; }

/* CF7 im Dialog: eigenes Erscheinungsbild, Verhalten bleibt CF7 (reCAPTCHA, DOI, Klaviyo) */
.hugo-tour__karte--formular .wpcf7 { text-align: left; }
.hugo-tour__karte--formular .form-group p { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.hugo-tour__karte--formular input[type="email"], .hugo-tour__karte--formular input[type="text"] { width: 100%; height: 48px; box-sizing: border-box; border: 1px solid var(--background-borders-warm, #E4D6C4); border-radius: 12px; padding: 0 14px; font-size: 16px; margin: 0 !important; }
.hugo-tour__karte--formular input[type="submit"] { width: 100%; height: 52px; border: 0; border-radius: 26px; background: var(--primary-300, #FFC46A); color: #27252A; font-family: var(--font8), sans-serif; font-size: 14px; letter-spacing: -.02em; text-transform: uppercase; cursor: pointer; margin: 0 !important; }
.hugo-tour__karte--formular input[type="submit"]:hover { background: var(--primary-400, #FFAF54); }
.hugo-tour__karte--formular .wpcf7-form-control-wrap, .hugo-tour__karte--formular .form-row, .hugo-tour__karte--formular .form-group { margin: 0 !important; padding: 0; }
.hugo-tour__karte--formular .recaptcha-notice { margin: 10px 0 0; text-align: center; font-size: 12px !important; line-height: 18px !important; color: #666666; }
.hugo-tour__karte--formular .recaptcha-notice a { color: inherit; }
.hugo-tour__karte--formular .recaptcha-notice br { display: none; }

@media (prefers-reduced-motion: reduce) { .hugo-tour__hinweis { animation: none; } }