/* Speth-Wilhelmshof – Komponenten. Alle Farben über Tokens, Hero-Jahreszeit über [data-saison]. Rustikal: Holzmaserung, Büttenpapier, Doppelrahmen. */
.wh, .wh * { box-sizing: border-box; }
.wh {
  --wh-papierkorn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  --wh-maserung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.22'/%3E%3C/svg%3E");
  font-family: var(--font-sans); font-size: 18px; line-height: 29px; color: var(--ink); font-variant-numeric: lining-nums;
}
.wh-page { background: var(--leinen) var(--wh-papierkorn); }
.wh :focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 1px; }
.wh-dark :focus-visible { outline-color: var(--fokus-on-wald); }
.wh a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wh a:hover { color: var(--holz); }
.wh-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
.wh-holz { background-color: var(--wald); background-image: var(--wh-maserung); background-size: 600px 240px; }

/* Button – wie ein Etikett: eckig, leichter Schattenwurf, Satzschreibung */
.wh-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 16px/20px var(--font-sans); letter-spacing: 0; text-transform: none;
  padding: 14px 22px 13px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: background-color .15s, color .15s, border-color .15s; }
.wh-btn-etikett { background: var(--etikett); color: var(--on-etikett) !important; box-shadow: var(--schatten-etikett); font: 400 20px/24px var(--font-marker); letter-spacing: 0; text-transform: none; padding: 11px 22px 9px; }
.wh-btn-etikett:hover { box-shadow: inset 0 0 0 1px var(--on-etikett), var(--schatten-etikett); }
.wh-btn-primary { background: var(--tanne); color: var(--on-tanne) !important; box-shadow: var(--schatten-etikett); }
.wh-btn-primary:hover { background: var(--wald); }
.wh-btn-secondary { background: transparent; color: var(--tanne) !important; border-color: var(--linie-stark); }
.wh-btn-secondary:hover { background: var(--tanne-soft); border-color: var(--tanne); }
.wh-btn-hell { background: var(--on-wald); color: var(--wald) !important; box-shadow: var(--schatten-etikett); }
.wh-btn-hell:hover { background: var(--papier); }
.wh-btn-umriss { background: transparent; color: var(--on-wald) !important; border-color: var(--on-wald-muted); }
.wh-btn-umriss:hover { border-color: var(--on-wald); background: var(--wald-tief); }

/* Icon */
.wh-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Holzleiste (Trenner) */
.wh-rule { display: flex; align-items: center; gap: var(--space-4); color: var(--holz); margin: var(--space-6) 0; }
.wh-rule::before, .wh-rule::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--holz-hell); border-bottom: 1px solid var(--holz-hell); padding-top: 3px; }
.wh-rule.wh-on-wald { color: var(--saison-on-wald); }
.wh-rule.wh-on-wald::before, .wh-rule.wh-on-wald::after { border-color: var(--tanne-hell); }

/* Header */
.wh-header { background: var(--leinen) var(--wh-papierkorn); border-bottom: 1px solid var(--linie); box-shadow: 0 3px 0 -2px var(--linie); }
.wh-header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); max-width: 1120px; margin: 0 auto; }
.wh-brand { text-decoration: none !important; color: var(--tanne) !important; line-height: 1.1; }
.wh-brand strong { display: block; font: 700 28px/30px var(--font-serif); }
.wh-nav { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.wh-nav a:not(.wh-btn) { display: block; padding: 8px 12px; color: var(--ink) !important; text-decoration: none !important; font: 500 17px/22px var(--font-sans); }
.wh-nav a:not(.wh-btn):hover { color: var(--tanne) !important; box-shadow: inset 0 -1px 0 var(--holz-hell); }
.wh-nav a[aria-current="page"] { color: var(--tanne) !important; box-shadow: inset 0 -2px 0 var(--tanne); }

/* Hero */
.wh-hero { color: var(--on-wald); }
.wh-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: center; padding: 72px var(--space-5) 80px; max-width: 1120px; margin: 0 auto; }
.wh-kicker { display: flex; align-items: center; gap: var(--space-3); font: italic 500 19px/26px var(--font-serif); color: var(--saison-on-wald); margin-bottom: var(--space-4); }
.wh-kicker::before { content: ""; width: 32px; border-top: 1px solid currentColor; }
.wh-hero h1 { font: 600 64px/66px var(--font-serif); letter-spacing: -.01em; margin: 0 0 var(--space-4); color: var(--on-wald); }
.wh-hero .wh-lead { font: 400 21px/32px var(--font-sans); color: var(--on-wald-muted); max-width: 46ch; margin: 0; }
.wh-hero-date { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid var(--tanne-hell); border-radius: var(--radius-md); background: rgba(255,255,255,.05); max-width: 100%; }
.wh-hero-date .wh-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--saison-on-wald); }
.wh-hero-date b { font: 500 40px/44px var(--font-serif); color: var(--saison-on-wald); }
.wh-hero-date span { color: var(--on-wald-muted); font-size: 16px; line-height: 21px; }
.wh-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.wh-hero figure { margin: 0; background: var(--papier) var(--wh-papierkorn); padding: 10px; border-radius: 0; box-shadow: var(--schatten-buehne); }
.wh-hero figure img { display: block; width: 100%; height: auto; outline: 1px solid var(--holz-hell); outline-offset: 4px; }

/* Hero-Bild der Jahreszeit: nur das Foto der automatisch gewählten Saison ist sichtbar */
.wh-saison-bild { display: none; }
[data-saison="fruehling"] .wh-saison-bild.wh-fruehling,
[data-saison="sommer"] .wh-saison-bild.wh-sommer,
[data-saison="herbst"] .wh-saison-bild.wh-herbst,
[data-saison="winter"] .wh-saison-bild.wh-winter { display: block; }

/* Section head */
.wh-head { max-width: 640px; margin-bottom: var(--space-6); }
.wh-eyebrow { display: flex; align-items: center; gap: var(--space-3); font: italic 500 19px/24px var(--font-serif); color: var(--holz); margin-bottom: var(--space-2); }
.wh-eyebrow::before { content: ""; width: 28px; border-top: 1px solid currentColor; }
.wh-head h2 { font: 600 38px/44px var(--font-serif); color: var(--tanne); margin: 0; }
.wh-head p { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 19px; line-height: 30px; }

/* Step card – Etikett mit Doppelrahmen */
.wh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.wh-step { background: var(--papier) var(--wh-papierkorn); border: 1px solid var(--linie-stark); border-radius: var(--radius-md); padding: var(--space-6); outline: 1px solid var(--linie); outline-offset: -7px; }
.wh-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.wh-step-ic { width: 48px; height: 48px; border-radius: 0; border: 1px solid var(--tanne); color: var(--tanne); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px var(--linie); }
.wh-step-nr { font: 500 48px/48px var(--font-serif); color: var(--holz); }
.wh-step h3 { font: 600 26px/32px var(--font-serif); color: var(--tanne); margin: 0 0 var(--space-2); }
.wh-step p { margin: 0; }

/* Hours ticket – Holzschild */
.wh-ticket { display: grid; grid-template-columns: 1.2fr 1fr; color: var(--on-wald); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.wh-ticket::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--tanne-hell); border-radius: 0; pointer-events: none; }
.wh-ticket-main { padding: 40px; }
.wh-ticket-side { padding: 40px var(--space-6); background: var(--wald-tief); border-left: 2px dashed var(--tanne-hell); }
.wh-flag { display: inline-block; background: var(--etikett); color: var(--on-etikett); box-shadow: var(--schatten-etikett); font: 400 17px/20px var(--font-marker); padding: 5px 12px 3px; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.wh-ticket h2 { font: 600 38px/44px var(--font-serif); color: var(--on-wald); margin: 0 0 var(--space-4); }
.wh-times { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); align-items: baseline; margin: 0; }
.wh-times dt { color: var(--saison-on-wald); font: italic 500 19px/28px var(--font-serif); }
.wh-times dd { margin: 0; font: 500 34px/40px var(--font-serif); font-variant-numeric: lining-nums tabular-nums; }
.wh-ticket-side p { margin: 0 0 var(--space-2); color: var(--on-wald-muted); }
.wh-ticket-side strong { color: var(--on-wald); }
.wh-dates { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.wh-dates li { border: 1px solid var(--tanne-hell); border-radius: var(--radius-sm); padding: 2px 8px; font: 500 15px/22px var(--font-sans); color: var(--on-wald); }
.wh-dates li.wh-sa { border-color: var(--saison-on-wald); color: var(--saison-on-wald); }

/* Photo frame – Album mit Fotoecken */
.wh-photo { margin: 0; background: var(--papier) var(--wh-papierkorn); padding: 14px 14px 10px; border-radius: 0; box-shadow: var(--schatten-papier); max-width: 440px; position: relative; }
.wh-photo.wh-tilt { transform: rotate(1.2deg); }
.wh-photo-bild { position: relative; }
.wh-photo img { display: block; width: 100%; height: auto; }
.wh-photo-bild::before, .wh-photo-bild::after, .wh-photo-ecken::before, .wh-photo-ecken::after { content: ""; position: absolute; width: 26px; height: 26px; background: var(--holz-hell); }
.wh-photo-bild::before { left: -5px; top: -5px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wh-photo-bild::after { right: -5px; top: -5px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wh-photo-ecken::before { left: -5px; bottom: -5px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.wh-photo-ecken::after { right: -5px; bottom: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.wh-photo-ecken { position: absolute; inset: 0; pointer-events: none; }
.wh-photo figcaption { font: italic 17px/24px var(--font-serif); text-align: center; padding-top: var(--space-3); color: var(--holz); }

/* Pull quote */
.wh-quote { margin: 0; font: italic 400 27px/37px var(--font-serif); color: var(--tanne); max-width: 34ch; text-wrap: balance; }
.wh-quote cite { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font: 500 15px/20px var(--font-sans); font-style: normal; color: var(--holz); }
.wh-quote cite::before { content: ""; width: 28px; border-top: 1px solid currentColor; }
.wh-dark .wh-quote, .wh-quote.wh-on-wald { color: var(--on-wald); }
.wh-quote.wh-on-wald cite { color: var(--saison-on-wald); }

/* FAQ */
.wh-faq { border-top: 1px solid var(--linie-stark); padding: var(--space-4) 0; max-width: 68ch; }
.wh-faq:last-child { border-bottom: 1px solid var(--linie-stark); }
.wh-faq summary { cursor: pointer; font: 600 23px/30px var(--font-serif); color: var(--tanne); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.wh-faq summary::-webkit-details-marker { display: none; }
.wh-faq summary::after { content: "+"; font: 400 30px/30px var(--font-serif); color: var(--holz); }
.wh-faq[open] summary::after { content: "–"; }
.wh-faq p { margin: var(--space-2) 0 0; }

/* Contact band */
.wh-band { color: var(--on-wald); padding: 72px 0; border-top: 4px double var(--tanne-hell); }
.wh-band-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: end; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
.wh-band h2 { font: 600 38px/44px var(--font-serif); color: var(--on-wald); margin: 0 0 var(--space-4); }
.wh-band .wh-phone { display: inline-block; font: 600 46px/50px var(--font-serif); font-variant-numeric: lining-nums; color: var(--saison-on-wald) !important; text-decoration: none !important; }
.wh-band .wh-phone:hover { color: var(--on-wald) !important; }
.wh-band address { font-style: normal; color: var(--on-wald-muted); font-size: 19px; line-height: 29px; }

/* Footer */
.wh-footer { background-color: var(--wald-tief); background-image: var(--wh-maserung); background-size: 600px 240px; color: var(--on-wald-muted); padding: 48px 0 24px; }
.wh-footer-cols { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: var(--space-6); max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
.wh-footer address { font-style: normal; }
.wh-footer strong { color: var(--on-wald); font: 700 22px/28px var(--font-serif); }
.wh-footer a { color: var(--on-wald) !important; }
.wh-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.wh-footer-q { font: italic 21px/30px var(--font-serif); color: var(--on-wald); text-wrap: balance; }
.wh-footer-small { max-width: 1120px; margin: var(--space-6) auto 0; padding: var(--space-4) var(--space-5) 0; border-top: 1px solid var(--tanne-hell); font-size: 15px; line-height: 21px; }

@media (max-width: 880px) {
  .wh-hero-in, .wh-band-in, .wh-ticket, .wh-footer-cols { grid-template-columns: 1fr; }
  .wh-hero-in { padding: 48px var(--space-4) 56px; gap: var(--space-6); }
  .wh-hero h1 { font-size: 42px; line-height: 46px; }
  .wh-steps { grid-template-columns: 1fr; }
  .wh-ticket-side { border-left: 0; border-top: 2px dashed var(--tanne-hell); }
  .wh-ticket-main, .wh-ticket-side { padding: var(--space-6) var(--space-5); }
  .wh-head h2, .wh-band h2, .wh-ticket h2 { font-size: 30px; line-height: 36px; }
  .wh-band .wh-phone { font-size: 34px; line-height: 40px; }
  .wh-times dd { font-size: 26px; line-height: 32px; }
  .wh-wrap, .wh-band-in, .wh-footer-cols { padding: 0 var(--space-4); }
  .wh-footer-small { padding: var(--space-4) var(--space-4) 0; }
  .wh-header-bar { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .wh-header-bar > nav { width: 100%; }
  .wh-nav { gap: 4px var(--space-4); justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wh-nav a:not(.wh-btn) { padding: 6px 0; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .wh-btn { transition: none; } }
.wh h1, .wh h2, .wh h3 { text-wrap: balance; }
.wh-hero h1 { text-wrap: pretty; }
.wh-step-nr, .wh-hero-date b, .wh-band .wh-phone { font-variant-numeric: lining-nums tabular-nums; }