/* ============================================================================= villasana.at — Gestaltungssystem „Ruhe" (v2, 2026-07-25) Contao 5.7. Editorial statt Widget-Optik: Struktur entsteht aus Weißraum, Haarlinien und Typografie — nicht aus Rahmen, Radien und Schatten. ⚠ Contao 5 rendert Inhaltselemente als content-* (Twig), NICHT als ce_*. Beide Schreibweisen stehen, damit die Regeln generationsunabhängig greifen. ⚠ Listen-Grundregeln NUR in .rte — sonst treffen sie die Navigationslisten. ============================================================================= */ @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../../files/villasana/fonts/cormorant-garamond-500.woff2') format('woff2')} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../../files/villasana/fonts/cormorant-garamond-600.woff2') format('woff2')} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../../files/villasana/fonts/cormorant-garamond-500-italic.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../../files/villasana/fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../../files/villasana/fonts/inter-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../../files/villasana/fonts/inter-600.woff2') format('woff2')} :root{ --olive:#737828; --olive-dark:#565b1d; --olive-soft:#e9ecd8; --olive-tint:#f5f6ee; --canvas:#f7f6f1; --paper:#fff; --ink:#2b2a26; --muted:#6e6a60; --line:#e7e4da; --line-soft:#f0eee7; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --breit:1180px; --schmal:1000px; --luft:clamp(56px,7vw,104px); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth} body{background:var(--canvas);color:var(--ink);font:400 17px/1.68 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;height:auto} a{color:var(--olive-dark)} a:hover{color:var(--olive)} a[href],button,summary,label[for]{cursor:pointer} ::selection{background:var(--olive-soft)} :focus-visible{outline:2px solid var(--olive);outline-offset:3px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}} /* ===== Grundgerüst ====================================================== */ #wrapper{min-height:100vh;display:flex;flex-direction:column} #container{flex:1;background:var(--canvas)} #main{max-width:var(--breit);margin:0 auto;background:var(--paper);width:100%;display:flow-root} #main .mod_article{padding:0 clamp(22px,4vw,64px) var(--luft)} /* ===== Kopf ============================================================= */ #header{background:var(--paper);position:sticky;top:0;z-index:400;box-shadow:0 1px 0 var(--line)} #header .inside{max-width:var(--breit);margin:0 auto;padding:22px clamp(22px,4vw,64px) 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative} .vs-logo{display:block;flex-shrink:0;line-height:0} .vs-logo img{width:min(268px,56vw);height:auto;display:block} #burger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto} #burger span{display:block;width:23px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .2s,opacity .2s} body.nav-open #burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} body.nav-open #burger span:nth-child(2){opacity:0} body.nav-open #burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} #header .mod_navigation ul{list-style:none;margin:0;padding:0} #header .mod_navigation .level_1{display:flex;gap:clamp(18px,2.4vw,34px)} #header .mod_navigation .level_1>li{position:relative} #header .mod_navigation .level_1>li>a, #header .mod_navigation .level_1>li>strong{display:block;font:500 12.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:10px 0 9px;white-space:nowrap;position:relative} #header .mod_navigation .level_1>li>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .25s ease} #header .mod_navigation .level_1>li>a:hover::after{transform:scaleX(1)} #header .mod_navigation .level_1>li>strong, #header .mod_navigation .level_1>li.trail>a{color:var(--olive)} #header .mod_navigation .level_1>li>strong::after, #header .mod_navigation .level_1>li.trail>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--olive);transform:none} /* Aufklapp-Menü Desktop */ #header .mod_navigation .level_2{display:none;position:absolute;top:calc(100% + 10px);left:-20px;min-width:246px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 44px rgba(43,42,38,.13);padding:6px 0;z-index:200} #header .mod_navigation li:hover>.level_2, #header .mod_navigation li:focus-within>.level_2{display:block} #header .mod_navigation .level_2 a, #header .mod_navigation .level_2 strong{display:block;font:400 15px/1.4 var(--sans);color:var(--ink);text-decoration:none;padding:10px 20px} #header .mod_navigation .level_2 a:hover{background:var(--olive-tint);color:var(--olive-dark)} #header .mod_navigation .level_2 strong{color:var(--olive);font-weight:600} @media(max-width:820px){ #header .inside{padding:16px 20px} #burger{display:block} #header .mod_navigation{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);box-shadow:0 16px 34px rgba(43,42,38,.1);z-index:300} body.nav-open #header .mod_navigation{display:block} #header .mod_navigation .level_1{flex-direction:column;gap:0;padding:6px 20px 14px} #header .mod_navigation .level_1>li>a, #header .mod_navigation .level_1>li>strong{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:13px} #header .mod_navigation .level_1>li:last-child>a{border-bottom:none} #header .mod_navigation .level_1>li>a::after{display:none} #header .mod_navigation .level_2{display:block;position:static;border:none;box-shadow:none;padding:0 0 6px 16px;min-width:0} #header .mod_navigation .level_2 a{padding:8px 0;font-size:14.5px;color:var(--muted)} } /* ===== Bereichsnavigation (2. Ebene) ==================================== Typografie statt Reiter-Widget: eine Zeile Kapitälchen auf Papier, oben und unten von einer Haarlinie gefasst. */ .vs-subnav{border-bottom:1px solid var(--line-soft);margin:0 0 clamp(30px,4vw,52px)} .vs-subnav ul{list-style:none;margin:0;padding:0 clamp(22px,4vw,64px);max-width:var(--breit);display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,32px)} .vs-subnav li{margin:0} /* NUR Listeneinträge — die Skip-Links sind direkte Kinder von