:root{
    --bg: #FBF7F2;
    --bg-soft: #F3E6E0;
    --bg-soft-2: #EDEFE6;
    --bg-soft-3: #FBF0DC;
    --bg-soft-4: #E6EDF2;
    --ink: #2A211D;
    --ink-soft: #6E6058;
    --wine: #7A2650;
    --wine-dark: #5C1A3B;
    --sage: #5C6B4F;
    --sage-soft: #8A9A7C;
    --gold: #B98D4D;
    --line: rgba(42,33,29,0.12);
    --radius-lg: 28px;
    --radius-md: 18px;
    --shadow: 0 20px 60px -25px rgba(42,33,29,0.35);
    --ease: cubic-bezier(.16,1,.3,1);
    /* Fluide Layout-Breite: waechst mit dem Viewport, statt bei 1180px zu stoppen.
       Untergrenze 1180px sorgt dafuer, dass sich auf kleinen Screens nichts aendert
       (width:100% begrenzt dort ohnehin). */
    --wrap-max: clamp(1180px, 92vw, 2200px);
    /* 32px wie bisher, waechst erst auf breiten Screens (Mobile: Override bei 600px) */
    --wrap-pad: clamp(32px, 2.4vw, 60px);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:140px;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}

  .wrap{
    width:100%;
    max-width:var(--wrap-max);
    margin:0 auto;
    padding:0 var(--wrap-pad);
  }

  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    line-height:1.05;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--wine);
    font-weight:600;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:18px; height:1px;
    background:var(--wine);
    display:inline-block;
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding-top:18px;
    transition:background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  }
  header.scrolled{
    background:rgba(251,247,242,0.78);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 1px 0 var(--line);
    padding-top:12px;
  }
  nav{
    display:flex;
    align-items:center;
    /* alle Elemente als Gruppe mittig, gleichmaessiger Abstand */
    justify-content:center;
    gap:clamp(18px, 2.6vw, 44px);
    padding-bottom:18px;
    transition:padding .4s var(--ease);
  }
  /* die einzelnen Bloecke sollen nicht zusaetzlich auseinanderlaufen */
  nav > *{flex:0 0 auto;}
  header.scrolled nav{padding-bottom:12px;}

  /* ---------- MARQUEE-LEISTE ---------- */
  .marquee-bar{
    background:var(--wine);
    overflow:hidden;
    height:30px;
    display:flex;
    align-items:center;
  }
  .marquee-track{
    display:flex;
    align-items:center;
    flex-shrink:0;
    animation:marquee-scroll 42s linear infinite;
    will-change:transform;
  }
  .marquee-group{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .marquee-group span{
    font-size:11px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#fff;
    white-space:nowrap;
    opacity:0.92;
  }
  .marquee-group span:not(:last-child)::after{
    content:"•";
    margin:0 28px;
    opacity:0.5;
  }
  .marquee-group:not(:last-child) span:last-child::after{
    content:"•";
    margin:0 28px;
    opacity:0.5;
  }
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion:reduce){
    .marquee-track{animation:none;}
  }
  .brand-group{
    display:flex;
    align-items:center;
    gap:28px;
  }
  .logo{
    display:flex;
    align-items:center;
  }
  .logo-img{height:50px; width:auto; display:block; transition:height .25s var(--ease), transform .25s var(--ease);}
  /* Einmaliges "Pochen" beim Hover -- keine Dauerschleife, spielt pro
     Hover-Start genau einmal ab und bleibt danach bei scale(1) stehen. */
  .logo:hover .logo-img, .logo:focus-visible .logo-img{animation:logo-pochen .7s var(--ease);}
  @keyframes logo-pochen{
    0%{transform:scale(1);}
    20%{transform:scale(1.12);}
    40%{transform:scale(0.97);}
    60%{transform:scale(1.08);}
    80%{transform:scale(0.99);}
    100%{transform:scale(1);}
  }
  @media (prefers-reduced-motion:reduce){
    .logo:hover .logo-img, .logo:focus-visible .logo-img{animation:none;}
  }
  .nav-rating{
    display:flex;
    align-items:center;
    gap:6px;
    /* gleiche Hoehe wie Switch, Menue- und Kontakt-Button */
    min-height:38px;
    padding:0 14px;
    border-radius:100px;
    /* gleiches Weiss wie Menue-Knopf und Warenkorb */
    background:#fff;
    border:1px solid var(--line);
    transition:background .25s, box-shadow .25s, transform .25s var(--ease);
  }
  .nav-rating:hover{background:var(--bg-soft); transform:translateY(-1px);}
  .nav-rating .google-g{width:15px; height:15px; flex-shrink:0;}
  .nav-rating-score{
    font-family:'Fraunces', serif;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
  }
  .nav-rating .stars-rating{font-size:11px; letter-spacing:1.5px; margin:0;}
  .hours-status{
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
    transition:opacity .2s, transform .25s var(--ease);
  }
  .hours-status:hover{opacity:0.75; transform:translateY(-1px);}
  .hours-dot{
    width:9px; height:9px;
    border-radius:50%;
    background:#9A9088;
    flex-shrink:0;
  }
  .hours-text{
    display:flex;
    flex-direction:column;
    line-height:1.3;
  }
  .hours-text strong{
    font-size:13px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--ink);
  }
  .hours-text span{
    font-size:11px;
    /* gleiche Textfarbe wie Menue-Knopf und Switch */
    color:var(--ink);
  }
  .hours-status.is-open .hours-dot{
    background:#1DA851;
    box-shadow:0 0 0 3px rgba(29,168,81,0.2);
    animation:hours-dot-pulse 2.4s ease-out infinite;
  }
  /* der aeussere Ring laeuft nach aussen aus, der innere bleibt stehen */
  @keyframes hours-dot-pulse{
    0%{box-shadow:0 0 0 3px rgba(29,168,81,0.2), 0 0 0 0 rgba(29,168,81,0.5);}
    70%{box-shadow:0 0 0 3px rgba(29,168,81,0.2), 0 0 0 10px rgba(29,168,81,0);}
    100%{box-shadow:0 0 0 3px rgba(29,168,81,0.2), 0 0 0 0 rgba(29,168,81,0);}
  }
  @media (prefers-reduced-motion:reduce){
    .hours-status.is-open .hours-dot,
    .hours-status.is-closed .hours-dot{animation:none;}
  }
  .hours-status.is-open .hours-text strong{color:#1DA851;}
  .hours-status.is-closed .hours-dot{
    background:#E43B3B;
    box-shadow:0 0 0 3px rgba(228,59,59,0.2);
    animation:hours-dot-pulse-zu 2.4s ease-out infinite;
  }
  @keyframes hours-dot-pulse-zu{
    0%{box-shadow:0 0 0 3px rgba(228,59,59,0.2), 0 0 0 0 rgba(228,59,59,0.5);}
    70%{box-shadow:0 0 0 3px rgba(228,59,59,0.2), 0 0 0 10px rgba(228,59,59,0);}
    100%{box-shadow:0 0 0 3px rgba(228,59,59,0.2), 0 0 0 0 rgba(228,59,59,0);}
  }
  /* etwas dunkler als der Punkt, damit der Text gut lesbar bleibt */
  .hours-status.is-closed .hours-text strong{color:#B32424;}
  .nav-links{
    display:flex;
    align-items:center;
    gap:36px;
    font-size:14.5px;
    font-weight:500;
  }
  /* Segmented Control: weinroter Track, ein einzelner weisser Slider wandert.
     Auf / ist keins aktiv -> Slider ausgeblendet, beim Hovern zeigt er sich
     unter dem jeweiligen Segment. */
  .nav-switch{
    position:relative;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    align-items:stretch;
    padding:4px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line);
  }
  .nav-switch-slider{
    position:absolute;
    top:4px; left:4px;
    width:calc(50% - 4px);
    height:calc(100% - 8px);
    border-radius:999px;
    background:var(--wine);
    opacity:0;
    transform:translateX(0);
    transition:transform .25s ease-out, opacity .2s ease-out;
    pointer-events:none;
  }
  .nav-switch.is-pos-1 .nav-switch-slider,
  .nav-switch.is-pos-2 .nav-switch-slider{opacity:1;}
  .nav-switch.is-pos-2 .nav-switch-slider{transform:translateX(100%);}
  .nav-links .nav-switch-option{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:30px;
    padding:0 16px;
    border-radius:999px;
    /* gleiche Textfarbe wie der Menue-Knopf daneben */
    color:var(--ink);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:color .25s ease-out, transform .25s var(--ease);
  }
  .nav-switch-option svg{width:14px; height:14px; flex-shrink:0;}
  .nav-links .nav-switch-option::after{display:none;}
  .nav-links .nav-switch-option:hover{color:var(--ink); transform:translateY(-1px);}
  /* das Segment unter dem roten Slider wird weiss */
  .nav-links .nav-switch.is-pos-1 .nav-switch-option:nth-of-type(1),
  .nav-links .nav-switch.is-pos-2 .nav-switch-option:nth-of-type(2){color:#fff;}
  .nav-switch-option:focus-visible{
    outline:2px solid var(--wine);
    outline-offset:-3px;
  }
  .nav-links a{
    position:relative;
    padding:4px 0;
    color:var(--ink-soft);
    transition:color .25s;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:0;
    height:1px; background:var(--wine);
    transition:right .3s var(--ease);
  }
  .nav-links a:hover::after{right:0;}
  .nav-cta{
    display:flex;
    align-items:center;
    gap:16px;
  }
  /* Reihenfolge in der Taskleiste: Kontakt, dann Warenkorb, Menü ganz rechts. */
  .nav-cta > .btn-primary{order:1;}
  .nav-cta > .nav-cart-wrap{order:2;}
  .nav-cta > .nav-menu{order:3;}
  .nav-menu{position:relative;}
  .nav-menu-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:100px;
    border:1px solid var(--line);
    background:#fff;
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    transition:background .25s, border-color .25s, transform .25s var(--ease);
  }
  .nav-menu-toggle:hover{background:var(--bg-soft); border-color:var(--bg-soft); transform:translateY(-1px);}
  @media (max-width:600px){
    /* Auf dem Handy nur die drei Striche zeigen -- Text und Pfeil weg,
       Button wird rund statt laenglich. Auf PC bleibt "Menü" stehen. */
    .nav-menu-toggle{padding:10px; gap:0;}
    .nav-menu-toggle-label, .nav-menu-toggle .chevron{display:none;}
  }
  .nav-menu-toggle svg{width:16px; height:16px; flex-shrink:0;}
  .nav-menu-toggle .chevron{transition:transform .3s var(--ease);}
  .nav-menu.open .nav-menu-toggle .chevron{transform:rotate(180deg);}
  .nav-menu-panel{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    min-width:230px;
    max-width:90vw;
    max-height:min(75vh, 640px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    box-shadow:0 24px 48px -20px rgba(42,33,29,0.35);
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:2px;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    z-index:200;
  }
  .nav-menu.open .nav-menu-panel{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  body.menu-open #news, body.menu-open footer{
    filter:blur(6px);
    transition:filter .3s var(--ease);
  }
  .nav-menu-panel a{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 14px;
    border-radius:10px;
    font-size:14px;
    color:var(--ink);
    white-space:nowrap;
    transition:background .2s, color .2s;
  }
  .nav-menu-panel a:hover{background:var(--bg-soft); color:var(--wine);}
  .nav-menu-panel a svg{width:16px; height:16px; flex-shrink:0; color:var(--wine);}
  .nav-menu-divider{height:1px; background:var(--line); margin:6px 4px;}

  /* ---------- Verschachtelte Hover-Untermenüs ---------- */
  .nav-submenu{position:relative;}
  .nav-submenu-trigger{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:14px;
    padding:10px 14px;
    border:0;
    background:none;
    border-radius:10px;
    font-family:inherit;
    font-size:14px;
    text-align:left;
    color:var(--ink);
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s, color .2s;
  }
  .nav-submenu-trigger .trigger-label{display:flex; align-items:center; gap:11px;}
  .nav-submenu-trigger svg{width:16px; height:16px; flex-shrink:0; color:var(--wine);}
  .nav-submenu-trigger .chevron-right{
    width:13px; height:13px;
    color:var(--ink-soft) !important;
    transition:transform .2s var(--ease);
  }
  .nav-submenu:hover > .nav-submenu-trigger{background:var(--bg-soft); color:var(--wine);}
  .nav-submenu:hover > .nav-submenu-trigger .chevron-right{transform:translateX(2px);}
  .nav-submenu-panel{
    position:absolute;
    top:-10px;
    right:100%;
    margin-right:8px;
    min-width:200px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    box-shadow:0 24px 48px -20px rgba(42,33,29,0.35);
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:2px;
    opacity:0;
    transform:translateX(6px);
    pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    z-index:210;
  }
  .nav-submenu:hover > .nav-submenu-panel{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }
  .nav-submenu-panel a{padding:9px 12px; font-size:13.5px;}
  .nav-submenu-panel a svg{width:15px; height:15px;}

  /* ---------- Online Bestellen: Akkordeon statt Hover-Flyout ---------- */
  .nav-submenu-accordion:hover > .nav-submenu-trigger .chevron-right,
  .nav-submenu-accordion > .nav-submenu-trigger .chevron-right{transform:rotate(90deg);}
  .nav-submenu-accordion.expanded:hover > .nav-submenu-trigger .chevron-right,
  .nav-submenu-accordion.expanded > .nav-submenu-trigger .chevron-right{transform:rotate(-90deg);}
  .nav-submenu-accordion > .nav-submenu-panel{
    position:static;
    display:grid;
    grid-template-rows:0fr;
    opacity:1;
    transform:none;
    pointer-events:auto;
    margin:0;
    padding:0;
    border:0;
    box-shadow:none;
    min-width:0;
    z-index:auto;
    transition:grid-template-rows .3s var(--ease);
  }
  .nav-submenu-accordion.expanded > .nav-submenu-panel{grid-template-rows:1fr;}
  .nav-submenu-panel-inner{
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:2px 0 2px 10px;
  }
  .nav-submenu-accordion > .nav-submenu-panel > .nav-submenu-panel-inner > .nav-submenu > .nav-submenu-trigger{
    padding-left:14px;
    font-size:13.5px;
  }
  .nav-submenu-accordion > .nav-submenu-panel > .nav-submenu-panel-inner > .nav-submenu-accordion > .nav-submenu-panel > .nav-submenu-panel-inner a{
    padding-left:30px;
    font-size:13.5px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 22px;
    border-radius:100px;
    font-size:14px;
    font-weight:600;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--wine);
    color:#fff;
  }
  .btn-primary:hover{
    background:var(--wine-dark);
    transform:translateY(-1px);
    box-shadow:0 10px 24px -8px rgba(122,38,80,0.55);
  }
  .btn:disabled{
    opacity:0.4;
    cursor:not-allowed;
    pointer-events:none;
  }
  .btn-ghost{
    border:1px solid var(--line);
    color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--ink);}
  .menu-toggle{display:none;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:190px 0 120px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(40px, 5.6vw, 74px);
    color:var(--ink);
  }
  .hero h1 em{
    font-style:italic;
    color:var(--wine);
  }
  .hero p.lead{
    margin-top:26px;
    font-size:18px;
    line-height:1.65;
    color:var(--ink-soft);
    max-width:460px;
  }
  .hero-actions{
    margin-top:38px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .hero-meta{
    margin-top:56px;
    display:flex;
    gap:36px;
    font-size:13.5px;
    color:var(--ink-soft);
  }
  .hero-meta strong{
    display:block;
    font-family:'Fraunces', serif;
    font-size:22px;
    color:var(--ink);
    font-weight:500;
  }

  .hero-art{
    position:relative;
    aspect-ratio:1/1.05;
    border-radius:var(--radius-lg);
    background:linear-gradient(155deg, var(--bg-soft) 0%, #E7D9CE 60%, #DEC9C9 100%);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .hero-art .petal-layer{position:absolute; inset:0;}
  .hero-art .float{
    position:absolute;
    animation:float 7s ease-in-out infinite;
  }
  .hero-art .float.d2{animation-delay:-2.3s;}
  .hero-art .float.d3{animation-delay:-4.6s;}
  @keyframes float{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-14px) rotate(3deg);}
  }

  /* ---------- MARQUEE STRIP ---------- */
  .strip{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:22px 0;
    overflow:hidden;
    background:var(--bg-soft);
  }
  .strip-track{
    display:flex;
    gap:64px;
    white-space:nowrap;
    animation:scroll-left 32s linear infinite;
    width:max-content;
  }
  .strip-track span{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:19px;
    color:var(--ink-soft);
    display:inline-flex;
    align-items:center;
    gap:64px;
  }
  .strip-track span::after{
    content:"✦";
    font-style:normal;
    color:var(--gold);
    font-size:13px;
  }
  @keyframes scroll-left{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:120px 0;}
  .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .section-head h2{
    font-size:clamp(30px, 3.4vw, 44px);
  }
  .section-head p{
    margin-top:18px;
    font-size:16.5px;
    color:var(--ink-soft);
    line-height:1.7;
  }
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- LEISTUNGEN ---------- */
  .services{
    /* gleicher (warmer) Hintergrund wie bei /online-bestellen/, statt des
       urspruenglich bloeulichen --bg-soft-4 */
    background:var(--bg);
    /* kein zusaetzlicher Abstand zum Hero -- gleich knapp wie bei
       /online-bestellen/ (dort section{padding-top:0}). */
    padding-top:0;
  }
  .schnellauswahl{background:var(--bg-soft); padding:80px 0;}
  .products{background:var(--bg-soft-3);}
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .service-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:34px 28px 30px;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 48px -24px rgba(42,33,29,0.25);
    border-color:transparent;
  }
  .service-icon{
    width:46px; height:46px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-soft);
    margin-bottom:22px;
  }
  .service-icon svg{width:22px; height:22px; stroke:var(--wine);}
  .service-card h3{
    font-size:20px;
    font-weight:500;
    margin-bottom:10px;
  }
  .service-card p{
    font-size:14.5px;
    color:var(--ink-soft);
    line-height:1.65;
  }

  /* ---------- ÜBER UNS ---------- */
  .about{
    background:var(--bg-soft);
  }
  .about-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
    align-items:center;
  }
  .about-portrait{
    aspect-ratio:4/5;
    border-radius:var(--radius-lg);
    background:linear-gradient(165deg,#DEC9C9,#C9AFAE 55%, var(--sage-soft) 130%);
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .about-portrait .quote-badge{
    position:absolute;
    left:24px; bottom:24px; right:24px;
    background:rgba(251,247,242,0.92);
    backdrop-filter:blur(6px);
    border-radius:var(--radius-md);
    padding:20px 22px;
  }
  .about-portrait .quote-badge p{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:16px;
    line-height:1.5;
    color:var(--ink);
  }
  .about-portrait .quote-badge span{
    display:block;
    margin-top:10px;
    font-size:12.5px;
    font-weight:600;
    color:var(--wine);
    font-style:normal;
    letter-spacing:0.03em;
  }
  .about-copy h2{font-size:clamp(30px,3.4vw,42px); margin-bottom:24px;}
  .about-copy p{
    font-size:16.5px;
    line-height:1.75;
    color:var(--ink-soft);
    margin-bottom:18px;
  }
  .about-stats{
    display:flex;
    gap:44px;
    margin-top:36px;
    padding-top:32px;
    border-top:1px solid var(--line);
  }
  .about-stats div strong{
    display:block;
    font-family:'Fraunces', serif;
    font-size:30px;
    font-weight:500;
    color:var(--wine);
  }
  .about-stats div span{
    font-size:13px;
    color:var(--ink-soft);
  }

  /* ---------- SEASONAL SIGNATURE ---------- */
  .seasons{
    background:var(--bg);
  }
  .season-tabs{
    display:flex;
    gap:10px;
    margin-bottom:48px;
    flex-wrap:wrap;
  }
  .season-tab{
    padding:11px 22px;
    border-radius:100px;
    border:1px solid var(--line);
    font-size:14px;
    font-weight:600;
    color:var(--ink-soft);
    cursor:pointer;
    transition:all .35s var(--ease);
    background:transparent;
  }
  .season-tab.active{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
  }
  .season-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
  }
  .season-swatches{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  .swatch{
    aspect-ratio:1;
    border-radius:20px;
    transition:transform .5s var(--ease);
  }
  .season-panel:hover .swatch{transform:none;}
  .swatch:hover{transform:scale(1.05);}
  .season-info h3{
    font-size:28px;
    margin-bottom:14px;
  }
  .season-info p{
    font-size:16px;
    color:var(--ink-soft);
    line-height:1.7;
    margin-bottom:14px;
  }
  .season-flowers{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
  }
  .season-flowers span{
    font-size:13px;
    padding:7px 14px;
    border-radius:100px;
    background:var(--bg-soft);
    color:var(--ink);
  }

  /* ---------- CTA BANNER ---------- */
  .cta-banner{
    background:linear-gradient(140deg, var(--wine) 0%, var(--wine-dark) 100%);
    border-radius:var(--radius-lg);
    padding:72px 60px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    position:relative;
    overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .cta-banner:hover{
    transform:translateY(-5px);
    box-shadow:0 28px 60px -20px rgba(122,38,80,0.55);
  }
  .cta-banner::before{
    content:"";
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    top:-180px; right:-120px;
  }
  .cta-banner h2{
    font-size:clamp(28px,3vw,38px);
    color:#fff;
    max-width:480px;
    position:relative;
  }
  .cta-banner .btn-primary{
    background:#fff;
    color:var(--wine-dark);
    position:relative;
  }
  .cta-banner .btn-primary:hover{
    background:var(--bg-soft);
    box-shadow:none;
  }
  .cta-banner-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    position:relative;
  }
  .cta-banner-actions .btn{
    padding:16px 32px;
    font-size:16.5px;
    animation:cta-btn-pulse 2.4s ease-in-out infinite;
  }
  .cta-banner-actions .btn:hover{animation-play-state:paused;}
  .cta-banner-actions .btn:nth-child(2){animation-delay:.5s;}
  @keyframes cta-btn-pulse{
    0%, 100%{box-shadow:0 0 0 0 rgba(255,255,255,0.55);}
    50%{box-shadow:0 0 0 14px rgba(255,255,255,0);}
  }
  .highlight-underline-white{
    text-decoration:underline;
    text-decoration-color:#fff;
    text-underline-offset:4px;
  }
  .cta-banner .btn-ghost{
    border-color:rgba(255,255,255,0.5);
    color:#fff;
  }
  .cta-banner .btn-ghost:hover{
    background:rgba(255,255,255,0.15);
    border-color:#fff;
  }
  .cta-banner-white{
    background:#fff;
    border:1px solid var(--line);
  }
  .cta-banner-white::before{display:none;}
  .cta-banner-white h2{color:var(--ink);}
  .cta-banner-white:hover{
    box-shadow:0 28px 60px -24px rgba(42,33,29,0.28);
  }
  .cta-banner-white .btn-primary{
    background:var(--wine);
    color:#fff;
  }
  .cta-banner-white .btn-primary:hover{
    background:var(--wine-dark);
    box-shadow:0 10px 24px -8px rgba(122,38,80,0.55);
  }
  .cta-banner-pulse{
    animation:cta-banner-pulse 2.6s ease-in-out infinite;
  }
  .cta-banner-pulse:hover{animation-play-state:paused;}
  @keyframes cta-banner-pulse{
    0%, 100%{box-shadow:0 0 0 0 rgba(122,38,80,0.45);}
    50%{box-shadow:0 0 0 16px rgba(122,38,80,0);}
  }
  @media (prefers-reduced-motion:reduce){
    .cta-banner-pulse{animation:none;}
  }
  .cta-banner:not(.cta-banner-white) .highlight-wine{color:#fff;}
  .highlight-wine{
    color:var(--wine);
    text-decoration:underline;
    text-decoration-color:var(--wine);
    text-underline-offset:4px;
  }
  /* Gelber Textmarker-Effekt, wie mit einem Leuchtstift ueber den Text
     gezogen -- statt vollflaechigem Block nur ueber die untere Zeilenhaelfte. */
  .marker{
    background:linear-gradient(180deg, rgba(255,222,0,0) 55%, rgba(255,222,0,0.55) 55%);
    padding:0 2px;
  }
  .cta-pulse-wrap{
    border-radius:var(--radius-lg);
    animation:cta-pulse-glow 2.8s ease-in-out infinite;
  }
  .cta-pulse-wrap:hover{animation-play-state:paused;}
  .cta-pulse{
    animation:cta-pulse-glow 2.8s ease-in-out infinite;
  }
  .cta-pulse:hover{animation-play-state:paused;}
  @keyframes cta-pulse-glow{
    0%, 100%{box-shadow:0 0 0 0 rgba(122,38,80,0.45);}
    50%{box-shadow:0 0 0 18px rgba(122,38,80,0);}
  }

  /* ---------- KONTAKT ---------- */
  .contact{
    background:var(--bg-soft-2);
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
  }
  .info-list{
    display:flex;
    flex-direction:column;
    gap:26px;
    margin-top:8px;
  }
  .info-row{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding-bottom:26px;
    border-bottom:1px solid var(--line);
  }
  .info-row:last-child{border-bottom:none;}
  .info-icon{
    width:40px; height:40px;
    border-radius:12px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .info-icon svg{width:18px; height:18px; stroke:var(--wine);}
  .info-row h4{font-size:15.5px; font-weight:600; margin-bottom:4px;}
  .info-row p, .info-row a{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
  .info-row a:hover{color:var(--wine);}
  .hours-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
  }
  .hours-table td{
    padding:4px 0;
    color:var(--ink-soft);
  }
  .hours-table td:last-child{
    text-align:right;
    color:var(--ink);
    font-weight:500;
  }
  .hours-note{
    margin-top:14px;
    font-size:12.5px;
    color:var(--ink-soft);
    font-style:italic;
  }
  .map-card{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
    height:420px;
    border:3px solid #fff;
    outline:1px solid var(--line);
  }
  .map-card iframe{width:100%; height:100%; display:block; border:0; filter:saturate(0.85) contrast(1.02);}
  .map-actions{
    position:absolute;
    bottom:18px;
    right:18px;
    left:18px;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
  }
  .map-actions .btn-primary{box-shadow:0 10px 24px -8px rgba(122,38,80,0.55);}
  .map-address-btn{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    box-shadow:0 10px 24px -8px rgba(42,33,29,0.35);
    transition:background .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .map-address-btn:hover{
    background:var(--bg-soft-2);
    transform:translateY(-1px);
    box-shadow:0 10px 24px -8px rgba(42,33,29,0.4);
  }
  .map-address-btn.copied{background:var(--wine); color:#fff; border-color:var(--wine);}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:#EFE7E1;
    padding:40px 0 20px;
  }
  .footer-grid{
    display:grid;
    /* gleich breite Spalten -- Logo/Name soll nicht breiter sein als der Rest */
    grid-template-columns:repeat(5, 1fr);
    gap:32px;
    padding-bottom:28px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-logo-img{
    height:56px;
    width:auto;
    display:block;
    margin-bottom:14px;
  }
  .footer-grid p{
    font-size:14px;
    color:#B8AEA7;
    line-height:1.65;
    max-width:280px;
  }
  .footer-social{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
  }
  /* in der eigenen Spalte beginnt die Liste auf Hoehe der anderen Spalten */
  .footer-col-social{justify-content:flex-start; padding-left:32px;}
  .footer-col-social .footer-social{margin-top:0;}
  .footer-col h5{
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:#B8AEA7;
    margin-bottom:16px;
    font-weight:600;
  }
  .footer-col a, .footer-col span{
    display:block;
    font-size:14.5px;
    color:#EFE7E1;
    margin-bottom:10px;
    opacity:0.9;
  }
  .footer-col a:hover{color:var(--gold);}
  .footer-col .hours-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
  .footer-col .hours-row strong{
    font-weight:600;
    color:#B8AEA7;
    opacity:1;
  }
  .hours-note-small{
    font-size:12.5px;
    font-style:italic;
    color:#8C8179;
    margin-top:6px;
    opacity:1;
  }
  /* Spezifitaet ".footer-col a{display:block}" (weiter oben) schlaegt sonst
     ".footer-social-link" und wirft Icon/Text aus dem Flex-Layout -
     deshalb hier ueber den Elternselektor gezielt hoeher spezifisch. */
  .footer-social a.footer-social-link{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .footer-social-link svg{
    width:20px;
    height:20px;
    flex-shrink:0;
    color:#B8AEA7;
    transition:color .25s;
  }
  /* Google-"G" wirkt in seiner eigenen ViewBox etwas tiefer/groesser als
     das Instagram-Icon -- optisch angleichen. */
  .footer-social-link svg.google-g{width:18px; height:18px; margin-top:-1px;}
  .footer-social-link:hover svg{color:var(--gold);}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:28px;
    font-size:12.5px;
    color:#8C8179;
    flex-wrap:wrap;
    gap:12px;
  }
  .footer-bottom a{color:#8C8179;}
  .footer-bottom a:hover{color:#EFE7E1;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1000px){
    .nav-rating{display:none;}
    /* vier Footer-Spalten werden hier zu eng */
    .footer-grid{grid-template-columns:1fr 1fr;}
    /* Abstand zu Oeffnungszeiten war nur fuer die breite 5-Spalten-Reihe
       gedacht, im 2-Spalten-Layout stehen sich Social & Oeffnungszeiten
       nicht mehr direkt gegenueber. */
    .footer-col-social{padding-left:0;}
  }
  @media (max-width:900px){
    .nav-links{display:none;}
    .menu-toggle{
      display:flex;
      width:38px;height:38px;
      align-items:center;justify-content:center;
      border-radius:10px;
      border:1px solid var(--line);
    }
    .hero{padding:150px 0 80px;}
    .hero-grid{grid-template-columns:1fr; gap:48px;}
    .hero-art{order:-1; max-width:360px; margin:0 auto;}
    .service-grid{grid-template-columns:1fr 1fr;}
    .about-grid{grid-template-columns:1fr;}
    .about-portrait{max-width:380px; margin:0 auto;}
    .season-panel{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .cta-banner{flex-direction:column; text-align:center; padding:52px 32px;}
    .footer-grid{grid-template-columns:1fr; gap:32px;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    section{padding:80px 0;}
    .service-grid{grid-template-columns:1fr;}
    .hero-meta{flex-wrap:wrap; gap:24px;}
    .hero-actions .btn{flex:1; justify-content:center;}
    /* auf dem Handy wieder auseinander: Marke links, Menue rechts */
    nav{justify-content:space-between; gap:12px;}
    /* Logo bleibt sichtbar (nur kleiner), Oeffnungszeiten darunter statt daneben */
    .brand-group{flex-direction:column; align-items:flex-start; gap:2px;}
    .logo-img{height:30px;}
    .hours-dot{width:7px; height:7px;}
    .hours-text strong{font-size:12px;}
    .hours-text span{font-size:10px;}
    .cta-banner-actions .btn{padding:12px 22px; font-size:14px;}
  }
  @media (max-width:480px){
    .nav-cta > .btn-primary{display:none;}
  }

  /* ---------- KONTAKTSEITE ---------- */
  .page-hero{
    padding:190px 0 80px;
  }
  .page-hero .eyebrow{margin-bottom:20px;}
  /* Mehrere Zurueck-Links nebeneinander (Startseite + Uebersicht) */
  .back-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:22px;
  }
  .back-links .back-link{margin-bottom:0;}
  /* Zurueck-Link als ruhige Pille, passend zum Kartenlook der Seite */
  .back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px 8px 13px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:100px;
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:22px;
    transition:color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease);
  }
  .back-link svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    transition:transform .25s var(--ease);
  }
  .back-link:hover{
    color:var(--wine);
    border-color:var(--wine);
    box-shadow:0 14px 26px -20px rgba(42,33,29,0.55);
  }
  .back-link:hover svg{transform:translateX(-3px);}
  /* Eigene Zeile, sonst rutscht die Eyebrow daneben */
  .page-hero .back-link{display:flex; width:fit-content; white-space:nowrap;}
  .page-hero h1{
    font-size:clamp(38px, 5vw, 60px);
  }
  .page-hero p.lead{
    margin-top:22px;
    font-size:17.5px;
    line-height:1.65;
    color:var(--ink-soft);
    max-width:560px;
  }

  /* ---------- 404-SEITE ---------- */
  .notfound-hero{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-bottom:120px;
  }
  .notfound-hero .eyebrow{justify-content:center;}
  .notfound-hero p.lead{max-width:520px; margin-left:auto; margin-right:auto;}
  .notfound-flower{
    width:110px;
    height:110px;
    margin-bottom:8px;
    animation:notfound-sway 4.5s ease-in-out infinite;
    transform-origin:60% 100%;
  }
  .notfound-flower svg{width:100%; height:100%;}
  @keyframes notfound-sway{
    0%, 100%{transform:rotate(-3deg);}
    50%{transform:rotate(3deg);}
  }
  .notfound-btn{margin-top:34px;}
  .notfound-btn svg{width:18px; height:18px; margin-right:2px;}

  /* ---------- RECHTLICHE SEITEN (Impressum / Datenschutz) ---------- */
  .legal-note{
    background:#FBF0DC;
    color:#8A5A1E;
    font-size:13px;
    line-height:1.6;
    padding:16px 20px;
    border-radius:var(--radius-md);
    margin-bottom:40px;
  }
  .legal-content h3{
    font-size:19px;
    font-weight:500;
    margin:34px 0 10px;
  }
  .legal-content h3:first-of-type{margin-top:0;}
  .legal-content h4{
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    margin:22px 0 8px;
  }
  .legal-content p{
    font-size:15px;
    line-height:1.7;
    color:var(--ink-soft);
  }
  .legal-content p a{color:var(--wine); font-weight:600;}
  .legal-content ul{
    margin:10px 0 16px;
    padding-left:20px;
  }
  .legal-content li{
    font-size:15px;
    line-height:1.7;
    color:var(--ink-soft);
    margin-bottom:6px;
  }

  .method-grid{
    display:flex;
    align-items:flex-start;
    gap:22px;
  }
  .method-col{
    display:flex;
    flex-direction:column;
    gap:22px;
    flex:1 1 0;
    min-width:0;
  }
  .method-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:38px 34px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .method-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 52px -24px rgba(42,33,29,0.28);
  }
  .method-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap:8px;
  }
  /* Tag-Pille oder Oeffnungszeiten-Widget darf schrumpfen/umbrechen, statt
     bei schmalen Karten das Icon links zu ueberlappen. */
  .method-top > .method-tag,
  .method-top > .hours-status{
    min-width:0;
    flex:0 1 auto;
  }
  .method-icon{
    width:56px; height:56px;
    flex-shrink:0;
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
  }
  .method-icon.wa{background:#25D366;}
  .method-icon.call{background:var(--bg-soft);}
  .method-icon.mail{background:#1D1D1F;}
  .method-icon.route{background:var(--bg-soft-2);}
  .method-icon svg{width:26px; height:26px;}
  .method-tag{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    background:var(--bg-soft-2);
    padding:6px 12px;
    border-radius:100px;
  }
  /* Handy: Badge deutlich kleiner, damit sie neben dem Icon in der Zeile
     bleibt statt darunter umzubrechen (WhatsApp/Mail/Bestellen/Rueckruf). */
  @media (max-width:600px){
    .method-tag{font-size:9.5px; letter-spacing:0.03em; padding:4px 9px;}
  }
  .method-card h3{
    font-size:23px;
    font-weight:500;
  }
  .method-card p{
    font-size:15px;
    color:var(--ink-soft);
    line-height:1.65;
    flex-grow:1;
  }
  .method-detail{
    font-size:14.5px;
    color:var(--ink);
    font-weight:600;
  }
  .method-card .btn{
    align-self:flex-start;
    margin-top:6px;
  }
  .route-btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
  }
  .route-btns .btn{margin-top:0;}
  .copy-field{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    background:var(--bg-soft-2);
    border:1px solid var(--line);
    border-radius:100px;
    padding:10px 10px 10px 16px;
    font-family:'Inter', sans-serif;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    transition:background .25s, border-color .25s;
  }
  .copy-field:hover{background:#fff; border-color:var(--wine);}
  .copy-field .copy-icon{
    width:17px; height:17px;
    flex-shrink:0;
    color:var(--ink-soft);
    transition:color .25s;
  }
  .copy-field:hover .copy-icon{color:var(--wine);}
  .copy-field.copied{background:var(--wine); border-color:var(--wine); color:#fff;}
  .copy-field.copied .copy-icon{color:#fff;}

  .hours-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:34px 36px;
    margin-top:56px;
    box-shadow:0 20px 44px -28px rgba(42,33,29,0.2);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .hours-card:hover{
    transform:translateY(-5px);
    box-shadow:0 28px 60px -24px rgba(42,33,29,0.35);
  }
  .hours-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    padding-bottom:22px;
    margin-bottom:22px;
    border-bottom:1px solid var(--line);
  }
  .hours-card-head h3{font-size:20px; font-weight:500;}
  .hours-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:start;
  }
  .hours-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .hours-day{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    font-size:14.5px;
    color:var(--ink-soft);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .25s;
  }
  .hours-day:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px -20px rgba(42,33,29,0.28);
    border-color:transparent;
  }
  .hours-day strong{font-weight:600; color:var(--ink);}
  .hours-day.is-today{background:var(--bg-soft); border-color:var(--bg-soft);}
  .hours-day.is-today span, .hours-day.is-today strong{font-weight:700;}
  .hours-day.is-today.is-open{background:rgba(29,168,81,0.1); border-color:rgba(29,168,81,0.1);}
  .hours-day.is-today.is-open span, .hours-day.is-today.is-open strong{color:#1DA851;}
  .hours-day.is-today.is-closed{background:rgba(228,59,59,0.1); border-color:rgba(228,59,59,0.1);}
  .hours-day.is-today.is-closed span, .hours-day.is-today.is-closed strong{color:#E43B3B;}
  .hours-note{
    background:var(--bg-soft);
    border-radius:var(--radius-md);
    padding:24px 26px;
  }
  .hours-note-label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--wine);
    margin-bottom:10px;
  }
  .hours-note p{
    font-size:14.5px;
    color:var(--ink);
    line-height:1.65;
  }
  .payment-methods-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }
  .payment-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line);
    padding:6px 11px;
    border-radius:100px;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  }
  .payment-chip:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 26px -16px rgba(42,33,29,0.3);
    border-color:transparent;
  }
  .payment-chip svg{width:15px; height:15px; flex-shrink:0; color:var(--wine);}
  /* Gruppen nebeneinander statt untereinander: spart deutlich Hoehe */
  .payment-groups{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:20px 26px;
  }
  .payment-group-label{
    display:block;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--ink);
  }
  .payment-group-desc{
    display:block;
    font-size:11.5px;
    color:var(--ink-soft);
    margin-top:1px;
  }
  .payment-group .payment-methods-list{margin-top:8px;}

  @media (max-width:900px){
    .method-grid{flex-direction:column;}
    .method-col{display:contents;}
    .method-col:nth-of-type(1) > .method-card:nth-of-type(1){order:1;}
    .method-col:nth-of-type(2) > .method-card:nth-of-type(1){order:2;}
    .method-col:nth-of-type(1) > .method-card:nth-of-type(2){order:3;}
    .method-col:nth-of-type(2) > .method-card:nth-of-type(2){order:4;}
    .method-col:nth-of-type(1) > .method-card:nth-of-type(3){order:5;}
    .page-hero{padding:150px 0 60px;}
    .hours-body{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .hours-card{padding:26px 22px;}
  }

  /* ===================== REDESIGN V2 ===================== */

  /* ---------- Platzhalter-„Fotos" (SVG/Gradient statt echter Bilder) ---------- */
  .ph{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg, var(--bg-soft) 0%, #E2C9BF 55%, #D6B7BE 100%);
    overflow:hidden;
    color:rgba(92,26,59,0.35);
  }
  .ph svg{width:34%; height:34%; opacity:0.7;}
  .ph.dark{background:linear-gradient(155deg,#4A3A2A 0%, #3F4A36 60%, #2A211D 100%); color:rgba(255,255,255,0.55);}
  .ph.sage{background:linear-gradient(155deg,#EDEFE6 0%, #C7D0B8 60%, #8A9A7C 100%); color:rgba(63,74,54,0.45);}
  .ph-label{
    position:absolute; left:12px; bottom:10px;
    font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(255,255,255,0.75);
    background:rgba(0,0,0,0.28);
    padding:3px 9px; border-radius:100px;
  }

  /* ---------- Scroll-Cue ---------- */
  .scroll-cue{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    margin-top:64px;
    color:var(--ink-soft);
    font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
    font-weight:600;
    cursor:pointer;
    width:fit-content;
    margin-left:auto; margin-right:auto;
  }
  .scroll-cue svg{width:18px; height:18px; animation:bob 1.8s ease-in-out infinite;}
  @keyframes bob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(7px);}
  }

  /* ---------- KAMPAGNEN-SEKTION (ersetzt alten Hero) ---------- */
  .campaign{padding:172px 0 100px;}
  .campaign-media{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:16/8.5;
    box-shadow:var(--shadow);
  }
  .campaign-media .overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,10,10,0) 35%, rgba(20,10,10,0.62) 100%);
  }
  .campaign-copy{
    position:absolute; left:44px; right:44px; bottom:40px;
    color:#fff;
  }
  .campaign-copy .eyebrow{color:#F3D9DE;}
  .campaign-copy .eyebrow::before{background:#F3D9DE;}
  .campaign-copy h1{
    font-size:clamp(32px,4.6vw,54px);
    color:#fff;
  }
  .campaign-copy p.spruch{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:19px;
    margin-top:14px;
    max-width:520px;
    color:#F3E6E0;
  }

  .offer-grid{
    margin-top:34px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  .offer-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .offer-card:hover{transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(42,33,29,0.28);}
  .offer-card .ph{aspect-ratio:1/1;}
  .offer-body{padding:18px 18px 20px;}
  .offer-body h4{font-size:16.5px; font-weight:500; font-family:'Fraunces',serif;}
  .offer-price{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:10px;
  }
  .offer-price strong{font-size:17px; color:var(--wine);}
  .offer-price a{
    font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:100px;
    background:var(--bg-soft-2);
    color:var(--ink);
    transition:background .25s;
  }
  .offer-price a:hover{background:var(--ink); color:#fff;}

  /* ---------- LEISTUNGEN MIT BILD ---------- */
  .service-card{padding:0; overflow:hidden;}
  .service-card .service-media{aspect-ratio:4/3;}
  .service-card .service-inner{padding:26px 24px 28px;}
  .service-card .service-icon{margin-bottom:16px;}
  .price-note{
    display:inline-block;
    margin-top:14px;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    background:var(--bg-soft);
    padding:6px 12px;
    border-radius:100px;
  }

  /* ---------- INSPIRATION / INSTAGRAM ---------- */
  .insta-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }
  .insta-card{
    position:relative;
    aspect-ratio:1/1;
    border-radius:var(--radius-md);
    overflow:hidden;
  }
  .insta-card .overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,10,10,0) 55%, rgba(20,10,10,0.68) 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:14px;
    opacity:0;
    transition:opacity .3s;
  }
  .insta-card:hover .overlay{opacity:1;}
  .insta-card .overlay p{color:#fff; font-size:12.5px; line-height:1.4;}
  .insta-card .overlay .stats{
    display:flex; gap:14px; margin-top:8px;
    font-size:11.5px; color:#fff;
  }
  .insta-cta{
    margin-top:36px;
    display:flex; justify-content:center;
  }

  /* ---------- PRODUKTE / ONLINE BESTELLEN ---------- */
  .product-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  .product-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .product-card:hover{transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(42,33,29,0.28);}
  .product-card .ph{aspect-ratio:1/1;}
  .product-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex-grow:1;}
  .product-body h4{font-size:17.5px; font-weight:500; font-family:'Fraunces',serif;}
  .product-body .product-price{font-size:17px; color:var(--wine); font-weight:600;}
  .product-body details{
    font-size:13.5px;
    color:var(--ink-soft);
    border-top:1px solid var(--line);
    padding-top:10px;
    margin-top:2px;
  }
  .product-body summary{
    cursor:pointer;
    font-weight:600;
    color:var(--ink);
    list-style:none;
    display:flex; align-items:center; justify-content:space-between;
  }
  .product-body summary::-webkit-details-marker{display:none;}
  .product-body summary::after{
    content:"+";
    font-size:16px;
    color:var(--wine);
    transition:transform .25s;
  }
  .product-body details[open] summary::after{content:"–";}
  .product-body details p{margin-top:8px; line-height:1.6;}
  .product-body .btn{margin-top:auto; justify-content:center;}
  .product-row-label{
    font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--ink-soft); font-weight:600;
    margin:38px 0 16px;
  }
  .product-row-label:first-of-type{margin-top:0;}

  /* ---------- TEAM ---------- */
  .team-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
  }
  .team-card{
    text-align:center;
    padding:8px;
  }
  .team-avatar{
    width:100%;
    aspect-ratio:1/1;
    border-radius:50%;
    margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif;
    font-size:26px;
    font-weight:500;
    color:#fff;
    background:linear-gradient(155deg, var(--wine) 0%, var(--wine-dark) 100%);
  }
  .team-card:nth-child(2) .team-avatar{background:linear-gradient(155deg, var(--sage-soft), var(--sage));}
  .team-card:nth-child(3) .team-avatar{background:linear-gradient(155deg, var(--gold), #8A6A38);}
  .team-card:nth-child(4) .team-avatar{background:linear-gradient(155deg, #C9AFAE, #7A2650);}
  .team-card:nth-child(5) .team-avatar{background:linear-gradient(155deg, #8A9A7C, #3F4A36);}
  .team-quote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:14.5px;
    color:var(--ink-soft);
    line-height:1.55;
    margin-bottom:14px;
    min-height:66px;
  }
  .team-name{font-size:15.5px; font-weight:600;}
  .team-role{font-size:12.5px; color:var(--wine); margin-top:2px; font-weight:600;}

  @media (max-width:1000px){
    .offer-grid, .insta-grid, .product-grid{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:repeat(3,1fr); row-gap:36px;}
    .campaign-copy{left:24px; right:24px; bottom:24px;}
  }
  @media (max-width:600px){
    .offer-grid, .insta-grid, .product-grid{grid-template-columns:1fr 1fr;}
    .team-grid{grid-template-columns:1fr 1fr;}
    .campaign{padding:150px 0 70px;}
    .news-badge{font-size:9.5px; padding:5px 11px; top:14px; left:14px;}
    .beliebt-badge{font-size:9px; padding:3px 8px; top:8px; left:8px;}
    .neu-badge{font-size:9px; padding:3px 8px; top:8px; right:8px;}
    .review-badge{font-size:9px; padding:4px 10px;}
  }

  /* ========== NEUE STARTSEITEN-ABSCHNITTE ========== */

  /* --- Theme Hero --- */
  .theme-hero{
    padding:200px 0 60px;
  }
  .theme-banner{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--wine);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
    min-height:340px;
  }
  .news-badge{
    position:absolute;
    top:20px; left:20px;
    z-index:2;
    background:#FFDE00;
    color:#3D2E00;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:100px;
    box-shadow:0 8px 18px -6px rgba(0,0,0,0.35);
    animation:news-pulse-glow 2.8s ease-in-out infinite;
  }
  .news-badge:hover{animation-play-state:paused;}
  .news-badge.badge-corner{
    top:14px;
    right:14px;
    left:auto;
  }
  @keyframes news-pulse-glow{
    0%, 100%{box-shadow:0 0 0 0 rgba(255,222,0,0.6);}
    50%{box-shadow:0 0 0 10px rgba(255,222,0,0);}
  }
  .theme-art{line-height:0;}
  .theme-art svg{width:100%; height:100%; display:block; object-fit:cover;}
  .theme-copy{
    padding:52px 54px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
  }
  .theme-copy h2{
    color:#fff;
    font-size:clamp(28px,3.2vw,40px);
  }
  .theme-copy p{
    margin-top:16px;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:18px;
    color:#F3D9DE;
    max-width:420px;
  }
  .theme-cta-btn{
    background:#fff;
    color:var(--wine-dark);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s;
  }
  .theme-cta-btn:hover{
    background:var(--bg-soft);
    transform:translateY(-3px);
    box-shadow:0 14px 28px -10px rgba(0,0,0,0.35);
  }

  .offer-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    margin-top:32px;
  }
  .offer-card{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:20px;
    text-align:center;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .offer-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 40px -22px rgba(42,33,29,0.28);
  }
  .offer-card .btn{
    margin-top:14px;
    width:100%;
    justify-content:center;
    font-size:12.5px;
    padding:8px 14px;
  }
  .beliebt-badge{
    position:absolute;
    top:10px; left:10px;
    background:var(--wine);
    color:#fff;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:100px;
    z-index:2;
    animation:beliebt-pulse-glow 2.8s ease-in-out infinite;
  }
  .beliebt-badge:hover{animation-play-state:paused;}
  @keyframes beliebt-pulse-glow{
    0%, 100%{box-shadow:0 6px 14px -6px rgba(122,38,80,0.6), 0 0 0 0 rgba(122,38,80,0.5);}
    50%{box-shadow:0 6px 14px -6px rgba(122,38,80,0.6), 0 0 0 8px rgba(122,38,80,0);}
  }
  .neu-badge{
    position:absolute;
    top:10px; right:10px;
    background:#FFDE00;
    color:#3D2E00;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:100px;
    z-index:2;
    animation:neu-pulse-glow 2.8s ease-in-out infinite;
  }
  .neu-badge:hover{animation-play-state:paused;}
  @keyframes neu-pulse-glow{
    0%, 100%{box-shadow:0 6px 14px -6px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,222,0,0.6);}
    50%{box-shadow:0 6px 14px -6px rgba(0,0,0,0.35), 0 0 0 8px rgba(255,222,0,0);}
  }
  .offer-img{position:relative; width:100%; aspect-ratio:1; margin-bottom:14px; border-radius:14px; overflow:hidden;}
  .offer-img img{width:100%; height:100%; object-fit:cover; display:block;}
  /* Steht anstelle eines generierten Bluetensymbols, wenn fuer ein Produkt
     noch kein echtes Foto vorhanden ist. */
  .coming-soon-ph{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--bg-soft-2);
    color:var(--ink-soft);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
    border-radius:inherit;
  }
  .offer-card h4{font-size:15px; font-weight:600; margin-bottom:6px;}
  .offer-price{font-size:14px; color:var(--wine); font-weight:600;}
  .offer-card{overflow:visible;}
  .offer-card:hover{z-index:5;}
  /* Die Beschreibung klappt in der Karte selbst auf, die Karte waechst mit. */
  .offer-extra{
    display:flex;
    flex-direction:column;
    max-height:0;
    opacity:0;
    overflow:hidden;
    text-align:left;
    pointer-events:none;
    transition:max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
  }
  .offer-card:hover .offer-extra,
  .offer-card:focus-within .offer-extra{
    max-height:180px;
    opacity:1;
    margin-top:14px;
  }
  .offer-extra-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }
  .offer-extra-divider{
    height:1px;
    background:var(--line);
    margin:10px 0;
  }
  .offer-extra-icon{
    width:16px; height:16px;
    flex-shrink:0;
    margin-top:2px;
    color:var(--wine);
  }
  .offer-extra-label{
    display:block;
    font-size:9.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.07em;
    color:var(--wine);
    margin-bottom:2px;
  }
  .offer-extra-text{
    display:block;
    font-size:12px;
    color:var(--ink-soft);
    line-height:1.45;
  }
  .offer-note{
    margin-top:20px;
    font-size:13px;
    color:var(--ink-soft);
    text-align:center;
  }
  .offer-note a{color:var(--wine); font-weight:600;}
  .highlight-underline-soft{
    text-decoration:underline;
    text-decoration-color:currentColor;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
  }

  .scroll-cue{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:max-content;
    margin:64px auto 0;
    color:var(--ink-soft);
    font-size:12.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:600;
  }
  .scroll-cue svg{
    width:20px; height:20px;
    animation:bounce-down 2s ease-in-out infinite;
  }
  @keyframes bounce-down{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
  }

  /* --- Leistungen (mit Bild) --- */
  .leistung-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .leistung-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .leistung-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 48px -24px rgba(42,33,29,0.25);
  }
  .leistung-img{
    aspect-ratio:16/10;
    display:flex;
    align-items:flex-end;
    padding:16px;
  }
  .leistung-img svg{width:28px; height:28px;}
  .leistung-body{padding:24px 24px 28px;}
  .leistung-body h3{font-size:19px; font-weight:500; margin-bottom:8px;}
  .leistung-body p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:14px;}
  .price-tag{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    color:var(--wine);
    background:var(--bg-soft);
    padding:5px 12px;
    border-radius:100px;
    transition:background .25s, color .25s;
  }
  a.price-tag:hover{background:var(--wine); color:#fff;}

  /* --- Veranstaltungen: Oberkategorien + breite Unterkategorie-Karten --- */
  .event-oberkat{margin-bottom:56px;}
  .event-oberkat:last-child{margin-bottom:0;}
  .event-oberkat-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
  }
  .event-oberkat-icon{
    width:34px; height:34px;
    flex-shrink:0;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
  }
  .event-oberkat-icon svg{width:17px; height:17px;}
  .event-oberkat-head h3{font-size:22px; font-weight:500;}
  .event-oberkat-head p{font-size:14px; color:var(--ink-soft); margin-top:2px;}
  .event-row-list{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  /* War frueher immer ein <a> (ganze Kachel klickbar, oeffnete eine eigene
     Unterseite) -- jetzt ein <div>, nicht mehr klickbar: die Unterseiten
     gibt es nicht mehr, stattdessen fuehrt nur noch der eigene CTA-Button
     unten (.event-row-cta) zu #kontakt. Selektor bewusst ohne "a", damit
     alte und neue Kacheln (falls irgendwo noch ein <a> uebrig ist) gleich
     aussehen. */
  .event-row-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .event-row-card:hover{
    transform:translateY(-5px);
    box-shadow:0 24px 48px -24px rgba(42,33,29,0.25);
  }
  .event-row-img{
    aspect-ratio:16/9;
    display:flex;
    align-items:flex-end;
    padding:20px;
  }
  .event-row-img svg{width:30px; height:30px;}
  /* Steht anstelle des Kategorie-Icons, solange fuer diese Kachel noch kein
     echtes Foto vorhanden ist. */
  .coming-soon-badge{
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    opacity:0.85;
  }
  .event-row-body{
    padding:26px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
  }
  .event-row-body h4{font-size:18px; font-weight:500;}
  .event-row-body p{font-size:14px; color:var(--ink-soft); line-height:1.6;}
  .event-row-body .event-row-link{
    margin-top:6px;
    font-size:13px;
    font-weight:600;
    color:var(--wine);
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  /* Ersetzt "Mehr erfahren" jetzt, wo die Kachel selbst nicht mehr
     klickbar ist -- fuehrt direkt zur Kontaktsektion statt zu einer
     eigenen Unterseite. */
  .event-row-cta{
    align-self:flex-start;
    margin-top:10px;
    padding:10px 20px;
    border-radius:100px;
    background:var(--wine);
    color:#fff;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:background .25s, transform .25s var(--ease);
  }
  .event-row-cta:hover{background:#591A38; transform:translateY(-2px);}

  /* --- Highlights --- */
  .highlights{background:var(--bg);}
  .highlight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  .highlight-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .highlight-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 48px -24px rgba(42,33,29,0.25);
  }
  .highlight-img{
    aspect-ratio:16/9;
    display:flex;
    align-items:flex-end;
    padding:16px;
  }
  .highlight-img svg{width:28px; height:28px;}
  .highlight-body{padding:22px 24px 26px;}
  .highlight-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    margin-bottom:12px;
  }
  .highlight-meta-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    color:var(--ink-soft);
  }
  .highlight-meta-item svg{width:14px; height:14px; flex-shrink:0; color:var(--wine);}
  .highlight-body h3{font-size:19px; font-weight:500; margin-bottom:8px;}
  .highlight-body p{font-size:14px; color:var(--ink-soft); line-height:1.6;}

  /* --- Inspiration / Instagram --- */
  .inspiration{background:var(--bg-soft-2);}
  .insta-handle{color:var(--wine); font-weight:600;}
  /* Handle steht jetzt in der Ueberschrift */
  .section-head h2 .insta-handle{
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:4px;
    text-decoration-color:rgba(122,38,80,0.35);
    transition:text-decoration-color .25s;
  }
  .section-head h2 .insta-handle:hover{text-decoration-color:var(--wine);}
  /* Handle soll in derselben Zeile bleiben, dafuer darf die Ueberschrift breiter sein */
  #inspiration .section-head{max-width:none;}
  @media (min-width:760px){
    #inspiration .section-head h2{white-space:nowrap;}
  }
  .insta-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:14px;
  }
  .insta-post{
    display:block;
    aspect-ratio:4/5;
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:0 16px 34px -22px rgba(42,33,29,0.3);
    border:3px solid #fff;
    outline:1px solid var(--line);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .insta-post:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px -22px rgba(42,33,29,0.4);
  }
  .insta-post img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  /* --- Produkte (nach Kategorie) --- */
  .produkt-kategorie{
    margin-bottom:56px;
    padding-bottom:56px;
    border-bottom:1px solid var(--line);
  }
  .kategorie-head{
    margin-bottom:26px;
  }
  .kategorie-title{
    display:inline-block;
    font-family:'Fraunces', serif;
    font-size:clamp(26px, 3vw, 34px);
    font-weight:500;
    line-height:1.15;
    padding-bottom:12px;
    position:relative;
  }
  .kategorie-title::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:48px; height:3px;
    border-radius:2px;
    background:currentColor;
    opacity:0.55;
  }
  .produkt-grid{
    grid-template-columns:repeat(4, 1fr);
    margin-top:0;
    margin-bottom:0;
  }
  /* Eigene Zeile unter den Produkten: ruhige Leiste im Kartenlook. */
  .mehr-card{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:12px;
    grid-column:1 / -1;
    padding:20px 24px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    color:var(--kat-color, var(--wine));
    text-align:center;
    transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .mehr-card:hover{
    border-color:var(--kat-color, var(--wine));
    transform:translateY(-3px);
    box-shadow:0 20px 40px -26px rgba(42,33,29,0.35);
  }
  .mehr-label{
    font-size:14px;
    font-weight:600;
    letter-spacing:0.01em;
    line-height:1.2;
  }
  .mehr-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--kat-color, var(--wine));
    color:#fff;
    font-size:14px;
    line-height:1;
    transition:transform .35s var(--ease);
  }
  .mehr-card:hover .mehr-arrow{transform:translateX(4px);}

  /* --- Team / Geschäftsführerin --- */
  .team{background:var(--bg-soft);}
  .founder-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:48px;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:44px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .founder-card:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 56px -24px rgba(42,33,29,0.35);
  }
  .founder-avatar{
    width:150px; height:150px;
    border-radius:50%;
    background:linear-gradient(155deg,#DEC9C9,#7A2650);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-family:'Fraunces', serif;
    font-size:42px;
    font-weight:500;
    box-shadow:0 20px 40px -18px rgba(122,38,80,0.45);
    transition:transform .35s var(--ease);
  }
  .founder-card:hover .founder-avatar{transform:scale(1.05);}
  .founder-quote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:18px;
    color:var(--wine);
    margin-bottom:14px;
  }
  .founder-bio{
    font-size:15.5px;
    color:var(--ink-soft);
    line-height:1.7;
    max-width:520px;
  }
  @media (max-width:700px){
    .founder-card{grid-template-columns:1fr; text-align:center; padding:36px 28px; gap:28px;}
    .founder-avatar{margin:0 auto;}
    .founder-quote, .founder-bio{margin-left:auto; margin-right:auto;}
  }

  /* --- Vorher/Nachher --- */
  .beforeafter{background:var(--bg-soft-2);}
  .ba-card{
    position:relative;
    max-width:560px;
    aspect-ratio:1/1;
    margin:0 auto;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:3px solid #fff;
    outline:1px solid var(--line);
    box-shadow:var(--shadow);
    cursor:ew-resize;
    touch-action:pan-y;
    user-select:none;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
    animation:ba-pulse-glow 2.6s ease-in-out infinite;
  }
  .ba-card:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 56px -24px rgba(42,33,29,0.35);
    animation-play-state:paused;
  }
  @keyframes ba-pulse-glow{
    0%, 100%{box-shadow:var(--shadow), 0 0 0 0 rgba(122,38,80,0.65);}
    50%{box-shadow:var(--shadow), 0 0 0 14px rgba(122,38,80,0);}
  }
  .ba-img{position:absolute; inset:0; z-index:1;}
  .ba-img img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    pointer-events:none;
  }
  .ba-img-before{
    z-index:2;
    clip-path:inset(0 calc(100% - var(--ba-pos, 42%)) 0 0);
  }
  .ba-label{
    position:absolute;
    top:16px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#fff;
    background:rgba(42,33,29,0.55);
    padding:6px 12px;
    border-radius:100px;
    backdrop-filter:blur(3px);
    pointer-events:none;
    z-index:3;
  }
  .ba-label-before{left:16px;}
  .ba-label-after{right:16px;}
  .ba-handle{
    position:absolute;
    top:0; bottom:0;
    left:var(--ba-pos, 42%);
    z-index:4;
    transform:translateX(-50%);
    pointer-events:none;
  }
  .ba-handle::before{
    content:'';
    position:absolute;
    top:0; bottom:0; left:0;
    width:3px;
    background:#fff;
    transform:translateX(-50%);
    box-shadow:0 0 14px rgba(0,0,0,0.3);
  }
  .ba-handle-grip{
    position:absolute;
    top:50%; left:0;
    transform:translate(-50%,-50%);
    width:44px; height:44px;
    border-radius:50%;
    background:#fff;
    color:var(--wine);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px -6px rgba(42,33,29,0.45);
  }
  .ba-handle-grip svg{width:20px; height:20px;}
  @media (max-width:600px){
    .ba-card{max-width:100%;}
  }

  /* --- Oeffnungszeiten & Zahlung nebeneinander --- */
  /* kein eigenes Padding: nutzt exakt die Abstaende aus section{} wie alle anderen */
  .oz-grid{
    display:grid;
    /* beide Karten gleich breit */
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:start;
  }
  /* die Karten bringen ihren eigenen Abstand mit, im Raster stoert der */
  .oz-grid .hours-card{margin-top:0; height:100%; padding:28px 30px;}
  /* Wrapper um Oeffnungszeiten-Karte + optionalen Ferien-Hinweis darueber,
     bleibt als ein Grid-Item neben der Zahlungsmethoden-Karte bestehen. */
  .oz-col{display:flex; flex-direction:column; gap:16px;}
  .ferien-hinweis{
    display:flex;
    align-items:center;
    gap:12px;
    background:#FBF0DC;
    border:1px solid #F0D9A8;
    border-radius:var(--radius-lg);
    padding:14px 18px;
  }
  .ferien-hinweis[hidden]{display:none;}
  .ferien-hinweis-badge{
    flex-shrink:0;
    background:#FFDE00;
    color:#3D2E00;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:100px;
  }
  .ferien-hinweis p{margin:0; font-size:14px; line-height:1.5; color:#8A5A1E;}
  .oz-grid .payment-groups{grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px 22px;}
  @media (max-width:900px){
    .oz-grid{grid-template-columns:1fr;}
  }

  /* --- Bestell-Popup: mehr Platz, wenn der Bildschirm ihn hergibt --- */
  #bestellModal .modal-box{max-width:min(94vw, 860px);}
  @media (min-width:1100px){
    #bestellModal .modal-box{max-width:min(92vw, 980px); padding:44px 48px;}
    /* zwei Spalten fuer die kurzen Felder */
    #bestellModal .form-row-split{grid-template-columns:1fr 1fr;}
  }

  /* --- Auswahl-Sperre --- */
  /* Alles nach der Auswahl ausblenden: das Dokument wird dadurch kuerzer,
     der Browser kann gar nicht weiterscrollen. */
  html.gate-locked #auswahl ~ *,
  html.gate-locked footer{display:none;}
  html.gate-locked{scroll-behavior:auto;}

  .gate{
    /* oben genauso viel Luft wie zwischen den Produktkarten und der Farbkante */
    padding:60px 0 128px;
    text-align:center;
    /* deutlich abgesetzt vom Aktuelles-Bereich darueber (der laeuft auf --bg) */
    background:var(--bg-soft);
    border-top:1px solid rgba(122,38,80,0.1);
    border-bottom:1px solid rgba(122,38,80,0.1);
  }
  .gate h2{font-size:clamp(32px, 4.2vw, 52px);}
  .gate-choices{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:30px;
    max-width:1180px;
    margin:52px auto 0;
  }
  .gate-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:stretch;
    min-height:clamp(340px, 34vw, 440px);
    padding:42px;
    border:0;
    border-radius:var(--radius-lg);
    cursor:pointer;
    text-align:left;
    font-family:inherit;
    color:#fff;
    box-shadow:0 22px 50px -30px rgba(42,33,29,0.45);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .gate-card-strauss{background:linear-gradient(155deg, #8E3444 0%, #5C1A3B 100%);}
  .gate-card-event{background:linear-gradient(155deg, #5C6B4F 0%, #37432E 100%);}
  .gate-card::after{
    /* zarter Lichtschimmer, wandert beim Hover ueber die Karte */
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
    opacity:0;
    transition:opacity .4s var(--ease);
    pointer-events:none;
  }
  .gate-card:hover,
  .gate-card:focus-visible{
    transform:translateY(-8px);
    box-shadow:0 34px 66px -30px rgba(42,33,29,0.55);
  }
  .gate-card:hover::after,
  .gate-card:focus-visible::after{opacity:1;}
  .gate-art{
    position:absolute;
    top:0; right:0;
    width:74%;
    max-width:340px;
    line-height:0;
    pointer-events:none;
    transition:transform .5s var(--ease);
  }
  .gate-art svg{width:100%; height:auto; display:block;}
  .gate-card:hover .gate-art{transform:scale(1.06) rotate(-2deg);}
  /* Zwei Fotos (Bogen + Saeule) statt der Deko-Form: der Bogen fuellt den
     Hintergrund, die Saeule sitzt als kleineres "Sofortbild" davor. Beide
     Kanten weich ausgeblendet (Maske), damit auch das weiss hinterlegte
     Saeule-Foto ohne harte Kante in die Karte uebergeht. */
  /* .gate-art ist nur ueber top/right/width positioniert (kein height) --
     das reicht fuer eine intrinsisch groessenlose SVG, aber die Fotos sind
     beide position:absolute (aus dem Fluss raus), darum braucht die Box
     hier eine eigene Hoehe ueber aspect-ratio, sonst kollabiert sie auf 0. */
  .gate-art-fotos{display:block; aspect-ratio:0.95;}
  .gate-art-kreise{position:absolute; inset:0; width:100%; height:100%;}
  .gate-art-foto{position:absolute; display:block; object-fit:contain;}
  .gate-art-foto-bogen{
    top:-4%; right:-6%;
    width:82%;
    filter:drop-shadow(0 16px 26px rgba(20,20,10,0.4));
    -webkit-mask-image:radial-gradient(circle at 62% 42%, #000 52%, transparent 76%);
    mask-image:radial-gradient(circle at 62% 42%, #000 52%, transparent 76%);
  }
  .gate-art-foto-saeule{
    left:-4%; bottom:32%;
    width:40%;
    border-radius:10px;
    filter:drop-shadow(0 12px 20px rgba(20,20,10,0.4));
    -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 58%, transparent 82%);
    mask-image:radial-gradient(ellipse at 50% 45%, #000 58%, transparent 82%);
  }
  /* Einzelnes Strauss-Foto (weisser Hintergrund) -- gleiche weiche Maske wie
     bei der Saeule, nur groesser, da es hier das einzige Bild ist. */
  .gate-art-foto-strauss{
    top:-2%; right:-6%;
    width:86%;
    filter:drop-shadow(0 16px 26px rgba(20,20,10,0.4));
    -webkit-mask-image:radial-gradient(ellipse at 55% 45%, #000 30%, transparent 78%);
    mask-image:radial-gradient(ellipse at 55% 45%, #000 30%, transparent 78%);
  }
  .gate-body{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .gate-card strong{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(24px, 2.6vw, 34px);
    line-height:1.18;
    color:#fff;
  }
  .gate-card-note{
    font-size:15px;
    color:rgba(255,255,255,0.8);
    line-height:1.55;
    max-width:380px;
  }
  .gate-card-go{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:10px;
    font-size:15px;
    font-weight:600;
    letter-spacing:0.01em;
    color:#fff;
  }
  .gate-card-go svg{width:18px; height:18px; transition:transform .3s var(--ease);}
  .gate-card:hover .gate-card-go svg{transform:translateX(5px);}
  .gate-hint{
    margin-top:26px;
    font-size:12.5px;
    color:var(--ink-soft);
    opacity:0.8;
  }
  .gate-skip{
    font-family:inherit;
    font-size:12.5px;
    color:var(--ink-soft);
    background:none;
    border:0;
    padding:4px 2px;
    cursor:pointer;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    text-decoration-color:rgba(110,96,88,0.4);
    transition:color .25s, text-decoration-color .25s;
  }
  .gate-skip:hover{color:var(--wine); text-decoration-color:var(--wine);}
  /* Ist die Seite entsperrt, braucht nur noch der Ueberspringen-Knopf zu
     verschwinden -- die Schnelllinks (Kontakt, Impressum, ...) bleiben
     stehen, auch nachdem "Ich suche etwas anderes" geklickt wurde. */
  html:not(.gate-locked) .gate-hint{display:none;}
  /* Schnelllinks unter dem Ueberspringen-Link, gleiche Schrift wie .gate-skip */
  .gate-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px 20px;
    margin-top:28px;
    opacity:0.8;
  }
  .gate-links .gate-skip{display:inline-block;}

  /* --- Uebersichtsseiten (Kategorien) --- */
  .kat-section{padding:10px 0 120px;}
  .kat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:22px;
  }
  .kat-card{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:26px 26px 24px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
  }
  .kat-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px -22px rgba(42,33,29,0.28);
    border-color:transparent;
  }
  .kat-art{flex:0 0 72px;}
  .kat-art svg{width:72px; height:72px; display:block;}
  .kat-body{display:flex; flex-direction:column; gap:7px; min-width:0; flex:1;}
  .kat-body .kat-go{margin-top:auto; padding-top:8px;}
  .kat-body strong{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:22px;
    color:var(--ink);
  }
  .kat-note{
    font-size:13.5px;
    color:var(--ink-soft);
    line-height:1.55;
  }
  .kat-go{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:4px;
    font-size:13px;
    font-weight:600;
    color:var(--wine);
  }
  .kat-go svg{width:15px; height:15px; transition:transform .3s var(--ease);}
  .kat-card:hover .kat-go svg{transform:translateX(4px);}
  .kat-hinweis{
    margin-top:44px;
    padding:34px 32px;
    background:var(--bg-soft);
    border-radius:var(--radius-lg);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }
  .kat-hinweis p{font-size:15.5px; color:var(--ink); margin:0;}
  @media (max-width:600px){
    .kat-card{flex-direction:column; align-items:flex-start; gap:16px;}
    .kat-hinweis{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width:700px){
    .gate{padding:60px 0 84px;}
    .gate-choices{grid-template-columns:1fr; gap:18px; margin-top:34px;}
    .gate-card{min-height:260px; padding:26px;}
    .gate-art{width:62%;}
  }

  /* --- Geschaeftskunden im Bewertungs-Laufband --- */
  .kunde-card{
    position:relative;
    flex:0 0 clamp(230px, 19vw, 290px);
    margin-right:22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:28px 26px;
    background:linear-gradient(180deg, #fff 0%, var(--bg) 100%);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    text-align:center;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .kunde-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px -24px rgba(42,33,29,0.25);
  }
  .kunde-label{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .kunde-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:58px;
  }
  .kunde-logo img{max-height:58px; max-width:100%; width:auto; object-fit:contain;}
  /* Schriftzug-Fallback, solange keine Logodatei unter images/kunden/ liegt */
  .kunde-name{display:none;}
  .kunde-textonly .kunde-name{
    display:block;
    font-family:'Fraunces', serif;
    font-size:20px;
    line-height:1.25;
    color:var(--wine);
  }

  /* --- Bewertungen --- */
  .reviews{background:var(--bg-soft-4);}
  /* Laufband: bricht aus dem .wrap aus und laeuft randlos ueber die volle Breite */
  .review-marquee{
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
    padding:6px 0 10px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .review-grid{
    display:flex;
    align-items:stretch;
    width:max-content;
    /* Dauer setzt das Script anhand der Laufbreite (konstante Geschwindigkeit) */
    animation:review-scroll 60s linear infinite;
    will-change:transform;
  }
  /* Haelfte = ein kompletter Satz Karten -> nahtloser Uebergang.
     Abstand bewusst als margin-right statt gap, sonst passt der 50%-Sprung nicht. */
  @keyframes review-scroll{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-50%,0,0);}
  }
  .review-marquee:hover .review-grid,
  .review-marquee:focus-within .review-grid{animation-play-state:paused;}
  @media (prefers-reduced-motion:reduce){
    .review-grid{animation:none;}
    .review-marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
  }
  .review-card{
    position:relative;
    flex:0 0 clamp(272px, 24vw, 360px);
    margin-right:22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:28px 26px;
    display:flex;
    flex-direction:column;
    gap:16px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .review-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px -24px rgba(42,33,29,0.25);
  }
  .review-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .review-badge{
    background:var(--bg-soft-2);
    color:var(--wine);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:100px;
    white-space:nowrap;
  }
  .review-stars{color:var(--gold); font-size:14px; letter-spacing:3px;}
  .review-stars .star-empty{color:rgba(185,141,77,0.28);}
  .review-text{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:15.5px;
    color:var(--ink);
    line-height:1.6;
    /* Bewertungen werden immer vollstaendig angezeigt, keine Kuerzung -
       Karten mit langem Text werden dafuer entsprechend hoeher. */
  }
  /* Textmarker auf den gelobten Stellen: Farbe aus dem Gold der Sterne,
     der Streifen liegt nur auf der unteren Zeilenhaelfte wie ein echter Marker. */
  /* Zwei Marker uebereinander: grau liegt fest darunter, gruen wird beim
     Hovern der Karte von links nach rechts darueber gezogen. */
  .review-text mark{
    background-image:
      linear-gradient(transparent 12%, rgba(38,186,96,0.45) 12%, rgba(38,186,96,0.45) 90%, transparent 90%),
      linear-gradient(transparent 12%, rgba(42,33,29,0.07) 12%, rgba(42,33,29,0.07) 90%, transparent 90%);
    background-repeat:no-repeat, no-repeat;
    background-size:0% 100%, 100% 100%;
    /* sonst bleibt das gelbe Standard-Highlight des Browsers darunter stehen */
    background-color:transparent;
    color:inherit;
    padding:0 2px;
    border-radius:2px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
    transition:background-size .5s var(--ease);
  }
  .review-card:hover .review-text mark,
  .review-card:focus-within .review-text mark{background-size:100% 100%, 100% 100%;}
  @media (prefers-reduced-motion:reduce){
    .review-text mark{transition:none;}
  }
  .review-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:12.5px;
  }
  .review-name{font-weight:600; color:var(--wine);}
  .review-age{color:var(--ink-soft);}

  /* Aufm Handy nehmen die Karten sonst zu viel Platz weg -- alles kleiner:
     schmalere Karte, weniger Innenabstand, kleinere Schrift/Icons. */
  @media (max-width:600px){
    .review-card{
      flex-basis:78vw;
      max-width:280px;
      margin-right:14px;
      padding:18px 16px;
      gap:10px;
    }
    .review-badge{font-size:9.5px; padding:4px 10px;}
    .review-stars{font-size:12px; letter-spacing:2px;}
    .review-text{font-size:13.5px; line-height:1.55;}
    .review-footer{padding-top:10px; font-size:11.5px;}
  }

  /* --- Google-Bewertung & Historie --- */
  .trust-row{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:22px;
    margin-bottom:48px;
  }
  .google-rating-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:28px 30px;
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .google-rating-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px -24px rgba(42,33,29,0.25);
  }
  .google-rating-card .btn{
    margin-left:auto;
    animation:cta-pulse-glow 2.8s ease-in-out infinite;
  }
  .google-rating-card .btn:hover{animation-play-state:paused;}
  .google-g{width:34px; height:34px; flex-shrink:0;}
  .google-score{
    font-family:'Fraunces', serif;
    font-size:30px;
    font-weight:500;
    color:var(--ink);
    line-height:1.1;
  }
  .google-score span{font-size:16px; font-weight:400; color:var(--ink-soft);}
  .stars-rating{
    position:relative;
    display:inline-block;
    font-size:16px;
    letter-spacing:2px;
    line-height:1;
    margin:6px 0 4px;
  }
  .stars-rating .stars-bg{color:var(--line);}
  .stars-rating .stars-fg{
    position:absolute;
    top:0; left:0;
    width:calc(var(--rating, 5) / 5 * 100%);
    overflow:hidden;
    white-space:nowrap;
    color:var(--gold);
  }
  .google-rating-label{
    display:block;
    font-size:12.5px;
    color:var(--ink-soft);
    font-weight:600;
  }
  .history-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:28px 30px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .history-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px -24px rgba(42,33,29,0.25);
  }
  .history-card .eyebrow{margin-bottom:8px;}
  .history-card h3{font-size:19px; font-weight:500; margin-bottom:10px;}
  .history-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.65;}

  @media (max-width:1100px){
    .offer-grid{grid-template-columns:repeat(2, 1fr);}
    .produkt-grid{grid-template-columns:repeat(3, 1fr);}
    .leistung-grid{grid-template-columns:repeat(2, 1fr);}
    .insta-grid{grid-template-columns:repeat(3, 1fr);}
    .team-grid{grid-template-columns:repeat(3, 1fr);}
  }
  @media (max-width:900px){
    /* Gestapeltes Layout: obere Bild-Haelfte und untere Text-Haelfte gleich
       hoch. Die Gesamthoehe kommt ueber aspect-ratio auf der Banner-Box
       (skaliert mit der Breite), grid-template-rows:1fr 1fr teilt sie exakt
       in zwei gleiche Reihen; die Kinder fuellen ihre Reihe per height:100%. */
    .theme-banner{grid-template-columns:1fr; grid-template-rows:1fr 1fr; aspect-ratio:3/4; min-height:0;}
    /* min-height:0 auf den Reihen-Kindern ist entscheidend: ohne das
       zaehlt bei "1fr" weiterhin die Mindesthoehe des Inhalts (Text im
       Copy-Block), wodurch die Reihen auf schmalen Handys (z. B. iPhone
       12 mini, 375px) trotz 1fr 1fr ungleich ausfallen. */
    .theme-art{height:100%; min-height:0;}
    .theme-copy{padding:36px 32px; height:100%; min-height:0;}
    .trust-row{grid-template-columns:1fr;}
    .event-row-card{grid-template-columns:1fr;}
    .event-row-img{aspect-ratio:16/8;}
    .event-row-body{padding:22px 24px 26px;}
  }
  @media (max-width:600px){
    .offer-grid{grid-template-columns:1fr 1fr;}
    .produkt-grid{grid-template-columns:1fr 1fr;}
    .leistung-grid{grid-template-columns:1fr;}
    .highlight-grid{grid-template-columns:1fr;}
    .insta-grid{grid-template-columns:repeat(2, 1fr);}
    .team-grid{grid-template-columns:1fr 1fr;}
    .produkt-cta{padding:40px 26px;}
    .theme-hero{padding:180px 0 40px;}
    .gate{padding-top:40px;}
    .theme-copy{padding:28px 22px;}
    .theme-copy h2{font-size:24px;}
    .theme-copy p{font-size:16px;}
  }

  /* --- Toast-Meldung --- */
  .toast{
    position:fixed;
    left:50%;
    bottom:32px;
    transform:translate(-50%, 16px);
    background:var(--wine);
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    padding:12px 22px;
    border-radius:100px;
    box-shadow:0 16px 34px -14px rgba(122,38,80,0.6);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    /* hoeher als .modal-overlay (1000), sonst verschwindet die Meldung
       hinter einem offenen Popup -- z. B. Fehlermeldung beim Bestellformular */
    z-index:1400;
    max-width:90vw;
    text-align:center;
  }
  .toast.show{
    opacity:1;
    transform:translate(-50%, 0);
  }

  /* --- Parkhinweis + Karte (Kontaktseite) --- */
  .parking-map{
    width:100%;
    margin:4px 0 4px;
    padding:8px;
    background:var(--bg-soft-2);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 14px 26px -16px rgba(42,33,29,0.3);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .parking-map:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 34px -16px rgba(42,33,29,0.4);
  }
  .parking-map img{width:100%; height:auto; display:block; border-radius:10px;}
  .parking-map-imgbtn{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    position:relative;
    border-radius:10px;
    overflow:hidden;
  }
  .parking-map-imgbtn::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(42,33,29,0.15);
    opacity:0;
    transition:opacity .25s var(--ease);
  }
  .parking-map-imgbtn:hover::after{opacity:1;}
  .parking-map-imgbtn::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:40px; height:40px;
    border-radius:50%;
    background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232A211D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/><path d="M11 8v6M8 11h6"/></svg>') center / 20px no-repeat;
    transform:translate(-50%,-50%) scale(.8);
    opacity:0;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .parking-map-imgbtn:hover::before{opacity:1; transform:translate(-50%,-50%) scale(1);}
  /* Parkhinweis: kurze Aussage oben, Detail darunter -- statt einer langen Zeile. */
  .parking-hint{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:8px;
    padding:10px 12px;
    background:#fff;
    border-radius:12px;
  }
  .parking-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px; height:28px;
    flex-shrink:0;
    border-radius:8px;
    background:var(--wine);
    color:#fff;
    font-family:'Fraunces', serif;
    font-size:15px;
    font-weight:700;
    line-height:1;
  }
  .parking-hint-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .parking-hint-text strong{
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    line-height:1.3;
  }
  .parking-hint-text span{font-size:12px; color:var(--ink-soft); line-height:1.35;}

  /* ---------- BESTELL-POPUP ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(42,33,29,0.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:1000;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease);
  }
  .modal-overlay.open{opacity:1; pointer-events:auto;}
  .modal-box{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:40px;
    max-width:520px;
    width:100%;
    /* wird weiter unten fuer das Bestell-Popup ueberschrieben */
    max-height:88vh;
    overflow-y:auto;
    position:relative;
    transform:translateY(20px) scale(.97);
    transition:transform .3s var(--ease);
    box-shadow:var(--shadow);
  }
  .modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
  .modal-close{
    position:absolute;
    top:18px; right:18px;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    line-height:1;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background .25s, color .25s;
  }
  .modal-close:hover{background:var(--bg-soft-2); color:var(--wine);}

  /* ---------- Ladescreen waehrend die Anfrage gesendet wird ----------
     Kein position:absolute mehr: das echte Formular (#bfFormContent) wird
     beim Laden/Erfolg per hidden komplett aus dem Fluss genommen, es gibt
     also nichts mehr zu ueberdecken. Als normales Flow-Element bekommt
     die modal-box dadurch wieder eine echte Hoehe (sonst kollabiert sie,
     weil ein absolut positioniertes inset:0-Kind ohne definierte
     Elternhoehe nicht mehr auf die volle Hoehe strecken kann). */
  .modal-sending-overlay{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:20px;
    text-align:center;
    background:#fff;
    border-radius:inherit;
    /* Mindesthoehe, damit es nicht winzig wirkt, sondern wie ein eigener
       kleiner Bildschirm -- skaliert mit der Viewporthoehe. */
    min-height:min(58vh, 420px);
  }
  .modal-sending-overlay[hidden]{display:none;}
  .modal-spinner{
    width:52px;
    height:52px;
    border-radius:50%;
    border:4px solid var(--line);
    border-top-color:var(--wine);
    animation:modal-spin .8s linear infinite;
  }
  @keyframes modal-spin{ to{ transform:rotate(360deg); } }
  .modal-sending-overlay p{
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    max-width:300px;
  }
  /* ---------- Erfolgsansicht nach dem Absenden ----------
     Nutzt dieselbe Positionierung wie der Ladescreen (.modal-sending-overlay),
     ersetzt dessen Inhalt aber komplett -- das Popup "verwandelt" sich
     also zweimal: Formular -> Ladescreen -> Erfolg mit Bestellnummer.
     Etwas grosszuegiger als der Ladescreen (groesseres Haekchen, groessere
     Bestellnummer, mehr Abstand), damit es nach einem richtigen Abschluss
     aussieht statt nach einer beilaeufigen Zwischenmeldung. */
  .modal-success-overlay{gap:22px;}
  .modal-success-overlay p{font-weight:400; color:var(--ink-soft); font-size:15px;}
  .modal-success-check{
    display:flex;
    align-items:center;
    justify-content:center;
    width:76px; height:76px;
    flex-shrink:0;
    border-radius:100px;
    background:#1DA851;
    box-shadow:0 12px 26px -10px rgba(29,168,81,0.55);
    color:#fff;
    animation:cart-check-pop .45s var(--ease);
  }
  .modal-success-check svg{width:38px; height:38px;}
  .modal-success-overlay h4{
    font-family:'Fraunces', serif;
    font-size:25px;
    font-weight:500;
    color:var(--ink);
  }
  .modal-success-nr{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:16px 34px;
    background:var(--bg-soft-2);
    border-radius:16px;
  }
  .modal-success-nr[hidden]{display:none;}
  .modal-success-nr span{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .modal-success-nr strong{
    font-size:29px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--wine);
  }
  .modal-success-overlay .btn{margin-top:6px; min-width:200px; padding-top:14px; padding-bottom:14px;}

  /* ---------- Bild-Lightbox ---------- */
  .lightbox-box{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:20px;
    max-width:min(96vw, 1100px);
    width:100%;
    max-height:min(94dvh, 940px);
  }
  .lightbox-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--bg-soft-2);
  }
  .lightbox-scroll img{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
  }
  .lightbox-actions{flex-shrink:0; display:flex; justify-content:flex-end;}
  .modal-box h3{
    font-size:23px;
    font-weight:500;
    margin-bottom:22px;
    padding-right:34px;
  }
  .produkt-modal-box{max-width:520px; text-align:center;}
  .produkt-modal-box h3{padding-right:0;}
  .produkt-modal-img{
    width:100%;
    max-width:320px;
    aspect-ratio:1;
    margin:0 auto 24px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--bg-soft-2);
  }
  .produkt-modal-img svg{width:100%; height:100%; display:block;}
  .produkt-modal-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .produkt-modal-price{
    display:block;
    font-size:17px;
    color:var(--wine);
    font-weight:600;
    margin-bottom:24px;
  }
  .produkt-modal-info{
    background:var(--bg-soft-2);
    border-radius:var(--radius-md);
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    text-align:left;
    margin-bottom:26px;
  }
  .produkt-modal-photo-note{
    font-size:12.5px;
    color:var(--ink-soft);
    font-style:italic;
    margin-bottom:20px;
  }
  .produkt-modal-actions{display:flex; gap:12px;}
  .produkt-modal-actions .btn{flex:1; justify-content:center;}
  .offer-card{cursor:pointer;}

  .modal-cart-item{
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--bg-soft-2);
    border-radius:var(--radius-md);
    padding:14px 16px;
    margin-bottom:26px;
  }
  .modal-cart-img{width:54px; height:54px; flex-shrink:0; border-radius:12px; overflow:hidden;}
  .modal-cart-img svg{width:100%; height:100%; display:block;}
  .modal-cart-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .modal-cart-info{flex-grow:1;}
  .modal-cart-info h4{font-size:15.5px; font-weight:600; margin-bottom:2px;}
  .modal-cart-price{font-size:13.5px; color:var(--wine); font-weight:600;}
  .modal-cart-qty{display:flex; flex-direction:column; align-items:center; gap:4px;}
  .modal-cart-qty label{
    font-size:10.5px;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-weight:600;
  }
  .modal-cart-qty input{
    width:52px;
    text-align:center;
    padding:6px 4px;
    border-radius:8px;
    border:1px solid var(--line);
    font-size:14px;
    font-family:inherit;
  }
  /* Wie bei den anderen Formularfeldern: unter 16px zoomt iOS beim Fokus. */
  @media (max-width:600px){
    .modal-cart-qty input{font-size:16px; width:58px;}
  }
  /* Rueckmeldung unter dem PLZ-Feld */
  .liefer-check{
    margin-top:8px;
    padding:10px 12px;
    border-radius:8px;
    font-size:12.5px;
    line-height:1.5;
    background:var(--bg-soft-2);
    color:var(--ink-soft);
  }
  .liefer-check strong{display:block; font-weight:600; color:var(--ink);}
  /* der wichtigste Satz soll ins Auge springen */
  .liefer-fehlt, .liefer-frei{
    display:block;
    margin-top:6px;
    font-size:15px;
    font-weight:600;
    line-height:1.3;
  }
  .liefer-fehlt b{font-weight:700;}
  .liefer-frei{color:#126B33;}
  /* PLZ-Feld faerbt sich nach dem Ergebnis */
  #bfPLZ.is-ok{
    border-color:#1DA851;
    box-shadow:0 0 0 3px rgba(29,168,81,0.15);
  }
  #bfPLZ.is-fehler{
    border-color:#E43B3B;
    box-shadow:0 0 0 3px rgba(228,59,59,0.15);
  }
  /* lieferbar ist gruen -- auch wenn noch Versandkosten anfallen */
  .liefer-check[data-status="ja"],
  .liefer-check[data-status="frei"]{background:rgba(29,168,81,0.1); color:#177A3C;}
  .liefer-check[data-status="ja"] strong,
  .liefer-check[data-status="frei"] strong{color:#126B33;}
  .liefer-check[data-status="ja"] .liefer-fehlt{color:#126B33;}
  .liefer-check[data-status="nein"]{background:rgba(228,59,59,0.08); color:#A32B2B;}
  .liefer-check[data-status="nein"] strong{color:#8A2222;}
  /* display:flex/block wuerde das hidden-Attribut sonst aushebeln */
  .modal-cart-row[hidden],
  .modal-cart-qty[hidden],
  .form-row[hidden],
  .form-row-split[hidden],
  .modal-cart-total small[hidden]{display:none;}
  .modal-cart-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    font-size:13.5px;
    color:var(--ink-soft);
    margin-bottom:8px;
  }
  .modal-cart-total{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-size:13.5px;
    color:var(--ink-soft);
    margin-bottom:22px;
    padding-top:10px;
    border-top:1px solid var(--line);
  }
  /* ohne Aufschluesselung keine leere Trennlinie */
  .modal-cart-row[hidden] + .modal-cart-total{border-top:0; padding-top:0;}
  .modal-cart-total small{
    display:block;
    font-size:11.5px;
    opacity:0.85;
  }
  .modal-cart-total strong{
    font-family:'Fraunces', serif;
    font-size:20px;
    font-weight:500;
    color:var(--wine);
  }
  .modal-price-note{
    font-size:11.5px;
    color:#8A5A1E;
    background:#FBF0DC;
    line-height:1.5;
    padding:9px 12px;
    border-radius:8px;
    margin-top:10px;
    margin-bottom:22px;
  }
  .form-hint-box{
    display:block;
    color:#8A5A1E;
    background:#FBF0DC;
    line-height:1.5;
    padding:9px 12px;
    border-radius:8px;
    margin-top:4px;
  }
  .form-hint-box[hidden]{display:none;}
  /* Folgt der Hinweis direkt auf ein Feldpaar (z. B. Wunschdatum/-uhrzeit
     beim Rueckruf), zieht das margin-bottom der inneren .form-row-Felder
     ihn sonst zu weit nach unten -- hier wieder anheben. */
  .form-row-split + .form-hint-box{margin-top:-12px;}
  .form-row{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
  .form-row label{font-size:13px; font-weight:600; color:var(--ink);}
  .form-row input[type="text"],
  .form-row input[type="email"],
  .form-row input[type="tel"],
  .form-row input[type="date"],
  .form-row input[type="time"],
  .form-row select,
  .form-row textarea{
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    font-family:inherit;
    font-size:14px;
    color:var(--ink);
    background:var(--bg);
    transition:border-color .25s;
    width:100%;
    /* iOS Safari ignoriert bei type="date"/"time" sonst manchmal
       width:100% in Flex-Containern und richtet sich am eigenen
       Inhalt aus -- dadurch wirkt das Feld schmaler als die anderen. */
    min-width:0;
    box-sizing:border-box;
  }
  .date-field{min-width:0;}
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none; border-color:var(--wine);}
  /* Unter 16px zoomt iOS Safari beim Antippen eines Feldes automatisch in
     die Seite hinein (ruckartig, Nutzer muss manuell zurueckzoomen) --
     auf dem Handy deshalb mindestens 16px, auf dem Desktop bleibt es bei
     der kompakteren 14px-Optik. */
  @media (max-width:600px){
    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row input[type="tel"],
    .form-row input[type="date"],
    .form-row input[type="time"],
    .form-row select,
    .form-row textarea{font-size:16px;}
  }
  /* Abholdatum: Wochentag steht direkt im Feld ("Sonntag 23.08.2026")
     statt als eigener Hinweis darunter. Das native Datum wird unsichtbar
     gemacht (nur die Farbe, nicht das Element -- der Kalender-Picker
     bleibt normal klickbar) und durch die eigene Beschriftung ersetzt. */
  .date-field{position:relative;}
  .date-field input[type="date"]{color:transparent;}
  .date-field-label{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    max-width:calc(100% - 40px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    color:var(--ink);
    pointer-events:none;
  }
  /* Leer: zeigt das Eingabeformat (TT.MM.JJJJ) statt gar nichts an --
     optisch wie ein Platzhalter, heller als ein echter Wert. */
  .date-field-label.is-placeholder{color:var(--ink-soft);}
  @media (max-width:600px){
    .date-field-label{font-size:16px;}
  }
  /* --- Uhrzeit-Auswahl: nur Zeiten innerhalb der Oeffnungszeiten --- */
  .form-row select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:38px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
    cursor:pointer;
  }
  .form-row select:disabled{color:var(--ink-soft); cursor:not-allowed; opacity:.75;}
  .zeit-hinweis[hidden]{display:none;}
  /* --- Gesperrtes Feld: sichtbar nur zum Mitlesen (PLZ-Spiegel) --- */
  .form-row input[readonly]{
    background-color:var(--bg-soft);
    color:var(--ink-soft);
    border-style:dashed;
    cursor:not-allowed;
    padding-right:36px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0938A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center;
    background-size:15px 15px;
  }
  .form-row input[readonly]:focus{border-color:var(--line);}
  .feld-gesperrt-note{font-weight:500; color:var(--ink-soft);}
  .zeit-wunsch{display:flex; flex-direction:column; gap:6px; margin-top:2px;}
  .zeit-wunsch[hidden]{display:none;}
  .zeit-wunsch input[type="time"]{
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    font-family:inherit;
    font-size:14px;
    color:var(--ink);
    background:var(--bg);
    transition:border-color .25s;
    width:100%;
  }
  .zeit-wunsch input[type="time"]:focus{outline:none; border-color:var(--wine);}
  .form-row-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .delivery-switch{
    display:flex;
    background:var(--bg-soft-2);
    border-radius:100px;
    padding:4px;
    gap:4px;
  }
  .delivery-switch input[type="radio"]{
    display:none;
  }
  .delivery-switch label{
    flex:1;
    text-align:center;
    padding:9px 14px;
    border-radius:100px;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background .25s, color .25s;
  }
  .delivery-switch input:checked + label{
    background:var(--wine);
    color:#fff;
  }
  .delivery-switch input:focus-visible + label{outline:2px solid var(--wine); outline-offset:2px;}
  .delivery-warning{
    color:#8A5A1E;
    background:#FBF0DC;
    padding:9px 12px;
    border-radius:8px;
  }
  .form-row textarea{resize:vertical;}
  .form-hint{font-size:12px; color:var(--ink-soft); line-height:1.4;}
  .form-check label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:13px;
    font-weight:400;
    color:var(--ink-soft);
    line-height:1.5;
    cursor:pointer;
  }
  .form-check input[type="checkbox"]{
    width:18px; height:18px;
    margin-top:1px;
    accent-color:var(--wine);
    flex-shrink:0;
    cursor:pointer;
  }
  .delivery-fields{
    padding:14px 16px;
    background:var(--bg-soft);
    border-radius:var(--radius-md);
    margin-bottom:16px;
  }
  .modal-actions{
    display:flex;
    gap:12px;
    margin-top:28px;
  }
  .modal-actions .btn{flex:1; justify-content:center;}

  @media (max-width:600px){
    .modal-box{padding:28px 22px;}
    .modal-actions{flex-direction:column;}
    .form-row-split{grid-template-columns:1fr;}
    #imgLightbox{padding:10px;}
    .lightbox-box{
      max-width:100%;
      max-height:calc(100dvh - 20px);
      padding:12px;
      border-radius:18px;
    }
    .lightbox-actions .btn{width:100%; justify-content:center;}
  }

  /* ---------- Fix: lange Wörter dürfen Grid-Spalten nicht aufsprengen ---------- */
  /* (CSS Grid setzt Spalten sonst auf min-content-Breite langer, zusammengesetzter
     deutscher Wörter — das drückt die Seite horizontal auf und lässt Inhalte auf
     schmalen Bildschirmen rechts abgeschnitten wirken) */
  .offer-card,
  .leistung-card,
  .team-card,
  .review-card,
  .method-card,
  .hours-day,
  .mehr-card,
  .google-rating-card,
  .history-card,
  .insta-post,
  .form-row,
  .footer-col,
  .produkt-kategorie,
  .hours-list,
  .theme-art,
  .theme-copy,
  .theme-banner,
  .cta-banner,
  .cta-banner h2{
    min-width:0;
  }
  .offer-card h4,
  .leistung-body h3,
  .team-card h4,
  .method-card h3,
  .review-text,
  .kategorie-title,
  .theme-copy h2,
  .cta-banner h2{
    overflow-wrap:break-word;
    word-break:break-word;
  }
  html, body{max-width:100%; overflow-x:hidden;}

  /* ---------- GROSSE BILDSCHIRME ----------
     Der Container waechst ueber --wrap-max mit. Damit Karten dabei nicht
     unfoermig gross werden, bekommen die Kartenraster zusaetzliche Spalten. */
  @media (min-width:1400px){
    /* auto-fit statt fester Spaltenzahl: mehr Spalten wenn genug Karten da sind,
       ansonsten fuellen die vorhandenen Karten die Reihe aus (keine Luecken). */
    .product-grid,
    .offer-grid{grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));}
    /* Vier Produkte je Kategorie: volle Breite wie die Karten unter "Aktuelle Produkte" */
    .produkt-grid{grid-template-columns:repeat(4, 1fr);}
    .insta-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
    .team-grid{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));}
    .leistung-grid{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));}
    .service-grid{grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));}
    section{padding:132px 0;}
    /* Bildbereiche wachsen sonst proportional zur Breite und werden zu hoch.
       Feste Hoehe statt max-height: sonst behaelt die Textspalte ihre eigene
       Hoehe, laeuft unten aus dem Kasten und sitzt nicht mehr mittig. */
    .theme-banner{height:min(62vh, 600px); min-height:340px;}
    .theme-art{overflow:hidden;}
    .theme-art svg, .theme-art img{height:100%; object-fit:cover;}
    .campaign-media{aspect-ratio:auto; height:min(64vh, 620px);}
    .campaign-media img{width:100%; height:100%; object-fit:cover;}
    /* Buttons nicht ueber die halbe Bannerbreite ziehen */
    .theme-cta-btn{align-self:flex-start;}
  }
  @media (min-width:1900px){
    section{padding:148px 0;}
  }

  /* ---------- EINWILLIGUNG (Karten) ---------- */
  .consent{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(42,33,29,0.45);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease);
  }
  .consent.is-open{opacity:1; pointer-events:auto;}
  .consent.is-open .consent-inner{transform:none;}
  .consent-inner{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:100%;
    max-width:520px;
    padding:28px 28px 26px;
    transform:translateY(10px) scale(.98);
    transition:transform .3s var(--ease);
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 24px 50px -22px rgba(42,33,29,0.55);
  }
  .consent-body{min-width:0;}
  .consent-body h2{
    margin:0 0 8px;
    font-size:20px;
    font-weight:500;
    color:var(--ink);
  }
  .consent-body p{
    margin:0;
    font-size:13.5px;
    line-height:1.6;
    color:var(--ink-soft);
  }
  .consent-hinweis{margin-top:10px !important; font-size:12.5px !important;}
  .consent-links{margin-top:6px !important; display:flex; gap:14px;}
  .consent-links a{
    font-size:12.5px;
    color:var(--ink-soft);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:rgba(110,96,88,0.4);
  }
  .consent-links a:hover{color:var(--wine); text-decoration-color:var(--wine);}
  .consent-actions{
    display:flex;
    gap:10px;
  }
  /* beide Knoepfe gleich gross: keine versteckte Ablehnung */
  .consent-actions .btn{
    flex:1 1 0;
    justify-content:center;
    padding:12px 18px;
    font-size:13.5px;
  }
  @media (max-width:560px){
    .consent{padding:16px;}
    .consent-inner{gap:16px; padding:22px 20px 20px;}
    .consent-actions{flex-direction:column-reverse;}
    .consent-actions .btn{width:100%;}
  }

  /* ---------- WARENKORB ---------- */
  .nav-cart{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    padding:0;
    border:1px solid var(--line);
    border-radius:100px;
    background:#fff;
    color:var(--ink);
    cursor:pointer;
    transition:background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .nav-cart:hover{background:var(--bg-soft); box-shadow:0 8px 18px -12px rgba(42,33,29,0.5); transform:translateY(-1px);}
  .nav-cart svg{width:18px; height:18px;}
  .nav-cart-count{
    position:absolute;
    top:-4px; right:-4px;
    min-width:18px; height:18px;
    padding:0 5px;
    border-radius:100px;
    background:var(--wine);
    color:#fff;
    font-size:11px;
    font-weight:600;
    line-height:18px;
    text-align:center;
  }
  .btn-cart-add{
    justify-content:center;
    background:#fff;
    border:1px solid var(--line);
    color:var(--ink);
    font-size:13.5px;
  }
  .btn-cart-add:hover{background:var(--bg-soft-2); color:var(--wine);}
  .nav-cart-wrap{position:relative;}
  .nav-cart-panel{
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    z-index:60;
    width:370px;
    padding:16px;
    background:#fff;
    border:2px solid var(--wine);
    border-radius:18px;
    box-shadow:0 30px 60px -18px rgba(42,33,29,0.6), 0 0 0 6px rgba(122,38,80,0.08);
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(-8px) scale(.97);
    transform-origin:top center;
    transition:opacity .22s var(--ease), transform .28s var(--ease), visibility .22s;
  }
  /* Spitze zum Warenkorb-Symbol -- Panel ist am Symbol zentriert, die
     Spitze also mittig statt am rechten Rand. */
  .nav-cart-panel::after{
    content:"";
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    border:9px solid transparent;
    border-bottom-color:var(--wine);
  }
  .cart-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin:-2px 0 12px;
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
  }
  .cart-head strong{
    font-family:'Fraunces', serif;
    font-size:17px;
    font-weight:500;
    color:var(--wine);
  }
  .cart-head-count{font-size:12px; font-weight:600; color:var(--ink-soft); margin-left:auto;}
  .cart-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px; height:26px;
    padding:0;
    margin:-4px -4px -4px 0;
    border:0;
    border-radius:100px;
    background:none;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background .2s, color .2s;
  }
  .cart-close svg{width:15px; height:15px;}
  .cart-close:hover{background:var(--bg-soft-2); color:var(--wine);}
  /* unsichtbare Bruecke, damit der Weg zur Maus nicht abreisst */
  .nav-cart-panel::before{content:""; position:absolute; top:-10px; left:0; right:0; height:10px;}
  .nav-cart-wrap:hover .nav-cart-panel,
  .nav-cart-wrap:focus-within .nav-cart-panel,
  .nav-cart-wrap.is-open .nav-cart-panel{opacity:1; visibility:visible; transform:translateX(-50%);}
  .cart-list{display:flex; flex-direction:column; gap:10px; margin:0 0 14px;}
  .cart-empty{font-size:13.5px; color:var(--ink-soft);}
  .cart-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    background:var(--bg-soft-2);
    border-radius:12px;
  }
  .cart-item img, .cart-item-nopic{
    width:48px; height:48px;
    flex-shrink:0;
    object-fit:cover;
    border-radius:8px;
    background:#fff;
  }
  .cart-item-info{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
  .cart-item-info strong{font-size:14px; font-weight:600; color:var(--ink);}
  .cart-item-info span{font-size:12.5px; color:var(--ink-soft);}
  .cart-item-qty{display:flex; align-items:center; gap:8px; flex-shrink:0;}
  .cart-item-qty button{
    width:26px; height:26px;
    border:1px solid var(--line);
    border-radius:100px;
    background:#fff;
    color:var(--ink);
    font-size:15px;
    line-height:1;
    cursor:pointer;
  }
  .cart-item-qty button:hover{background:var(--bg-soft);}
  .cart-item-qty span{min-width:16px; text-align:center; font-size:13.5px; font-weight:600;}
  .cart-item-remove{
    border:0;
    background:none;
    color:var(--ink-soft);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:0 2px;
  }
  .cart-item-remove:hover{color:var(--wine);}
  /* Handy: Mengen-Buttons und Entfernen-Kreuz sind bei 26px/schmalem
     Klickbereich schwer zu treffen -- groesserer Tap-Bereich statt
     groesserer Optik (Padding statt fixer Groesse, damit es nicht
     unproportional gross wirkt). */
  @media (max-width:600px){
    .cart-item-qty button{width:32px; height:32px; font-size:16px;}
    .cart-item-remove{padding:8px;}
  }
  .cart-submit{width:100%; justify-content:center;}
  .cart-submit:disabled{opacity:.5; cursor:not-allowed;}
  @media (max-width:900px){
    /* Auf schmalen Breiten reicht der Platz nicht, das Panel am Symbol zu
       zentrieren -- das Symbol steht je nach Breite mal links, mal rechts
       in der Taskleiste. warenkorb.js setzt hier stattdessen per JS
       position:fixed anhand der tatsaechlichen Symbol-Position, damit das
       Panel nie ueber den Bildschirmrand hinausragt (siehe
       positioniereCartPanel()). Die Spitze zum Symbol passt dabei nicht
       mehr exakt, darum ausgeblendet. */
    .nav-cart-panel{
      width:min(300px, calc(100vw - 32px));
      transform:translateY(-8px) scale(.97);
      transform-origin:top center;
    }
    .nav-cart-wrap:hover .nav-cart-panel,
    .nav-cart-wrap:focus-within .nav-cart-panel,
    .nav-cart-wrap.is-open .nav-cart-panel{transform:none;}
    .nav-cart-panel::after{display:none;}
  }

  /* "Mehr" hinter gekuerzten Hinweistexten */
  .mehr-toggle{
    margin-left:6px;
    padding:0;
    border:0;
    background:none;
    color:var(--wine);
    font:inherit;
    font-size:inherit;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
    cursor:pointer;
  }
  .mehr-toggle:hover{color:var(--wine-dark);}
  .mehr-rest{display:block; margin-top:4px;}
  .mehr-rest[hidden]{display:none;}
  .modal-actions[hidden]{display:none;}

  /* ---------- HINWEISE HINTER "i" ---------- */
  .form-hint-box.info-quelle{display:none !important;}
  .info-wrap{position:relative; display:inline-flex; margin-left:7px; vertical-align:middle;}
  .info-wrap[hidden]{display:none;}
  .info-i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px; height:18px;
    padding:0;
    border:0;
    border-radius:100px;
    background:rgba(122,38,80,0.12);
    color:var(--wine);
    font-family:'Fraunces', serif;
    font-size:12px;
    font-weight:600;
    font-style:italic;
    line-height:1;
    cursor:pointer;
    transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  }
  .info-i:hover,
  .info-wrap.is-open .info-i{
    background:var(--wine);
    color:#fff;
    transform:scale(1.12);
  }
  .info-i:focus-visible{outline:2px solid var(--wine); outline-offset:2px;}
  .info-pop{
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    z-index:40;
    width:260px;
    padding:10px 12px;
    transform:translateX(-50%) translateY(4px);
    background:var(--wine);
    color:#FBEDEF;
    border-radius:12px;
    font-size:12px;
    font-weight:400;
    font-style:normal;
    line-height:1.5;
    text-transform:none;
    letter-spacing:0;
    box-shadow:0 16px 32px -16px rgba(42,33,29,0.7);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .info-pop::after{
    content:"";
    position:absolute;
    top:100%; left:50%;
    margin-left:-5px;
    border:5px solid transparent;
    border-top-color:var(--wine);
  }
  .info-wrap:hover .info-pop,
  .info-wrap:focus-within .info-pop,
  .info-wrap.is-open .info-pop{opacity:1; visibility:visible; transform:translateX(-50%);}
  @media (max-width:600px){
    .info-pop{width:min(240px, 70vw);}
  }

  /* Zahlungssymbole im Laufband */
  .marquee-pay{
    display:inline-flex;
    align-items:center;
    gap:7px;
  }
  .marquee-pay > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:19px;
    min-width:28px;
    padding:0 5px;
    background:#fff;
    border-radius:4px;
  }
  .marquee-pay svg{height:12px; width:auto; display:block;}
  /* der Trennpunkt der Laufband-Eintraege gilt nicht zwischen den Logos */
  .marquee-group .marquee-pay > span::after{display:none;}

  /* Rueckmeldung beim Hinzufuegen */
  .cart-toast{
    position:fixed;
    right:20px; bottom:20px;
    z-index:1300;
    display:flex;
    align-items:center;
    gap:12px;
    max-width:min(440px, calc(100vw - 40px));
    padding:18px 24px 18px 18px;
    gap:16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 22px 44px -20px rgba(42,33,29,0.5);
    opacity:0;
    transform:translateY(14px) scale(.96);
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .35s var(--ease);
  }
  .cart-toast.is-open{opacity:1; transform:none;}
  .cart-toast img{width:62px; height:62px; border-radius:12px; object-fit:cover; flex-shrink:0;}
  .cart-toast-check{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px; height:34px;
    flex-shrink:0;
    border-radius:100px;
    background:#1DA851;
    color:#fff;
  }
  .cart-toast-check svg{width:19px; height:19px;}
  .cart-toast.is-open .cart-toast-check{animation:cart-check-pop .45s var(--ease);}
  @keyframes cart-check-pop{
    0%{transform:scale(.3); opacity:0;}
    60%{transform:scale(1.15); opacity:1;}
    100%{transform:scale(1);}
  }
  .cart-toast-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .cart-toast-text strong{font-size:16px; font-weight:600; color:var(--ink);}
  .cart-toast-text span{font-size:14px; color:var(--ink-soft);}
  /* ruhig anheben, weich gruen aufleuchten, sanft zurueck */
  .nav-cart.is-bumped{animation:cart-glow 1.3s cubic-bezier(.33,.9,.28,1);}
  .nav-cart.is-bumped .nav-cart-count{animation:cart-count-pop .8s cubic-bezier(.33,.9,.28,1);}
  @keyframes cart-glow{
    0%{transform:translateY(0) scale(1); background:#fff; border-color:var(--line); color:var(--ink);}
    30%{transform:translateY(-4px) scale(1.07); background:#1DA851; border-color:#1DA851; color:#fff;}
    62%{transform:translateY(0) scale(1.02); background:#1DA851; border-color:#1DA851; color:#fff;}
    100%{transform:translateY(0) scale(1); background:#fff; border-color:var(--line); color:var(--ink);}
  }
  @keyframes cart-count-pop{
    0%{transform:scale(1);}
    35%{transform:scale(1.22);}
    100%{transform:scale(1);}
  }
  .btn.is-cart-view{background:#1DA851; border-color:#1DA851;}
  .btn.is-cart-view:hover{background:#178c43; border-color:#178c43;}

  /* "In den Warenkorb"-Knopf: Text schrumpft mit der Kartenbreite, statt
     zu ueberlaufen (Grid bleibt ab 1100px durchgehend zweispaltig). */
  .btn-cart-add .label-mid,
  .btn-cart-add .label-short{display:none;}
  @media (max-width:700px){
    .btn-cart-add .label-full{display:none;}
    .btn-cart-add .label-mid{display:inline;}
  }
  @media (max-width:400px){
    .btn-cart-add .label-mid{display:none;}
    .btn-cart-add .label-short{display:inline;}
  }
  /* Rueckmeldung "Bestellung abschliessen": ueberschreibt die Labels per
     ::after statt textContent, damit die Spans beim Zuruecksetzen (siehe
     warenkorb.js) erhalten bleiben. */
  .btn-cart-add.is-cart-view .label-full,
  .btn-cart-add.is-cart-view .label-mid,
  .btn-cart-add.is-cart-view .label-short{display:none;}
  .btn-cart-add.is-cart-view::after{content:"Bestellung abschließen";}
  /* Handy mit wenig Platz: kuerzerer Text reicht, "Bestellung" laeuft sonst
     leicht ueber schmale Kartenbreiten. */
  @media (max-width:400px){
    .btn-cart-add.is-cart-view::after{content:"Abschließen";}
  }
  @media (prefers-reduced-motion:reduce){
    .cart-toast, .nav-cart.is-bumped, .nav-cart.is-bumped .nav-cart-count{transition:none; animation:none;}
  }

  /* Zahlungsmoeglichkeiten im Bestellformular */
  .bezahl-label{
    display:block;
    margin-bottom:8px;
    font-size:12.5px;
    font-weight:600;
    color:var(--ink-soft);
  }
  .bezahl-liste{display:flex; flex-wrap:wrap; gap:8px;}
  .bezahl-liste > span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px 5px 7px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:100px;
    font-size:11.5px;
    font-weight:600;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .bezahl-liste svg{height:13px; width:auto; display:block;}


  /* Warenkorb-Positionen in der Auftragsanfrage */
  .modal-cart-item[hidden]{display:none;}
  .bf-korb-liste{display:flex; flex-direction:column; gap:8px; margin-bottom:4px;}
  .bf-korb-liste[hidden]{display:none;}
  .bf-korb-zeile{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    background:var(--bg-soft-2);
    border-radius:12px;
  }
  .bf-korb-zeile img, .bf-korb-nopic{
    width:42px; height:42px;
    flex-shrink:0;
    object-fit:cover;
    border-radius:8px;
    background:#fff;
  }
  .bf-korb-name{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
  .bf-korb-name strong{font-size:13.5px; font-weight:600; color:var(--ink);}
  .bf-korb-name span{font-size:12px; color:var(--ink-soft);}
  .bf-korb-summe{
    flex-shrink:0;
    font-family:'Fraunces', serif;
    font-size:15px;
    color:var(--wine);
  }

  /* ---------- EINHEITLICHER RAHMEN FUER PANELS UND POPUPS ----------
     Gleiche Sprache wie das Warenkorb-Dropdown: weinroter Rahmen,
     weicher Wein-Schimmer aussen, kraeftiger Schlagschatten. */
  .nav-menu-panel,
  .nav-submenu-panel,
  .modal-box,
  .consent-inner,
  .cart-toast{
    border:2px solid var(--wine);
    border-radius:18px;
    box-shadow:0 30px 60px -18px rgba(42,33,29,0.6), 0 0 0 6px rgba(122,38,80,0.08);
  }
  .modal-box{border-radius:22px;}

  /* Hinweis ueber dem PLZ-Feld: schlicht, kein Kasten */
  .plz-hinweis{
    display:block;
    margin:-2px 0 8px;
    font-size:12.5px;
    line-height:1.5;
    color:var(--ink-soft);
  }
  .plz-hinweis[hidden]{display:none;}
  .liefer-check[hidden]{display:none;}

  /* Ausklappbare Bloecke im Bestellformular */
  /* Ausklappbare Bloecke: gleiche Schrift wie die Haken darunter */
  .form-details{
    margin-bottom:10px;
    padding:0;
    background:none;
    border:0;
    border-radius:0;
  }
  .form-details > summary{
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 0;
    font-family:inherit;
    font-size:13px;
    font-weight:400;
    color:var(--ink-soft);
    cursor:pointer;
    list-style:none;
    transition:color .25s var(--ease);
  }
  .form-details > summary:hover{color:var(--wine);}
  .form-details > summary::-webkit-details-marker{display:none;}
  /* Pfeil zeigt nach rechts und dreht sich beim Ausklappen nach unten */
  .form-details > summary::before{
    content:"";
    width:7px; height:7px;
    flex-shrink:0;
    border-right:2px solid var(--wine);
    border-bottom:2px solid var(--wine);
    transform:rotate(-45deg);
    transition:transform .35s var(--ease);
  }
  .form-details[open] > summary::before{transform:rotate(45deg);}
  /* Inhalt erscheint ruhig, nicht sprunghaft */
  .form-details[open] > *:not(summary){
    animation:feld-auf .55s cubic-bezier(.22,.9,.3,1) both;
  }
  .form-details .bezahl-liste{padding:6px 0 12px 16px;}
  .details-zeiten{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:6px 0 12px 16px;
    font-size:13px;
    color:var(--ink-soft);
  }
  .details-zeiten span{display:flex; justify-content:space-between; gap:16px;}
  .details-zeiten b{font-weight:600; color:var(--ink);}
  .details-zeiten-note{
    display:block !important;
    margin-top:4px;
    font-size:12px;
    font-style:italic;
    color:#8C8179;
  }

  /* Restbetrag-Hinweis in der Kostenuebersicht */
  .liefer-rest{
    color:#177A3C;
    font-weight:600;
  }
  /* Positionsliste im Formular: Menge aendern, weitere Straeuße */
  .bf-korb-zeile .cart-item-qty{flex-shrink:0;}
  .bf-korb-mehr{
    align-self:flex-start;
    margin-top:2px;
    margin-bottom:14px;
    padding:8px 14px;
    border:1px dashed rgba(122,38,80,0.4);
    border-radius:100px;
    background:#fff;
    color:var(--wine);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s var(--ease), border-color .2s var(--ease);
  }
  .bf-korb-mehr:hover{background:var(--bg-soft-2); border-color:var(--wine);}
  /* leeres Label ueber dem Abholung/Lieferung-Schalter */
  .switch-label-leer{display:block; min-height:0; margin-bottom:4px; text-align:right;}

  /* Felder tauchen nach erfolgreicher PLZ-Pruefung gestaffelt auf */
  @keyframes feld-auf{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:none;}
  }
  .feld-auf{animation:feld-auf .5s cubic-bezier(.22,.9,.3,1) both;}
  @media (prefers-reduced-motion:reduce){
    .feld-auf{animation:none;}
  }

  /* Wunsch-Feld waechst automatisch, darum kein Ziehgriff */
  #bfNotes, #rrNotes{resize:none; overflow:hidden;}

  /* Bestellen im Warenkorb-Dropdown: gruen als klarer Abschluss */
  .cart-submit.btn-primary{
    background:#1DA851;
    border-color:#1DA851;
    box-shadow:0 10px 22px -12px rgba(29,168,81,0.9);
  }
  .cart-submit.btn-primary:hover{background:#178C43; border-color:#178C43;}

  /* i im Abholung-Segment des Schalters */
  .delivery-switch label .info-wrap{margin-left:6px;}
  .delivery-switch label .info-i{
    background:rgba(122,38,80,0.14);
    color:var(--wine);
  }
  .delivery-switch input:checked + label .info-i{
    background:rgba(255,255,255,0.25);
    color:#fff;
  }
  .delivery-switch input:checked + label .info-i:hover{background:#fff; color:var(--wine);}

  /* Pfeil unter "Ich suche etwas anderes" */
  .gate-hint .gate-skip{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-decoration:none;
  }
  .gate-hint .gate-skip > :first-child{text-decoration:none;}
  .gate-skip-pfeil{
    width:16px; height:16px;
    animation:gate-pfeil 2.2s ease-in-out infinite;
  }
  .gate-hint .gate-skip:hover .gate-skip-pfeil{animation-play-state:paused;}
  @keyframes gate-pfeil{
    0%, 100%{transform:translateY(0); opacity:.7;}
    50%{transform:translateY(4px); opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){
    .gate-skip-pfeil{animation:none;}
  }
  /* Foto im Aktuelles-Banner: Verlauf wie im frueheren SVG, Rose komplett
     sichtbar und mit Schlagschatten vom Untergrund abgehoben. */
  .theme-art{
    position:relative;
    background:radial-gradient(circle at 50% 30%, #AE4272 0%, #5C1A3B 100%);
    border-radius:var(--radius-lg) 0 0 var(--radius-lg);
    /* oben offen (Bluete darf raus), unten und seitlich an der Kante schneiden */
    overflow:visible;
    clip-path:inset(-400px 0 0 0 round var(--radius-lg) 0 0 var(--radius-lg));
  }
  /* Die Rose schaut oben komplett aus dem Kasten heraus (nicht beschnitten) */
  .theme-art img{
    position:absolute;
    /* etwas breiter als die Spalte, damit der Strauss groesser wirkt */
    left:-4%; right:-4%;
    top:-75px;
    width:108%;
    /* Hoehe statt bottom: eine fruehere height-Regel wuerde bottom aushebeln */
    height:calc(100% + 215px);
    display:block;
    /* cover statt contain: der Strauss fuellt die Spalte, unten schneidet
       der Kastenrand die Stiele an, oben schaut er heraus */
    object-fit:cover;
    object-position:center top;
    /* horizontal verschieben: object-position greift nicht, weil das Bild
       die Boxbreite exakt fuellt */
    transform:translate(45px, -40px);
    filter:drop-shadow(0 18px 26px rgba(30,10,14,0.45));
  }
  .theme-banner{overflow:visible;}
  .theme-copy{border-radius:0 var(--radius-lg) var(--radius-lg) 0;}
  /* ---------- AKTUELLES-BANNER: Farben aus dem Strauss ----------
     Beerentoene der Pfingstrosen statt Weinrot; Weiss bleibt gut lesbar. */
  .theme-banner{background:var(--wine);}
  .theme-art{
    /* heller Kern um den Strauss, nach aussen deutlich dunkler */
    background:
      /* weicher Lichtkern hinter dem Strauss */
      radial-gradient(circle at 44% 32%, rgba(205,100,145,0.55) 0%, rgba(205,100,145,0) 46%),
      /* Tiefe nach aussen: von Beere bis fast schwarz */
      radial-gradient(115% 95% at 44% 30%, #AE4272 0%, #7A2650 30%, #4A1230 56%, #260813 82%, #16040B 100%);
  }
  .theme-cta-btn{color:var(--wine);}
  .theme-cta-btn:hover{color:#591A38;}

  /* Blumenstrauss-Ueberhang im Aktuelles-Banner: auf Handy/Tablet steht
     das Bild (gestapeltes Layout, 16:9-Box) statt der Text daneben oben.
     Die festen Desktop-Pixelwerte (fuer die linke Haelfte einer breiten
     2-Spalten-Box gedacht) passen auf schmalen Hochformaten nicht mehr -
     der Strauss stand verschoben/abgeschnitten. Eigene, prozentuale Werte
     bezogen auf die 16:9-Box skalieren dagegen auf jeder Handy-/iPad-
     Breite gleich und lassen die Bluete oben bewusst herausschauen. */
  @media (max-width:900px){
    .theme-art{
      border-radius:var(--radius-lg) var(--radius-lg) 0 0;
      clip-path:inset(-30% 0 0 0 round var(--radius-lg) var(--radius-lg) 0 0);
    }
    .theme-copy{border-radius:0 0 var(--radius-lg) var(--radius-lg);}
    .theme-art img{
      left:0; right:0;
      top:-14%;
      width:100%;
      height:126%;
      transform:none;
      object-position:center top;
    }
  }

  /* Referenzkarten von Geschaeftskunden */
  .kunde-review-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    height:52px;
    margin:2px 0 2px;
  }
  .kunde-review-logo img{
    max-height:52px;
    max-width:70%;
    width:auto;
    object-fit:contain;
  }

  /* Beliebt-Badge rechts oben (WhatsApp-Karte) */
  .method-card{position:relative;}
  .beliebt-badge-rechts{left:auto; right:14px; top:14px;}
  /* Hinweis-Tooltip ohne Einblend-Animation */
  .info-pop{transition:none; transform:translateX(-50%);}
  .info-wrap:hover .info-pop,
  .info-wrap:focus-within .info-pop,
  .info-wrap.is-open .info-pop{transform:translateX(-50%);}
  /* --- Abstaende an den Hintergrund-Farbkanten ---
     Ueber und unter jeder Farbkante steht gleich viel Luft: 60px.
     Ausnahme ist die dunkle Fusszeile, die ihre eigene Aufteilung behaelt. */
  .gate{padding-bottom:60px;}
  .contact,
  .oz-section,
  .reviews,
  .inspiration{padding-top:60px; padding-bottom:60px;}
  .highlights{padding-top:60px;}
  /* Kante zur Fusszeile: gilt auf allen Seiten fuer den letzten Abschnitt */
  main > section:last-child{padding-bottom:60px;}
  footer{padding-top:60px;}
  @media (max-width:600px){
    .contact,
    .oz-section,
    .reviews,
    .inspiration{padding-top:40px; padding-bottom:40px;}
    .highlights{padding-top:40px;}
    main > section:last-child{padding-bottom:40px;}
    footer{padding-top:40px;}
  }

  /* Hinweis unter den Oeffnungszeiten: schlichter Text statt Kasten */
  .hours-hinweis{
    margin-top:14px;
    font-size:13.5px;
    line-height:1.5;
    color:var(--ink-soft);
  }
  /* Zahlungsmethoden-Karte nur so hoch wie ihr Inhalt, nicht auf Oeffnungszeiten gestreckt */
  .oz-grid > .payment-card{height:auto; align-self:start;}
  /* Hinweis gehoert unter die Wochentage, nicht daneben */
  .hours-body{grid-template-columns:1fr; gap:0;}