:root{
    --rot:#d9332e; --rot-dunkel:#b52520; --logo-rot:#fb4944;
    --tinte:#1f1d1b; --grau:#5f5a55; --linie:#e6dfd5;
    --creme:#faf6ef; --weiss:#fff;
    --rund:14px; --breite:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font:400 17px/1.6 Inter,system-ui,sans-serif;color:var(--tinte);background:var(--creme)}
  h1,h2,h3{font-family:Bitter,Georgia,serif;line-height:1.15;margin:0 0 .5em}
  h2{font-size:clamp(28px,4vw,40px)}
  h3{font-size:21px}
  p{margin:0 0 1em}
  a{color:inherit}
  .wrap{max-width:var(--breite);margin:0 auto;padding:0 20px}
  section{padding:88px 0}
  .knopf{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}
  .knopf:hover{transform:translateY(-1px)}
  .knopf.rot{background:var(--rot);color:#fff}
  .knopf.rot:hover{background:var(--rot-dunkel)}
  .knopf.hell{background:#fff;color:var(--tinte);border:1px solid var(--linie)}
  .klein{font-size:14px;color:var(--grau)}

  /* Kopf */
  header{position:sticky;top:0;z-index:10;background:rgba(250,246,239,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
  .kopf{display:flex;align-items:center;justify-content:space-between;height:80px}
  .marke{display:block;line-height:0}
  .marke img{height:62px;width:auto}
  nav{display:flex;align-items:center;gap:26px}
  nav a{text-decoration:none;font-weight:500;font-size:15px}
  nav a:not(.knopf):hover{color:var(--rot)}
  nav .knopf{padding:10px 18px;font-size:15px}
  .menue{display:none;background:none;border:0;padding:8px;cursor:pointer}
  .menue i{display:block;width:24px;height:2px;background:var(--tinte);margin:5px 0;transition:transform .25s,opacity .25s}
  @media (max-width:860px){
    .menue{display:block}
    nav{position:absolute;left:0;right:0;top:80px;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;
        background:var(--creme);border-bottom:1px solid var(--linie);
        clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .3s ease,opacity .3s ease;pointer-events:none}
    nav a:not(.knopf){padding:14px 0;border-bottom:1px solid var(--linie)}
    nav .knopf{margin-top:16px;justify-content:center}
    header.offen nav{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
    header.offen .menue i:nth-child(1){transform:translateY(7px) rotate(45deg)}
    header.offen .menue i:nth-child(2){opacity:0}
    header.offen .menue i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  }

  /* Bühne */
  .buehne{position:relative;padding:0;min-height:clamp(520px,78vh,720px);display:flex;align-items:center;color:#fff;overflow:hidden}
  .buehne > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 60%}
  .buehne:before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(20,18,16,.78) 0%,rgba(20,18,16,.55) 34%,rgba(20,18,16,0) 62%)}
  .buehne .wrap{position:relative;z-index:2;width:100%}
  .buehne .text{max-width:520px}
  .buehne h1{font-size:clamp(38px,5.4vw,62px);text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .buehne p.lead{font-size:20px;color:#f1ece6;max-width:30ch}
  .buehne .knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
  .buehne .knopf.hell{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.45);backdrop-filter:blur(6px)}
  .buehne .knopf.hell:hover{background:rgba(255,255,255,.24)}
  .buehne .klein{color:#e4ddd5}
  @media (max-width:860px){
    .buehne{display:block;min-height:0;color:var(--tinte)}
    .buehne > img{position:static;height:280px;object-position:74% 66%}
    .buehne:before{display:none}
    .buehne .wrap{padding-top:32px;padding-bottom:48px}
    .buehne h1{text-shadow:none}
    .buehne p.lead{color:var(--grau)}
    .buehne .klein{color:var(--grau)}
    .buehne .knopf.hell{background:#fff;color:var(--tinte);border-color:var(--linie)}
  }

  /* Leiste */
  .leiste{background:var(--tinte);color:#fff;padding:22px 0}
  .leiste ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .leiste li{display:flex;gap:12px;align-items:center;font-weight:500;font-size:15px}
  .leiste svg{flex:none;color:#ff8a80}
  @media (max-width:860px){.leiste ul{grid-template-columns:1fr 1fr}}

  /* Angebote aus dem Shop */
  .angebote{padding-bottom:0}
  .reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .angebot-karte{position:relative;display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
                 padding:18px;text-decoration:none;transition:border-color .2s,transform .2s}
  .angebot-karte:hover{border-color:var(--rot);transform:translateY(-2px)}
  .angebot-karte .bild{height:150px;display:grid;place-items:center;margin-bottom:14px}
  .angebot-karte .bild img{max-height:150px;max-width:100%}
  .angebot-karte .schild{position:absolute;top:14px;left:14px;background:var(--rot);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
  .angebot-karte b{font-weight:600;line-height:1.3}
  .angebot-karte .menge{font-size:14px;color:var(--grau);margin:2px 0 12px}
  .angebot-karte .preis{margin-top:auto;display:flex;align-items:baseline;gap:10px}
  .angebot-karte ins{text-decoration:none;color:var(--rot);font-family:Bitter,serif;font-weight:700;font-size:24px}
  .angebot-karte del{color:var(--grau);font-size:15px}
  .angebot-karte .info{font-size:12.5px;color:var(--grau);margin-top:4px}
  .fussnote{font-size:13px;color:var(--grau);margin-top:16px}
  @media (max-width:860px){
    .reihe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none}
    .reihe::-webkit-scrollbar{display:none}
    .angebot-karte{flex:0 0 68%;scroll-snap-align:start}
  }

  /* Zwei Wege */
  .wege{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:34px}
  .karte .marke-klein{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rot);margin-bottom:10px}
  .schritte{list-style:none;padding:0;margin:18px 0 24px;counter-reset:s}
  .schritte li{counter-increment:s;display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--linie)}
  .schritte li:before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--creme);color:var(--rot);font-weight:700;display:grid;place-items:center;font-size:14px}
  .zeiten{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:18px 0 24px;padding:16px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
  .zeiten b{font-weight:600}
  .bedingungen{font-size:14px;color:var(--grau);margin:0}
  @media (max-width:860px){.wege{grid-template-columns:1fr}}

  /* Sortiment */
  .sortiment{background:var(--weiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
  .kopfzeile{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
  .kopfzeile p{color:var(--grau);max-width:46ch;margin:0}
  .regal{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
  .fach{--ton:#f3eee6;position:relative;grid-column:span 2;display:flex;flex-direction:column;overflow:hidden;
        border-radius:18px;background:var(--ton);text-decoration:none;padding:26px 26px 24px;transition:transform .25s}
  .fach.gross{grid-column:span 4}
  .fach:hover{transform:translateY(-3px)}
  .fach .flaschen{display:flex;justify-content:center;align-items:flex-end;height:190px;margin-bottom:22px;position:relative}
  .fach .flaschen:after{content:"";position:absolute;left:8%;right:8%;bottom:-2px;height:12px;border-radius:50%;background:rgba(0,0,0,.09);filter:blur(5px)}
  .fach .flaschen img{position:relative;z-index:1;max-height:180px;max-width:64px;margin:0 -2px;transition:transform .3s ease}
  .fach .flaschen img:nth-child(2n){max-height:164px}
  .fach:hover .flaschen img{transform:translateY(-6px)}
  .fach:hover .flaschen img:nth-child(2){transition-delay:.04s}
  .fach:hover .flaschen img:nth-child(3){transition-delay:.08s}
  .fach:hover .flaschen img:nth-child(4){transition-delay:.12s}
  .fach.gross .flaschen{justify-content:flex-end;padding-right:44px}
  .fach.gross .flaschen img{max-width:80px;margin:0 6px}
  .fach b{font-family:Bitter,serif;font-size:24px;line-height:1.2}
  .fach small{color:rgba(31,29,27,.68);font-size:14.5px}
  .fach .pfeil{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;color:var(--rot);font-weight:700;transition:background .2s}
  .fach:hover .pfeil{background:#fff}
  .fach .spezial{position:absolute;top:26px;left:26px;max-width:46%}
  .fach .spezial span{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2f6aa8;margin-bottom:8px}
  .fach .spezial p{font-family:Bitter,serif;font-size:clamp(20px,2.2vw,26px);line-height:1.25;margin:0}
  .fach.wasser{--ton:#e4eff8}
  .fach.limo{--ton:#fcebd9}
  .fach.bier{--ton:#f8edcd}
  .fach.wein{--ton:#f4e1e3}
  .fach.spirituosen{--ton:#ebe5dc}
  @media (max-width:860px){
    .regal{grid-template-columns:1fr 1fr}
    .fach,.fach.gross{grid-column:span 1}
    .fach.gross{grid-column:span 2}
    .fach .spezial{position:static;max-width:none;margin-bottom:12px}
    .fach.gross .flaschen{justify-content:center}
  }
  @media (max-width:520px){
    .regal{grid-template-columns:1fr}
    .fach.gross{grid-column:span 1}
    .fach .flaschen{height:160px}
    .fach .flaschen img{max-height:150px}
  }

  .extra{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
  .extra > *{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:18px;border:1px solid var(--linie);text-decoration:none;background:var(--creme)}
  .extra a{transition:border-color .2s}
  .extra a:hover{border-color:var(--rot)}
  .extra svg{flex:none;color:var(--rot);margin-top:2px}
  .extra b{display:block;font-weight:600;margin-bottom:2px}
  .extra p{color:var(--grau);font-size:14.5px;margin:0;line-height:1.5}
  @media (max-width:860px){.extra{grid-template-columns:1fr}}

  /* Über uns */
  .geschichte{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .zeitstrahl{list-style:none;margin:0;padding:0;border-left:2px solid var(--linie)}
  .zeitstrahl li{position:relative;padding:0 0 22px 26px}
  .zeitstrahl li:before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--rot)}
  .zeitstrahl b{display:block;font-family:Bitter,serif;font-size:20px}
  .zeitstrahl span{color:var(--grau);font-size:15px}
  @media (max-width:860px){.geschichte{grid-template-columns:1fr;gap:32px}}

  /* Jobs */
  .job{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--tinte);color:#fff;border-radius:var(--rund);padding:36px 40px}
  .job p{color:#cfc8c0;margin:0}
  .job .knopf.hell{border:0}

  /* Kontakt */
  .kontakt{display:grid;grid-template-columns:1fr 1fr;gap:48px}
  .kontakt dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0}
  .kontakt dt{color:var(--grau)}
  .kontakt dd{margin:0;font-weight:500}
  .kontakt a{text-decoration:none}
  .kontakt a:hover{color:var(--rot)}
  .karte-platz{display:grid;place-items:center;text-align:center;min-height:260px;border-radius:var(--rund);background:repeating-linear-gradient(45deg,#efe8dd 0 12px,#f4eee5 12px 24px);border:1px solid var(--linie);padding:24px}
  @media (max-width:860px){.kontakt{grid-template-columns:1fr}}

  footer{border-top:1px solid var(--linie);padding:28px 0;font-size:14px;color:var(--grau)}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  footer a{text-decoration:none;margin-left:18px}

  /* Rechtsseiten */
  .recht{padding:56px 0 88px}
  .recht .wrap{max-width:760px}
  .recht h1{font-size:clamp(32px,4.4vw,44px)}
  .recht h2{font-size:24px;margin-top:40px}
  .recht h3{font-size:18px;margin-top:24px}
  .recht p,.recht li{color:#3d3935}
  .recht ul{padding-left:20px}
  .recht a{color:var(--rot)}
  .zurueck{display:inline-block;margin-bottom:28px;text-decoration:none;font-weight:500;color:var(--grau)}
  .zurueck:hover{color:var(--rot)}