/* ============================================================ Hotel Egger — shared site styles Two themes (Gold "Goldenes Tal" / Green "Tal der Almen") selectable via [data-theme] on . Display font swappable via [data-font]. Language via [data-lang]. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Marcellus&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Space+Grotesk:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Libre+Franklin:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); @import url('configurator.css'); /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0} img,svg,picture{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,figure,ul,ol{margin:0} ul{list-style:none;padding:0} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ---------- Theme: GOLD (default) ---------- */ :root{ --paper:#FBF7EF; --paper-2:#F3EADA; --paper-3:#EFE3CD; --surface:#FFFFFF; --ink:#2C2114; --ink-soft:#5A4A35; --muted:#8C7B61; --line:#E7DAC2; --line-soft:#F0E7D6; --accent:#A66B1E; /* deep gold, AA on cream */ --accent-2:#C68A2C; /* mid gold */ --accent-3:#E2AE4F; /* bright gold */ --accent-soft:#FAE6BE; /* heritage light gold wash */ --accent-ghost:#F7EBD3; --on-accent:#FFFFFF; --header-bg:rgba(251,247,239,.86); --header-border:rgba(166,107,30,.16); --topbar-bg:#2C2114; --topbar-ink:#EBDcC0; --footer-bg:#241A0F; --footer-ink:#D8C9AE; --footer-soft:#9C8B6F; --hero-tint:linear-gradient(180deg,rgba(28,20,10,.18) 0%,rgba(28,20,10,0) 30%,rgba(28,20,10,.12) 60%,rgba(28,20,10,.62) 100%); --crest:#A66B1E; --shadow-sm:0 1px 2px rgba(54,38,16,.06),0 2px 8px rgba(54,38,16,.06); --shadow:0 4px 14px rgba(54,38,16,.09),0 18px 40px rgba(54,38,16,.10); --shadow-lg:0 10px 30px rgba(54,38,16,.14),0 40px 80px rgba(54,38,16,.16); --r-xs:7px;--r-sm:10px;--r:16px;--r-lg:24px;--r-xl:34px; --font-display:'Cormorant Garamond',Georgia,serif; --font-body:'Mulish',system-ui,-apple-system,sans-serif; --maxw:1180px; --maxw-wide:1320px; --gut:clamp(20px,5vw,56px); } /* ---------- Theme: GREEN ---------- */ html[data-theme="green"]{ --paper:#F4F5EF; --paper-2:#E9ECE1; --paper-3:#DFE4D5; --surface:#FFFFFF; --ink:#1B2A20; --ink-soft:#3E4F43; --muted:#697A6C; --line:#D6DECD; --line-soft:#E5EADC; --accent:#2E5A39; /* forest green */ --accent-2:#3E7A4C; /* meadow green */ --accent-3:#5C9B63; --accent-soft:#D2E2CC; --accent-ghost:#E7EEDF; --on-accent:#FFFFFF; --header-bg:rgba(244,245,239,.88); --header-border:rgba(46,90,57,.16); --topbar-bg:#1B2A20; --topbar-ink:#CDDBC8; --footer-bg:#16241A; --footer-ink:#C6D4C0; --footer-soft:#7E907E; --hero-tint:linear-gradient(180deg,rgba(16,32,20,.20) 0%,rgba(16,32,20,0) 32%,rgba(16,32,20,.10) 60%,rgba(16,32,20,.60) 100%); --crest:#2E5A39; /* warm gold kept as a secondary accent in the green world */ --gold:#C28A2C; } :root{--gold:#C68A2C} /* ---------- Display font swap ---------- */ html[data-font="marcellus"]{--font-display:'Marcellus',Georgia,serif} /* ---------- Base ---------- */ body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---------- Type scale ---------- */ .display,h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.06;letter-spacing:-.005em;color:var(--ink)} h1{font-size:clamp(2.6rem,6vw,4.6rem)} h2{font-size:clamp(2rem,4vw,3.2rem)} h3{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.12} .serif-italic{font-style:italic;font-weight:500} .lead{font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.6;color:var(--ink-soft);font-weight:400} p{text-wrap:pretty} strong{font-weight:700;color:var(--ink)} .eyebrow{ font-family:var(--font-body); font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);display:inline-flex;align-items:center;gap:.6em; } .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent);display:inline-block;opacity:.7} .eyebrow.center::after{content:"";width:26px;height:1.5px;background:var(--accent);display:inline-block;opacity:.7} .eyebrow.center{justify-content:center} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .wrap-wide{max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(56px,8vw,116px)} .section--tight{padding-block:clamp(40px,5vw,72px)} .section--paper2{background:var(--paper-2)} .section--ink{background:var(--footer-bg);color:var(--footer-ink)} .center{text-align:center} .measure{max-width:62ch} .measure-sm{max-width:48ch} .stack-sm>*+*{margin-top:.7rem} .stack>*+*{margin-top:1.15rem} .stack-lg>*+*{margin-top:1.9rem} .grid{display:grid;gap:clamp(20px,3vw,40px)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} /* ---------- Buttons ---------- */ .btn{ --b:var(--accent); display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-body);font-weight:700;font-size:.95rem;letter-spacing:.01em; padding:.92em 1.5em;border-radius:999px;border:1.5px solid var(--b); cursor:pointer;transition:.22s ease;background:var(--b);color:var(--on-accent); line-height:1;white-space:nowrap; } .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(54,38,16,.18);filter:brightness(1.04)} .btn:active{transform:translateY(0)} .btn .ico{width:1.1em;height:1.1em} .btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent)} .btn--ghost:hover{background:var(--accent);color:var(--on-accent)} .btn--soft{background:var(--surface);color:var(--ink);border-color:var(--line)} .btn--soft:hover{border-color:var(--accent);color:var(--accent)} .btn--light{background:#fff;color:var(--ink);border-color:#fff} .btn--outline-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)} .btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff} .btn--lg{padding:1.05em 1.9em;font-size:1rem} .btn--block{display:flex;width:100%} .link-arrow{display:inline-flex;align-items:center;gap:.45em;font-weight:700;color:var(--accent);font-size:.95rem} .link-arrow .ico{width:1.05em;height:1.05em;transition:transform .2s} .link-arrow:hover .ico{transform:translateX(4px)} /* ---------- Top utility bar ---------- */ .topbar{background:var(--topbar-bg);color:var(--topbar-ink);font-size:.82rem;font-weight:500} .topbar .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;padding-block:7px} .topbar a{display:inline-flex;align-items:center;gap:.5em;color:var(--topbar-ink);opacity:.92} .topbar a:hover{opacity:1;color:#fff} .topbar .ico{width:14px;height:14px;opacity:.8} .topbar-left{display:flex;gap:20px;flex-wrap:wrap} .topbar-right{display:flex;align-items:center;gap:16px} .stars{color:var(--accent-3);letter-spacing:.12em;font-size:.8rem} /* language toggle */ .lang{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.22);border-radius:999px;overflow:hidden} .lang button{background:transparent;border:0;color:var(--topbar-ink);padding:3px 10px;font-size:.74rem;font-weight:700;letter-spacing:.05em;cursor:pointer;opacity:.7;transition:.18s} .lang button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);opacity:1} /* ---------- Header / nav ---------- */ .site-header{position:sticky;top:0;z-index:50;background:var(--header-bg); -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--header-border);transition:box-shadow .25s,background .25s} .site-header.scrolled{box-shadow:0 6px 24px rgba(54,38,16,.08)} .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px;padding-block:10px} .brand{display:flex;align-items:center;gap:13px;flex-shrink:0} .crest{width:44px;height:50px;flex-shrink:0;color:var(--crest)} .brand-tx{display:flex;flex-direction:column;line-height:1} .brand-name{font-family:var(--font-display);font-weight:600;font-size:1.62rem;letter-spacing:.02em;color:var(--ink)} .brand-sub{font-size:.62rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-top:4px} .nav-links{display:flex;align-items:center;gap:6px} .nav-links a{font-weight:600;font-size:.95rem;color:var(--ink-soft);padding:.55em .8em;border-radius:999px;transition:.18s;position:relative} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--accent)} .nav-links a.active::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.18em;height:2px;background:var(--accent);border-radius:2px} .nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0} .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;align-items:center;justify-content:center;color:var(--ink)} .nav-toggle .ico{width:22px;height:22px} /* mobile drawer */ .nav-drawer{position:fixed;inset:0;z-index:60;background:var(--paper);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:24px var(--gut);visibility:hidden} .nav-drawer.open{transform:translateX(0);visibility:visible} .nav-drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px} .nav-drawer-links{display:flex;flex-direction:column;gap:4px} .nav-drawer-links a{font-family:var(--font-display);font-size:2rem;font-weight:500;padding:.35em 0;border-bottom:1px solid var(--line-soft);color:var(--ink)} .nav-drawer-links a.active{color:var(--accent)} .nav-drawer-foot{margin-top:auto;padding-top:24px;color:var(--muted);font-size:.9rem} .nav-close{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center} .nav-close .ico{width:22px;height:22px} /* ---------- Hero ---------- */ .hero{position:relative;isolation:isolate;background:var(--ink)} .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero-media img,.hero-media image-slot{width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-tint)} .hero-inner{min-height:clamp(560px,82vh,860px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:90px;padding-bottom:clamp(120px,16vh,180px)} .hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35)} .hero .eyebrow{color:#fff} .hero .eyebrow::before,.hero .eyebrow.center::after{background:var(--accent-3)} .hero-lead{color:rgba(255,255,255,.94);max-width:46ch;font-size:clamp(1.05rem,1.6vw,1.3rem);text-shadow:0 1px 20px rgba(0,0,0,.4)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px} /* postcard hero variant */ html[data-hero="postcard"] .hero{background:var(--paper-2)} html[data-hero="postcard"] .hero::after{display:none} html[data-hero="postcard"] .hero-media{position:relative;inset:auto;z-index:0;margin:clamp(20px,4vw,40px);margin-bottom:0;border-radius:var(--r-lg);overflow:visible;height:clamp(320px,46vh,520px);box-shadow:var(--shadow-lg);border:10px solid #fff;outline:1px solid var(--line)} html[data-hero="postcard"] .hero-media img,html[data-hero="postcard"] .hero-media image-slot{border-radius:calc(var(--r-lg) - 6px)} html[data-hero="postcard"] .hero-inner{min-height:0;padding-top:clamp(28px,5vw,48px);padding-bottom:clamp(28px,5vw,48px)} html[data-hero="postcard"] .hero h1{color:var(--ink);text-shadow:none} html[data-hero="postcard"] .hero .eyebrow{color:var(--accent)} html[data-hero="postcard"] .hero .eyebrow::before,html[data-hero="postcard"] .hero .eyebrow.center::after{background:var(--accent)} html[data-hero="postcard"] .hero-lead{color:var(--ink-soft);text-shadow:none} /* ---------- Booking bar ---------- */ .booking{position:relative;z-index:5;margin-top:-58px} .booking-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:clamp(16px,2vw,22px);display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap} .booking-title{font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--ink);width:100%;margin-bottom:2px;display:flex;align-items:center;gap:.5em} .booking-title .ico{width:1.05em;height:1.05em;color:var(--accent)} .field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:130px} .field label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .field-inp{display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7em .9em;cursor:pointer;transition:.18s} .field-inp:hover{border-color:var(--accent-2)} .field-inp .ico{width:18px;height:18px;color:var(--accent);flex-shrink:0} .field-inp span{font-weight:600;color:var(--ink)} .field-inp select{border:0;background:transparent;font-weight:600;color:var(--ink);width:100%;cursor:pointer;appearance:none} .booking .btn{flex:0 0 auto;height:46px} /* ---------- USP strip ---------- */ .usp{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden} .usp-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px 14px;position:relative} .usp-item+.usp-item::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line-soft)} .usp-item .ico{width:30px;height:30px;color:var(--accent);stroke-width:1.4} .usp-item span{font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.25} /* ---------- Cards ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s ease;display:flex;flex-direction:column;height:100%} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)} .card-media img,.card-media image-slot{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .card:hover .card-media img{transform:scale(1.05)} .card-tag{position:absolute;top:14px;left:14px;background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:.4em .8em;border-radius:999px;text-transform:uppercase} .card-tag--gold{background:var(--gold)} .card-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1} .card-body h3{font-size:1.5rem} .card-dates{font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .card-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line-soft)} .price{font-family:var(--font-display)} .price small{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .price b{font-size:1.7rem;font-weight:600;color:var(--ink);line-height:1} .price b .cur{font-size:1rem;color:var(--accent)} /* ---------- Split feature ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,5vw,72px)} .split--flip .split-media{order:-1} .split-media{position:relative} .split-media .slot-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/4} .split-media image-slot,.split-media img{width:100%;height:100%;object-fit:cover} .split-badge{position:absolute;background:var(--surface);box-shadow:var(--shadow);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;gap:12px;bottom:-22px;right:-12px;border:1px solid var(--line)} .split-badge .ico{width:30px;height:30px;color:var(--accent)} .split-badge b{display:block;font-family:var(--font-display);font-size:1.3rem;line-height:1} .split-badge span{font-size:.78rem;color:var(--muted);font-weight:600} /* feature list */ .flist{display:flex;flex-direction:column;gap:14px} .flist li{display:flex;gap:14px;align-items:flex-start} .flist .ico{width:24px;height:24px;color:var(--accent);flex-shrink:0;margin-top:2px;stroke-width:1.5} .flist b{font-weight:700} .flist p{color:var(--ink-soft);font-size:.96rem} /* ---------- Quote band ---------- */ .quote-band{background:var(--accent-ghost);border-block:1px solid var(--line)} html[data-theme="green"] .quote-band{background:var(--accent-ghost)} .quote-band .wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px} .quote-mark{font-family:var(--font-display);font-size:5rem;line-height:.4;color:var(--accent);opacity:.5;height:.5em} .quote-band blockquote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.18;color:var(--ink);max-width:20ch;font-weight:500} .quote-cite{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} /* ---------- Gallery ---------- */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px} .gallery>*{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)} .gallery image-slot,.gallery img{width:100%;height:100%;object-fit:cover} .g-tall{grid-row:span 2} .g-wide{grid-column:span 2} /* ---------- Image slot baseline ---------- */ image-slot{--is-bg:var(--paper-3)} /* ---------- Page header (inner pages) ---------- */ .page-hero{position:relative;isolation:isolate;background:var(--ink);color:#fff} .page-hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden} .page-hero-media img,.page-hero-media image-slot{width:100%;height:100%;object-fit:cover} .page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,20,10,.46),rgba(28,20,10,.58))} .page-hero-inner{padding-top:clamp(70px,12vh,120px);padding-bottom:clamp(54px,9vh,96px);display:flex;flex-direction:column;gap:14px} .page-hero h1{color:#fff;max-width:18ch} .page-hero .eyebrow{color:#fff} .page-hero .eyebrow::before{background:var(--accent-3)} .page-hero-lead{color:rgba(255,255,255,.92);max-width:54ch;font-size:clamp(1.05rem,1.5vw,1.25rem)} .crumbs{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.8);display:flex;gap:.5em;align-items:center} .crumbs a:hover{color:#fff;text-decoration:underline} /* ---------- Rooms ---------- */ .room{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .room--flip>.room-media{order:2} .room-media{position:relative;min-height:300px;background:var(--paper-3)} .room-media image-slot,.room-media img{width:100%;height:100%;object-fit:cover} .room-body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:16px} .room-body h3{font-size:1.9rem} .room-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-soft);font-size:.9rem;font-weight:600} .room-meta span{display:inline-flex;align-items:center;gap:.45em} .room-meta .ico{width:18px;height:18px;color:var(--accent)} .amen{display:flex;flex-wrap:wrap;gap:8px} .amen li{font-size:.82rem;font-weight:600;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.4em .85em} .room-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line-soft)} /* price table */ .ptable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .ptable th,.ptable td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line-soft)} .ptable thead th{background:var(--paper-2);font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .ptable td:last-child,.ptable th:last-child{text-align:right} .ptable tbody tr:last-child td{border-bottom:0} .ptable .room-name{font-weight:700;color:var(--ink)} .ptable .from{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--accent)} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)} .info-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-sm)} .info-row{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft)} .info-row:last-child{border-bottom:0} .info-row .ico{width:24px;height:24px;color:var(--accent);flex-shrink:0;margin-top:3px} .info-row b{display:block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .info-row a,.info-row p{font-size:1.08rem;color:var(--ink);font-weight:600} .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-row label{font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .inp{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:.85em 1em;font-weight:500;color:var(--ink);transition:.18s;width:100%} .inp:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-ghost)} textarea.inp{resize:vertical;min-height:120px} .map-embed{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);min-height:300px;background:var(--paper-3)} .map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:saturate(.92)} /* ---------- Footer ---------- */ .site-footer{background:var(--footer-bg);color:var(--footer-ink);padding-top:clamp(56px,7vw,84px)} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,56px);padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)} .footer-brand .crest{color:var(--accent-3);width:48px;height:54px;margin-bottom:14px} .footer-brand .brand-name{color:#fff;font-size:1.8rem} .footer-brand p{color:var(--footer-soft);font-size:.94rem;margin-top:10px;max-width:34ch} .footer-col h4{font-family:var(--font-body);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-3);margin-bottom:18px} .footer-col ul{display:flex;flex-direction:column;gap:11px} .footer-col a,.footer-contact a,.footer-contact p{color:var(--footer-ink);font-size:.96rem;opacity:.9;transition:.18s} .footer-col a:hover{opacity:1;color:#fff;padding-left:3px} .footer-contact{display:flex;flex-direction:column;gap:13px} .footer-contact div{display:flex;gap:11px;align-items:flex-start} .footer-contact .ico{width:19px;height:19px;color:var(--accent-3);flex-shrink:0;margin-top:2px} .partners{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-block:26px;opacity:.8} .partners span{font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--footer-soft);border:1px solid rgba(255,255,255,.18);padding:.5em .9em;border-radius:8px} .socials{display:flex;gap:12px} .socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:var(--footer-ink);transition:.2s} .socials a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)} .socials .ico{width:18px;height:18px} .footer-bot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:24px;font-size:.84rem;color:var(--footer-soft)} .footer-bot-links{display:flex;gap:20px;flex-wrap:wrap} .footer-bot a:hover{color:#fff} /* ---------- Misc ---------- */ .ico{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .pill-note{display:inline-flex;align-items:center;gap:.5em;background:var(--accent-ghost);color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.04em;padding:.45em 1em;border-radius:999px} .divider-leaf{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--accent);opacity:.7} .divider-leaf::before,.divider-leaf::after{content:"";height:1px;width:60px;background:var(--line);display:block} .divider-leaf .ico{width:22px;height:22px} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} @media print{.reveal{opacity:1!important;transform:none!important}} /* ---------- Language visibility ---------- */ html[data-lang="de"] [data-lang="en"]{display:none} html[data-lang="en"] [data-lang="de"]{display:none} /* ============================================================ Responsive ============================================================ */ @media (max-width:1000px){ .footer-top{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} .usp{grid-template-columns:repeat(3,1fr)} .usp-item:nth-child(3n+1)::before{display:none} .nav-links{display:none} } @media (max-width:860px){ .nav-toggle{display:flex} .nav-cta .btn{display:none} .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} .split,.room,.contact-grid{grid-template-columns:1fr} .split--flip .split-media,.room--flip>.room-media{order:0} .split-badge{position:static;margin-top:18px;display:inline-flex} .gallery{grid-template-columns:repeat(2,1fr)} body{font-size:16px} } @media (max-width:560px){ .topbar-left{gap:14px} .topbar-left a:not(:first-child){display:none} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .usp{grid-template-columns:repeat(2,1fr)} .usp-item:nth-child(odd)::before{display:none} .footer-top{grid-template-columns:1fr} .form-row.two{grid-template-columns:1fr} .booking-card{flex-direction:column;align-items:stretch} .booking .btn{width:100%} }