/* Café Peri — stylesheet
 *
 * Hand-written, no build step. The previous version was compiled Tailwind, which meant
 * every markup change needed `npx tailwindcss` before it could ship; the client can now
 * edit the HTML and see the result. Fonts are self-hosted (see assets/fonts/fonts.css)
 * so no visitor IP reaches a third party before consent.
 *
 * One family throughout — Montserrat, already subset for latin + latin-ext so the Turkish
 * characters (ı ş ğ ç ö ü) render. Hierarchy comes from weight, size and colour.
 */

:root{
  --page:#FFFFFF;
  --ground:#F3E7DD;
  --cream:#FFF8F5;
  --cream-2:#FFF1E8;
  --cream-3:#FFE3CE;
  --ink:#251101;
  --ink-2:#281809;
  --muted:#6B5F55;
  --brown:#924C00;
  --brown-2:#B86A14;
  --apricot:#FFB781;
  --gold:#6B5A24;
  --line:rgba(37,17,1,.11);
  --r-s:16px; --r-m:22px; --r-l:32px; --r-xl:48px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sh:0 2px 4px rgba(37,17,1,.04), 0 14px 34px rgba(37,17,1,.08);
  --sh-s:0 1px 2px rgba(37,17,1,.05), 0 6px 16px rgba(37,17,1,.06);
  --maxw:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink-2);font-family:var(--font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 760px at 10% -8%, rgba(255,255,255,.92), transparent 62%),
    radial-gradient(900px 620px at 94% 6%, rgba(255,183,129,.40), transparent 64%),
    radial-gradient(900px 820px at 50% 112%, rgba(146,76,0,.13), transparent 62%)}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--brown);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--brown);color:#fff;
  padding:12px 20px;border-radius:999px;font-weight:600}

/* overflow:clip, not hidden — hidden would make this a scroll container and silently
   break position:sticky on the header. clip still respects the rounded corners. */
.shell{max-width:var(--maxw);margin:26px auto;background:var(--page);
  border-radius:var(--r-xl);overflow:clip;box-shadow:0 30px 80px rgba(37,17,1,.14)}
.pad{padding:0 46px}
/* anchor targets clear the sticky bar instead of hiding under it */
[id]{scroll-margin-top:104px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- header ---------------- */
/* Sticky, and it gets out of the way: scrolling down slides it up, scrolling back up
   brings it straight back, so the phone number is always one flick away. */
.hdwrap{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .32s cubic-bezier(.4,0,.2,1), box-shadow .25s ease}
.hdwrap.is-hidden{transform:translateY(-101%)}
.hdwrap.is-stuck{box-shadow:0 8px 28px rgba(37,17,1,.09)}
.hdwrap.is-stuck .hd{border-bottom-color:transparent}
.hd{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:82px;border-bottom:1px solid var(--line);transition:border-color .25s ease}
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.logo img{height:34px;width:auto}
.logo b{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.logo b i{font-style:normal;color:var(--brown)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-size:14.5px;color:var(--muted);padding:9px 15px;border-radius:999px;transition:color .16s,background .16s}
.nav a:hover{color:var(--ink);background:var(--cream-2)}
.nav a[aria-current="page"]{color:var(--brown);border:1px solid var(--brown);font-weight:600}
.hd__r{display:flex;align-items:center;gap:12px}
.langs{display:flex;gap:2px}
.lang-btn{font-size:12.5px;padding:6px 9px;border-radius:8px;color:var(--muted);font-weight:500}
.lang-btn[aria-pressed="true"]{background:var(--cream-3);color:var(--ink);font-weight:700}
.hd__tel{font-size:14.5px;font-weight:700;color:var(--brown);white-space:nowrap}
.hd__tel s{text-decoration:none;color:var(--muted);font-weight:400}
.burger{display:none;width:42px;height:42px;border-radius:12px;background:var(--cream-2);
  align-items:center;justify-content:center;color:var(--ink);cursor:pointer;
  transition:background .18s ease}
.burger:hover{background:var(--cream-3)}
.burger__box{display:block;width:19px;height:13px;position:relative}
.burger__box i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .18s ease}
.burger__box i:nth-child(1){top:0}
.burger__box i:nth-child(2){top:5.5px}
.burger__box i:nth-child(3){top:11px}
/* the icon states what it will do next: three lines closed, a cross while open */
.burger[aria-expanded="true"] .burger__box i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__box i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------------- hero ---------------- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:center;padding:52px 0 0}
h1{font-size:clamp(38px,4.7vw,62px);line-height:1.1;font-weight:700;color:var(--ink);letter-spacing:-.03em}
h1 .u{position:relative;color:var(--brown);display:inline-block}
h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;border-radius:3px;background:var(--brown)}
.cluster{display:inline-flex;vertical-align:middle;margin:0 10px 6px}
.cluster img,.cluster span{width:38px;height:38px;border-radius:50%;border:3px solid var(--page);
  object-fit:cover;margin-left:-13px;background:var(--cream-3)}
.cluster img:first-child{margin-left:0}
.cluster span{display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink)}
.lede{margin-top:20px;font-size:16px;line-height:1.7;color:var(--muted);max-width:48ch}
.lede b{color:var(--ink);font-weight:600}
.cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  padding:15px 26px;border-radius:999px;transition:background .16s,filter .16s}
.btn--p{background:var(--brown);color:#fff}
.btn--p:hover{background:#7d4100}
.btn--g{background:var(--page);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-s)}
.btn--g:hover{background:var(--cream-2)}
.btn--thumb{padding:8px 28px 8px 8px}
.btn--thumb img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.35)}
.trust{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.trust b{color:var(--ink);font-weight:700;font-size:16px}
.trust .sep{width:1px;height:24px;background:var(--line)}

/* sliding dish stack */
.slider{position:relative;aspect-ratio:1/1;max-width:430px;margin-left:auto;width:100%}
.slider__ring{position:absolute;inset:-14px;border-radius:50%;border:1px dashed var(--cream-3)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transform:translateX(34px) scale(.96);animation:periSlide 20s infinite}
.slide__img{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:var(--sh)}
.slide__img img{width:100%;height:100%;object-fit:cover}
.slide:nth-child(1){animation-delay:0s}
.slide:nth-child(2){animation-delay:5s}
.slide:nth-child(3){animation-delay:10s}
.slide:nth-child(4){animation-delay:15s}
@keyframes periSlide{
  0%{opacity:0;transform:translateX(34px) scale(.96)}
  4%{opacity:1;transform:none}
  25%{opacity:1;transform:none}
  29%{opacity:0;transform:translateX(-34px) scale(.96)}
  100%{opacity:0;transform:translateX(-34px) scale(.96)}
}
.badge{position:absolute;background:var(--page);border:1px solid var(--line);border-radius:18px;
  padding:11px 16px;box-shadow:var(--sh-s);z-index:3}
.badge .n{font-size:11.5px;color:var(--muted)}
.badge .v{font-size:19px;font-weight:700;color:var(--ink);margin-top:1px;letter-spacing:-.02em}
.badge .v span{color:var(--brown)}
.badge--a{top:6px;right:-12px}
.badge--b{bottom:26px;left:-20px}
.seal{position:absolute;bottom:-4px;right:0;width:78px;height:78px;border-radius:50%;
  background:var(--gold);color:#fff;display:grid;place-items:center;text-align:center;
  /* "ZERTIFIZIERT" and "SERTİFİKALI" are far longer than "CERTIFIED", so the type is
     sized for the German word rather than the English one and the tracking is tight
     enough to keep the longest line clear of the circle's edge. */
  font-size:9px;line-height:1.3;letter-spacing:.01em;font-weight:700;z-index:3;
  padding:0 4px;box-shadow:var(--sh-s)}

/* ---------------- notched offer ticket ---------------- */
.ticket{position:relative;margin:44px 0 0;background:var(--cream-2);border-radius:26px;
  display:grid;grid-template-columns:1.15fr auto auto;align-items:center;gap:20px;
  padding:26px 0 26px 34px;box-shadow:var(--sh-s)}
.ticket::before,.ticket::after{content:"";position:absolute;left:46%;width:52px;height:52px;
  border-radius:50%;background:var(--page)}
.ticket::before{top:-26px}
.ticket::after{bottom:-26px}
.ticket h2{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.32;max-width:22ch}
.tk__row{margin-top:12px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.tk__row .cluster img,.tk__row .cluster span{width:32px;height:32px;border-width:2px;margin-left:-10px}
.tk__row small{font-size:12.5px;color:var(--muted)}
.tk__big{text-align:center;padding-right:8px}
.tk__big .k{font-size:38px;font-weight:700;color:var(--brown);letter-spacing:-.03em;line-height:1}
.tk__big .l{font-size:12.5px;color:var(--muted);margin-top:5px}
.tk__img{width:154px;height:154px;border-radius:50%;overflow:hidden;margin:-14px -14px -14px 0;
  border:5px solid var(--page);box-shadow:var(--sh-s);flex:0 0 auto}
.tk__img img{width:100%;height:100%;object-fit:cover}

/* ---------------- section headings ---------------- */
.sec{padding:88px 0 0}
.bh{display:flex;align-items:center;justify-content:center;gap:15px}
.bh h2{font-size:clamp(27px,3.3vw,40px);font-weight:700;color:var(--ink);letter-spacing:-.03em;text-align:center}
.bh h2 em{font-style:normal;color:var(--brown)}
.brk{width:15px;height:34px;border:3px solid var(--brown);border-radius:4px;flex:0 0 auto}
.brk.l{border-right:0;border-radius:4px 0 0 4px}
.brk.r{border-left:0;border-radius:0 4px 4px 0}
.sub{position:relative;z-index:2;text-align:center;color:var(--muted);font-size:15px;margin-top:12px}

/* ---------------- feature cards ---------------- */
.best{position:relative;margin-top:38px}
.best::before{content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:760px;height:760px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--cream-2) 0%,var(--cream-2) 46%,rgba(255,241,232,0) 72%)}
.fc{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);
  border-radius:44px;padding:26px;box-shadow:var(--sh);margin-bottom:26px}
.fc:nth-of-type(even){grid-template-columns:1fr auto}
.fc:nth-of-type(even) .fc__i{order:2}
.fc__i{width:330px;height:286px;border-radius:34px;overflow:hidden;flex:0 0 auto}
.fc__i img{width:100%;height:100%;object-fit:cover}
.fc h3{font-size:29px;font-weight:700;color:var(--ink);letter-spacing:-.028em}
.fc p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-top:12px;max-width:46ch}
.fc .pr{font-size:30px;font-weight:700;color:var(--ink);margin-top:18px;letter-spacing:-.03em}
.fc .pr span{color:var(--brown)}
.fc .pr small{display:block;font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:3px}
.fc__act{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ic{width:48px;height:48px;border-radius:12px;background:var(--cream-3);display:grid;place-items:center;
  color:var(--brown);flex:0 0 auto}
.ic svg{width:20px;height:20px}
.when{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px}

/* ---------------- menu: tabs + grid ---------------- */
.tabs{margin:30px 0 0;display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;background:var(--page);border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;font-size:14px;font-weight:500;color:var(--muted);transition:.16s}
.tab:hover{border-color:var(--apricot);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--brown);border-color:var(--brown);color:#fff;font-weight:600}
.grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dc{background:var(--page);border:1px solid var(--line);border-radius:28px;padding:16px;
  box-shadow:var(--sh-s);display:flex;flex-direction:column;animation:periPop .32s ease both}
@keyframes periPop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dc__i{height:158px;border-radius:20px;overflow:hidden;background:var(--cream-2)}
.dc__i img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.dc:hover .dc__i img{transform:scale(1.06)}
/* several desserts are transparent portrait cut-outs — cover would slice the glass */
.dc__i.is-tall{height:210px}
.dc__i.is-tall img{object-fit:contain;padding:8px}
.dc:hover .dc__i.is-tall img{transform:none}
.dc h3{font-size:17px;font-weight:700;color:var(--ink);margin-top:15px;letter-spacing:-.018em}
.dc .de{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:5px;flex:1}
.dc__f{margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dc .p{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.dc .p span{color:var(--brown)}
.dc .p.todo{font-size:13px;color:var(--brown)}
.dc .psub{font-size:11.5px;color:var(--muted);margin-top:2px}
.dc__r{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.srv{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.ic-s{width:38px;height:38px;border-radius:10px;background:var(--cream-3);display:grid;
  place-items:center;color:var(--brown);flex:0 0 auto}
.ic-s svg{width:17px;height:17px}
.empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:28px}

/* ---------------- dark split panel (Halal / Das Haus) ---------------- */
.split{position:relative;margin-top:38px;background:var(--ink);border-radius:44px;overflow:hidden;
  display:grid;grid-template-columns:.85fr 1fr;align-items:center;color:var(--cream)}
.split--flip{grid-template-columns:1fr .85fr}
.split--flip .split__i{order:2}
.split__i{height:100%;min-height:340px}
.split__i img{width:100%;height:100%;object-fit:cover}
.split__t{padding:46px 44px}
.split__t h3{font-size:clamp(24px,2.8vw,32px);font-weight:700;letter-spacing:-.025em;color:#fff}
.split__t h3 em{font-style:normal;color:var(--apricot)}
.split__t p{color:rgba(255,248,245,.78);font-size:15px;line-height:1.72;margin-top:14px;max-width:46ch}
.split__t p b{color:#fff;font-weight:600}
.pills{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}
.pill{font-size:13px;background:rgba(255,248,245,.09);border:1px solid rgba(255,248,245,.16);
  border-radius:999px;padding:8px 15px}
.split__t .btn--g{background:transparent;border-color:rgba(255,248,245,.4);color:var(--cream);box-shadow:none}
.split__t .btn--g:hover{background:rgba(255,248,245,.1)}

/* ---------------- testimonials ---------------- */
.tst{position:relative;margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tc{background:rgba(255,255,255,.76);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:26px;padding:22px}
.tc__h{display:flex;align-items:center;gap:11px}
.av{width:42px;height:42px;border-radius:50%;background:var(--cream-3);color:var(--brown);
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:0 0 auto}
.tc__h b{font-size:15px;color:var(--ink);display:block}
.stars{color:var(--brown-2);font-size:12px;letter-spacing:2px}
.tc p{font-size:13.5px;line-height:1.65;color:var(--muted);margin-top:13px}
.tc__d{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.tst__src{margin-top:28px;text-align:center;font-size:13.5px}
.tst__src a{color:var(--brown);font-weight:600;
  border-bottom:1px solid rgba(146,76,0,.35);padding-bottom:2px;
  transition:border-color .18s ease}
.tst__src a:hover{border-bottom-color:var(--brown)}

/* ---------------- instagram ---------------- */
.iggrid{margin-top:30px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.igc{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--cream-2)}
.igc img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.igc:hover img{transform:scale(1.07)}

/* ---------------- notes (client to-dos, not shipped copy) ---------------- */
.note{margin-top:20px;border:1px dashed rgba(146,76,0,.45);background:var(--cream);
  border-radius:18px;padding:15px 19px;font-size:12.5px;line-height:1.65;color:var(--muted)}
.note b{color:var(--brown)}

/* ---------------- footer ---------------- */
.ft{margin-top:92px;background:var(--cream-2);padding:52px 46px 26px}
.ft__grid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1.3fr;gap:34px}
.ft h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
.ft .brand{font-size:21px;font-weight:700;color:var(--brown);letter-spacing:-.02em}
.ft p{font-size:13px;line-height:1.7;color:var(--muted);margin-top:11px;max-width:36ch}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft ul a{font-size:13px;color:var(--muted)}
.ft ul a:hover{color:var(--brown)}
.nl{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.nl input{flex:1;min-width:150px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:13px;font-family:inherit;background:var(--page);color:var(--ink)}
.nl button{background:var(--brown);color:#fff;border-radius:10px;padding:12px 20px;font-size:13px;font-weight:600}
.soc{display:flex;gap:9px;margin-top:20px}
.soc a{width:36px;height:36px;border-radius:50%;background:var(--brown);color:#fff;display:grid;place-items:center}
.soc svg{width:16px;height:16px}
.copy{margin-top:38px;border-top:1px solid var(--line);padding-top:18px;text-align:center;
  font-size:12.5px;color:var(--muted)}
.copy a{color:var(--brown);font-weight:600}

/* ---------------- FAQ ---------------- */
.faq{margin-top:32px;display:grid;gap:12px;max-width:860px;margin-left:auto;margin-right:auto}
.faq details{background:var(--page);border:1px solid var(--line);border-radius:var(--r-m);padding:0}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--ink);font-size:15.5px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brown);font-size:22px;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 22px 20px;color:var(--muted);font-size:14.5px;line-height:1.7}

/* ---------------- legal pages (Impressum, Datenschutz) ----------------
   These used to carry Tailwind class names left over from the compiled build.
   That stylesheet is gone, so the pages rendered as unstyled text. They now use
   the same shell, header and footer as the landing page. */
.lgl{max-width:760px;margin:0 auto;padding:54px 0 20px}
.lgl__k{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brown)}
.lgl h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(32px,4.4vw,46px);
  line-height:1.12;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-top:10px}
.lgl__date{margin-top:12px;font-size:14px;color:var(--muted)}
.lgl section{margin-top:34px}
.lgl h2{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:600;
  color:var(--ink);letter-spacing:-.01em;margin-bottom:10px}
.lgl h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:18px 0 6px}
.lgl p{font-size:15px;line-height:1.75;color:var(--muted)}
.lgl p + p{margin-top:12px}
.lgl a{color:var(--brown);font-weight:600;
  border-bottom:1px solid rgba(146,76,0,.3);transition:border-color .18s ease}
.lgl a:hover{border-bottom-color:var(--brown)}
.lgl ul{margin:10px 0 0 20px;font-size:15px;line-height:1.75;color:var(--muted)}
.lgl li{margin-bottom:5px}
.lgl__box{margin-top:22px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-m);padding:20px 22px}
.lgl__box p{font-size:14.5px}
.lgl__back{display:inline-flex;align-items:center;gap:8px;margin-top:44px;
  font-size:14.5px;font-weight:600;color:var(--brown)}
.lgl__back svg{width:16px;height:16px}

/* ---------------- cookie consent ----------------
   Analytics is genuinely blocked until the guest accepts, so this banner is a gate
   rather than decoration. Accept and decline carry the same visual weight, which
   § 25 TDDDG requires. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:150;padding:0 14px 14px;
  display:flex;justify-content:center;pointer-events:none}
.cc[hidden]{display:none}
.cc__panel{pointer-events:auto;width:100%;max-width:660px;background:var(--page);
  border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:0 4px 12px rgba(37,17,1,.06), 0 22px 60px rgba(37,17,1,.18);
  padding:20px 22px;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .38s ease, transform .48s cubic-bezier(.16,1,.3,1)}
.cc.is-in .cc__panel{opacity:1;transform:none}
.cc__t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.cc__p{font-size:13.5px;line-height:1.65;color:var(--muted)}
.cc__p a{color:var(--brown);font-weight:600;
  border-bottom:1px solid rgba(146,76,0,.3)}
.cc__row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
/* Both buttons share one style on purpose. Accept must not be made easier to
   reach or easier to see than decline. */
.cc__row .btn{flex:1 1 auto;justify-content:center;min-width:150px;
  font-size:14px;padding:13px 22px}
@media(max-width:520px){
  .cc__row .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cc__panel{transition:none}
}

/* ---------------- mobile navigation drawer ---------------- */
.drawer{position:fixed;inset:0;z-index:200}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(37,17,1,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .34s ease}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,376px);
  background:var(--cream);display:flex;flex-direction:column;
  border-radius:32px 0 0 32px;box-shadow:-24px 0 70px rgba(37,17,1,.22);
  padding:22px 26px calc(26px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(101%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.drawer.is-open .drawer__panel{transform:translateX(0)}

.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.drawer__brand{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.drawer__brand i{font-style:normal;color:var(--brown)}
.drawer__x{width:42px;height:42px;border-radius:12px;background:var(--cream-2);
  display:grid;place-items:center;color:var(--ink);cursor:pointer;flex:0 0 auto;
  transition:background .18s ease}
.drawer__x:hover{background:var(--cream-3)}
.drawer__x svg{width:19px;height:19px}

.drawer__nav{display:flex;flex-direction:column;margin-top:30px}
.drawer__nav a{font-family:'Playfair Display',Georgia,serif;font-size:26px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;padding:13px 0;border-bottom:1px solid var(--line);
  /* transform, not padding: the nudge must not relayout the panel on every frame */
  transition:color .16s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.drawer__nav a:hover{color:var(--brown);transform:translateX(8px)}

.drawer__foot{margin-top:auto;padding-top:30px}
.drawer__call{width:100%;justify-content:center}
.drawer__hours{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--muted);text-align:center}
.drawer__langs{display:flex;gap:6px;justify-content:center;margin-top:18px}
.drawer__langs .lang-btn{border:1px solid var(--line);padding:9px 16px;border-radius:10px;
  font-size:13px;cursor:pointer}
.drawer__langs .lang-btn[aria-pressed="true"]{background:var(--brown);color:#fff;
  border-color:var(--brown);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .drawer__panel,.drawer__scrim{transition:none}
}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .shell{margin:10px;border-radius:30px}
  .pad{padding:0 18px}
  .hd{min-height:64px}
  .nav{display:none}
  .burger{display:flex}
  /* At this width the burger is the only navigation there is, so the bar must not
     slide away on scroll down. Hiding it is fine on desktop, where the full nav is
     visible; here it reads as the menu disappearing. */
  .hdwrap.is-hidden{transform:none}
  .hero{grid-template-columns:1fr;gap:26px;padding:28px 0 0}
  h1{font-size:clamp(30px,7.4vw,42px)}
  .cluster img,.cluster span{width:32px;height:32px}
  .slider{max-width:290px;margin:0 auto}
  .badge--a{top:0;right:-6px}
  .badge--b{bottom:8px;left:-10px}
  .seal{width:64px;height:64px;font-size:7.5px;padding:0 3px}
  .ticket{grid-template-columns:1fr;padding:24px;gap:16px}
  .ticket::before,.ticket::after{left:50%;transform:translateX(-50%);width:40px;height:40px}
  .ticket::before{top:-20px}
  .ticket::after{bottom:-20px}
  .tk__img{margin:0;width:110px;height:110px}
  .best::before{display:none}
  .fc,.fc:nth-of-type(even){grid-template-columns:1fr;gap:18px;padding:18px;border-radius:30px}
  .fc:nth-of-type(even) .fc__i{order:0}
  .fc__i{width:100%;height:210px}
  .grid,.tst{grid-template-columns:1fr}
  .split,.split--flip{grid-template-columns:1fr;border-radius:30px}
  .split--flip .split__i{order:0}
  .split__t{padding:30px 22px}
  .split__i{min-height:230px}
  .iggrid{grid-template-columns:repeat(3,1fr);gap:8px}
  .sec{padding:60px 0 0}
  .ft{padding:38px 18px 22px}
  .ft__grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:700px){
  .langs{display:none}
  .logo b{font-size:18px}
  .hd__tel s{display:none}
  .hd__tel{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide{animation:none;opacity:0}
  .slide:nth-child(1){opacity:1;transform:none}
  .dc{animation:none}
  /* a bar that vanishes without the slide reads as a glitch — keep it put instead */
  .hdwrap{transition:none}
  .hdwrap.is-hidden{transform:none}
  *{transition-duration:.01ms !important}
}

@media print{
  body::before,.slider,.iggrid,.nl,.soc{display:none}
  .shell{box-shadow:none;margin:0;border-radius:0}
}