:root{
    --cream:#F7F1E6;
    --cream-2:#EFE6D4;
    --gold:#B08D4F;
    --gold-deep:#8C6B32;
    --ink:#3A322A;
    --taupe:#8B8172;
    --coffee:#4A3527;
    --coffee-light:#EDE0D3;
    --rose:#C68A73;
    --line:#DCD0BA;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Jost', sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.65;
    font-weight:400;
  }
  h1,h2,h3,.script{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    letter-spacing:0.01em;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 32px;}

  /* Prototype banner */
  .proto-banner{
    background:var(--ink); color:var(--cream);
    text-align:center; font-size:13px; letter-spacing:0.04em;
    padding:8px 16px;
  }

  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(247,241,230,0.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px; max-width:1080px; margin:0 auto;
  }
  .logo-word{
    font-family:'Cormorant Garamond', serif;
    font-style:italic; font-weight:500;
    font-size:26px; color:var(--gold-deep);
  }
  .logo-sub{
    font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--taupe); display:block; margin-top:-2px;
  }
  nav ul{list-style:none; display:flex; gap:30px;}
  nav a{
    font-size:14px; letter-spacing:0.03em; color:var(--ink);
    position:relative; padding:4px 0;
  }
  nav a:hover{color:var(--gold-deep);}
  .nav-toggle{display:none;}
  @media(max-width:820px){
    nav ul{display:none;}
  }

  /* Hero */
  .hero{
    padding:90px 32px 70px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 20% 10%, rgba(176,141,79,0.10), transparent 55%),
      radial-gradient(ellipse at 85% 90%, rgba(198,138,115,0.10), transparent 55%);
    pointer-events:none;
  }
  .eyebrow{
    font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--gold-deep); margin-bottom:18px; position:relative;
  }
  .hero h1{
    font-size:clamp(40px, 6vw, 64px);
    font-style:italic;
    color:var(--ink);
    margin-bottom:18px;
    position:relative;
  }
  .hero p.lead{
    max-width:520px; margin:0 auto 32px;
    color:var(--taupe); font-size:17px;
    position:relative;
  }
  .divider{
    width:64px; height:1px; background:var(--gold);
    margin:0 auto 26px; position:relative;
  }
  .divider::after{
    content:"◆"; font-size:8px; color:var(--gold);
    position:absolute; top:-5px; left:50%; transform:translateX(-50%);
    background:var(--cream); padding:0 6px;
  }
  .cta-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative;}
  .btn{
    display:inline-block; padding:13px 28px; font-size:14px;
    letter-spacing:0.03em; border-radius:2px; transition:all .2s;
  }
  .btn-primary{background:var(--gold-deep); color:var(--cream);}
  .btn-primary:hover{background:var(--ink);}
  .btn-ghost{border:1px solid var(--ink); color:var(--ink);}
  .btn-ghost:hover{background:var(--ink); color:var(--cream);}

  .photo-frame{
    margin-top:56px;
    height:340px; border-radius:4px;
    background:
      repeating-linear-gradient(135deg, rgba(139,129,114,0.10) 0 2px, transparent 2px 14px),
      linear-gradient(135deg, var(--cream-2), var(--line));
    display:flex; align-items:center; justify-content:center;
    color:var(--taupe); font-size:13px; letter-spacing:0.04em;
    border:1px solid var(--line);
    overflow:hidden;
  }
  .photo-frame.has-img, .about-photo.has-img{background:none;}
  .photo-frame img, .about-photo img, .card-photo img, .seasonal-card img, .gift-card img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Section shell */
  section{padding:80px 0;}
  .section-head{text-align:center; max-width:560px; margin:0 auto 48px;}
  .section-head .eyebrow{margin-bottom:12px;}
  .section-head h2{font-size:36px; font-style:italic;}
  .section-head p{color:var(--taupe); font-size:15px; margin-top:12px;}

  /* Über uns */
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  }
  .about-photo{
    height:320px; border-radius:4px;
    background:linear-gradient(135deg, var(--cream-2), var(--line));
    display:flex; align-items:center; justify-content:center;
    color:var(--taupe); font-size:13px; border:1px solid var(--line);
  }
  .about-text p{margin-bottom:16px; color:var(--ink);}
  .about-text .quote{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:20px;
    color:var(--gold-deep); border-left:2px solid var(--gold); padding-left:18px;
    margin:20px 0;
  }
  @media(max-width:820px){ .about-grid{grid-template-columns:1fr;} }

  /* Sortiment cards */
  .grid-3{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  }
  @media(max-width:820px){ .grid-3{grid-template-columns:1fr;} }
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  @media(max-width:820px){ .grid-2{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr;} }
  @media(max-width:520px){ .grid-4{grid-template-columns:1fr;} }
  .card{
    background:var(--cream-2); border:1px solid var(--line); border-radius:4px;
    padding:30px 26px; transition:transform .2s, box-shadow .2s;
  }
  .card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(58,50,42,0.08);}
  .card{overflow:hidden;}
  .card-photo{
    height:150px; margin:-30px -26px 18px; border-bottom:1px solid var(--line);
    background:var(--line); overflow:hidden;
  }
  .card .num{
    font-family:'Cormorant Garamond', serif; font-size:14px; color:var(--gold-deep);
    letter-spacing:0.08em;
  }
  .card h3{font-size:22px; margin:10px 0 8px; font-style:italic;}
  .card p{color:var(--taupe); font-size:14px;}

  /* Café section — distinct tone */
  .cafe{
    background:var(--coffee);
    color:var(--coffee-light);
    position:relative;
  }
  .cafe .section-head p{color:#CBB89F;}
  .cafe .eyebrow{color:#D8B98A;}
  .cafe-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
  }
  @media(max-width:820px){ .cafe-grid{grid-template-columns:1fr;} }

  .menu-box{
    background:var(--cream); color:var(--ink);
    border-radius:6px; padding:40px 36px 30px;
    margin-top:60px;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 34px;
  }
  @media(max-width:900px){ .menu-box{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .menu-box{grid-template-columns:1fr;} }
  .menu-col h4{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:20px;
    color:var(--gold-deep); margin-bottom:12px; padding-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  .menu-item{
    display:flex; justify-content:space-between; gap:10px;
    font-size:13.5px; padding:5px 0; border-bottom:1px dashed var(--line);
  }
  .menu-item span:first-child{color:var(--ink);}
  .menu-item span:last-child{color:var(--gold-deep); white-space:nowrap; font-weight:500;}
  .menu-item:last-child{border-bottom:none;}
  .menu-item .sub{display:block; font-size:11px; color:var(--taupe); font-weight:400;}
  .menu-note{
    grid-column:1 / -1; text-align:center; font-size:12px; color:var(--taupe);
    margin-top:6px; padding-top:16px; border-top:1px solid var(--line);
  }

  .shop-card{display:flex; flex-direction:column;}
  .shop-price{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px;
    color:var(--gold-deep); margin:4px 0 14px;
  }
  .shop-btn{
    margin-top:auto; text-align:center; font-size:13px; padding:10px 18px;
  }
  .cafe-text h3{font-size:28px; font-style:italic; margin-bottom:14px; color:#F3E6D3;}
  .cafe-text p{color:#D9C6AE; margin-bottom:14px; font-size:15px;}
  .steam-frame{
    height:300px; border-radius:4px; position:relative; overflow:hidden;
    background:linear-gradient(160deg, #5B4232, #3A2A1E);
    display:flex; align-items:center; justify-content:center;
    border:1px solid #6B4E38;
  }
  .steam-frame .label{color:#CBB89F; font-size:13px; z-index:2;}
  .steam{
    position:absolute; bottom:40%; width:3px; border-radius:3px;
    background:rgba(243,230,211,0.35);
    animation:rise 4s ease-in infinite;
  }
  .s1{left:44%; height:60px; animation-delay:0s;}
  .s2{left:50%; height:70px; animation-delay:1.3s;}
  .s3{left:56%; height:55px; animation-delay:2.6s;}
  @keyframes rise{
    0%{transform:translateY(0) scaleX(1); opacity:0;}
    15%{opacity:.5;}
    100%{transform:translateY(-90px) scaleX(2.4); opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){ .steam{animation:none; opacity:.15;} }
  .cafe-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
  .tag{
    border:1px solid #6B4E38; color:#E7D6BE; font-size:12px;
    padding:6px 14px; border-radius:20px; letter-spacing:0.03em;
  }

  /* Kiosk / Service strip */
  .strip{
    background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .strip-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
  }
  @media(max-width:820px){ .strip-grid{grid-template-columns:repeat(2,1fr);} }
  .strip-item h4{font-size:17px; font-style:italic; margin-bottom:6px;}
  .strip-item p{font-size:13px; color:var(--taupe);}

  /* Aktuell / Öffnungszeiten teaser */
  .info-band{
    display:grid; grid-template-columns:1fr 1fr; gap:40px;
    background:var(--cream-2); border:1px solid var(--line); border-radius:4px;
    padding:40px;
  }
  @media(max-width:820px){ .info-band{grid-template-columns:1fr;} }
  .info-band h3{font-style:italic; font-size:22px; margin-bottom:14px;}
  .hours-row{display:flex; justify-content:space-between; font-size:14px; padding:6px 0; border-bottom:1px dashed var(--line);}
  .hours-row:last-child{border-bottom:none;}

  /* Footer */
  footer{
    background:var(--ink); color:var(--cream-2); padding:56px 0 30px;
  }
  .footer-grid{
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:40px;
  }
  @media(max-width:820px){ .footer-grid{grid-template-columns:1fr;} }
  footer h4{font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:#C9BA9C; margin-bottom:14px;}
  footer p, footer a{font-size:14px; color:#D8CFBF; display:block; margin-bottom:8px;}
  footer a:hover{color:var(--gold);}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.1); padding-top:20px;
    font-size:12px; color:#9C917E; text-align:center;
  }