/* alois.hochkoenig.at — Hochkönig CI per Butterseite/Philipp Figma "01 - FINAL Mobile" (390) / "02 - FINAL Desktop" (1728, content 1200).
   Client-approved 15 Sep 2026; strict 1:1 (Roland 17 Sep: right angles, exact type sizes/line-heights). Handwritten. */
@font-face{font-family:"Micado-Web";src:url("assets/fonts/micado-web.woff2") format("woff2");font-display:block}
@font-face{font-family:"Micado-Web-Addition";src:url("assets/fonts/micado-web-addition.woff2") format("woff2");font-display:block}

:root{
  --cream:#F4F0E6; --navy:#00324B; --orange:#F09100; --orange-hi:#F7A21A; --blue:#0073A0; --white:#FFFFFF; --grey:#505050;
  --hair:rgba(0,50,75,.18); --muted:rgba(0,50,75,.62);
  --font:"Sofia Sans Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --wrap:1200px; --gutter:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--navy);background:var(--cream);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-weight:900;letter-spacing:0}

/* ── header: Kachel 95 + "Alois" 900 60 / tagline 400 15 (both tilted −4°), 1px navy rule ── */
.hdr{padding-top:calc(env(safe-area-inset-top,0px) + 29px)}
.hdr-in{display:flex;align-items:flex-start;padding-bottom:11px}
.lockup{display:flex;align-items:flex-start;gap:10px}
.kachel{width:95px;height:95px;flex:0 0 auto}
.brand{display:flex;flex-direction:column;transform:rotate(-4deg);transform-origin:0 100%;margin-top:22px}
.brand b{font-weight:900;font-size:60px;line-height:60px;letter-spacing:0}
.brand small{font-weight:400;font-size:15px;line-height:20px;white-space:nowrap;margin-top:-4px;margin-left:4px}
.rule-wrap{padding:0 var(--gutter)}
.rule{border:0;border-top:1px solid rgba(0,50,75,.22);height:0}

/* ── hero (mobile): "Frag Alois" 900 48/38 + intro 400 14/17, head in a navy speech box right ── */
.hero{padding:18px 0 32px}
.figure{display:none}
.intro{position:relative;min-height:129px}
.intro-txt{max-width:264px}
.intro h1{font-size:48px;line-height:38px;margin-left:-3px}
.intro p{font-size:14px;line-height:17px;margin-top:5px}
.headbox{position:absolute;right:10px;top:-2px;width:84px;height:70px;background:var(--navy)}
.headbox::after{content:"";position:absolute;right:30px;bottom:-32px;width:30px;height:32px;background:var(--navy);clip-path:polygon(0 0,100% 0,100% 100%)}
.headbox img{position:absolute;left:1px;top:-21px;width:83px;height:auto}
.widget-wrap{position:relative}
.widget-wrap iframe{display:block;width:100%;height:465px;border:0;background:var(--white);transition:height .2s ease}
body.chat-open{overflow:hidden}
body.chat-open .widget-wrap{position:fixed;inset:0;z-index:100;margin:0;background:var(--white)}
body.chat-open .widget-wrap iframe{height:100%;transition:none}
.outline-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.btn-outline{height:48px;border:1px solid var(--navy);background:var(--white);font-weight:700;font-size:16px;line-height:19px;transition:background .15s}
.btn-outline:hover{background:#FFF8EA}
.ai-note{margin-top:10px;font-size:12px;line-height:15px;color:var(--muted)}

/* ── booking: white band, eyebrow 700 13 blue, h2 900 30/36, cream fields 58, labels 700 11 grey ── */
.booking{background:var(--white);padding:38px 0 24px}
.eyebrow{color:var(--blue);font-weight:700;font-size:13px;line-height:16px;text-transform:uppercase}
.booking h2{font-size:30px;line-height:36px;margin-top:12px}
.bform{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;position:relative}
.field>span{font-weight:700;font-size:11px;line-height:13px;color:var(--grey);padding-left:14px;margin-bottom:3px}
.field select,.field input{appearance:none;-webkit-appearance:none;width:100%;height:58px;padding:0 16px;border:0;border-radius:0;background:var(--cream);color:var(--navy);font:inherit;font-weight:700;font-size:15px;line-height:18px;outline:none}
.field select:focus,.field input:focus{box-shadow:0 0 0 2px var(--blue) inset}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2300324B' stroke-width='2' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;text-overflow:ellipsis}
.field.date em{position:absolute;left:16px;top:36px;font-style:normal;font-weight:700;font-size:15px;line-height:18px;color:var(--navy);pointer-events:none}
.field.date input{color:transparent}
.field.date input::-webkit-date-and-time-value{text-align:left}
.field.date.has-value em{display:none}
.field.date.has-value input{color:var(--navy)}
.field.date input::-webkit-calendar-picker-indicator{opacity:.75}
.field.meal{display:none}
.btn-orange{height:54px;margin-top:16px;background:var(--orange);color:var(--white);font-weight:700;font-size:16px;line-height:19px;transition:background .15s}
.btn-orange:hover{background:var(--orange-hi)}

/* ── tiles: all navy 108 tall, Micado glyph 42 + title 900 21/25, sub 400 15/18, arrow top-right ── */
.tiles{padding:31px 0 22px}
.tiles h2{font-size:30px;line-height:36px;margin-bottom:22px}
.tile-grid{display:grid;grid-template-columns:1fr;gap:12px}
.tile{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:108px;padding:15px 60px 14px 14px;background:var(--navy);color:var(--white);text-align:left;width:100%;transition:filter .15s}
.tile:hover{filter:brightness(1.08)}
.tile-head{display:flex;align-items:center;gap:8px}
.tile .ti{flex:0 0 42px;width:42px;height:42px;font-size:42px;line-height:42px;text-align:center;font-style:normal;font-weight:400}
.tile .ti.mw{font-family:"Micado-Web"} .tile .ti.mwa{font-family:"Micado-Web-Addition"}
.tile b{display:block;font-weight:900;font-size:21px;line-height:18px}
.tile p{position:absolute;left:18px;right:60px;top:63px;font-size:15px;line-height:18px}
.tile .arrow{position:absolute;right:24px;top:22px;width:28px;height:29px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 29'><path d='M3 14.5h21M14 5l10 9.5L14 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain}

/* ── footer: navy, white logo, contact, #hochkönig + socials, link line ── */
.ftr{background:var(--navy);color:var(--white);padding:33px 0 calc(env(safe-area-inset-bottom,0px) + 38px)}
.ftr-logo{width:90px;height:auto;margin-left:-5px}
.ftr-contact{margin-top:19px}
.ftr-h{font-weight:700;font-size:15px;line-height:18px;margin-bottom:14px}
.ftr-big{display:block;font-weight:700;font-size:22px;line-height:26px}
.ftr-contact .ftr-big + .ftr-big{margin-top:5px}
.ftr-addr{margin-top:13px;font-size:15px;line-height:18px}
.ftr-social{margin-top:23px}
.ftr-follow{margin-top:2px;font-size:14px;line-height:17px}
.socials{display:flex;gap:12px;margin-top:12px}
.socials a{display:flex;align-items:center;justify-content:center;width:34px;height:34px}
.ftr-links{margin-top:17px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 9px;font-size:13px;line-height:16px;font-weight:400}
.ftr-links i{font-style:normal}
.ftr-lang{font-size:13px;line-height:16px;text-decoration:underline;text-underline-offset:3px}

/* ── pop-ups: overlay above the dimmed page, close button fixed, content scrolls in its own container ── */
.dlg{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;inset:0;margin:0}
.dlg::backdrop{background:rgba(0,30,48,.6)}
.dlg-in{position:absolute;inset:0;margin:auto;width:min(92vw,560px);height:fit-content;max-height:min(88vh,760px);background:var(--white);padding:56px 24px 28px;overflow:auto}
.dlg-x{position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;background:#8E8E93 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 8l8 8M16 8l-8 8' stroke='white' stroke-width='2.2' stroke-linecap='round'/></svg>") no-repeat center/contain}
.dlg-body h3{font-size:30px;line-height:36px;margin-bottom:14px}
.dlg-body p{margin-bottom:12px;font-size:16px;line-height:21px}
.dlg-body ul{padding-left:20px;margin-bottom:14px}
.dlg-body li{margin-bottom:6px;line-height:21px}
/* FAQ (Figma "FAQ Overlay"): white items 8px apart, question 700 16/19, orange + / −, answer 400 14/17 */
.dlg.faqdlg .dlg-in{background:transparent;width:min(100vw - 24px,342px);padding:57px 0 0;max-height:calc(100vh - 40px);overflow:hidden;display:flex;flex-direction:column}
.dlg.faqdlg .dlg-x{top:17px;right:16px;background:var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 8l8 8M16 8l-8 8' stroke='%2300324B' stroke-width='2.2' stroke-linecap='round'/></svg>") no-repeat center/contain}
.dlg.faqdlg .dlg-body{overflow:auto;flex:1 1 auto;min-height:0}
.faq details{background:var(--white);padding:16px;margin-bottom:8px}
.faq summary{font-weight:700;font-size:16px;line-height:19px;cursor:pointer;list-style:none;position:relative;padding-right:40px;min-height:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-8px;font-size:32px;line-height:38px;font-weight:700;color:var(--orange)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:12px 0 0;font-size:14px;line-height:17px}
/* "So funktioniert's" picture gallery (Roland 21 Sep: swipe like a picture gallery, subtitle per step) */
.dlg.howdlg .dlg-in{width:min(96vw,720px);padding:56px 0 22px}
.dlg.howdlg h3{padding:0 24px}
.how{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0}
.how::-webkit-scrollbar{display:none}
.how figure{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0}
.how img{width:100%;height:auto;aspect-ratio:5410/3044;background:#E9E2D6}
.how figcaption{padding:14px 24px 0;font-size:16px;line-height:21px;min-height:92px}
.how figcaption b{display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;background:var(--navy);color:var(--white);font-weight:900;margin-right:8px;vertical-align:-1px}
.how figcaption small{display:block;font-size:14px;line-height:17px;color:var(--muted);margin-top:6px;padding-left:36px}
.how-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px 0}
.how-nav button{width:44px;height:44px;border:1px solid var(--navy);font-size:20px;font-weight:700;background:var(--white)}
.how-nav button:disabled{opacity:.3;cursor:default}
.how-dots{display:flex;gap:7px}
.how-dots i{width:9px;height:9px;background:var(--hair)}
.how-dots i.on{background:var(--navy)}

/* ── desktop (Figma 02 - FINAL Desktop, 1728 wide, 1200 content) ── */
@media (min-width:900px){
  :root{--gutter:24px}
  .hdr{padding-top:34px}
  .hdr-in{padding-bottom:26px}
  .lockup{gap:9px}
  .kachel{width:145px;height:145px}
  .brand{margin-top:24px}
  .brand b{font-size:80px;line-height:80px}
  .brand small{font-size:40px;line-height:44px;margin-top:-8px;margin-left:6px}
  .rule-wrap{padding:0 55px}
  .hero{padding:0 0 47px}
  .hero-in{display:grid;grid-template-columns:409px 690px;column-gap:0;align-items:start}
  .figure{display:block;position:relative;margin:-28px 0 0 -50px;width:665px;pointer-events:none}
  .figure img{width:665px;max-width:none;height:auto}
  .col{padding-top:85px}
  .intro{position:relative;min-height:240px;background:var(--navy);color:var(--white);padding:42px 24px 30px}
  .intro::before{content:"";position:absolute;left:-34px;top:28px;width:0;height:0;border-style:solid;border-width:21px 34px 21px 0;border-color:transparent var(--navy) transparent transparent}
  .intro-txt{max-width:635px}
  .intro h1{font-size:56px;line-height:56px;margin-left:-2px}
  .intro p{font-size:18px;line-height:26px;margin-top:10px}
  .headbox{display:none}
  .widget-wrap{margin-top:23px}
  .widget-wrap iframe{height:385px}
  .outline-row{gap:20px;margin-top:23px}
  .btn-outline{height:54px}
  .booking{padding:38px 0 67px}
  .booking h2{margin-top:12px}
  .bform{flex-direction:row;flex-wrap:nowrap;align-items:flex-end;gap:24px;margin-top:10px}
  .field{flex:0 0 180px;width:180px}
  .dates{display:grid;grid-template-columns:180px 180px;gap:24px}
  .field.meal{display:flex}
  .btn-orange{flex:0 0 180px;width:180px;height:54px;margin:0 0 2px}
  .tiles{padding:75px 0 75px}
  .tiles h2{margin-bottom:25px}
  .tile-grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .tile{min-height:136px;padding:15px 20px 14px 11px}
  .tile p{left:18px;right:20px;top:63px}
  .tile .arrow{top:auto;bottom:12px;right:19px;width:23px;height:24px}
  .ftr{padding:54px 0 27px}
  .ftr-in{display:grid;grid-template-columns:133px 402px 307px 1fr;grid-template-areas:"logo contact addr social" "links links links links";padding-left:calc(var(--gutter) + 78px)}
  .ftr-logo{grid-area:logo;width:101px;margin:17px 0 0 15px}
  .ftr-contact{grid-area:contact;margin-top:22px;padding-left:96px}
  .ftr-h{font-size:20px;line-height:24px;margin-bottom:24px}
  .ftr-big{font-size:20px;line-height:24px}
  .ftr-contact .ftr-big + .ftr-big{margin-top:0}
  .ftr-addr{grid-area:addr;margin-top:70px;font-weight:700;font-size:20px;line-height:24px}
  .ftr-addr .brk{display:block}
  .ftr-social{grid-area:social;margin-top:22px}
  .ftr-follow{margin-top:1px}
  .socials{margin-top:16px}
  .ftr-links{grid-area:links;margin-top:77px;font-size:18px;line-height:22px;gap:0 14px}
  .ftr-lang{font-size:18px;line-height:22px}
  .dlg.faqdlg .dlg-in{width:min(92vw,560px)}
}
@media (min-width:900px) and (max-width:1199px){
  .hero-in{grid-template-columns:minmax(260px,34%) 1fr;column-gap:24px}
  .figure{margin-left:-24px;width:auto}
  .figure img{width:100%}
  .bform{flex-wrap:wrap}
  .ftr-in{grid-template-columns:133px 1fr 1fr 1fr;padding-left:var(--gutter)}
  .ftr-contact{padding-left:24px}
}