/* ================================================================
   French Baguette — Microsite
   Boulangerie trifft Instagram · Tricolore · mobile-first
   Selbst gehostet, keine externen CDNs. Vanilla only.
   ================================================================ */

:root{
  --cream:      #FAF6EF;
  --cream-2:    #F3ECDF;
  --cream-3:    #ECE2CF;
  --navy:       #1F3A5F;
  --navy-deep:  #16293F;
  --red:        #C8102E;
  --ink:        #24303E;
  --muted:      #66717C;
  --gold:       #D6A64A;
  --line:       rgba(31,58,95,.24);
  --line-soft:  rgba(31,58,95,.13);

  --serif: Georgia, Cambria, "Iowan Old Style", "Times New Roman", "Noto Serif", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --pad: clamp(1.15rem, 5vw, 2.5rem);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.08; color:var(--navy); margin:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red); margin:0 0 .9rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--red); display:inline-block}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--navy); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:700; font-size:.98rem; letter-spacing:.01em;
  padding:.95rem 1.6rem; border-radius:999px; border:2px solid var(--bg);
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  box-shadow:0 6px 20px -8px rgba(22,41,63,.55);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(22,41,63,.55)}
.btn:active{transform:translateY(0)}
.btn--red{--bg:var(--red); box-shadow:0 6px 20px -8px rgba(200,16,46,.6)}
.btn--red:hover{box-shadow:0 12px 26px -8px rgba(200,16,46,.6)}
.btn--ghost{--bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--ink-ghost{--bg:transparent; --fg:var(--navy); border-color:var(--navy)}
.btn--ink-ghost:hover{background:var(--navy); color:#fff}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ================================================================
   Header
   ================================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding:1.05rem 0;
}
.hdr__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.hdr.is-scrolled{
  background:rgba(250,246,239,.92); backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 var(--line-soft), 0 10px 30px -22px rgba(22,41,63,.6);
  padding:.6rem 0;
}
.brand{display:flex; align-items:center; gap:.7rem; color:#fff; transition:color .3s}
.hdr.is-scrolled .brand{color:var(--navy)}
.brand__logo{width:44px; height:44px; flex:none; transition:width .3s, height .3s}
.hdr.is-scrolled .brand__logo{width:38px; height:38px}
.brand__name{font-family:var(--serif); font-weight:700; font-size:1.18rem; letter-spacing:.01em; line-height:1}
.brand__name small{display:block; font-family:var(--sans); font-weight:600; font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; opacity:.72; margin-top:.18rem}
.nav{display:flex; align-items:center; gap:1.9rem}
.nav__link{font-weight:600; font-size:.95rem; color:#fff; opacity:.9; position:relative; transition:opacity .2s}
.hdr.is-scrolled .nav__link{color:var(--navy)}
.nav__link::after{content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--red); transition:width .25s var(--ease)}
.nav__link:hover{opacity:1}
.nav__link:hover::after{width:100%}
.nav__cta{margin-left:.3rem}
@media (max-width:860px){ .nav__link{display:none} .nav__cta{margin:0} }

/* ================================================================
   Hero
   ================================================================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media video,.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(22,41,63,.55) 0%, rgba(22,41,63,.12) 34%, rgba(22,41,63,.36) 64%, rgba(22,41,63,.86) 100%),
    radial-gradient(120% 80% at 15% 100%, rgba(22,41,63,.5), transparent 60%);
}
.hero__inner{padding-block: 8.5rem 3.2rem; width:100%}
.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.3rem;
  padding:.5rem .95rem; border-radius:999px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(4px);
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
}
.hero__stars{color:var(--gold); letter-spacing:.05em}
.hero h1{
  font-size:clamp(3rem, 12vw, 6.6rem); letter-spacing:-.02em; color:#fff;
  text-shadow:0 2px 30px rgba(22,41,63,.4);
}
.hero h1 em{font-style:italic; color:#fff}
.hero__tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,3.4vw,1.75rem);
  color:#fbe7d8; margin:.6rem 0 0; max-width:34ch;
}
.hero__sub{font-size:1.02rem; color:rgba(255,255,255,.9); margin:1.15rem 0 0; max-width:42ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem}
.hero__scroll{
  position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero__scroll span{width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation:scrolldrop 1.9s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-width:600px){.hero__scroll{display:none}}

/* ================================================================
   Marquee / Bandeau tricolore
   ================================================================ */
.bandeau{background:var(--navy); color:var(--cream); overflow:hidden; border-block:3px solid var(--red)}
.bandeau__track{display:flex; gap:2.5rem; width:max-content; padding:.85rem 0; animation:marquee 26s linear infinite}
.bandeau:hover .bandeau__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.bandeau__track{animation:none; flex-wrap:wrap; justify-content:center}}
.bandeau__item{font-family:var(--serif); font-style:italic; font-size:1.05rem; white-space:nowrap; display:inline-flex; align-items:center; gap:2.5rem}
.bandeau__item::after{content:"·"; color:var(--red); font-style:normal; font-weight:700}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ================================================================
   Section shell
   ================================================================ */
.sect{padding-block:clamp(3.5rem, 9vw, 6.5rem)}
.sect--alt{background:var(--cream-2)}
.sect--navy{background:var(--navy); color:#eaf0f6}
.sect__head{max-width:60ch; margin-bottom:2.6rem}
.sect__head--center{margin-inline:auto; text-align:center}
.sect__title{font-size:clamp(2rem, 5.5vw, 3.2rem); letter-spacing:-.01em}
.sect--navy .sect__title{color:#fff}
.sect__lead{font-size:1.08rem; color:var(--muted); margin-top:.9rem}
.sect--navy .sect__lead{color:rgba(234,240,246,.8)}

/* ---------- Bistro double-frame card ---------- */
.card{
  position:relative; background:var(--cream); border:2px solid var(--navy); border-radius:var(--radius);
  padding:clamp(1.4rem,4vw,2.6rem);
}
.card::before{
  content:""; position:absolute; inset:6px; border:1px solid var(--line); border-radius:2px; pointer-events:none;
}
.card--flat{background:#fff}

/* ================================================================
   Menu / Speisekarte
   ================================================================ */
.menu-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem}
.menu-cat{
  font-family:var(--serif); font-size:1.35rem; color:var(--navy);
  display:inline-flex; align-items:center; gap:.7rem;
}
.menu-cat__ico{width:24px; height:24px; flex:none; color:var(--red)}
.menu-cols{columns:2; column-gap:clamp(1.8rem,5vw,4rem)}
@media (max-width:640px){.menu-cols{columns:1}}
.mrow{
  break-inside:avoid; display:flex; align-items:flex-end; gap:.3rem;
  padding:.55rem 0; border-bottom:1px solid var(--line-soft);
}
.mrow__name{font-weight:600; color:var(--ink)}
.mrow__lead{flex:1; margin:0 .35rem .34em; border-bottom:1px dotted var(--line); min-width:1rem}
.mrow__price{font-family:var(--serif); font-weight:700; color:var(--navy); white-space:nowrap; font-size:1.05rem}
.mrow__note{display:block; font-family:var(--sans); font-weight:400; font-size:.76rem; color:var(--muted); margin-top:.1rem}
.tag-fresh{
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red); border-radius:999px; padding:.05rem .45rem; margin-left:.5rem; vertical-align:middle;
}
.menu-mods{
  display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; padding-top:1.3rem; border-top:2px solid var(--line);
}
.mod-chip{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; color:var(--navy);
  background:var(--cream-2); border:1px solid var(--line); border-radius:999px; padding:.5rem .95rem;
}
.mod-chip b{color:var(--red)}
.allergen{margin-top:1.6rem; font-size:.9rem}
.allergen summary{cursor:pointer; font-weight:600; color:var(--navy); list-style:none; display:inline-flex; align-items:center; gap:.5rem}
.allergen summary::-webkit-details-marker{display:none}
.allergen summary::before{content:"+"; display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border:1px solid var(--navy); border-radius:50%; font-weight:700}
.allergen[open] summary::before{content:"–"}
.allergen p{color:var(--muted); margin:.8rem 0 0; line-height:1.7}

/* ---------- Backwaren / Getränke two-up ---------- */
.two-up{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,4vw,2.2rem)}
@media (max-width:760px){.two-up{grid-template-columns:1fr}}
.pricehint{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem;
  font-size:.82rem; color:var(--muted); font-style:italic;
}
.pricehint::before{content:"≈"; font-style:normal; font-weight:700; color:var(--gold)}

/* ================================================================
   Story / Social proof
   ================================================================ */
.story{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,5vw,4rem); align-items:center}
@media (max-width:840px){.story{grid-template-columns:1fr}}
.story p{color:rgba(234,240,246,.86); font-size:1.06rem; margin:0 0 1.1rem}
.story .lead-quote{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,3.4vw,1.9rem); color:#fff; line-height:1.35; margin-bottom:1.4rem}
.proof{
  border:2px solid rgba(255,255,255,.22); border-radius:6px; padding:clamp(1.5rem,4vw,2.4rem);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); position:relative;
}
.proof::before{content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.14); border-radius:4px; pointer-events:none}
.proof__big{display:flex; align-items:baseline; gap:.5rem}
.proof__num{font-family:var(--serif); font-size:clamp(3.4rem,11vw,5rem); font-weight:700; color:#fff; line-height:1}
.proof__of5{font-family:var(--serif); font-size:1.4rem; color:rgba(255,255,255,.6)}
.proof__stars{color:var(--gold); font-size:1.5rem; letter-spacing:.12em; margin:.5rem 0 .2rem}
.proof__meta{color:rgba(234,240,246,.8); font-size:.98rem}
.proof__src{margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.16); font-size:.82rem; color:rgba(234,240,246,.6)}
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.chip{font-size:.86rem; font-weight:600; color:#eaf0f6; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.4rem .9rem}

/* ================================================================
   Besuch / Öffnungszeiten / Karte
   ================================================================ */
.visit{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,2.6rem); align-items:stretch}
@media (max-width:840px){.visit{grid-template-columns:1fr}}
.hours{list-style:none; margin:0; padding:0}
.hours li{display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid var(--line-soft); font-size:1rem}
.hours li:last-child{border-bottom:none}
.hours .day{font-weight:600; color:var(--navy)}
.hours .time{color:var(--ink); font-variant-numeric:tabular-nums}
.hours li.is-today{background:var(--cream-2); margin-inline:-.7rem; padding-inline:.7rem; border-radius:4px}
.hours li.is-today .day::after{content:"heute"; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--red); border-radius:999px; padding:.1rem .45rem; margin-left:.55rem; vertical-align:middle}
.hours .closed{color:var(--muted); font-style:italic}
.disclaimer{font-size:.78rem; color:var(--muted); font-style:italic; margin-top:1rem}
.addr{margin-top:1.6rem; padding-top:1.4rem; border-top:2px solid var(--line)}
.addr__line{display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.7rem; font-size:1rem}
.addr__ico{width:20px; height:20px; flex:none; color:var(--red); margin-top:.2rem}
.addr__line a:hover{color:var(--red)}
.map{
  position:relative; border:2px solid var(--navy); border-radius:var(--radius); overflow:hidden; min-height:340px;
}
.map iframe{width:100%; height:100%; min-height:340px; border:0; filter:saturate(.9) contrast(1.02)}
.map__pin{position:absolute; top:1rem; left:1rem; z-index:2; background:var(--cream); border:1px solid var(--navy); border-radius:999px; padding:.4rem .9rem; font-size:.82rem; font-weight:700; color:var(--navy); box-shadow:0 6px 18px -8px rgba(22,41,63,.5)}
.map__link{position:absolute; bottom:1rem; right:1rem; z-index:2}

/* ================================================================
   Footer
   ================================================================ */
.foot{background:var(--navy-deep); color:rgba(234,240,246,.8); padding-block:3rem 2rem}
.foot__top{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12)}
.foot__brand{display:flex; align-items:center; gap:.8rem; color:#fff}
.foot__brand .brand__name{color:#fff}
.foot__tag{font-family:var(--serif); font-style:italic; color:rgba(234,240,246,.7); margin-top:.5rem; max-width:32ch}
.foot__cols{display:flex; gap:3rem; flex-wrap:wrap}
.foot__col h4{color:#fff; font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.9rem}
.foot__col a,.foot__col p{display:block; color:rgba(234,240,246,.78); font-size:.94rem; margin-bottom:.5rem}
.foot__col a:hover{color:#fff}
.foot__bottom{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; padding-top:1.6rem; font-size:.82rem; color:rgba(234,240,246,.55)}
.foot__bottom a:hover{color:#fff}
.tricolore{display:inline-flex; height:12px; width:34px; border-radius:2px; overflow:hidden; vertical-align:middle; box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--navy)}
.tricolore i:nth-child(2){background:#fff}
.tricolore i:nth-child(3){background:var(--red)}

/* ================================================================
   Sticky mobile order button
   ================================================================ */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70; padding:.75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(250,246,239,0), rgba(250,246,239,.96) 40%);
  transform:translateY(120%); transition:transform .35s var(--ease); pointer-events:none;
}
.mobile-cta.is-visible{transform:translateY(0); pointer-events:auto}
.mobile-cta .btn{width:100%}
@media (min-width:861px){.mobile-cta{display:none}}

/* ================================================================
   Scroll-reveal
   ================================================================ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---------- Legal pages ---------- */
.legal{padding-block:8rem 4rem; max-width:760px}
.legal h1{font-size:clamp(2rem,6vw,2.8rem); margin-bottom:1.5rem}
.legal h2{font-size:1.3rem; margin:2.2rem 0 .7rem}
.legal p{color:var(--ink); margin:0 0 1rem}
.legal a{color:var(--red)}
.legal .tbd{background:var(--cream-2); border:1px dashed var(--line); border-radius:4px; padding:1.1rem 1.3rem; color:var(--muted); font-size:.92rem}
.legal .back{display:inline-flex; align-items:center; gap:.4rem; margin-top:2.5rem; font-weight:600; color:var(--navy)}
.legal .back:hover{color:var(--red)}