/* Folgeseiten: Kopfbild, Sprungleiste, Abschnitte (Essen & Bar, Meeting, Aufenthalt, Thun, Velo & SUP): Zusatzteil aus dem Entwurf, 1:1. */
/* Folgeseiten: Kopfbild, Sprungleiste, Abschnitte mit Bild im Wechsel */
.ohne-hero main{padding-top:69px}
.seiten-kopf{position:relative;isolation:isolate;min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end;color:var(--weiss);overflow:hidden}
.seiten-kopf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.seiten-kopf::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.3) 35%,rgba(0,0,0,.75) 100%),linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 70%)}
/* Lesbarkeit auf hellen Kopfbildern (Pre-Launch D1): Schatten unter dem Text; mobil deckt der Text fast das ganze Bild, darum dort gleichmässig dunkler */
.seiten-kopf :is(.kicker,h1,.lead){text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35)}
@media (max-width:860px){.seiten-kopf::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.5) 50%,rgba(0,0,0,.8) 100%)}}
.seiten-kopf .innen{width:100%;padding-bottom:calc(clamp(36px,5vw,64px) + 104px)}
.seiten-kopf .kicker{color:var(--weiss)}
.seiten-kopf h1{font-size:clamp(40px,6vw,84px)}
.seiten-kopf .lead{margin-top:18px;max-width:30em;color:rgba(255,255,255,.92)}
/* Sprungleiste wie das Untermenü der Zimmerseiten (Typestar OCR 18 px, Pfeilzeichen, aktueller Punkt farbig), auf diesen Seiten in Orange.
   Liegt 40 px über dem unteren Bildrand, bleibt beim Scrollen unter der Navigation stehen und zeigt dann einen dunkel abgedeckten Streifen des Kopfbilds.
   Passen nicht alle Punkte in die Zeile, lässt sie sich seitlich schieben: Pfeile links und rechts, ausgeblendete Ränder. */
.sprung{position:sticky;top:68px;z-index:15;margin:-104px 0 40px;height:64px;color:var(--weiss)}
.sprung::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:linear-gradient(rgba(27,32,35,.8),rgba(27,32,35,.8)),var(--kopfbild) center 62%/cover;transition:opacity .25s ease}
.sprung.klebt::before{opacity:1}
.sprung-rahmen{display:flex;align-items:center;height:100%}
.sprung-zeichen{flex:none;width:29px;height:32px;margin-right:30px;background:var(--orange);-webkit-mask:url("../img/bestand/css/icon-submenu.svg") center/contain no-repeat;mask:url("../img/bestand/css/icon-submenu.svg") center/contain no-repeat}
.sprung ul{position:relative;flex:1;min-width:0;list-style:none;display:flex;align-items:center;gap:0 46px;height:100%;font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:18px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;white-space:nowrap;
  --l:0px;--r:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--l),#000 calc(100% - var(--r)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--l),#000 calc(100% - var(--r)),transparent 100%)}
.sprung.mehr-links ul{--l:48px}
.sprung.mehr-rechts ul{--r:48px}
.sprung ul::-webkit-scrollbar{display:none}
/* Pre-Launch D8: Luft nach dem letzten Punkt (er klebte am Rand), Weiter-Pfeil in Orange, damit er als Hinweis auffällt */
.sprung ul::after{content:"";flex:none;width:1px}
.sprung .sprung-blaettern--rechts{color:var(--orange)}
.sprung a{color:var(--weiss);text-decoration:none;text-shadow:1px 1px 5px rgba(0,0,0,.45);transition:color .15s}
.sprung a:hover,.sprung a[aria-current="true"]{color:var(--orange)}
.sprung-blaettern{flex:none;width:36px;height:36px;border:0;background:none;color:var(--weiss);cursor:pointer;display:grid;place-items:center;padding:0}
.sprung-blaettern[hidden]{display:none}
.sprung-blaettern::before{content:"";width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;rotate:45deg;translate:-2px 0}
.sprung-blaettern--links::before{rotate:-135deg;translate:2px 0}
.sprung-blaettern:hover{color:var(--orange)}
.folge{padding:clamp(56px,7vw,112px) 0;scroll-margin-top:132px}
@media (max-width:860px){.sprung-zeichen{display:none}.sprung ul{font-size:16px;gap:0 32px}.sprung.mehr-links ul{--l:28px}.sprung.mehr-rechts ul{--r:28px}}
@media (prefers-reduced-motion:reduce){.sprung::before,.sprung a{transition:none}.sprung ul{scroll-behavior:auto}}
.folge:nth-of-type(even){background:var(--kalk)}
.folge-raster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center}
.folge--rechts .folge-raster>figure{order:-1}
.folge--ohne .folge-raster{grid-template-columns:minmax(0,1fr)}
/* Restaurant-Tipps: drei Spalten über die ganze Breite */
#restaurants .zeiten{max-width:none;border-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(24px,3vw,48px);margin-top:28px}
#restaurants .zeiten div{flex-direction:column;justify-content:flex-start;gap:8px;border-top:2px solid var(--schiefer);border-bottom:0;padding:16px 0 24px}
#restaurants .zeiten dd{text-align:left;white-space:normal}
.folge h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:24px}
.folge-text>*+*{margin-top:16px}
.folge-text p{max-width:36em}
.folge figure{margin:0}
.folge figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.folge .markiert[data-marke=""]::after{content:none}
.punkte{list-style:none;border-top:2px solid var(--schiefer);max-width:36em}
.punkte li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--linie)}
.punkte li::before{content:"";position:absolute;left:0;top:1.3em;width:14px;height:2px;background:var(--orange)}
.zeiten{border-top:2px solid var(--schiefer);max-width:36em}
.zeiten div{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--linie)}
.zeiten dt{font-weight:var(--fett);font-stretch:var(--breit-titel)}
.zeiten dd{margin:0;font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:16px;text-align:right;white-space:nowrap}
.folge-text a{text-decoration-color:var(--orange);text-underline-offset:3px}
.folge-text .folge-links{margin-top:28px}
.folge-text a.verweis{text-decoration:none}
.weiter{background:var(--schiefer-tief);color:var(--weiss);padding:clamp(56px,6vw,96px) 0}
.weiter .kicker{color:var(--weiss)}
.weiter h2{font-size:clamp(28px,3vw,40px);margin-bottom:32px}
.weiter-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.weiter-raster a{position:relative;display:block;text-decoration:none;color:var(--weiss)}
.weiter-raster img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .3s ease}
.weiter-raster a:hover img,.weiter-raster a:focus-visible img{filter:none}
.weiter-raster span,.weiter-raster figcaption{display:block;margin-top:12px;padding-left:12px;border-left:5px solid var(--orange);font-weight:var(--fett);font-stretch:var(--breit-titel);text-transform:uppercase;font-size:17px;letter-spacing:.04em}
.weiter-buchen{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.18)}
.weiter-buchen p{font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:15px;color:rgba(255,255,255,.85)}
@media (max-width:860px){.ohne-hero main{padding-top:68px}.folge-raster{grid-template-columns:1fr}.folge--rechts .folge-raster>figure{order:0}.weiter-raster{grid-template-columns:1fr 1fr}.zeiten div{flex-direction:column;gap:2px}.zeiten dd{text-align:left;white-space:normal}}
@media (prefers-reduced-motion:reduce){.weiter-raster img{transition:none}}

/* Patterns aus Core-Blöcken (patterns/*.php): Die Abschnitte tragen dieselben Klassen wie im Entwurf, das CSS oben greift.
   Hier steht nur, was Core-Blöcke anders ausgeben: figure um Bilder (WordPress setzt height:auto auf wp-image-*), Tabelle statt dl
   für Zeiten, Hülle um Knöpfe, Bildlegende als figcaption, Bild links als Block-Stil. */
.seiten-kopf>.wp-block-image,.hero>.wp-block-image{position:static;margin:0}
.seiten-kopf>.wp-block-image img,.hero>.wp-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seiten-kopf>.wp-block-image img{z-index:-2}
/* Folge: Bild links per Block-Stil, ohne Bild einspaltig */
.is-style-folge-bild-links .folge-raster>figure{order:-1}
.folge-raster:not(:has(>figure)){grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.is-style-folge-bild-links .folge-raster>figure{order:0}}
/* Markiertes Bild (Block-Stil, Rahmen aus .markiert in kern.css): Legende auf der unteren Ecklinie, rechts bei Bildern rechts */
.wp-block-image.is-style-markiert>figcaption{position:absolute;left:34px;top:calc(100% - 1px - .63em);margin:0;font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:13px;line-height:1.2;color:var(--schiefer);letter-spacing:.04em;text-align:left}
.wp-block-image.is-style-markiert:has(>figcaption){margin-bottom:24px}
.folge:not(.is-style-folge-bild-links) .wp-block-image.is-style-markiert>figcaption,.labor-raster .wp-block-image.is-style-markiert>figcaption{left:auto;right:34px}
.wp-block-image.labor-bild img{aspect-ratio:3/2;object-fit:cover;width:100%}
.labor-raster .konzept-knopf{margin-top:30px} /* Knopf steht in der Buttons-Hülle, deren Layout den Abstand sonst auf 0 setzt */
/* Zeiten als Tabelle (Block-Stile «Zeiten» und «Zeiten in Spalten»), Aussehen wie .zeiten */
.wp-block-table[class*="is-style-zeiten"]{margin:0;overflow:visible;border-top:2px solid var(--schiefer);max-width:36em}
.folge-text>*+.wp-block-table[class*="is-style-zeiten"]{margin-top:16px}
.wp-block-table[class*="is-style-zeiten"] table{display:block;width:auto;border-collapse:collapse}
.wp-block-table[class*="is-style-zeiten"] tbody{display:block}
.wp-block-table[class*="is-style-zeiten"] tr{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--linie)}
.wp-block-table[class*="is-style-zeiten"] td{border:0;padding:0}
.wp-block-table[class*="is-style-zeiten"] td:first-child{font-weight:var(--fett);font-stretch:var(--breit-titel)}
.wp-block-table[class*="is-style-zeiten"] td+td{font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:16px;text-align:right;white-space:nowrap}
@media (max-width:860px){.wp-block-table[class*="is-style-zeiten"] tr{flex-direction:column;gap:2px}.wp-block-table[class*="is-style-zeiten"] td+td{text-align:left;white-space:normal}}
.wp-block-table[class*="is-style-zeiten-spalten"][class]{max-width:none;border-top:0;margin-top:28px}
.wp-block-table[class*="is-style-zeiten-spalten"] tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(24px,3vw,48px)}
.wp-block-table[class*="is-style-zeiten-spalten"] tr{flex-direction:column;justify-content:flex-start;gap:8px;border-top:2px solid var(--schiefer);border-bottom:0;padding:16px 0 24px}
.wp-block-table[class*="is-style-zeiten-spalten"] td+td{text-align:left;white-space:normal}
/* Weiter: Bild mit verlinkter Legende, die ganze Karte ist klickbar */
.weiter-raster>.wp-block-image{position:relative;margin:0}
.weiter-raster figcaption{margin-bottom:0}
.weiter-raster figcaption a{color:var(--weiss);text-decoration:none}
.weiter-raster figcaption a::after{content:"";position:absolute;inset:0}
.weiter-raster>.wp-block-image:hover img,.weiter-raster>.wp-block-image:focus-within img{filter:none}
/* Knöpfe (Block-Stile «Knopf», «Knopf orange», Aussehen aus .knopf in kern.css): Rundung und Schatten der Core-Knöpfe weg */
.wp-block-button[class*="is-style-knopf"]>.wp-block-button__link{width:auto;border-radius:0;box-shadow:none;line-height:inherit;word-break:normal}
.paar .wp-block-buttons{margin-top:34px}
.angebot .wp-block-buttons{margin-top:28px}
/* Bildband als Bildblock */
.wp-block-image.bildband{margin:0}
.wp-block-image.bildband img{width:100%;height:clamp(360px,42vw,720px);object-fit:cover;object-position:50% 50%}
.wp-block-image.bildband--trenner img{height:clamp(240px,34vw,600px);object-position:50% 58%}
.weiter-raster figcaption a{position:static;display:inline}
/* Fehlerseite (templates/404.html, patterns/fehlerseite.php): dunkler Kopf wie die Postkarten-Übersicht, zwei Wege weiter */
.fehlerseite{min-height:clamp(420px,62vh,660px);display:flex;align-items:center}
.fehlerseite .wp-block-buttons{display:flex;flex-wrap:wrap;gap:20px 56px;margin-top:40px}
/* Pre-Launch D12: Datumsfelder der Buchung (Startseite und Bestandsseiten). iOS Safari zeichnet type=date mit eigener
   Mindestbreite, zentriertem Wert und eigener Höhe; das sprengte die Zweierspalte. Gleiche Höhe und linksbündig wie die übrigen Felder. */
.feld input[type="date"]{-webkit-appearance:none;appearance:none;display:block;min-width:0;min-height:44px;text-align:left}
.feld input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
main.bestand .zb.klebt .feld input[type="date"]{min-height:38px}
/* Pre-Launch D9, Kachel «Ihr Aufenthalt»: empfang.jpg ist bewusst mit geringer Schärfentiefe fotografiert, scharf ist nur das Logo
   am rechten Rand. Der 4:3-Zuschnitt aus der Mitte zeigte nur den unscharfen Teil; Ausschnitt nach rechts zum Logo. */
.weiter-raster img[src*="/empfang"]{object-position:88% 50%}
/* Startseite Labor: auf dem Handy steht das Teambild über Text und Konzept-Knopf, damit das aufklappende Konzept direkt unter dem Knopf folgt (Max 02.11.2026) */
@media (max-width:860px){.labor-raster>.labor-bild{order:-1}}
/* Galerie «Überblenden (Ecken)»: Ecken wie «Markiert» (kern.css), tlh.js legt die Bilder übereinander und blendet alle 5 s zum nächsten.
   Ohne Skript und im Editor bleibt das normale Galerie-Raster. Knopf unten rechts hält den Wechsel an (WCAG 2.2.2). */
.wp-block-gallery.has-nested-images.is-style-ueberblenden[data-blende]{display:grid;gap:0;position:relative}
.wp-block-gallery.has-nested-images.is-style-ueberblenden[data-blende]>figure.wp-block-image{grid-area:1/1;width:100%!important;max-width:none;margin:0!important;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.wp-block-gallery.has-nested-images.is-style-ueberblenden[data-blende]>figure.wp-block-image.aktiv{opacity:1;pointer-events:auto}
.wp-block-gallery.is-style-ueberblenden[data-blende] img{width:100%;aspect-ratio:3/2;object-fit:cover}
.wp-block-gallery.is-style-ueberblenden .blende-pause{position:absolute;right:20px;bottom:20px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(27,38,39,.65);color:#fff;font:600 12px/1 var(--ocr);cursor:pointer;display:grid;place-items:center}
.wp-block-gallery.is-style-ueberblenden .blende-pause:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.wp-block-gallery.has-nested-images.is-style-ueberblenden[data-blende]>figure.wp-block-image{transition:none}}