/* Pension Mitterhofer – seitenabhängige Ergänzungen (13.11.2026) Ausgelagert aus /pages/index.php. Regeln für einzelne Seiten sind mit :where(.pm-sNN) auf die Seiten-ID begrenzt (Klasse am -Element, z. B. pm-s9 = Zimmer); :where() verändert die Gewichtung der Regeln nicht. */ /* ===== Nur Seite(n) 2, 23 (vorher Template-Zeile 395) ===== */ /* Titelvideo Startseite (11.11.2026) */ @media screen and (max-width: 900px){ :where(.pm-s2) .slideshow_head{ aspect-ratio:auto !important; height:62vh; height:62svh; } } /* Video am Handy höher (11.11.2026) */ @media screen and (max-width: 600px){ :where(.pm-s2) .slideshow_head{ aspect-ratio:4/3 !important; height:auto; } } /* Handy 4:3: weniger seitlich abgeschnitten (vorher 62svh, dann 1:1) (11.11.2026) */ :where(.pm-s2,.pm-s23) .header_video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:2; pointer-events:none; background:url(/images/pension-mitterhofer-hero-start.jpg) center/cover no-repeat, #3a2c27 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAALAAtAAD//gARTGF2YzU4LjEzNC4xMDAA/9sAQwAIDAwODA4QEBAQEBATEhMUFBQTExMTFBQUFRUVGRkZFRUVFBQVFRgYGRkbHBsaGhkaHBweHh4kJCIiKiorMzM+/8QAdQAAAgMBAAAAAAAAAAAAAAAAAgMAAQUEAQADAAMBAAAAAAAAAAAAAAAFAgEAAwYEEAABAgQEAwgDAQAAAAAAAAABEQAhMQIDUXGxQTLh8IHB0aGRYhJhIkIEExEBAAMAAwEAAAAAAAAAAAAAAAECERNCIQT/wAARCAAWACgDASIAAhEAAxEA/9oADAMBAAIRAxEAPwDJ0HUIO4ADAQRFcJUrLGHWzRdrNNqqobBdfJkHGx677duhQbhNAyOfc+UmkklIGTyf5L9658qaqqqqCJFfxPterI4Zcmld2de36OGK0im72F8cJT83UfcyXPf6dr96eD2hpZSE15o5shSM8k7GBmOv2bMMu5w6gJgQxZAbuU8VeRZjh7fFxklUxKYrq3f5ZejTRx+ur7nSS//Z) center/cover no-repeat; } /* erstes Videobild scharf als Hintergrund (vorab geladen, unabhängig vom Poster-Verhalten von Safari); darunter winzige Vorschau, falls das Bild noch lädt */ /* 12.11.2026: Regel "prefers-reduced-motion -> display:none" entfernt. Bei "Bewegung reduzieren" bleibt das Video ohne Quelle und zeigt das Startbild (vorher leere Fläche). */ :where(.pm-s2,.pm-s23) .eintrag img.bild{ aspect-ratio:830/635; } /* Startseite (13.11.2026): Einleitung zentriert, Kacheln zweispaltig versetzt mit Hochformatbild, Kreis „Details anzeigen“ im Bild, Titel und Text darunter (Vorbild seeleiten.it) */ :where(.pm-s2,.pm-s23) .main > .text{ text-align:center; } :where(.pm-s2,.pm-s23) .main > .text p{ max-width:800px; margin-left:auto; margin-right:auto; } :where(.pm-s2,.pm-s23) .modul{ display:grid; grid-template-columns:1fr 1fr; gap:70px 46px; max-width:900px; margin:20px auto 0; padding:0 0 40px; box-sizing:border-box; } @media screen and (min-width: 1371px){ :where(.pm-s2,.pm-s23) .modul{ max-width:1200px; gap:80px 60px; } } :where(.pm-s2,.pm-s23) .modul .eintrag{ position:relative; display:block; margin:0; padding:0; background:none; width:auto; float:none; } :where(.pm-s2,.pm-s23) .modul .eintrag:nth-child(even){ margin-top:56px; } :where(.pm-s2,.pm-s23) .modul .eintrag img.bild{ display:block; float:none; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; } :where(.pm-s2,.pm-s23) .modul .eintrag .txt{ float:none; width:auto; margin:26px 0 0; padding:0; text-align:left; } :where(.pm-s2,.pm-s23) .modul .eintrag .txt h2{ margin:0 0 12px; padding:0; text-align:left; color:#9B2D34; font-weight:300; font-size:clamp(20px, 2.19vw, 31.5px); line-height:1.225; text-transform:none; background:none; } :where(.pm-s2,.pm-s23) .modul .eintrag .beschreibung, :where(.pm-s2,.pm-s23) .modul .eintrag .beschreibung p{ margin:0; padding:0; text-align:left; color:#7c6d6b; font-size:clamp(17px, 1.376vw, 20px); line-height:1.5; } :where(.pm-s2,.pm-s23) .modul .eintrag .beschreibung p + p{ margin-top:10px; } :where(.pm-s2,.pm-s23) .modul .eintrag .txt h2 a{ color:inherit; font:inherit; text-decoration:none; transition:color .3s; } :where(.pm-s2,.pm-s23) .modul .eintrag .txt h2 a:hover, :where(.pm-s2,.pm-s23) .modul .eintrag .txt h2 a:focus-visible{ color:#C24B4B; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; } :where(.pm-s2,.pm-s23) .modul .eintrag .beschreibung p:first-child:not(:only-child){ color:#9B2D34; font-weight:500; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link{ position:absolute; top:0; left:0; right:0; aspect-ratio:4/5; margin:0; padding:0; display:block; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a{ position:absolute; top:0; right:0; bottom:0; left:0; display:block; margin:0; padding:0; min-height:0; overflow:hidden; font-size:0; line-height:0; color:#fff; text-decoration:none; background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 34%); } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a::before{ content:""; position:absolute; left:50%; bottom:-92px; width:184px; height:184px; margin-left:-92px; border:1px solid rgba(255,255,255,.85); border-radius:50%; box-sizing:border-box; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a::after{ content:"Mehr\A Informationen"; white-space:pre; position:absolute; left:0; right:0; bottom:20px; text-align:center; font-size:11px; line-height:16px; letter-spacing:.22em; text-transform:uppercase; color:#fff; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a:hover::before, :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a:focus-visible::before{ transform:scale(1.12); background-color:rgba(255,255,255,.14); } /* Effekte wie seeleiten.it (13.11.2026) */ :where(.pm-s2,.pm-s23) .center.clearfix{ overflow-x:clip; } :where(.pm-s2,.pm-s23) .modul .eintrag.pm-fx{ opacity:0; } :where(.pm-s2,.pm-s23) .modul .eintrag .pm-eimg{ overflow:hidden; } :where(.pm-s2,.pm-s23) .modul .eintrag .pm-eimg img.bild{ transition:transform 1s, opacity 1s, filter 1s; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a::before{ transition:opacity 1s, transform .5s ease, background-color .5s ease; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a::after{ transition:opacity 1s, letter-spacing .5s; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a{ transition:background-color 1s; } @media screen and (min-width: 1025px) and (hover: hover){ :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a{ background:none; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a::before, :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a::after{ opacity:0; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a:hover::before, :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a:hover::after, :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a:focus-visible::before, :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a:focus-visible::after{ opacity:1; } :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link a:hover::after{ letter-spacing:.3em; } :where(.pm-s2,.pm-s23) .modul .eintrag:has(.eintrag_link a:hover) .pm-eimg img.bild{ transform:scale(1.05); } /* ohne Weichzeichner (Wunsch 13.11.2026) */ } @media screen and (max-width: 900px){ :where(.pm-s2,.pm-s23) .modul{ max-width:650px; width:95%; gap:54px 26px; } :where(.pm-s2,.pm-s23) .modul .eintrag:nth-child(even){ margin-top:40px; } } @media screen and (max-width: 600px){ :where(.pm-s2,.pm-s23) .modul{ grid-template-columns:1fr; gap:46px; } :where(.pm-s2,.pm-s23) .modul .eintrag:nth-child(even){ margin-top:0; } :where(.pm-s2,.pm-s23) .modul .eintrag img.bild, :where(.pm-s2,.pm-s23) .modul .eintrag .eintrag_link{ aspect-ratio:5/4; } } /* Hinweis auf das Video in voller Länge, unten rechts im Titelvideo (12.11.2026) */ :where(.pm-s2,.pm-s23) .pm-vlink{ position:absolute; right:30px; bottom:26px; z-index:3; display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 13px; border:1px solid rgba(255,255,255,.85); border-radius:4px; background:rgba(45,36,33,.5); color:#fff !important; font-size:14px; line-height:18px; letter-spacing:.06em; text-decoration:none !important; text-shadow:0 1px 3px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background-color .25s; } :where(.pm-s2,.pm-s23) .pm-vlink:hover,:where(.pm-s2,.pm-s23) .pm-vlink:focus-visible{ background:rgba(45,36,33,.68); } :where(.pm-s2,.pm-s23) .pm-vlink svg{ width:16px; height:16px; flex:none; } @media screen and (max-width: 900px){:where(.pm-s2,.pm-s23) .pm-vlink{ right:14px; bottom:14px; gap:8px; padding:7px 12px 7px 10px; font-size:12px; letter-spacing:.04em; }} /* ===== Nur Seite(n) 9 (vorher Template-Zeile 448) ===== */ /* Seitenkopf wie almwellness.com (13.11.2026): links kleine Zeile und große Überschrift, rechts der Text; darunter Filterzeile und Karten */ :where(.pm-s9) .main{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:start; margin:60px auto 0; box-sizing:border-box; } :where(.pm-s9) .main::before, :where(.pm-s9) .main::after{ display:none; } :where(.pm-s9) .main > *{ grid-column:1 / -1; } :where(.pm-s9) body .main > h1{ grid-column:1; grid-row:1; } :where(.pm-s9) body .main > h2{ grid-column:1; grid-row:2; font-size:clamp(28px, 3vw, 40px); } :where(.pm-s9) body .main > .text{ grid-column:2; grid-row:1 / span 3; } :where(.pm-s9) .pm-zinfo{ margin:70px 0 30px; padding:54px 0 0; border-top:1px solid #E0BFA6; text-align:left; } :where(.pm-s9) .pm-zinfo h3{ margin:0 0 30px; padding:0; font-size:clamp(26px, 2.6vw, 34px); font-weight:300; line-height:1.2; color:#9B2D34; text-align:left; } :where(.pm-s9) .pm-zinfo-g{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px 50px; } :where(.pm-s9) .pm-zinfo h4{ margin:0 0 10px; padding:0; font-family:"DM Sans",Arial,sans-serif; font-size:14px; font-weight:500; line-height:20px; letter-spacing:.12em; text-transform:uppercase; color:#9B2D34; } :where(.pm-s9) .pm-zinfo p{ margin:0; font-size:clamp(17px, 1.376vw, 20px); line-height:1.5; color:#7c6d6b; } @media screen and (max-width: 900px){ :where(.pm-s9) .pm-zinfo-g{ grid-template-columns:minmax(0,1fr); } :where(.pm-s9) .pm-zinfo{ margin-top:50px; padding-top:40px; } } :where(.pm-s9) .pm-zfilter{ display:flex; flex-wrap:wrap; justify-content:center; } :where(.pm-s9) .pm-zfilter button{ -webkit-appearance:none; appearance:none; margin:0; padding:4px 0; border:0; border-bottom:1.5px solid transparent; border-radius:0; background:none; font:inherit; text-transform:uppercase; color:#a8958d; cursor:pointer; transition:color .25s, border-color .25s; } :where(.pm-s9) .pm-zfilter button:hover{ color:#9B2D34; } :where(.pm-s9) .pm-zfilter button.on{ color:#9B2D34; border-bottom-color:#9B2D34; } @media screen and (max-width: 900px){ :where(.pm-s9) .main{ grid-template-columns:minmax(0,1fr); width:95%; } :where(.pm-s9) body .main > h1, :where(.pm-s9) body .main > h2, :where(.pm-s9) body .main > .text{ grid-column:1; grid-row:auto; } :where(.pm-s9) .pm-zfilter{ margin-top:50px; } :where(.pm-s9) .main > .modul{ width:100%; } } /* Zimmer als Karten, zweispaltig (13.11.2026) */ :where(.pm-s9) body .main > .modul{ width:100%; max-width:none; margin-left:0; margin-right:0; } :where(.pm-s9) .modul{ display:grid; grid-template-columns:1fr 1fr; gap:64px 46px; align-items:start; max-width:900px; margin:30px auto 0; padding:0 0 40px; box-sizing:border-box; } @media screen and (min-width: 1371px){ :where(.pm-s9) .modul{ max-width:1200px; gap:72px 60px; } } :where(.pm-s9) .modul .zimmer{ display:flex; flex-direction:column; min-width:0; margin:0; padding:0; background:none; } :where(.pm-s9) .modul .zimmer .zimmer_beschreibung{ display:contents; } :where(.pm-s9) .modul .zimmer .zimmer_beschreibung::before, :where(.pm-s9) .modul .zimmer .zimmer_beschreibung::after{ display:none; } :where(.pm-s9) .modul .zimmer .bildergalerie{ order:1; position:relative; float:none; width:100%; max-width:none; overflow:hidden; } :where(.pm-s9) .modul .zimmer .bildergalerie .cycle-slideshow{ float:none; width:100%; } :where(.pm-s9) .modul .zimmer .bildergalerie .cycle-slideshow img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; } :where(.pm-s9) .pm-zcards .modul .zimmer .bildergalerie .external{ display:none; } :where(.pm-s9) .pm-zarr{ position:absolute; top:50%; z-index:300; display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-top:-21px; border-radius:50%; background:rgba(255,255,255,.85); color:#9B2D34 !important; transition:background-color .25s; } :where(.pm-s9) .pm-zarr:hover, :where(.pm-s9) .pm-zarr:focus-visible{ background:#fff; } :where(.pm-s9) .pm-zarr svg{ width:18px; height:18px; } :where(.pm-s9) .pm-zprev{ left:12px; } :where(.pm-s9) .pm-zprev svg{ transform:rotate(180deg); } :where(.pm-s9) .pm-znext{ right:12px; } :where(.pm-s9) .pm-zmeta{ order:2; color:#86706a; white-space:pre-wrap; } :where(.pm-s9) .modul .zimmer .zimmer_head{ order:3; margin:0; padding:0; background:none; } :where(.pm-s9) .modul .zimmer .zimmer_head h2{ display:block; margin:0; padding:0; color:#9B2D34; font-size:30px; text-align:left; text-transform:none; } :where(.pm-s9) .pm-zact{ order:4; display:flex; flex-wrap:wrap; align-items:center; margin:16px 0 0; } :where(.pm-s9) .pm-zact .btn_zimmer{ float:none; display:inline-block; margin:0; border:1px solid #9B2D34; border-radius:999px; background:none; color:#9B2D34 !important; text-transform:uppercase; text-decoration:none !important; transition:background-color .25s, color .25s; } :where(.pm-s9) .pm-zact .btn_zimmer:hover, :where(.pm-s9) .pm-zact .btn_zimmer:focus-visible{ background:#9B2D34; color:#fff !important; } :where(.pm-s9) .pm-zmore-btn{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:10px; margin:0; border:0; background:none; font:inherit; text-transform:uppercase; cursor:pointer; } :where(.pm-s9) .pm-zmore-btn::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .25s; } :where(.pm-s9) .zimmer.pm-open .pm-zmore-btn::after{ transform:rotate(45deg) translate(-2px,-2px); } :where(.pm-s9) .pm-zmore{ order:5; display:none; } :where(.pm-s9) .zimmer.pm-open .pm-zmore{ display:block; } :where(.pm-s9) .modul .zimmer .zimmer_beschreibung_text{ order:5; float:none; width:auto; margin:0; padding:0; font-size:17px; line-height:1.6; } :where(.pm-s9) .modul .zimmer .zimmer_hinweis{ font-size:14px; line-height:1.5; margin:12px 0 0; } :where(.pm-s9) .modul .zimmer{ box-shadow:none; } :where(.pm-s9) .pm-zmore table{ background:none !important; width:100% !important; max-width:100%; min-width:0; table-layout:fixed; margin:18px 0 0; border-collapse:collapse; box-sizing:border-box; font-family:inherit; font-size:15px; } :where(.pm-s9) .pm-zmore table td, :where(.pm-s9) .pm-zmore table th{ padding:9px 6px; border:0; border-bottom:1px solid #E0BFA6; background:none !important; color:#7c6d6b; font-family:inherit; font-size:15px; line-height:22px; text-align:left; vertical-align:top; } :where(.pm-s9) .pm-zmore table th{ color:#9B2D34; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; } :where(.pm-s9) .pm-zmore table .preise_datum{ width:42% !important; padding-right:12px; border-right:0; } :where(.pm-s9) .pm-zmore table td.preise_datum br{ display:none; } :where(.pm-s9) .pm-zmore table .zimmer_preis{ display:block; float:none; width:auto; min-width:0; margin:0; padding:0; white-space:normal; text-align:left; } :where(.pm-s9) .pm-zmore table .zimmer_preis b{ font-weight:400; } @media screen and (max-width: 900px){ :where(.pm-s9) .modul{ max-width:650px; width:95%; gap:52px 26px; } :where(.pm-s9) .modul .zimmer .zimmer_head h2{ font-size:27px; } } @media screen and (max-width: 700px){ :where(.pm-s9) .modul{ grid-template-columns:1fr; gap:48px; } } /* ===== Nur Seite(n) 3 (vorher Template-Zeile 516) ===== */ /* Preise als aufklappbare Liste, Infos darunter (13.11.2026) */ :where(.pm-s3) .pm-acc{ max-width:900px; margin:34px auto 10px; padding:0 16px; box-sizing:border-box; } :where(.pm-s3) .pm-acc-i{ border-top:1px solid #a8958d; } :where(.pm-s3) .pm-acc-i:last-child{ border-bottom:1px solid #a8958d; } :where(.pm-s3) .pm-acc-i summary{ position:relative; display:block; padding:16px 48px 16px 4px; cursor:pointer; list-style:none; } :where(.pm-s3) .pm-acc-i summary::-webkit-details-marker{ display:none; } :where(.pm-s3) .pm-acc-i summary::after{ content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:28px; font-weight:300; line-height:1; color:#9B2D34; } :where(.pm-s3) .pm-acc-i[open] summary::after{ content:"–"; } :where(.pm-s3) .pm-acc-t{ display:block; font-family:"Grenze",Georgia,serif; font-size:25px; font-weight:400; line-height:1.25; letter-spacing:normal; color:#9B2D34; } :where(.pm-s3) .pm-acc-s{ display:block; margin-top:2px; font-size:14px; line-height:20px; color:#86706a; } :where(.pm-s3) .pm-acc-b{ padding:0 4px 18px; } :where(.pm-s3) .pm-acc-b table{ width:100%; border-collapse:collapse; font-size:16px; line-height:24px; color:#7c6d6b; } :where(.pm-s3) .pm-acc-b th, :where(.pm-s3) .pm-acc-b td{ padding:10px 0; border-top:1px solid #ecd5c2; text-align:left; vertical-align:top; font-weight:400; } :where(.pm-s3) .pm-acc-b th{ width:46%; padding-right:16px; } :where(.pm-s3) .pm-acc-b th strong{ display:block; color:#9B2D34; font-weight:500; } :where(.pm-s3) .pm-acc-b th br{ display:none; } :where(.pm-s3) .pm-acc-b td{ text-align:right; } :where(.pm-s3) .main > .text{ max-width:900px; margin-left:auto; margin-right:auto; box-sizing:border-box; } :where(.pm-s3) .main > .text.pm-gz{ margin-top:90px; padding:0 16px; text-align:left; } :where(.pm-s3) .pm-gz .pm-gz-h{ margin:0; padding:0; text-align:left; font-size:clamp(30px, 3.4vw, 42px); font-weight:400; line-height:1.15; color:#9B2D34; } :where(.pm-s3) .pm-gz .pm-gz-s{ margin:6px 0 44px; font-family:"Grenze",Georgia,serif; font-size:22px; letter-spacing:normal; } :where(.pm-s3) .pm-gz-i{ margin:0 0 34px; } :where(.pm-s3) .pm-gz-i h3{ margin:0 0 8px; padding:0; text-align:left; font-family:"DM Sans",Arial,sans-serif; font-size:19px; font-weight:700; line-height:1.3; letter-spacing:.02em; color:#9B2D34; } :where(.pm-s3) .pm-gz-i p{ margin:0 0 6px; } :where(.pm-s3) .pm-gz-i ul{ padding:0; list-style:none; } :where(.pm-s3) .pm-gz-i li{ position:relative; margin:0; padding:3px 0 3px 22px; list-style:none !important; background:none; } :where(.pm-s3) .pm-gz-i li::before{ content:""; position:absolute; left:2px; top:.85em; width:6px; height:6px; border-radius:50%; background:#C24B4B; } :where(.pm-s3) .pm-gz-o{ margin:50px 0 0; font-weight:700; color:#9B2D34; } @media screen and (max-width: 600px){ :where(.pm-s3) .pm-acc-t{ font-size:22px; } :where(.pm-s3) .pm-acc-b table{ font-size:15px; } :where(.pm-s3) .pm-acc-b th{ width:44%; } } /* ===== Nur Seite(n) 4 (vorher Template-Zeile 549) ===== */ /* Anfrage in Abschnitten, Felder in zwei Spalten mit Beschriftung darüber (13.11.2026) */ :where(.pm-s4) .main form#Anfrageformular.pm-form2{ max-width:900px; margin-left:auto; margin-right:auto; margin-top:34px; } :where(.pm-s4) #Anfrageformular.pm-form2 fieldset{ display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; min-width:0; margin:0 0 22px; padding:26px 30px 24px; border:0; background:#E0BFA6; } :where(.pm-s4) #Anfrageformular.pm-form2 legend{ float:left; grid-column:1 / -1; width:100%; margin:0 0 4px; padding:0; font-family:"Grenze",Georgia,serif; font-size:24px; font-weight:400; line-height:1.25; letter-spacing:.03em; text-transform:uppercase; color:#9B2D34; } :where(.pm-s4) #Anfrageformular.pm-form2 fieldset > br, :where(.pm-s4) #Anfrageformular.pm-form2 fieldset > hr, :where(.pm-s4) #Anfrageformular.pm-form2 .trennung{ display:none; } :where(.pm-s4) #Anfrageformular.pm-form2 fieldset > span, :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-wide, :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-check{ grid-column:1 / -1; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f{ display:flex; flex-direction:column; min-width:0; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f label{ display:block; width:auto; margin:0 0 5px; font-size:14px; line-height:20px; color:#86706a; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f input[type="text"], :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f select, :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f textarea{ width:100% !important; margin:0; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-date{ position:relative; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-date input[type="text"]{ padding-right:44px !important; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-date .ui-datepicker-trigger{ position:absolute; left:auto; right:13px; top:38px; margin:0; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-date ul, :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f ul{ flex:0 0 100%; } :where(.pm-s4) #Anfrageformular.pm-form2 .field_art{ display:flex; flex-wrap:wrap; gap:10px 34px; } :where(.pm-s4) #Anfrageformular.pm-form2 .field_art legend{ flex:0 0 100%; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-radio{ display:inline-flex; align-items:center; gap:10px; width:auto; margin:0; line-height:24px; cursor:pointer; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-radio input{ width:18px; height:18px; margin:0; accent-color:#C24B4B; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-zrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-zrow a{ flex:1 1 auto; margin:0; line-height:24px; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-zrow select{ flex:none; margin:0; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-check{ display:flex; align-items:flex-start; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-check input{ flex:none; } :where(.pm-s4) #Anfrageformular.pm-form2 .pm-f-check label{ width:auto; margin:0; } :where(.pm-s4) #Anfrageformular.pm-form2 #Submit{ display:block; margin:8px auto 0; } /* Aufbau wie hotel-lisetta.it/anfragen (13.11.2026) */ :where(.pm-s4) body .main > h1{ box-sizing:border-box; font-size:15px; } :where(.pm-s4) .pm-fh{ max-width:900px; margin:22px auto 0; padding:0; box-sizing:border-box; text-align:left; font-family:"Grenze",Georgia,serif; font-size:clamp(30px, 4.4vw, 45px); font-weight:300; line-height:1.15; letter-spacing:normal; color:#9B2D34; } :where(.pm-s4) .main form#Anfrageformular.pm-form3{ margin-top:44px; } :where(.pm-s4) #Anfrageformular.pm-form3 fieldset{ background:#E0BFA6; padding:24px 22px 26px; gap:14px 14px; } :where(.pm-s4) #Anfrageformular.pm-form3 legend{ display:flex; align-items:center; gap:12px; margin:0 0 8px; font-family:"DM Sans",Arial,sans-serif; font-size:21px; font-weight:500; letter-spacing:.04em; color:#3d3330; } :where(.pm-s4) #Anfrageformular.pm-form3 legend svg{ flex:none; width:28px; height:28px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-f label, :where(.pm-s4) #Anfrageformular.pm-form3 .pm-sub{ display:block; margin:0 0 5px; font-size:14px; line-height:20px; color:#3d3330; } :where(.pm-s4) #Anfrageformular.pm-form3 input[type="text"], :where(.pm-s4) #Anfrageformular.pm-form3 select, :where(.pm-s4) #Anfrageformular.pm-form3 textarea{ border:0 !important; border-radius:0; background-color:#fff; } :where(.pm-s4) #Anfrageformular.pm-form3 input[type="text"], :where(.pm-s4) #Anfrageformular.pm-form3 select{ height:38px !important; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-f-date .ui-datepicker-trigger{ top:36px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-art{ margin-top:6px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-art-r{ display:flex; flex-wrap:wrap; gap:8px 30px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-art .pm-radio{ display:inline-flex; align-items:center; gap:9px; width:auto; margin:0; font-size:16px; line-height:24px; color:#3d3330; cursor:pointer; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-art .pm-radio input{ flex:none; width:18px; height:18px; margin:0; vertical-align:middle; } :where(.pm-s4) #Anfrageformular.pm-form3 .field_zimmer{ gap:20px 0; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-guests{ padding-right:30px; border-right:2px solid #fbf4ec; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-rooms{ padding-left:30px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-sub{ margin-bottom:12px; font-weight:500; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-step2{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-step2-l{ font-size:16px; color:#3d3330; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-step2-c{ display:inline-flex; align-items:center; gap:10px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-step2 button{ -webkit-appearance:none; appearance:none; width:38px; height:38px; margin:0; padding:0; border:1px solid #3d3330; border-radius:50%; background:#fff; color:#3d3330; font:inherit; font-size:20px; line-height:1; cursor:pointer; transition:background-color .2s, color .2s; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-step2 button:hover:not(:disabled){ background:#9B2D34; border-color:#9B2D34; color:#fff; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-step2 button:disabled{ opacity:.3; cursor:default; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-step2 output{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #3d3330; background:#fff; font-size:17px; color:#3d3330; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-ages2{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:14px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-zrow{ margin:0 0 10px; padding:0 0 0 12px; background:#fff; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-zrow a, :where(.pm-s4) #Anfrageformular.pm-form3 .pm-zrow .pm-zname{ flex:1 1 auto; margin:0; width:auto; line-height:38px; color:#3d3330 !important; font-size:16px; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-zrow select{ min-width:74px; } :where(.pm-s4) #Anfrageformular.pm-form3 #Submit{ display:block; height:46px; margin:0 0 0 auto; padding:0 26px; border-radius:0; background:#C24B4B; font-size:14px; } :where(.pm-s4) #Anfrageformular.pm-form3 #Submit:hover, :where(.pm-s4) #Anfrageformular.pm-form3 #Submit:focus-visible{ background:#9B2D34; } @media screen and (max-width: 960px){ :where(.pm-s4) body .main > h1, :where(.pm-s4) .pm-fh{ margin-left:20px; margin-right:20px; } :where(.pm-s4) .main form#Anfrageformular.pm-form3{ margin-left:20px; margin-right:20px; } } @media screen and (max-width: 480px){ :where(.pm-s4) body .main > h1, :where(.pm-s4) .pm-fh, :where(.pm-s4) .main form#Anfrageformular.pm-form3{ margin-left:12px; margin-right:12px; } } @media screen and (max-width: 700px){ :where(.pm-s4) #Anfrageformular.pm-form3 .pm-guests{ padding-right:0; border-right:0; } :where(.pm-s4) #Anfrageformular.pm-form3 .pm-rooms{ padding-left:0; } :where(.pm-s4) #Anfrageformular.pm-form3 #Submit{ width:100%; } } @media screen and (max-width: 700px){ :where(.pm-s4) #Anfrageformular.pm-form2 fieldset{ grid-template-columns:1fr; padding:22px 18px 20px; } :where(.pm-s4) #Anfrageformular.pm-form2 legend{ font-size:21px; } } /* ===== Nur Seite(n) 8 (vorher Template-Zeile 620) ===== */ /* Anfahrt: Umschalter „Sie reisen an mit“ unter der Karte (13.11.2026) */ :where(.pm-s8) .main > .text{ max-width:900px; margin-left:auto; margin-right:auto; box-sizing:border-box; } @media screen and (max-width: 960px){ :where(.pm-s8) .main > .text{ padding-left:20px; padding-right:20px; } } :where(.pm-s8) .pm-anr-intro{ margin:0 0 40px; text-align:center; } :where(.pm-s8) .pm-anr-band{ margin:0 0 44px; padding:38px 0 34px; background:#C24B4B; box-shadow:0 0 0 100vmax #C24B4B; clip-path:inset(0 -100vmax); color:#fff; text-align:left; } :where(.pm-s8) .pm-anr-band h3{ margin:0 0 16px !important; font-size:28px !important; font-weight:300; color:#fff !important; } :where(.pm-s8) .pm-anr-band ul, :where(.pm-s8) .pm-anr-links{ margin:0; padding:0; list-style:none; } :where(.pm-s8) .pm-anr-band li, :where(.pm-s8) .pm-anr-links li{ position:relative; margin:0; padding:5px 0 5px 30px; list-style:none !important; background:none; } :where(.pm-s8) .pm-anr-band li::before, :where(.pm-s8) .pm-anr-links li::before{ content:""; position:absolute; left:4px; top:.85em; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); } :where(.pm-s8) .pm-anr-adr{ margin:36px 0 0; text-align:left; } :where(.pm-s8) .pm-anr-links{ margin:14px 0 0; color:#86706a; } :where(.pm-s8) .pm-anr-links a{ color:#86706a !important; text-decoration:underline; text-underline-offset:3px; } :where(.pm-s8) .pm-anr-links a:hover{ color:#9B2D34 !important; } :where(.pm-s8) .pm-anr{ margin:44px 0 0; text-align:left; } :where(.pm-s8) .pm-anr .pm-anr-h{ margin:0 0 16px !important; font-size:30px !important; font-weight:300; color:#9B2D34 !important; } :where(.pm-s8) .pm-anr-tabs{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 26px; } :where(.pm-s8) .pm-anr-tabs button{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:10px; margin:0; padding:6px 0; border:0; background:none; font:inherit; font-size:17px; line-height:24px; color:#86706a; cursor:pointer; } :where(.pm-s8) .pm-anr-tabs button span{ position:relative; flex:none; width:20px; height:20px; border-radius:50%; background:#E0BFA6; transition:background-color .25s; } :where(.pm-s8) .pm-anr-tabs button span::after{ content:""; position:absolute; left:7px; top:4px; width:4px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); } :where(.pm-s8) .pm-anr-tabs button[aria-selected="true"]{ color:#9B2D34; font-weight:500; } :where(.pm-s8) .pm-anr-tabs button[aria-selected="true"] span{ background:#9B2D34; } :where(.pm-s8) .pm-anr-pan h4{ margin:0 0 10px; font-size:24px; font-weight:400; color:#9B2D34; } :where(.pm-s8) .pm-anr-pan[hidden]{ display:none; } /* ===== Nur Seite(n) 9 (vorher Template-Zeile 647) ===== */ /* Zimmer näher am Vorbild almwellness.com (13.11.2026): Kopf und Karten im selben zweispaltigen Raster, engerer Spaltenabstand, größere Namen, größere Meta- und Knopfschrift, leicht gerundete Bilder */ :where(.pm-s9) .main{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:30px; max-width:900px; } @media screen and (min-width: 1200px){ :where(.pm-s9) .main{ max-width:1140px; } } @media screen and (min-width: 1371px){ :where(.pm-s9) .main{ max-width:1200px; column-gap:30px; } } :where(.pm-s9) body .main > h1{ font-size:16px; margin-bottom:14px; } :where(.pm-s9) body .main > h2{ font-size:clamp(30px, 2.6vw, 38px); padding-right:30px; } :where(.pm-s9) body .main > .text{ font-size:clamp(17px, 1.37vw, 20px); line-height:1.5; } :where(.pm-s9) .pm-zfilter{ gap:8px 48px; margin:96px 0 34px; } :where(.pm-s9) .pm-zfilter button{ font-size:16px; line-height:24px; letter-spacing:.1em; } :where(.pm-s9) body .main > .modul{ gap:74px 30px; margin-top:0; } :where(.pm-s9) .modul .zimmer .bildergalerie{ border-radius:5px; } :where(.pm-s9) .pm-zmeta{ margin:28px 0 6px; font-size:16px; line-height:24px; letter-spacing:.1em; } :where(.pm-s9) .modul .zimmer .zimmer_head h2{ font-size:clamp(28px, 2.6vw, 37px); font-weight:500; line-height:1.1; } :where(.pm-s9) .pm-zact{ margin-top:22px; gap:14px 16px; } :where(.pm-s9) .pm-zact .btn_zimmer{ padding:10px 22px; font-size:16px; line-height:24px; letter-spacing:.1em; } :where(.pm-s9) .pm-zmore-btn{ padding:10px 0; font-size:16px; line-height:24px; letter-spacing:.1em; color:#3d3330; } @media screen and (max-width: 900px){ :where(.pm-s9) .main{ grid-template-columns:minmax(0,1fr); max-width:650px; } :where(.pm-s9) body .main > h2{ padding-right:0; } :where(.pm-s9) .pm-zfilter{ gap:6px 26px; margin:56px 0 26px; } :where(.pm-s9) body .main > .modul{ gap:52px 26px; } :where(.pm-s9) .pm-zfilter button, :where(.pm-s9) .pm-zact .btn_zimmer, :where(.pm-s9) .pm-zmore-btn, :where(.pm-s9) .pm-zmeta{ font-size:14px; letter-spacing:.08em; } } /* ===== Nur Seite(n) 9 (vorher Template-Zeile 668) ===== */ /* „Mehr dazu“ übersichtlicher (13.11.2026) */ :where(.pm-s9) .pm-zmore{ margin:22px 0 0; padding:24px 24px 22px; border-top:0; border-radius:5px; background:rgba(255,255,255,.6); } :where(.pm-s9) .pm-zmore .pm-zh{ margin:0 0 12px; padding:0; text-align:left; font-family:"DM Sans",Arial,sans-serif; font-size:13px; font-weight:500; line-height:18px; letter-spacing:.14em; text-transform:uppercase; color:#9B2D34; } :where(.pm-s9) .pm-zmore .pm-zlead{ margin:0 0 16px; font-size:16px; line-height:1.5; color:#5C1A22; } :where(.pm-s9) .pm-zlist{ margin:0 0 24px; padding:0; list-style:none; columns:2; column-gap:26px; } :where(.pm-s9) .pm-zlist li{ position:relative; margin:0; padding:3px 0 3px 18px; list-style:none !important; background:none; break-inside:avoid; font-size:15px; line-height:1.45; } :where(.pm-s9) .pm-zlist li::before{ content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:#C24B4B; } :where(.pm-s9) .pm-zmore table.pm-zpreise{ margin:0; } :where(.pm-s9) .pm-zmore table.pm-zpreise tr:nth-child(1), :where(.pm-s9) .pm-zmore table.pm-zpreise tr:nth-child(2){ display:none; } :where(.pm-s9) .pm-zmore table.pm-zpreise td{ padding:10px 0; border-bottom:0; border-top:1px solid #ecd5c2; } :where(.pm-s9) .pm-zmore table.pm-zpreise .preise_datum{ width:44% !important; color:#5C1A22; } :where(.pm-s9) .pm-zmore table.pm-zpreise .zimmer_preis{ text-align:right; } :where(.pm-s9) .pm-zmore table.pm-zpreise .zimmer_preis b{ color:#86706a; } :where(.pm-s9) .pm-zmore .zimmer_hinweis{ margin:16px 0 0; padding:14px 0 0; border-top:1px solid #ecd5c2; font-size:13px; line-height:1.5; font-style:italic; font-weight:400; color:#86706a; } @media screen and (max-width: 480px){ :where(.pm-s9) .pm-zmore{ padding:20px 16px 18px; } :where(.pm-s9) .pm-zlist{ columns:1; } } /* ===== Nur Seite(n) 23, 26, 27, 31 (vorher Template-Zeile 687) ===== */ /* Frühstück, Pool und Garten, Speis und Trank, Meran und Umgebung im Stil der Startseite (13.11.2026): Text mittig, Bilder zweispaltig versetzt im Hochformat */ :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .main > .text{ text-align:center; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .main > .text p, :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .main > .text h3, :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .main > .text h4{ max-width:800px; margin-left:auto; margin-right:auto; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .main > .text ul, :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .main > .text ol{ display:table; max-width:800px; margin-left:auto; margin-right:auto; text-align:left; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px 46px; max-width:900px; margin:30px auto 0; padding:0 0 60px; box-sizing:border-box; } @media screen and (min-width: 1371px){ :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid{ max-width:1200px; gap:80px 60px; } } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid a{ display:block; float:none; width:auto; margin:0; padding:0 !important; overflow:hidden; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid a:nth-child(even){ margin-top:56px; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform 1s; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid a:hover img{ transform:scale(1.05); } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .cycle-center.pm-gstag .cycle-nav, :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .cycle-center.pm-gstag .cycle-pager, :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .cycle-center.pm-gstag #prev, :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .cycle-center.pm-gstag #next{ display:none; } @media screen and (max-width: 900px){ :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid{ max-width:650px; width:95%; gap:54px 26px; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid a:nth-child(even){ margin-top:40px; } } @media screen and (max-width: 600px){ :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid{ grid-template-columns:1fr; gap:26px; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid a:nth-child(even){ margin-top:0; } :where(.pm-s23,.pm-s26,.pm-s27,.pm-s31) .pm-gstag .galerie_grid img{ aspect-ratio:5/4; } } /* ===== Nur Seite(n) 33 (vorher Template-Zeile 737) ===== */ /* Impressionen (13.11.2026): größere Bilder, größere Abstände, runde Ecken, Text mittig, auf großen Bildschirmen bis 1360 px breit */ :where(.pm-s33) .main > .text{ text-align:center; } :where(.pm-s33) .main > .text p{ max-width:800px; margin-left:auto; margin-right:auto; } @media screen and (min-width: 1371px){ :where(.pm-s33) body .center.clearfix{ overflow-x:visible; } :where(.pm-s33) body .main .cycle-center.galerie_raster{ position:relative; left:50%; transform:translateX(-50%); width:min(1360px, calc(100vw - 140px)); max-width:none; margin:0; } } /* Größen nur leicht unterschiedlich (Wunsch 13.11.2026): Reihen mit drei Bildern, in der Mitte eine Reihe mit vier etwas kleineren */ :where(.pm-s33) body .galerie_raster.galerie_4 .galerie_grid{ grid-template-columns:repeat(12,minmax(0,1fr)); margin:40px 0 0; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery{ position:relative; border-radius:5px; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery img{ position:absolute; top:0; left:0; width:100%; height:100%; aspect-ratio:auto; transition:transform 1s; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery:hover img{ transform:scale(1.05); } @media screen and (max-width: 700px){ :where(.pm-s33) body .galerie_raster.galerie_4 .galerie_grid{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:28px; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery:last-child:nth-child(odd){ grid-column:1 / -1; } } /* ===== Nur Seite(n) 31, 26, 23, 27, 32 (vorher Template-Zeile 756) ===== */ /* Speis und Trank, Frühstück, Meran und Umgebung: Text und passende Bilder abschnittsweise nebeneinander (13.11.2026) */ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-stw{ grid-column:1 / -1; max-width:1360px; margin:50px auto 0; padding:0 30px; box-sizing:border-box; } /* nutzt auf großen Bildschirmen bis 1360 px Breite (13.11.2026) */ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px clamp(44px, 6.5vw, 100px); align-items:center; margin:0 0 96px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-stw > .pm-st:last-child{ margin-bottom:0; } @media screen and (min-width: 1371px){ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) body .center.clearfix{ overflow-x:visible; } /* sonst schneidet der Seitenrahmen die breiteren Abschnitte links und rechts ab (13.11.2026) */ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-stw{ position:relative; left:50%; transform:translateX(-50%); width:min(1360px, calc(100vw - 140px)); max-width:none; margin-left:0; margin-right:0; padding:0; } } /* breiter als die Textspalte: nutzt große Bildschirme besser (13.11.2026) */ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-r .pm-st-img{ order:2; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-img a{ display:block; float:none; width:auto; margin:0; padding:0 !important; overflow:hidden; border-radius:5px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-img img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform 1s; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-img a:hover img{ transform:scale(1.05); } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-n1{ width:100%; max-width:620px; justify-self:center; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-n2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; max-width:620px; justify-self:center; padding-bottom:36px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-n2 img{ aspect-ratio:4/5; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-n2 a:nth-child(2){ transform:translateY(36px); } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-txt{ text-align:left; font-size:clamp(17px, 1.25vw, 18px); line-height:1.6; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-txt p{ max-width:none; margin:0 0 16px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-txt p:last-child{ margin-bottom:0; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-c{ grid-template-columns:minmax(0,1fr); max-width:760px; margin:0 auto; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st .pm-st-mod.modul{ display:block; width:100%; max-width:440px; margin:0 auto; padding:0; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-txt a{ color:#9B2D34; } /* Guest Pass */ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-logo{ width:100%; max-width:440px; justify-self:center; background:#fff; border-radius:5px; padding:34px; box-sizing:border-box; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-logo img{ aspect-ratio:auto; object-fit:contain; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-gp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin:0 0 96px; text-align:left; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-gp-i{ background:#E0BFA6; border-radius:5px; padding:30px 34px 32px; font-size:clamp(17px, 1.25vw, 18px); line-height:1.6; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-gp-h{ margin:0 0 12px; padding:0; max-width:none; font-family:"Grenze", serif; font-size:clamp(21px, 1.7vw, 25px); line-height:1.25; letter-spacing:normal; color:#5C1A22; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-gp-i ul{ display:block; margin:0; padding:0 0 0 20px; max-width:none; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-gp-i li{ margin:0 0 4px; } @media screen and (max-width: 900px){ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-gp{ grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:64px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-gp-i{ padding:24px 22px 26px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-logo{ max-width:340px; padding:24px; } } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-c .pm-st-txt{ text-align:center; } @media screen and (max-width: 900px){ :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-stw{ width:95%; max-width:650px; padding:0; margin-top:36px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st{ grid-template-columns:minmax(0,1fr); gap:28px; margin-bottom:64px; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-r .pm-st-img{ order:0; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-n1, :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-n2, :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st .pm-st-mod.modul{ max-width:none; } :where(.pm-s31,.pm-s26,.pm-s23,.pm-s27,.pm-s32) .pm-st-c{ margin-bottom:0; } } /* ===== Nur Seite(n) 30 (vorher Template-Zeile 796) ===== */ /* Geschichte: Bildgruppen und Text nebeneinander, abwechselnd (13.11.2026) */ :where(.pm-s30) .pm-gsec{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:40px 80px; align-items:start; max-width:1100px; margin:0 auto 80px; padding:0 30px; box-sizing:border-box; } :where(.pm-s30) .main > h2 + .pm-gsec{ margin-top:45px; } :where(.pm-s30) .pm-gsec:last-of-type{ margin-bottom:30px; } :where(.pm-s30) .pm-gsec.alt{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); } :where(.pm-s30) .pm-gsec.alt .pm-gimgs{ order:2; } :where(.pm-s30) .pm-gimgs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:420px; justify-self:center; position:sticky; top:120px; } :where(.pm-s30) .pm-gimgs a.gallery_content{ display:block; float:none; width:auto; margin:0; padding:0; overflow:hidden; } :where(.pm-s30) .pm-gimgs a.gallery_content img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; transition:transform 1s; } :where(.pm-s30) .pm-gimgs a.gallery_content:hover img{ transform:scale(1.05); } :where(.pm-s30) .pm-gv1 .pm-gimgs a:nth-child(even){ transform:translateY(36px); } :where(.pm-s30) .pm-gv1 .pm-gimgs{ padding-bottom:36px; } :where(.pm-s30) .pm-gv2 .pm-gimgs{ grid-template-columns:repeat(3, 1fr); } :where(.pm-s30) .pm-gv2 .pm-gimgs a:first-child{ grid-column:1 / -1; } :where(.pm-s30) .pm-gv2 .pm-gimgs a:first-child img{ aspect-ratio:16/10; } :where(.pm-s30) .pm-gv2 .pm-gimgs.pm-gn1, :where(.pm-s30) .pm-gv2 .pm-gimgs.pm-gn2{ grid-template-columns:1fr 1fr; } :where(.pm-s30) body .pm-gsec > .text{ max-width:none; margin:0; padding:0; text-align:left; font-size:clamp(17px, 1.376vw, 20px); line-height:1.5; } :where(.pm-s30) .pm-gsec > .text p.p2.pm-sp{ margin:0; height:.7em; line-height:.7em; overflow:hidden; } /* nur leere Abstands-Absätze; ein Absatz mit Text war dadurch abgeschnitten (13.11.2026) */ :where(.pm-s30) .pm-gsec > .text > p:first-child strong{ font-family:"Grenze",Georgia,serif; font-size:clamp(24px, 2.4vw, 32px) !important; font-weight:300; line-height:1.2; letter-spacing:normal; color:#9B2D34; } @media screen and (max-width: 900px){ :where(.pm-s30) .pm-gsec, :where(.pm-s30) .pm-gsec.alt{ grid-template-columns:minmax(0,1fr); width:95%; max-width:650px; margin-bottom:70px; padding:0; } :where(.pm-s30) .pm-gsec.alt .pm-gimgs{ order:0; } :where(.pm-s30) .pm-gimgs{ max-width:460px; position:static; } } /* ===== Nur Seite(n) 33 (vorher Template-Zeile 824) ===== */ /* Galerie-Raster Seite Impressionen (11.11.2026) */ :where(.pm-s33) .cycle-center.galerie_raster .cycle-nav{ display:none; } :where(.pm-s33) .galerie_raster .galerie_grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0 10px; } :where(.pm-s33) .galerie_raster .galerie_grid a.gallery{ display:block; padding:0 !important; overflow:hidden; } :where(.pm-s33) .galerie_raster .galerie_grid img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform .4s ease; } :where(.pm-s33) .galerie_raster .galerie_grid a.gallery:hover img{ transform:scale(1.04); } :where(.pm-s33) .galerie_raster.galerie_4 .galerie_grid{ grid-template-columns:repeat(4,1fr); } @media screen and (max-width: 700px){ :where(.pm-s33) .galerie_raster .galerie_grid, :where(.pm-s33) .galerie_raster.galerie_4 .galerie_grid{ grid-template-columns:repeat(2,1fr); gap:8px; } :where(.pm-s33) .galerie_raster .galerie_grid a.gallery:last-child:nth-child(odd){ grid-column:1 / -1; } } /* ===== Für alle Seiten, zuletzt geladen (vorher Template-Zeile 842) ===== */ body{ font-family:"DM Sans",Arial,Tahoma,Verdana,sans-serif; } body *{ letter-spacing:.02em; } h1,h2,h3,h4,h5,h6{ font-family:"Grenze",Georgia,"Times New Roman",serif; } h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 *{ letter-spacing:normal; } /* Titel, Unterzeile und Fließtext insgesamt kleiner (13.11.2026) */ /* Farben der Website (13.11.2026): #F2E3D4 ist die Hauptfarbe (Seitenhintergrund, Menüleiste), dann nach Wichtigkeit #E0BFA6 (Flächen, Anfrage-Leiste, Linien), #C24B4B (Knöpfe, Akzente), #9B2D34 (Überschriften), #5C1A22 (Menütext, kleine Beschriftungen) */ body{ color:#5f4c49; } .main h1, h1{ color:#9B2D34; } .main > h2{ color:#9B2D34; } .eintrag{ background-color:#E0BFA6; } .eintrag h2, .eintrag .beschreibung, .eintrag .beschreibung p, .eintrag_link a:link, .eintrag_link a:visited{ color:#5C1A22; } .infos_pre.pm-insta{ padding:54px 20px 56px; text-align:center; } .pm-insta a{ display:inline-flex; flex-direction:column; align-items:center; text-decoration:none !important; } .pm-insta svg{ width:44px; height:44px; color:#9B2D34; transition:transform .5s ease; } .pm-insta a:hover svg{ transform:scale(1.08) rotate(-4deg); } .pm-insta-k{ margin:16px 0 6px; font-size:13px; line-height:18px; letter-spacing:.2em; text-transform:uppercase; color:#9B2D34; } .pm-insta-t{ font-family:"Grenze",Georgia,serif; font-size:clamp(26px, 3vw, 36px); font-weight:300; line-height:1.2; letter-spacing:normal; color:#5C1A22; } .pm-insta-b{ margin-top:20px; padding:9px 24px; border:1px solid #9B2D34; border-radius:999px; font-size:14px; line-height:20px; letter-spacing:.08em; color:#9B2D34; transition:background-color .25s, color .25s; } .pm-insta a:hover .pm-insta-b, .pm-insta a:focus-visible .pm-insta-b{ background:#9B2D34; color:#fff; } .infos_pre a:link, .infos_pre a:visited, .infos_pre a:hover, .infos_pre a:active{ color:#5C1A22; } .infos ul a:hover, .infos ul a:active{ color:#C24B4B; } .nav_main_button{ background-color:rgba(92,26,34,.5); } .nav_main_button:hover{ background-color:rgba(92,26,34,.8); } .navigation_small{ background-color:#F2E3D4; } #pm-cc-deny, #pm-cc-all{ background:#C24B4B !important; border-color:#C24B4B !important; color:#fff !important; } #pm-cc-set{ border-color:#C24B4B !important; color:#9B2D34 !important; } .pm-qbar .pm-qbtn{ background:#C24B4B; } .pm-qbar .pm-qbtn:hover, .pm-qbar .pm-qbtn:focus-visible{ background:#9B2D34; } .pm-anr-band{ background:#E0BFA6 !important; box-shadow:0 0 0 100vmax #E0BFA6 !important; color:#5C1A22 !important; } .pm-anr-band h3{ color:#9B2D34 !important; } /* Menüleiste in der Hauptfarbe: dunkle Schrift und Symbole, sobald die Leiste deckend ist (über dem Kopfbild bleibt sie weiß) */ @media screen and (min-width: 901px){ .navigation.navigation_small::before, .navigation.pm-solid::before{ opacity:0; } .navigation.navigation_small .pm-desk > ul > li > a, .navigation.pm-solid .pm-desk > ul > li > a, .navigation.navigation_small .pm-desk li ul li a, .navigation.pm-solid .pm-desk li ul li a, .navigation.navigation_small .pm-desk .pm-ilabel, .navigation.pm-solid .pm-desk .pm-ilabel{ color:#5C1A22; text-shadow:none; } .navigation.navigation_small .pm-desk > ul > li:hover > a, .navigation.pm-solid .pm-desk > ul > li:hover > a, .navigation.navigation_small .pm-desk li ul li a:hover, .navigation.pm-solid .pm-desk li ul li a:hover, .navigation.navigation_small .pm-desk li ul li a.active, .navigation.pm-solid .pm-desk li ul li a.active, .navigation.navigation_small .pm-desk > ul > li.pm-icons > a.pm-on, .navigation.pm-solid .pm-desk > ul > li.pm-icons > a.pm-on{ color:#C24B4B; } .navigation .pm-desk > ul > li.pm-cta > a{ color:#fff !important; } } @media screen and (max-width: 900px){ .navigation .nav_main_button span, .navigation .nav_main_button span::before, .navigation .nav_main_button span::after{ background-color:#5C1A22; } } /* Logo wie bei seeleiten.it (13.11.2026): oben im Kopfbild groß und mittig unterhalb der Menüzeile, beim Scrollen klein in der Leiste */ @media screen and (min-width: 901px){ .navigation .pm-desk-logo{ transform-origin:50% 0; } .navigation.pm-navanim .pm-desk-logo{ transition:width .35s ease, margin-top .35s ease, transform .35s ease; } .navigation:not(.navigation_small):not(.pm-solid):not(.pm-logo-sm) .pm-desk-logo{ width:clamp(270px, 24vw, 360px); transform:translateY(20px); } /* 21:55: Oberkante bündig mit der Menüzeile (vorher 84 px tiefer); 22:00 etwa 10 % kleiner */ .navigation.pm-logo-sm:not(.navigation_small):not(.pm-solid) .pm-desk-logo{ width:180px; } /* sobald gescrollt wird oder das Kopfbild zu niedrig ist, wandert das Logo sofort klein in die Menüzeile – es liegt dann nie über dem Seiteninhalt */ } /* Einblenden beim Scrollen auf allen Seiten (13.11.2026) */ .center.clearfix{ overflow-x:clip; } /* 13.11.2026: Bewegung wie forestis.it – ruhiges Einblenden ohne Verschieben (1 s, weiche Kurve); vorher glitten die Blöcke seitlich herein */ .pm-rv.pm-fxl, .pm-rv.pm-fxr, .pm-rv.pm-fxu{ opacity:0; } /* Schriftgrößen wie seeleiten.it (13.11.2026): Titel 24 px, Fließtext 17 px mit Zeilenhöhe 1,5; auf großen Bildschirmen wächst beides leicht mit */ .main h1{ font-size:clamp(28px, 2.7vw, 38px); line-height:1.25; } .main > h2{ font-size:clamp(19px, 1.6vw, 23px); line-height:1.35; } .main > .text{ font-size:clamp(17px, 1.25vw, 18px); line-height:1.6; } @media screen and (max-width: 600px){ .main h1{ font-size:26px; } } /* 13.11.2026 abgestuft: Titel deutlich größer als Unterzeile, Fließtext 17–18 px */ /* Einheitliche Schriftgrößen auf allen Seiten nach dem Vorbild seeleiten.it (13.11.2026): Fließtext 17–22 px (1,34 vw, Zeilenhöhe 1,5), Titel und Abschnittstitel 22–35 px (2,15 vw, Zeilenhöhe 1,225), Unterzeile 19–24 px */ body .main > .text, body .main p, body .main li, body .pm-gsec > .text, body .modul .eintrag .beschreibung, body .modul .eintrag .beschreibung p, body .pm-zinfo p, body .pm-st-txt, body .pm-gp-i, body .pm-anr-adr{ font-size:clamp(17px, 1.34vw, 22px); line-height:1.5; } /* auch Formular, Preistabelle und die Angaben in den Zimmerkarten in derselben Schriftgröße (13.11.2026) */ body .main form#Anfrageformular, body .main form#Anfrageformular label, body .main form#Anfrageformular input, body .main form#Anfrageformular select, body .main form#Anfrageformular textarea, body .main form#Anfrageformular span, body .main form#Anfrageformular p, body .main form#Anfrageformular li, body .main form#Anfrageformular output, body .main form#Anfrageformular legend, body .pm-acc td, body .pm-acc th, body .pm-acc .pm-acc-s, body .pm-acc .pm-acc-b strong, body .modul .zimmer .pm-zmeta, body .modul .zimmer .pm-zmore-btn, body .modul .zimmer .btn_zimmer, body .pm-zfilter button, body .modul .zimmer .zimmer_beschreibung_text, body .modul .zimmer p, body .modul .zimmer li, body .modul .zimmer td, body .modul .zimmer th, body .modul .zimmer .zimmer_hinweis, body .pm-zinfo h4, body .pm-anr-tabs button{ font-size:clamp(17px, 1.34vw, 22px); } body .main form#Anfrageformular label:not(.pm-zname), body .main form#Anfrageformular p, body .main form#Anfrageformular li, body .main form#Anfrageformular .label_full, body .main form#Anfrageformular .pm-sub, body .pm-acc td, body .pm-acc th, body .pm-acc .pm-acc-s, body .modul .zimmer .pm-zmeta, body .modul .zimmer .zimmer_beschreibung_text, body .modul .zimmer p, body .modul .zimmer li, body .modul .zimmer td, body .modul .zimmer th, body .modul .zimmer .zimmer_hinweis, body .pm-zinfo h4{ line-height:1.4; } body .main p.pm-gp-h{ font-size:clamp(20px, 1.6vw, 26px); line-height:1.25; } body .main h1, body .main > p.pm-fh, body .modul .eintrag .txt h2, body .modul .zimmer .zimmer_head h2, body .pm-acc .pm-acc-t{ font-size:clamp(22px, 2.15vw, 35px); line-height:1.225; } :where(.pm-s9) body .main > h2{ font-size:clamp(22px, 2.15vw, 35px); } body .pm-gz .pm-gz-h, body .pm-zinfo h3, body .pm-gsec > .text > p:first-child strong, body .pm-anr-band h3, body .pm-anr .pm-anr-h{ font-size:clamp(22px, 2.15vw, 35px) !important; line-height:1.225; } :where(html:not(.pm-s9)) body .main > h2{ font-size:clamp(18px, 1.5vw, 24px); line-height:1.35; margin-top:12px; } /* Untertitel näher am Titel: 12 statt 30 px (13.11.2026) */ :where(html:not(.pm-s9)) body .main > h1{ font-size:clamp(26px, 2.3vw, 35px); } :where(.pm-s9,.pm-s4) body .main > h1{ font-size:15px; line-height:22px; } body .main > p.pm-fh{ font-weight:500; margin-top:16px; } /* Neue Seitenbreite (13.11.2026): Auf großen Bildschirmen nutzen alle Blöcke bis 1360 px statt 1200 px – Menüzeile, Inhalt, Kacheln, Zimmer, Bewertungen; schmalere Lesespalten wachsen im gleichen Verhältnis von 900 auf 1020 px */ @media screen and (min-width: 1371px){ body .center.clearfix, body .navigation .pm-desk, body .pm-reviews, body .main > .modul, body .main{ max-width:min(1360px, calc(100vw - 140px)); } body .main{ max-width:none; } body .main > .pm-gsec{ max-width:1250px; } body .pm-acc, body .main > .text.pm-gz, body .main form#Anfrageformular, body .main > p.pm-fh{ max-width:1020px !important; } :where(.pm-s4) body .main > h1, :where(.pm-s8,.pm-s3) body .main > .text{ max-width:1020px !important; } } /* ===== Rückmeldung 13.11.2026, 13:59 ===== */ /* Hintergrund heller (leichtes Beige); die bisherige Hauptfarbe #F2E3D4 bleibt als Abstufung für Menüzeile und Fußbereich */ body{ background-color:#FAF6EF; } .infos{ padding-bottom:40px; } /* Logos im Fußbereich ohne weißen Kasten */ /* „Anfragen“: Leiste und Formularflächen rötlicher statt orange */ .pm-qbar, #Anfrageformular.pm-form2 fieldset, #Anfrageformular.pm-form3 fieldset{ background:#E3B9AE; } /* Seitentitel in Groß- und Kleinbuchstaben, nicht fett, größer; Unterzeile dunkelgrau und größer */ :where(html:not(.pm-s9):not(.pm-s4)) body .main > h1{ text-transform:none; font-weight:400; font-size:clamp(30px, 3.1vw, 50px); line-height:1.15; letter-spacing:normal; } :where(html:not(.pm-s9):not(.pm-s4)) body .main > h2{ color:#4b4543; font-size:clamp(21px, 1.9vw, 30px); line-height:1.3; margin-top:14px; } /* Kacheln: Bild im Querformat, Texte mittig, Titel größer, „Mehr Informationen“ als Balken mit Kontur unter dem Text */ body .modul .eintrag:nth-child(even){ margin-top:0; } body .modul .eintrag img.bild{ aspect-ratio:3/2; } body .modul .eintrag .txt{ margin-top:24px; text-align:center; } body .modul .eintrag .txt h2{ text-align:center; font-size:clamp(28px, 2.7vw, 44px); font-weight:400; margin-bottom:12px; } body .modul .eintrag .beschreibung, body .modul .eintrag .beschreibung p{ text-align:center; } body .modul .eintrag .beschreibung a, body .modul .eintrag .beschreibung a *{ color:#9B2D34 !important; text-decoration:underline; text-underline-offset:3px; } body .modul .eintrag .eintrag_link{ position:static; aspect-ratio:auto !important; margin:22px 0 0; text-align:center; } body .modul .eintrag .eintrag_link a{ position:static; display:inline-block; padding:13px 30px; border:1px solid #9B2D34; background:none !important; color:#9B2D34; font-size:0; line-height:0; overflow:visible; transition:background-color .3s, color .3s; } body .modul .eintrag .eintrag_link a::before{ display:none; } body .modul .eintrag .eintrag_link a::after{ content:"Mehr Informationen"; position:static; opacity:1 !important; white-space:nowrap; color:#9B2D34 !important; font-size:13px; line-height:18px; letter-spacing:.18em !important; text-transform:uppercase; } body .modul .eintrag .eintrag_link a:hover, body .modul .eintrag .eintrag_link a:focus-visible{ background:#9B2D34 !important; color:#fff; } body .modul .eintrag .eintrag_link a:hover::after, body .modul .eintrag .eintrag_link a:focus-visible::after{ color:#fff !important; } body .infos > ul li.pm-wd{ color:#00040a; } body .modul .eintrag:has(img.bild:hover) .pm-eimg img.bild{ transform:scale(1.05); } /* Anfahrt: Balken als Fläche mit runden Ecken */ body .pm-anr-band{ box-shadow:none !important; clip-path:none; border-radius:10px; padding:38px 40px 34px; } /* Preisliste: Zimmernamen größer */ body .pm-acc .pm-acc-t{ font-size:clamp(26px, 2.6vw, 40px); } /* Anfrage: Zeile „Wann dürfen wir Sie begrüßen?“ entfernt */ body .main > p.pm-fh{ display:none; } /* Text-Bild-Abschnitte: Bildpaare kleiner und im Querformat; Bild und Text gleiten von links bzw. rechts herein */ body .pm-st-n1{ max-width:540px; } body .pm-st-n2{ max-width:580px; padding-bottom:24px; } body .pm-st-n2 img{ aspect-ratio:3/2; } body .pm-st-n2 a:nth-child(2){ transform:translateY(24px); } /* ruhigeres Hereingleiten (13.11.2026, 14:40): kürzerer Weg, weiches Auslaufen, eigene Ebene für die Grafikkarte */ .pm-st-img.pm-rv, .pm-st-txt.pm-rv{ transition:opacity .9s ease-out, transform 1.1s cubic-bezier(.22,.61,.36,1); will-change:transform, opacity; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translate3d(0,0,0); } .pm-st-img.pm-rv.pm-fxl, .pm-st-txt.pm-rv.pm-fxl{ transform:translate3d(-36px,0,0); } .pm-st-img.pm-rv.pm-fxr, .pm-st-txt.pm-rv.pm-fxr{ transform:translate3d(36px,0,0); } html{ overflow-x:clip; } /* Menüpunkte links und Symbole rechts weiter nach innen (13.11.2026, 15:43) */ @media screen and (min-width: 901px){ body .navigation .pm-desk{ padding-left:clamp(50px, 6vw, 110px); padding-right:clamp(50px, 6vw, 110px); } } /* Kein einzelnes Wort allein in der letzten Zeile (13.11.2026): Absätze umbrechen „schön“, Überschriften ausgeglichen */ p, li, .beschreibung, .pm-st-txt, label{ text-wrap:pretty; } h1, h2, h3, h4, .pm-fh, .pm-gp-h, .pm-insta-t{ text-wrap:balance; } /* ===== Rückmeldung Lisa, 13.11.2026 16:05 ===== */ /* kein Strich unter der Menüzeile */ .navigation, .navigation.navigation_small, .navigation.pm-solid{ box-shadow:none !important; } /* kein Schatten hinter dem Logo */ .navigation .pm-desk-logo, .navigation:not(.navigation_small):not(.pm-solid):not(.pm-logo-sm) .pm-desk-logo{ filter:none !important; } /* Startseite: Kacheln versetzt */ @media screen and (min-width: 601px){ :where(.pm-s2) body .modul .eintrag:nth-child(even){ margin-top:90px; } } /* „Mehr Informationen“ mit runden Ecken */ body .modul .eintrag .eintrag_link a{ border-radius:999px; } /* Titel und Unterzeile größer */ :where(html:not(.pm-s9):not(.pm-s4)) body .main > h1{ font-size:clamp(34px, 3.7vw, 58px); } :where(html:not(.pm-s9):not(.pm-s4)) body .main > h2{ font-size:clamp(23px, 2.2vw, 34px); } /* Fußbereich: Farben mit dem Instagram-Band getauscht; Titel nicht in Großbuchstaben, nicht fett, dunkelgrau */ .infos_pre, .infos_pre.pm-insta{ background-color:#F2E3D4; } .infos{ background-color:#E0BFA6; } .infos .box h2.pm-foot-h{ text-transform:none; font-weight:400; color:#3f3a39; font-family:"Grenze", Georgia, serif; font-size:clamp(28px, 2.2vw, 34px); line-height:1.3; margin-bottom:6px; } .footer_partner img{ mix-blend-mode:normal; } /* Anfrage-Leiste: keine Linie um die Felder, Text weiter nach rechts */ body .pm-qbar .pm-qf input, body .pm-qbar .pm-qf select{ border:0 !important; outline:0; box-shadow:none; } body .pm-qbar .pm-qf-d input{ padding-left:18px !important; } body .pm-qbar #pm-q-pers{ padding-left:46px !important; } /* keine runden Ecken an Fotos (Pool, Frühstück, Speis, Guest Pass, Impressionen) */ body .pm-st-img a, body .pm-st-g a, body .galerie_raster .galerie_grid a.gallery{ border-radius:0 !important; } /* Pool und Garten: je Abschnitt ein Bild, die übrigen drei als Reihe am Schluss */ :where(.pm-s27) .pm-st-g{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:0 0 20px; } :where(.pm-s27) .pm-st-g a{ display:block; float:none; width:auto; margin:0; padding:0 !important; overflow:hidden; } :where(.pm-s27) .pm-st-g img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform 1s; } :where(.pm-s27) .pm-st-g a:hover img{ transform:scale(1.05); } :where(.pm-s27) .pm-stw > .pm-st-g:last-child{ margin-bottom:0; } @media screen and (max-width: 600px){ :where(.pm-s27) .pm-st-g{ grid-template-columns:1fr 1fr; gap:10px; } :where(.pm-s27) .pm-st-g a:first-child{ grid-column:1 / -1; } } /* Impressionen als Mosaik: Reihen mit 2 und 3 Bildern im Wechsel, zum Schluss ein breites Bild */ :where(.pm-s33) body .galerie_raster.galerie_4 .galerie_grid{ grid-template-columns:repeat(12, minmax(0,1fr)); grid-auto-rows:clamp(170px, 19vw, 300px); gap:14px; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery, :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery:nth-child(n/**/+7):nth-child(-n/**/+10){ grid-column:span 4; aspect-ratio:auto; height:100%; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery.gallery:nth-child(5n/**/+1){ grid-column:span 7; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery.gallery:nth-child(5n/**/+2){ grid-column:span 5; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery.gallery:nth-child(10n/**/+6){ grid-column:span 5; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery.gallery:nth-child(10n/**/+7){ grid-column:span 7; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery.gallery:last-child:nth-child(5n/**/+1){ grid-column:1 / -1; } @media screen and (max-width: 700px){ :where(.pm-s33) body .galerie_raster.galerie_4 .galerie_grid{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:auto; gap:10px; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery, :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery.gallery.gallery:nth-child(n){ grid-column:auto; aspect-ratio:3/2; height:auto; } :where(.pm-s33) body .galerie_raster .galerie_grid a.gallery.gallery.gallery:nth-child(3n/**/+1){ grid-column:1 / -1; } } /* ===== Rückmeldung Lisa, 13.11.2026 16:13 ===== */ /* Preise & Info: „Gut zu wissen“ größer, Unterzeile grau */ :where(.pm-s3) body .pm-gz .pm-gz-h{ font-size:clamp(32px, 3.1vw, 48px) !important; } :where(.pm-s3) .pm-gz .pm-gz-s{ color:#4b4543; font-size:clamp(21px, 1.7vw, 26px); } :where(.pm-s3) .pm-gz-i ul{ margin:0; } /* Zimmer: Kopf wie auf den anderen Seiten (Titel und Unterzeile mittig, Text darunter) statt zweispaltig */ :where(.pm-s9) .main{ display:block; margin-top:35px; } :where(.pm-s9) body .main > h1{ max-width:760px; margin:0 auto; padding:0 16px; text-align:center; text-wrap:balance; font-family:"Grenze", Georgia, serif; font-size:clamp(34px, 3.7vw, 58px); font-weight:400; line-height:1.15; letter-spacing:normal; text-transform:none; color:#9B2D34; } :where(.pm-s9) body .main > h2{ max-width:none; margin:14px 0 0; padding:0 16px; text-align:center; text-wrap:balance; font-size:clamp(23px, 2.2vw, 34px); font-weight:400; line-height:1.3; color:#4b4543; } :where(.pm-s9) body .main > .text{ max-width:800px; margin:45px auto 0; padding:0 16px; text-align:center; } @media screen and (max-width: 900px){ :where(.pm-s9) .main{ margin-top:40px; } :where(.pm-s9) body .main > .text{ margin-top:30px; } } /* Zimmer: „Anfragen“ und „Mehr dazu“ kleiner als der Zimmername */ body .modul .zimmer .pm-zact .btn_zimmer, body .modul .zimmer .pm-zmore-btn{ font-size:14px; line-height:20px; letter-spacing:.12em; } body .modul .zimmer .pm-zact .btn_zimmer{ padding:9px 20px; } /* ===== Rückmeldung Lisa, 13.11.2026 17:08–17:13 ===== */ /* Immer nur ein Effekt (13.11.2026, 18:05): – Bild-Text-Abschnitte (Speis und Trank, Frühstück, Pool und Garten, Guest Pass): nur Hereingleiten des ganzen Abschnitts, ohne Einblenden – alle anderen Blöcke (Kacheln, Geschichte, Zimmer, Formular, Bewertungen …): nur Einblenden, ohne Bewegung */ .pm-rv{ transition:opacity 1.6s cubic-bezier(.25,.46,.45,.94); } .pm-rv.pm-fxu{ transform:none; } :where(.pm-s2,.pm-s23) .modul .eintrag{ transition:opacity 1.6s cubic-bezier(.25,.46,.45,.94); } :where(.pm-s2,.pm-s23) .modul .eintrag.pm-fx{ transform:none; } .pm-st.pm-rv:not(.pm-st-c):not(.pm-st-g), .pm-st.pm-rv.pm-fxl, .pm-st.pm-rv.pm-fxr{ opacity:1 !important; transition:transform 1.3s cubic-bezier(.25,.46,.45,.94); will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .pm-st.pm-rv.pm-fxl:not(.pm-st-c){ transform:translate3d(-30px,0,0); } .pm-st.pm-rv.pm-fxr:not(.pm-st-c){ transform:translate3d(30px,0,0); } @media screen and (max-width: 600px){ .pm-st.pm-rv.pm-fxl:not(.pm-st-c){ transform:translate3d(-20px,0,0); } .pm-st.pm-rv.pm-fxr:not(.pm-st-c){ transform:translate3d(20px,0,0); } } @media (prefers-reduced-motion: reduce){ .pm-rv, .pm-st.pm-rv{ transform:none !important; transition:none !important; } } /* Buttons einheitlich als Pille mit Kontur wie „Mehr Informationen“ */ body .pm-qbar .pm-qbtn{ border:1px solid #9B2D34 !important; border-radius:999px !important; background:transparent !important; color:#9B2D34 !important; font-size:13px; letter-spacing:.18em; transition:background-color .3s, color .3s; } body .pm-qbar .pm-qbtn:hover, body .pm-qbar .pm-qbtn:focus-visible{ background:#9B2D34 !important; color:#fff !important; } body #Anfrageformular #Submit{ height:46px; padding:0 34px; border:1px solid #9B2D34 !important; border-radius:999px !important; background:transparent !important; color:#9B2D34 !important; font-size:13px; letter-spacing:.18em; text-transform:uppercase; -webkit-appearance:none; appearance:none; transition:background-color .3s, color .3s; } body #Anfrageformular #Submit:hover, body #Anfrageformular #Submit:focus-visible{ background:#9B2D34 !important; color:#fff !important; } body #pm-cc button{ border-radius:999px !important; } body #pm-cc #pm-cc-deny, body #pm-cc #pm-cc-set, body #pm-cc #pm-cc-all{ border:1px solid #9B2D34 !important; background:transparent !important; color:#9B2D34 !important; letter-spacing:.08em; transition:background-color .3s, color .3s; } body #pm-cc #pm-cc-deny:hover, body #pm-cc #pm-cc-set:hover, body #pm-cc #pm-cc-all:hover, body #pm-cc button:focus-visible{ background:#9B2D34 !important; color:#fff !important; } body .pm-vlink{ border-radius:999px !important; padding-left:16px; padding-right:20px; } /* Anfrage: Titel und Untertitel wie auf der Startseite (statt kleiner Zeile „ANFRAGEN“ mit Strich) */ :where(.pm-s4) body .main > h1{ max-width:760px; margin:0 auto; padding:0 16px; background:none; text-align:center; text-wrap:balance; font-family:"Grenze", Georgia, serif; font-size:clamp(34px, 3.7vw, 58px); font-weight:400; line-height:1.15; letter-spacing:normal; text-transform:none; color:#9B2D34; } :where(.pm-s4) body .main > h2.pm-fh{ max-width:none; margin:14px 0 0; padding:0 16px; text-align:center; text-wrap:balance; font-family:"Grenze", Georgia, serif; font-size:clamp(23px, 2.2vw, 34px); font-weight:400; line-height:1.3; letter-spacing:normal; text-transform:none; color:#4b4543; } /* Preise: Bild über die volle Breite als Trenner; Überschrift „Gut zu wissen“ entfällt */ :where(.pm-s3) .pm-pbild{ position:relative; display:block; width:calc(100vw - var(--pm-sbw, 0px)); max-width:none; margin:0 0 0 calc(50% - (100vw - var(--pm-sbw, 0px)) / 2); padding:0; } :where(.pm-s3) .pm-pbild img{ display:block; width:100%; height:clamp(240px, 34vw, 560px); object-fit:cover; object-position:50% 55%; } /* 14.11.2026: „Gut zu wissen“ bei Preise wieder sichtbar (siehe unten) */ /* Pool und Garten: Galerie auf eigenem Farbbalken über die volle Breite */ :where(.pm-s27) body .pm-st-g{ margin-bottom:0; padding-top:clamp(36px, 4.5vw, 64px); padding-bottom:clamp(36px, 4.5vw, 64px); background:#EBDCCB; box-shadow:0 0 0 100vmax #EBDCCB; clip-path:inset(0 -100vmax); } @media screen and (min-width: 901px){ :where(.pm-s3,.pm-s27) body .center.clearfix{ overflow-x:visible; } } /* Bild bzw. Farbbalken über die volle Breite nicht abschneiden – seitliches Überlaufen verhindert html{overflow-x:clip} */ /* Gegen Springen (13.11.2026, 18:45): Guest-Pass-Logo hat von Anfang an seinen Platz (Bild 400 × 125 px) */ :where(.pm-s32) .pm-st-logo img{ display:block; width:100%; max-width:400px; height:auto; aspect-ratio:400 / 125; margin:0 auto; } /* ===== Anfrage: Layout überarbeitet (13.11.2026, 18:55) ===== */ :where(.pm-s4) body .main form#Anfrageformular.pm-form3{ max-width:960px; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 fieldset{ gap:20px 28px; margin:0 0 24px; padding:34px clamp(20px, 3.4vw, 44px) 38px; border:0; background:#F2E3DA; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 legend{ gap:12px; margin:0 0 6px; font-family:"Grenze", Georgia, serif; font-size:clamp(24px, 2vw, 30px); font-weight:400; line-height:1.2; letter-spacing:normal; text-transform:none; color:#9B2D34; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 legend svg{ width:30px; height:30px; color:#9B2D34; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-f label, :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-sub{ margin:0 0 7px; font-size:14px; line-height:20px; letter-spacing:.02em; color:#5b4f4b; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 input[type="text"], :where(.pm-s4) body .main form#Anfrageformular.pm-form3 select, :where(.pm-s4) body .main form#Anfrageformular.pm-form3 textarea{ box-sizing:border-box; border:1px solid #E6D3C7 !important; border-radius:0; background-color:#fff; font-size:16px; color:#3d3330; transition:border-color .2s; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 input[type="text"], :where(.pm-s4) body .main form#Anfrageformular.pm-form3 select{ height:46px !important; padding-left:14px; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 textarea{ min-height:140px; padding:12px 14px; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 input[type="text"]:focus, :where(.pm-s4) body .main form#Anfrageformular.pm-form3 select:focus, :where(.pm-s4) body .main form#Anfrageformular.pm-form3 textarea:focus{ border-color:#9B2D34 !important; outline:none; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-f-date .ui-datepicker-trigger{ top:41px; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-zrow select{ height:42px !important; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-guests{ border-right-color:#fff; } /* Kontaktdaten: Anrede · Vorname · Nachname | E-Mail · Telefon | Straße · PLZ | Ort · Land – ohne leere Felder */ :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt{ grid-template-columns:repeat(6, minmax(0, 1fr)); } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > *{ grid-column:1 / -1; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-anrede{ grid-column:span 2; order:1; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-vorname{ grid-column:span 2; order:2; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-nachname{ grid-column:span 2; order:3; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-email{ grid-column:span 3; order:4; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-telefon{ grid-column:span 3; order:5; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-strasse{ grid-column:span 4; order:6; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-plz{ grid-column:span 2; order:7; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-ort{ grid-column:span 3; order:8; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-land{ grid-column:span 3; order:9; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-f-wide, :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-k-infos{ order:10; margin-top:4px; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .pm-f-check, :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > span{ order:11; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > .label_full{ order:12; font-size:13px; color:#6f625e; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-f-check{ gap:12px; font-size:15px; line-height:1.5; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-f-check input{ width:18px; height:18px; margin:2px 0 0; accent-color:#9B2D34; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .pm-f-check a{ color:#9B2D34; text-decoration-thickness:1px; text-underline-offset:3px; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 #Submit{ display:block; width:auto; min-width:240px; height:52px; margin:12px auto 0; padding:0 40px; font-size:14px; } @media screen and (max-width: 600px){ :where(.pm-s4) body .main form#Anfrageformular.pm-form3 .field_kontakt > [class*="pm-k-"]{ grid-column:1 / -1; } :where(.pm-s4) body .main form#Anfrageformular.pm-form3 #Submit{ width:100%; } } /* ===== Meran und Umgebung: Layout überarbeitet (13.11.2026, 18:55) ===== */ :where(.pm-s23) body .main > .text.pm-mrt{ max-width:1100px; margin-left:auto; margin-right:auto; padding:0 16px; box-sizing:border-box; } :where(.pm-s23) .pm-mr p{ max-width:none; } :where(.pm-s23) .pm-mr .pm-mr-lead{ max-width:800px; margin:0 auto; text-align:center; font-size:clamp(18px, 1.4vw, 21px); line-height:1.6; color:#3f3a39; } :where(.pm-s23) .pm-mr-cols{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:48px clamp(40px, 5vw, 80px); margin:64px 0 0; text-align:left; } :where(.pm-s23) .pm-mr-col{ padding-top:24px; border-top:1px solid #9B2D34; } :where(.pm-s23) body .pm-mr-col h3, :where(.pm-s23) body .pm-mr-band h3{ margin:0 0 14px; padding:0; font-family:"Grenze", Georgia, serif; font-size:clamp(24px, 2.1vw, 32px); font-weight:400; line-height:1.2; letter-spacing:normal; text-transform:none; color:#9B2D34; } :where(.pm-s23) .pm-mr-col h3{ text-align:left; } :where(.pm-s23) .pm-mr-col p{ margin:0; text-align:left; } :where(.pm-s23) .pm-mr .pm-mr-close{ max-width:800px; margin:64px auto 0; text-align:center; } :where(.pm-s23) .pm-mr-band{ margin:64px 0 0; padding:clamp(34px, 4vw, 56px) clamp(22px, 5vw, 72px); background:#F2E3D4; text-align:center; } :where(.pm-s23) .pm-mr-band h3{ text-align:center; } :where(.pm-s23) .pm-mr-band p{ max-width:760px; margin:0 auto; text-align:center; } :where(.pm-s23) .pm-mr-band p + p{ margin-top:10px; } :where(.pm-s23) .pm-mr-band a{ color:#9B2D34 !important; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } @media screen and (max-width: 760px){ :where(.pm-s23) .pm-mr-cols{ grid-template-columns:minmax(0, 1fr); gap:40px; margin-top:44px; } :where(.pm-s23) .pm-mr .pm-mr-close, :where(.pm-s23) .pm-mr-band{ margin-top:44px; } } /* ===== Guest Pass: Layout überarbeitet (13.11.2026, 19:05) ===== */ :where(.pm-s32) body .pm-gp-intro{ max-width:820px; gap:34px; } :where(.pm-s32) body .pm-gp-intro .pm-st-logo{ order:0; max-width:360px; padding:26px 32px; border:1px solid #EADBCB; border-radius:0; background:#fff; } :where(.pm-s32) body .pm-gp-intro .pm-st-txt{ text-align:center; } :where(.pm-s32) body .pm-gp-intro .pm-st-txt p:first-child, :where(.pm-s32) body .pm-gp-intro .pm-st-txt p:first-child strong{ font-size:clamp(19px, 1.5vw, 23px); font-weight:500; line-height:1.5; color:#3f3a39; } :where(.pm-s32) body .pm-gp{ gap:28px; } :where(.pm-s32) body .pm-gp-i{ padding:34px clamp(24px, 2.8vw, 40px) 36px; border:1px solid #EADBCB; border-top:3px solid #9B2D34; border-radius:0; background:#fff; } :where(.pm-s32) body .main p.pm-gp-h{ display:flex; align-items:center; gap:16px; margin:0 0 20px; font-family:"Grenze", Georgia, serif; font-size:clamp(21px, 1.6vw, 26px); font-weight:400; line-height:1.25; color:#9B2D34; } :where(.pm-s32) body .pm-gp-ic{ flex:none; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:#F2E3DA; color:#9B2D34; } :where(.pm-s32) body .pm-gp-ic svg{ width:28px; height:28px; } :where(.pm-s32) body .pm-gp-i ul{ margin:0; padding:0; list-style:none; } :where(.pm-s32) body .pm-gp-i li{ position:relative; margin:0 0 9px; padding-left:28px; list-style:none; } :where(.pm-s32) body .pm-gp-i li::before{ content:""; position:absolute; left:3px; top:.5em; width:11px; height:6px; border-left:2px solid #9B2D34; border-bottom:2px solid #9B2D34; transform:rotate(-45deg); } :where(.pm-s32) body .pm-gp-no{ border-top-color:#86706a; background:#FBF7F3; } :where(.pm-s32) body .pm-gp-no .pm-gp-ic{ color:#86706a; background:#EFE6DE; } :where(.pm-s32) body .pm-gp-no li::before{ content:"×"; top:-.12em; left:3px; width:auto; height:auto; border:0; transform:none; font-size:1.35em; line-height:1.2; color:#86706a; } :where(.pm-s32) body .pm-gp-i li ul{ margin:4px 0 0; } :where(.pm-s32) body .pm-gp-i li li{ margin:0; padding-left:0; font-size:.92em; color:#6f625e; } :where(.pm-s32) body .pm-gp-i li li::before{ display:none; } :where(.pm-s32) body .pm-gp-note{ max-width:820px; } :where(.pm-s32) body .pm-gp-note .pm-st-txt{ padding:28px clamp(22px, 3vw, 38px); border-left:4px solid #9B2D34; background:#F2E3DA; text-align:left; } :where(.pm-s32) body .pm-gp-note .pm-st-txt p:first-child, :where(.pm-s32) body .pm-gp-note .pm-st-txt p:first-child strong{ margin-bottom:6px; font-size:14px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#9B2D34; } @media screen and (max-width: 900px){ :where(.pm-s32) body .pm-gp{ gap:18px; } :where(.pm-s32) body .pm-gp-intro .pm-st-logo{ max-width:300px; } } /* Pool und Preise (13.11.2026, 19:20): kein seitliches Verschieben am Handy, solange Abschnitte hereingleiten – Farbbalken bzw. Bild über die volle Breite bleiben sichtbar */ :where(.pm-s3,.pm-s27) body{ overflow-x:clip; } /* Einschiebeeffekt nur für die Fotos (13.11.2026, 19:45): Foto gleitet von seiner Seite herein, ohne Einblenden; der Text daneben steht fest */ body .pm-st-img.pm-rv, body .pm-st-img.pm-rv.pm-fxl, body .pm-st-img.pm-rv.pm-fxr{ opacity:1 !important; transition:transform 1.3s cubic-bezier(.25,.46,.45,.94); will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; } body .pm-st-img.pm-rv.pm-fxl{ transform:translate3d(-30px,0,0); } body .pm-st-img.pm-rv.pm-fxr{ transform:translate3d(30px,0,0); } @media screen and (max-width: 600px){ body .pm-st-img.pm-rv.pm-fxl{ transform:translate3d(-20px,0,0); } body .pm-st-img.pm-rv.pm-fxr{ transform:translate3d(20px,0,0); } } @media (prefers-reduced-motion: reduce){ body .pm-st-img.pm-rv{ transform:none !important; transition:none !important; } } /* Geschichte als Zeitleiste (13.11.2026, 21:45, Vorbild winklerhotels.com/it/storia; 21:55 verfeinert): Linie in der Mitte ab dem ersten Punkt, Jahreszahl mit Punkt, Einträge abwechselnd links/rechts und versetzt (Versatz per JavaScript), je Abschnitt ein großes Foto und drei kleine; bis 1024 px Linie links und alles untereinander */ :where(.pm-s30) body .pm-tlw{ max-width:1240px; margin-left:auto; margin-right:auto; padding:0 30px; box-sizing:border-box; } :where(.pm-s30) body .pm-tl{ position:relative; } :where(.pm-s30) body .pm-tl::before{ content:""; position:absolute; left:50%; top:28px; bottom:0; width:1px; background:#D9C7B3; } :where(.pm-s30) body .pm-tl::after{ content:""; position:absolute; left:50%; bottom:-5px; width:11px; height:11px; margin-left:-5px; border-radius:50%; background:#D9C7B3; } :where(.pm-s30) body .pm-tl-i{ position:relative; display:block; width:50%; margin:0 0 96px; padding:0 60px 0 0; box-sizing:border-box; } :where(.pm-s30) body .pm-tl-i.pm-tl-r{ margin-left:50%; padding:0 0 0 60px; } :where(.pm-s30) body .pm-tl-abs .pm-tl-i{ position:absolute; left:0; margin:0; } :where(.pm-s30) body .pm-tl-abs .pm-tl-i.pm-tl-r{ left:50%; } :where(.pm-s30) body .pm-tl-i::before{ content:""; position:absolute; top:22px; right:-6px; width:11px; height:11px; border-radius:50%; background:#9B2D34; box-shadow:0 0 0 6px #FAF6EF; } :where(.pm-s30) body .pm-tl-i.pm-tl-r::before{ right:auto; left:-5px; } :where(.pm-s30) body .pm-tl-h{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-height:56px; margin:0 0 22px; padding:0; font:inherit; text-align:left; } :where(.pm-s30) body .pm-tl-l .pm-tl-h{ flex-direction:row-reverse; } :where(.pm-s30) body .pm-tl-y{ font-family:"Grenze",Georgia,serif; font-weight:300; font-size:56px; line-height:1; letter-spacing:.01em; color:#9B2D34; } :where(.pm-s30) body .pm-tl-y.pm-tl-yw{ font-size:44px; line-height:56px; } :where(.pm-s30) body .pm-tl-t{ display:inline-block; padding:6px 14px; border-radius:999px; background:#EBDCCB; font-family:"DM Sans",Arial,sans-serif; font-size:13px; font-weight:500; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:#5F4C49; } :where(.pm-s30) body .pm-tl-b{ text-align:left; } :where(.pm-s30) body .pm-tl-b p{ margin:0 0 .9em; padding:0; text-align:left; font-size:clamp(17px, 1.3vw, 20px); line-height:1.55; } :where(.pm-s30) body .pm-tl-b p:last-child{ margin-bottom:0; } :where(.pm-s30) body .pm-tl-ph{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:30px; } :where(.pm-s30) body .pm-tl-i .pm-tl-ph a.gallery_content:first-child{ grid-column:1 / -1; } :where(.pm-s30) body .pm-tl-ph a.gallery_content{ display:block; float:none; width:auto; height:auto; margin:0; padding:0; overflow:hidden; border:0; } :where(.pm-s30) body .pm-tl-ph a.gallery_content img{ display:block; width:100%; height:auto; aspect-ratio:830 / 635; object-fit:cover; margin:0; transition:transform 1s; } :where(.pm-s30) body .pm-tl-ph a.gallery_content:hover img{ transform:scale(1.05); } :where(.pm-s30) body .pm-tl-end{ margin-top:96px; text-align:center; } :where(.pm-s30) body .pm-tl-end .pm-tl-ph.pm-tl-row{ grid-template-columns:repeat(4, 1fr); gap:12px; margin:0 0 40px; } :where(.pm-s30) body .pm-tl-end .pm-tl-b{ max-width:760px; margin:0 auto; } :where(.pm-s30) body .pm-tl-end .pm-tl-b p{ text-align:center; } @media screen and (max-width: 1024px){ :where(.pm-s30) body .pm-tlw{ width:95%; max-width:720px; padding:0; } :where(.pm-s30) body .pm-tl::before, :where(.pm-s30) body .pm-tl::after{ left:5px; } :where(.pm-s30) body .pm-tl::before{ top:20px; } :where(.pm-s30) body .pm-tl-i, :where(.pm-s30) body .pm-tl-i.pm-tl-r{ width:auto; margin:0 0 64px; padding:0 0 0 38px; } :where(.pm-s30) body .pm-tl-i::before, :where(.pm-s30) body .pm-tl-i.pm-tl-r::before{ top:15px; left:0; right:auto; box-shadow:0 0 0 5px #FAF6EF; } :where(.pm-s30) body .pm-tl-l .pm-tl-h{ flex-direction:row; } :where(.pm-s30) body .pm-tl-h{ min-height:40px; margin-bottom:16px; } :where(.pm-s30) body .pm-tl-y{ font-size:40px; } :where(.pm-s30) body .pm-tl-y.pm-tl-yw{ font-size:32px; line-height:40px; } :where(.pm-s30) body .pm-tl-t{ font-size:12px; padding:5px 12px; } :where(.pm-s30) body .pm-tl-ph{ margin-top:24px; gap:8px; } :where(.pm-s30) body .pm-tl-end{ margin-top:64px; } :where(.pm-s30) body .pm-tl-end .pm-tl-ph.pm-tl-row{ grid-template-columns:1fr 1fr; gap:8px; margin-bottom:28px; } } /* Zeitleiste: nur die Fotos gleiten von ihrer Seite herein, Text und Jahreszahlen stehen fest */ body .pm-tl-ph.pm-rv, body .pm-tl-ph.pm-rv.pm-fxl, body .pm-tl-ph.pm-rv.pm-fxr{ opacity:1 !important; transition:transform 1.3s cubic-bezier(.25,.46,.45,.94); will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; } body .pm-tl-ph.pm-rv.pm-fxl{ transform:translate3d(-30px,0,0); } body .pm-tl-ph.pm-rv.pm-fxr{ transform:translate3d(30px,0,0); } @media screen and (max-width: 1024px){ body .pm-tl-ph.pm-rv.pm-fxl, body .pm-tl-ph.pm-rv.pm-fxr{ transform:translate3d(20px,0,0); } } @media (prefers-reduced-motion: reduce){ body .pm-tl-ph.pm-rv{ transform:none !important; transition:none !important; } } /* Logo in der Menüzeile beim Scrollen etwa 8 % kleiner (13.11.2026, 22:00) */ @media screen and (min-width: 901px){ body .navigation.navigation_small .pm-desk-logo, body .navigation.pm-solid .pm-desk-logo{ width:156px; margin-top:11px; } } @media screen and (min-width: 901px) and (max-width: 1180px){ body .navigation.navigation_small .pm-desk-logo, body .navigation.pm-solid .pm-desk-logo{ width:138px; margin-top:14px; } } /* Telefon-Symbol im Menü (13.11.2026, 22:15): gleitet wie „E-Mail“ und „Anfahrt“ und zeigt die Nummer; nur wenn daneben kein Platz ist (großes Logo), erscheint die Nummer klein unter dem Symbol */ @media screen and (min-width: 901px){ body .pm-desk > ul > li.pm-icons > a .pm-ilabel.pm-ilabel-tel.pm-below{ top:100%; right:0; padding:7px 14px; border-radius:999px; background:#FAF6EF; color:#5C1A22; font-size:15px; line-height:20px; letter-spacing:.06em; box-shadow:0 6px 18px rgba(60,30,25,.16); transform:translate(0,-4px); } body .pm-desk > ul > li.pm-icons > a.pm-on .pm-ilabel.pm-ilabel-tel.pm-below{ opacity:1; transform:translate(0,0); } } /* Geschichte (22:15): fünf Fotos – ein großes, darunter vier kleine in einer Reihe */ :where(.pm-s30) body .pm-tl-i .pm-tl-ph.pm-tl-n5{ grid-template-columns:repeat(4, 1fr); } /* Fußzeile (22:15): Trennlinie warm statt kaltem Grau – wirkte auf dem Beige bläulich */ body .infos > .box{ border-bottom-color:rgba(92, 26, 34, .14); } /* Zeitleiste (22:05): 2012 und 2024 mit je einem Foto; die Schlussreihe hat dann nur noch zwei Fotos */ :where(.pm-s30) body .pm-tl-end .pm-tl-ph.pm-tl-row.pm-tl-n2{ grid-template-columns:1fr 1fr; max-width:640px; margin-left:auto; margin-right:auto; } :where(.pm-s30) body .pm-tl-end .pm-tl-ph.pm-tl-row.pm-tl-n3{ grid-template-columns:repeat(3, 1fr); max-width:900px; margin-left:auto; margin-right:auto; } /* Telefon-Symbol (22:30): Anfahrt und E-Mail blenden weich aus, wenn die Nummer neben dem großen Logo keinen Platz zum Verschieben hat */ @media screen and (min-width: 901px){ body .pm-desk > ul > li.pm-icons > a{ transition:transform 1s cubic-bezier(.45,0,.25,1), color .25s, opacity .45s; } } /* Bild-Text-Abschnitte (13.11.2026, 22:50): Fotos in voller Spaltenbreite im Format 3:2 (nicht verkleinert), bündig mit dem Seitenrand; der Text beginnt oben bündig mit dem Foto */ @media screen and (min-width: 901px){ body .pm-st:not(.pm-st-c):not(.pm-st-g){ align-items:start !important; } body .pm-st:not(.pm-st-c):not(.pm-st-g) > .pm-st-img.pm-st-n1{ max-width:none !important; width:100% !important; justify-self:stretch !important; } body .pm-st:not(.pm-st-c):not(.pm-st-g) > .pm-st-txt{ align-self:start !important; } body .pm-st:not(.pm-st-c):not(.pm-st-g) > .pm-st-txt > :first-child{ margin-top:0 !important; } } /* Mobil-Kontrolle (13.11.2026, 22:40) */ body .pm-zmeta .pm-zm-i{ white-space:nowrap; } @media screen and (max-width: 600px){ /* Zimmerfilter in einer Zeile */ body .pm-zfilter{ gap:6px 16px !important; } body .pm-zfilter > *{ letter-spacing:.04em !important; font-size:15px !important; } /* Fußzeile: Adresszeilen an den Punkten umbrechen statt am Rand anzustoßen */ body .infos .box .pm-dot{ display:block; height:0; overflow:hidden; } /* Fußzeilen-Links: „Webdesign by Alpintype“ in eigener Zeile, kein Trennstrich am Zeilenanfang */ body .infos ul li.pm-wd{ display:block; border-left:0 !important; padding-left:0 !important; margin-top:6px; } /* Partner-Logos nicht über den Rand */ body .infos .footer_partner{ transform:none !important; gap:14px !important; padding:0 12px; box-sizing:border-box; } body .infos .footer_partner a{ flex:0 1 auto; min-width:0; } body .infos .footer_partner_ml img{ max-width:118px !important; } body .infos .footer_partner_lana img{ max-width:58px !important; } body .infos .footer_partner_sdt img{ max-width:72px !important; } } @media screen and (max-width: 600px){ /* Anfahrt: Adresse an den Punkten umbrechen; „Sie reisen an mit“ in einer Zeile */ body .pm-anr-adr .pm-dot{ display:block; height:0; overflow:hidden; } body .pm-anr-tabs{ gap:10px 16px !important; } body .pm-anr-tabs > button{ font-size:16px !important; } } @media screen and (max-width: 600px){ /* Seitentitel und Untertitel nie bis an den Rand (Impressionen: Untertitel lief von Kante zu Kante) */ body .main > h1, body .main > h2{ padding-left:16px !important; padding-right:16px !important; box-sizing:border-box; text-wrap:balance; } } /* Impressum und Datenschutz (13.11.2026, 22:45): Lesetext so breit wie der Einleitungstext der Startseite (800 px) statt über die ganze Breite */ :where(.pm-s12,.pm-s13) body .main > .text{ max-width:800px; margin-left:auto; margin-right:auto; box-sizing:border-box; } /* Frühstück und Pool (13.11.2026, 22:55): Einleitung mittig mit Überschrift, darunter ein breites Foto, dann Bild-Text-Abschnitte; ein kurzer Schlusssatz steht groß neben seinem Foto */ body .pm-stw .pm-st.pm-st-i{ display:block !important; max-width:800px; margin-left:auto; margin-right:auto; text-align:center; } body .pm-stw .pm-st.pm-st-i > .pm-st-txt{ max-width:none !important; margin:0 auto; text-align:center !important; } body .pm-stw .pm-st.pm-st-i > .pm-st-txt p{ text-align:center !important; } body .pm-stw .pm-st-h{ margin:0 0 20px; padding:0; font-family:"Grenze",Georgia,serif; font-weight:400; font-size:clamp(26px, 2.4vw, 34px); line-height:1.2; letter-spacing:normal; text-transform:none; color:#9B2D34; } body .pm-stw .pm-st.pm-st-w{ display:block !important; } body .pm-stw .pm-st.pm-st-w > .pm-st-img{ max-width:none !important; width:100% !important; margin:0 !important; } body .pm-stw .pm-st.pm-st-w > .pm-st-img a{ display:block; } body .pm-stw .pm-st.pm-st-w > .pm-st-img img{ display:block; width:100% !important; height:auto !important; aspect-ratio:21 / 9 !important; object-fit:cover; } body .pm-stw .pm-st.pm-st-q > .pm-st-txt p{ font-family:"Grenze",Georgia,serif; font-weight:400; font-size:clamp(24px, 2.2vw, 32px) !important; line-height:1.3 !important; color:#9B2D34; } @media screen and (min-width: 901px){ body .pm-stw .pm-st.pm-st-q{ align-items:center !important; } body .pm-stw .pm-st.pm-st-q > .pm-st-txt{ align-self:center !important; } } @media screen and (max-width: 900px){ body .pm-stw .pm-st.pm-st-i{ width:95%; } body .pm-stw .pm-st.pm-st-w > .pm-st-img img{ aspect-ratio:16 / 10 !important; } } /* ===== 13.11.2026, 23:00: Preise, Anfrage und Anfahrt in voller Seitenbreite wie die übrigen Seiten; Speis und Trank mit Schlusssatz mittig ===== */ @media screen and (min-width: 961px){ :where(.pm-s3) body .pm-acc, :where(.pm-s3) body .main > .text.pm-gz, :where(.pm-s4) body .main form#Anfrageformular, :where(.pm-s4) body .main form#Anfrageformular.pm-form3, :where(.pm-s4) body .main > h1, :where(.pm-s8) body .main > .text{ max-width:none !important; } :where(.pm-s8) body .main > .text > .pm-anr-intro{ max-width:800px; margin-left:auto; margin-right:auto; } } body .pm-stw .pm-st.pm-st-c.pm-st-q{ display:block !important; max-width:800px; margin-left:auto; margin-right:auto; text-align:center; } body .pm-stw .pm-st.pm-st-c.pm-st-q > .pm-st-txt, body .pm-stw .pm-st.pm-st-c.pm-st-q > .pm-st-txt p{ max-width:none !important; text-align:center !important; } @media screen and (min-width: 961px) and (max-width: 1370px){ :where(.pm-s3) body .pm-acc, :where(.pm-s3) body .main > .text.pm-gz, :where(.pm-s4) body .main form#Anfrageformular, :where(.pm-s4) body .main form#Anfrageformular.pm-form3, :where(.pm-s4) body .main > h1, :where(.pm-s8) body .main > .text{ margin-left:30px !important; margin-right:30px !important; } } /* 13.11.2026, 23:20: Zwischen 901 und 1100 px ist das große Logo etwas schmaler, damit „Anfahrt“ beim Darüberfahren nach links gleiten kann, ohne das Logo zu berühren */ @media screen and (min-width: 901px) and (max-width: 1100px){ html body .navigation:not(.navigation_small):not(.pm-solid):not(.pm-logo-sm) .pm-desk-logo{ width:clamp(232px, 23vw, 270px); } } /* 14.11.2026: Preise & Info – „Gut zu wissen“ groß und mittig wie die Seitentitel, darunter eine graue Unterzeile */ :where(.pm-s3) body .pm-gz .pm-gz-h{ display:block; margin:0; padding:0 16px; text-align:center; text-wrap:balance; font-family:"Grenze", Georgia, serif; font-weight:400; line-height:1.15; color:#9B2D34; } :where(.pm-s3) body .pm-gz .pm-gz-s{ display:block; margin:12px 0 clamp(36px, 4vw, 56px); padding:0 16px; text-align:center; text-wrap:balance; font-family:"Grenze", Georgia, serif; font-size:clamp(22px, 1.9vw, 28px); font-weight:400; line-height:1.3; color:#6f6764; }