/* Speth-Wilhelmshof – Seitenlayout.
   Komponenten kommen aus bundle.css, Farben/Schrift/Abstände aus tokens.css.
   Hier steht nur, was das Design System der Seite selbst überlässt:
   Abschnittsabstände, Hof-Abschnitt, Rechtstexte. */

img { max-width: 100%; height: auto; }
body { margin: 0; }
main { display: block; }

/* Sprunglink für Tastatur und Screenreader */
.wh-skip { position: absolute; left: var(--space-4); top: -60px; z-index: 10; background: var(--tanne); color: var(--on-tanne) !important; padding: 10px 16px; font: 700 16px/20px var(--font-sans); }
.wh-skip:focus { top: var(--space-2); }

/* Ablauf-Icons (statt Inline-Style, damit eine strenge CSP möglich ist) */
.wh .wh-icon-26 { width: 26px; height: 26px; }

/* Abschnitte: leinen und leinen-tief im Wechsel */
.wh-section { padding: var(--space-8) 0; }
.wh-section-tief { background: var(--leinen-tief) var(--wh-papierkorn); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.wh-section .wh-head { margin-bottom: var(--space-6); }
.wh-faqs { margin-top: var(--space-5); }

/* Der Hof: Text links, Fotos rechts */
.wh-hof { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.wh-hof-text p { margin: 0 0 var(--space-4); max-width: var(--breite-text); }
.wh-hof-text .wh-head { margin-bottom: var(--space-4); }
.wh-aquarell { display: block; width: 100%; max-width: 520px; height: auto; margin: var(--space-5) 0 var(--space-3); mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 64%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 64%, transparent 100%); }
.wh-hof-bilder { display: grid; gap: var(--space-6); }
.wh-hof-bilder .wh-photo { max-width: none; }
.wh-hof-bilder .wh-photo + .wh-photo { width: 88%; margin-left: auto; }

.wh-ticket-side .wh-flag { margin: var(--space-5) 0 0; font-size: 20px; line-height: 24px; padding: 7px 14px 5px; }

/* Kontakt-Band: E-Mail-Verknüpfung auf dunklem Grund */
.wh-band address a { color: var(--on-wald) !important; }
.wh-band address a:hover { color: var(--saison-on-wald) !important; }
.wh-band address strong { color: var(--on-wald); font-weight: 700; }
.wh-band .wh-actions { margin-top: var(--space-4); }

/* Rechtsseiten (Platzhalter) */
.wh-legal { max-width: var(--breite-text); }
.wh-legal h1 { font: 600 48px/52px var(--font-serif); color: var(--tanne); margin: 0 0 var(--space-5); }
.wh-legal h2 { font: 600 26px/32px var(--font-serif); color: var(--tanne); margin: var(--space-7) 0 var(--space-2); }
.wh-legal p { margin: 0 0 var(--space-4); }
.wh-legal address { font-style: normal; margin: 0 0 var(--space-4); }
.wh-platzhalter { background: var(--fehler-soft); color: var(--fehler); border: 1px solid var(--fehler); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); font-weight: 500; }
.wh-platzhalter b { font-weight: 700; margin-right: var(--space-1); }
.wh-zurueck { margin-top: var(--space-7); }

@media (min-width: 881px) { .wh-footer-cols { grid-template-columns: 1.2fr 1fr; } }
@media (max-width: 880px) {
  .wh-section { padding: var(--space-7) 0; }
  .wh-hof { grid-template-columns: 1fr; gap: var(--space-6); }
  .wh-legal h1 { font-size: 36px; line-height: 40px; }
}

/* Alle Kastanien-Bilder gleich groß: kein Versatz beim Umschalten der Jahreszeit */
.wh-saison-bild img { aspect-ratio: 1280 / 853; width: 100%; height: auto; object-fit: cover; }