/* content.css */
@layer components{.defaultcontent{.head{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2rem;&::before{content:'';position:absolute;z-index:1;inset:0;background-color:black;opacity:0.5;}}.headimage{width:100%;height:auto;object-fit:cover;}.title{position:absolute;z-index:2;text-align:center;display:flex;align-items:center;justify-content:center;z-index:1;letter-spacing:-0.02em;inset:0;font-size:clamp(2rem,10vw,5rem);font-family:var(--alice);color:white;text-shadow:0 0 9px rgba(0,0,0,0.4);}}}
/* footer.css */
@layer components{.footer{background-color:var(--erde);.das-eckerts &{background-color:var(--wasser);}.content{display:flex;justify-content:space-between;align-items:center;gap:3rem;color:white;padding-top:3rem;padding-bottom:3rem;line-height:1.33;width:100%;& > *{min-width:150px;}}.text{width:100%;a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.3em;}}.logolink{display:block;width:120px;}.logo{border:1px solid white;border-radius:0.3rem;}.wrap{display:flex;justify-content:space-between;align-items:center;}.copyright{width:100%;display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem;}.arrowlink{display:block;width:1rem;height:1rem;fill:white;transition:transform 0.2s ease-in-out;border:1px solid white;width:4rem;height:4rem;display:flex;border-radius:50%;align-items:center;justify-content:center;svg{width:1rem;height:1rem;fill:white;transition:transform 0.2s ease-in-out;}&:hover{transform:translateY(-0.2rem);svg{transform:scale(1.3);}}}}}
/* header.css */
@layer components{.header{height:180px;padding:2rem 0;.das-eckerts &.default{background-color:var(--wasser);}.hotel-nepomuk &.default{background-color:var(--erde);}.inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:0 5%;}.logolink{border:1px solid white;overflow:hidden;border-radius:0.3rem;width:120px;@media (min-width:768px){width:180px;}}.logo{transform:scale(1.035);}.burger{display:flex;gap:0.8rem;align-items:center;justify-content:flex-start;&.close{position:relative;z-index:2;}svg{width:2rem;height:auto;fill:white;}}.burgertext,.toplink{font-weight:700;color:white;text-transform:uppercase;font-size:1.7rem;}.toplink,.burger{width:11rem;white-space:nowrap;text-shadow:0 0 7px rgba(0,0,0,0.2);}.toplink{position:relative;z-index:2;text-align:right;}}}
/* hero.css */
@layer components{.hero{position:relative;height:90vh;margin-top:-180px;z-index:1;& .text{position:absolute;bottom:0;left:0;right:0;width:100%;padding:2rem 2rem 0.5rem 2rem;font-family:var(--alice);letter-spacing:-0.02em;font-size:clamp(2.2rem,9vw,4rem);line-height:1.2;color:white;line-height:0.9;text-shadow:0 0 8px rgba(0,0,0,0.5);text-wrap:balance;max-width:75%;@media (min-width:768px){max-width:none;text-align:center;}.jump{display:block;text-align:center;margin-top:1rem;transition:transform 0.2s ease-in-out;svg{width:4rem;height:auto;fill:white;transition:transform 0.2s ease-in-out;}&:hover{svg{transform:translateY(0.2rem);}}}}& .single{height:100%;& img{width:100%;height:100%;object-fit:cover;}}}}
/* imagestrip.css */
@layer components{.imagestrip{& .images{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;width:100%;list-style:none;}& .item{display:flex;align-items:stretch;min-width:0;flex:auto;height:220px;min-width:250px;}& .image{display:block;width:100%;height:auto;object-fit:cover;}}}
/* menu.css */
@layer components{[x-cloak]{display:none !important;}.menu{position:absolute;top:-5rem;left:0;right:0;background:var(--erde);background:rgba(85,76,75,0.95);padding:5rem 5% 2rem 5%;z-index:1;color:white;backdrop-filter:blur(5px);will-change:transform,opacity,border-radius;transform-style:preserve-3d;transform-origin:left top;perspective:500px;transition:transform 0.9s cubic-bezier(0.4,0,0.2,1.3),opacity 0.7s cubic-bezier(0.4,0,0.2,4),border-radius 0.9s ease-in-out;.das-eckerts &{background-color:rgba(12,45,105,0.95);}&[aria-hidden="true"]{opacity:0;pointer-events:none;border-radius:0 0 100% 0;transform:translateY(-80%) rotateY(60deg) scale(0.5);}&[aria-hidden="false"]{opacity:1;pointer-events:auto;transform:translateY(0) rotateX(0deg) scale(1);}.list{display:flex;flex-direction:column;gap:1rem;margin:2rem 0;}.item{position:relative;border-top:1px solid white;display:flex;flex-direction:row;align-items:flex-start;gap:0.5rem;}.link{color:white;text-decoration:none;font-weight:500;font-size:1.2rem;display:block;padding:0.5rem 0;transition:color 0.2s ease;border-radius:2px;font-family:var(--alice);font-size:2rem;min-width:16rem;white-space:nowrap;display:inline-flex;align-items:center;justify-content:flex-start;gap:0.6rem;.submenu &{width:auto;font-size:1.2rem;font-family:var(--din);text-transform:uppercase;letter-spacing:0.04em;padding:0.1rem 0;&:hover{font-weight:700;&::after{font-family:times new roman;content:'►';font-size:0.8rem;line-height:1;}}}&:focus,&:focus-visible{outline:2px solid white;outline-offset:2px;}}.submenu{list-style:none;margin:0.9rem 0 0 0;display:flex;flex-direction:column;gap:0.75rem;width:100%;}.figure{min-width:320px;height:auto;margin:1.2rem 0 0 0;& img{display:block;width:100%;height:auto;object-fit:cover;}}}}
/* quicknavi.css */
@layer components{.quicknavi{padding:10%;display:flex;flex-direction:column;gap:3rem;@media (min-width:900px){flex-direction:row;padding:5rem 3rem;}& .item{display:flex;gap:1rem;width:100%;max-width:375px;margin:0 auto;font-size:clamp(1rem,2vw,1.2rem);@media (min-width:900px){flex-direction:column;flex:1;text-align:center;}}& .icon{min-width:3rem;min-height:3rem;max-height:3rem;text-align:center;margin:0 auto;@media (min-width:900px){min-width:4rem;min-height:4rem;max-height:4rem;}}& .content{border-left:3px solid var(--orange);padding-left:1rem;line-height:1.33;width:100%;text-wrap:balance;@media (min-width:900px){border-left:none;padding-left:0;}}& .title{text-transform:uppercase;margin-bottom:0.3rem;transition:all 0.2s ease;@media (min-width:900px){border-bottom:3px solid var(--orange);padding-bottom:0.3rem;width:fit-content;margin:0 auto 0.8rem;line-height:1.15;}&:hover{padding-left:0.55rem;padding-right:0.55rem;color:var(--orange);}}& .linktext{font-weight:700;margin-top:0.3rem;display:inline-flex;align-items:center;gap:0.3rem;white-space:nowrap;&:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.2em;}svg{width:0.8rem;height:0.8rem;fill:black;margin-left:0.3rem;transform:translateX(0);transition:transform 0.2s ease;.linktext:hover &{transform:translateX(0.25rem);}}}}}
/* welcome.css */
@layer components{.welcome{padding:12% 8%;background-color:var(--lehm);text-align:center;display:flex;flex-direction:column;gap:3em;& .title{font-size:clamp(2rem,7vw,4rem);letter-spacing:-0.02em;font-family:var(--alice);line-height:1.1;}& .text{font-size:clamp(1.2rem,4vw,1.6rem);line-height:1.5;font-family:var(--din);text-wrap:balance;max-width:50ch;margin:0 auto;}& .nav{display:flex;justify-content:center;gap:1.5em;margin:0 auto;font-size:clamp(1.2rem,4vw,1.6rem);}& .link{font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.2em;}& .mews{font-weight:700;text-transform:uppercase;font-size:1.2rem;padding:0.5rem 2rem;background-color:var(--orange);color:white;border-radius:0.3rem;transition:background-color 0.2s ease;&:hover{background-color:black;}}}}
