/* ───────────────────────────────────────────────────────────────
   Café Morgen — Demo style.css
   Stil 1: Gemütliches Café, slug `cafe`. Hero pixelgenau aus .pv--cafe.
   ─────────────────────────────────────────────────────────────── */

:root{
  /* ── Stil-Tokens (Café-Palette) ── */
  --bg:#F5ECD9;
  --text:#3C2E22;
  --accent:#C9714A;       /* Terracotta */
  --meta:#A0764F;
  --line:rgba(60,46,34,.18);
  --surface:#FBF6EA;      /* leicht hellere Karten-Fläche */
  --bg-alt:#F0E4CD;       /* abgesetzte Sektion */

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-script:'Caveat',cursive;
  --font-mono:'JetBrains Mono',monospace;

  --radius:16px;
  --maxw:1140px;

  /* ── Motion-Overrides: Charakter „weich, federnd" ── */
  --motion-duration:220ms;
  --motion-duration-reveal:520ms;
  --motion-distance:18px;
  --motion-ease:cubic-bezier(0.34,1.2,0.64,1);
  --motion-ease-reveal:cubic-bezier(0.16,1,0.3,1);
  --motion-stagger:70ms;
  --motion-hover-lift:-4px;
}

/* ── Reset / Basis ── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.0625rem;          /* ≥1rem Body */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-variation-settings:"opsz" 72,"wght" 600;}
h3{font-size:1.3rem;font-variation-settings:"opsz" 36,"wght" 600;}
p{margin:0 0 1rem;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.4rem);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--meta);
  margin:0 0 .8rem;
}
.script{
  font-family:var(--font-script);
  color:var(--accent);
  font-weight:700;
  font-size:1.9rem;
  line-height:1;
  margin:0 0 .4rem;
}
.script--sm{font-size:1.35rem;}
.lead{font-size:1.1rem;color:color-mix(in srgb,var(--text) 82%,transparent);max-width:46ch;}

/* ── Buttons (Tap-Targets ≥44px) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.7rem 1.5rem;
  border-radius:999px;
  font-family:var(--font-body);font-weight:500;font-size:1rem;
  cursor:pointer;border:1px solid transparent;
  transition:background var(--motion-duration) var(--motion-ease),
             color var(--motion-duration) var(--motion-ease),
             border-color var(--motion-duration) var(--motion-ease);
}
.btn--accent{background:var(--accent);color:var(--bg);}
.btn--accent:hover{background:#b5613d;}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);}

/* ── Demo-Banner ── */
#demo-disclaimer-banner{
  background:#3C2E22;
  color:#F5ECD9;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  padding:.55rem 1rem;
}
#demo-disclaimer-banner strong{color:var(--accent);font-weight:600;}

/* ── Sticky Header ── */
.top{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color var(--motion-duration) var(--motion-ease),
             background var(--motion-duration) var(--motion-ease);
}
.top.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 96%,transparent);}
.top__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;}

.logo{
  font-family:var(--font-display);
  font-variation-settings:"opsz" 14,"wght" 700;
  font-size:1.35rem;
  display:inline-flex;align-items:baseline;gap:.22em;
}
.logo small{
  font-family:var(--font-script);
  font-size:1.5em;
  color:var(--accent);
  font-weight:700;
}

.nav{display:flex;gap:1.8rem;}
.nav a{
  font-size:.98rem;color:var(--text);
  position:relative;padding:.3rem 0;
  transition:color var(--motion-duration) var(--motion-ease);
}
.nav a:hover{color:var(--accent);}
.nav__cta{min-height:42px;padding:.5rem 1.3rem;}

/* ── Hero ── */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,6.5rem);}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.hero__head{
  font-size:clamp(2.6rem,6vw,4.4rem);
  font-variation-settings:"opsz" 96,"wght" 600;
  letter-spacing:-.02em;
  margin:.2rem 0 1.2rem;
}
.hero__sub{font-size:1.15rem;max-width:42ch;color:color-mix(in srgb,var(--text) 84%,transparent);}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.6rem 0 2rem;}
.hero__foot{
  font-style:italic;
  color:var(--meta);
  border-top:1px solid var(--line);
  padding-top:.9rem;
  margin:0;
  font-size:1.05rem;
}
.hero__media{position:relative;}

/* ── Sektions-Grundgerüst ── */
.section{padding:clamp(3rem,6vw,6.5rem) 0;}
.section--alt{background:var(--bg-alt);}
.sec-head{max-width:48ch;margin:0 0 2.6rem;}
.sec-head h2{margin-bottom:.6rem;}

/* ── Angebot / Karte ── */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.menu-col{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.8rem 1.6rem;
}
.menu-col h3{margin-bottom:1.1rem;color:var(--text);}
.menu-list{list-style:none;margin:0;padding:0;}
.menu-list li{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.55rem 0;
  border-bottom:1px solid var(--line);
}
.menu-list li:last-child{border-bottom:none;}
.m-name{flex:0 1 auto;}
.m-dots{flex:1 1 auto;border-bottom:1px dotted var(--line);transform:translateY(-.25em);min-width:1rem;}
.m-price{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:500;white-space:nowrap;}

.daily{
  margin-top:1.6rem;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:var(--radius);
  padding:1.5rem 1.8rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;
}
.daily__label{display:flex;flex-direction:column;flex:0 0 auto;}
.daily__label .eyebrow{margin:0;}
.daily__text{margin:0;flex:1 1 280px;color:color-mix(in srgb,var(--text) 86%,transparent);}

/* ── Zwei-Spalten (Über uns / Standort) ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.two-col--map{align-items:start;}
.two-col__text .sig{font-family:var(--font-script);font-size:1.5rem;color:var(--accent);margin-top:.6rem;}

/* ── Galerie ── */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}

/* ── Bild-Platzhalter ── */
.img-slot{
  position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 8%,transparent) 0 12px,
    transparent 12px 24px),color-mix(in srgb,var(--text) 5%,var(--bg));
  display:flex;align-items:center;justify-content:center;
}
.img-slot span{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;
  color:color-mix(in srgb,var(--text) 55%,transparent);
}
.img-slot--tall{aspect-ratio:3/4;}

/* ── Stimmen ── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.quote{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.8rem 1.6rem;
  margin:0;
}
.quote blockquote{margin:0 0 1rem;font-size:1.08rem;line-height:1.55;}
.quote figcaption{color:var(--meta);font-size:.95rem;}

/* ── Öffnungszeiten ── */
.hours__table{width:100%;border-collapse:collapse;margin:.4rem 0 1rem;}
.hours__table th,.hours__table td{
  text-align:left;padding:.7rem 0;border-bottom:1px solid var(--line);
  font-size:1.02rem;
}
.hours__table th{font-weight:500;}
.hours__table td{text-align:right;font-variant-numeric:tabular-nums;color:var(--meta);}
.hours__note{font-size:.95rem;color:var(--meta);margin-top:.4rem;}
.hours__addr{font-style:normal;margin-top:1.4rem;line-height:1.7;color:color-mix(in srgb,var(--text) 88%,transparent);}

/* ── Two-Click-Map ── */
.map__embed{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);
  min-height:340px;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 8%,transparent) 0 12px,
    transparent 12px 24px),color-mix(in srgb,var(--text) 5%,var(--bg));
}
.map__placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;text-align:center;padding:2rem;
}
.map__hint{
  margin:0;max-width:34ch;font-size:.92rem;
  color:color-mix(in srgb,var(--text) 70%,transparent);
}
.map__embed--loaded{min-height:380px;}
.map__embed iframe{display:block;width:100%;height:380px;border:0;}

/* ── Abschluss-CTA ── */
.section--cta{background:var(--bg-alt);text-align:center;}
.closing{max-width:52ch;margin:0 auto;}
.closing h2{margin:.2rem 0 1rem;}
.closing .lead{margin-left:auto;margin-right:auto;}
.closing__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.6rem;}

/* ── Footer ── */
.foot{background:#332619;color:#E8DCC8;padding:2.6rem 0;}
.foot__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;}
.logo--foot{color:#F5ECD9;font-size:1.25rem;}
.foot__addr{margin:.4rem 0 0;font-size:.95rem;color:color-mix(in srgb,#E8DCC8 78%,transparent);}
.foot__links a{color:#E8DCC8;border-bottom:1px solid transparent;transition:border-color var(--motion-duration) var(--motion-ease);}
.foot__links a:hover{border-bottom-color:var(--accent);}
.foot__fine{font-style:italic;color:var(--accent);margin:0;}

/* ───────────────────────────────────────────────────────────────
   Responsive — Breakpoint Mobile ≤880px
   ─────────────────────────────────────────────────────────────── */
@media (max-width:880px){
  body{font-size:1rem;}
  .section{padding:clamp(2.4rem,8vw,4rem) 0;}
  .nav{display:none;}            /* schlanke Mobile-Topbar: Logo + CTA */
  .hero{padding:2.4rem 0 3rem;}
  .hero__inner{grid-template-columns:1fr;gap:2rem;}
  .hero__media{order:-1;}
  .img-slot--tall{aspect-ratio:16/10;}
  .menu-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .quotes{grid-template-columns:1fr;}
  .two-col,.two-col--map{grid-template-columns:1fr;}
  .two-col__media{order:-1;}
  #demo-disclaimer-banner{font-size:12px;}
}

@media (max-width:480px){
  .gallery{grid-template-columns:1fr;}
  .daily{flex-direction:column;align-items:flex-start;}
}