/* ==========================================================================
   Bauer – osteuropäisches Lebensmittelgeschäft Sinzig
   Handgeschriebenes CSS (kein Elementor, kein Framework).
   Breakpoints wie im Original: Desktop ≥ 1025px · Tablet ≤ 1024px · Mobil ≤ 767px
   ========================================================================== */

/* ---------- Schrift (lokal) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/inter-400italic.woff2") format("woff2")}
/* Kyrillisch (Teilmenge, greift nur für kyrillische Zeichen) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/inter-cyrillic-400-italic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- Design-Token ---------- */
:root{
  --color-primary:#344657;            /* Überschriften, dunkles Blau */
  --color-secondary:rgba(52,70,87,.75);/* Sekundärtext */
  --color-text:#2A3949;               /* Fließtext */
  --color-red:#9d1b21;                /* Akzent / Buttons */
  --color-red-dark:#8e151a;           /* Hover */
  --color-bg-light:234,236,238;       /* Hellgrauer Hintergrund (RGB für rgba()) */
  --color-bg-tint:rgba(52,70,87,.1);  /* Footer / graue Sektionen */
  --color-line:rgba(0,0,0,.15);       /* Trennlinien, Rahmen */
  --shadow:0 0 30px 0 rgba(0,0,0,.15);
  --radius:10px;
  --container:1300px;
  --gap:40px;                         /* Standardabstand zwischen Blöcken */
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%;scroll-blocked:smooth}
body{margin:0;background:#fff;color:var(--color-text);font-family:"Inter",sans-serif;font-size:17px;font-weight:400;line-height:1.7em}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--color-red);text-decoration:none;transition:color .3s}
a:hover{color:var(--color-red-dark)}
p{margin:0 0 .9rem}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--color-primary);font-weight:600}
h1{font-size:50px;line-height:1.1em}
h2{font-size:40px;line-height:1.2em}
h3{font-size:35px;line-height:1.3em}
h4{font-size:30px;line-height:1.3em}
h5{font-size:25px;line-height:1.3em}
h6{font-size:20px;line-height:1.3em}
ul{margin:0;padding:0;list-style:none}
strong{font-weight:700}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
main{display:block}
@media (max-width:767px){
  h1{font-size:40px}h2{font-size:30px}h3{font-size:25px}h4{font-size:22px}h5{font-size:20px}h6{font-size:18px}
}

/* Fließtext-Blöcke (Impressum, Datenschutz, Anfahrt) */
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{margin:.5rem 0 1rem}
.prose p:last-child{margin-bottom:0}

.skip-link{position:absolute;left:-9999px;top:0;padding:10px 16px;background:#fff;color:var(--color-red);z-index:1000}
.skip-link:focus{left:10px;top:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout-Helfer ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto}
.stack{display:flex;flex-direction:column;gap:var(--gap)}          /* vertikale Blöcke, 40px Abstand */
.stack>*,.box>*,.hero__inner>*,.footer-col>*{margin-bottom:0}   /* Abstand kommt aus dem gap, nicht aus p-Margins */
.section{padding:100px 40px}
.section--divided{padding-top:0}                                   /* Abschnitt beginnt mit Trennlinie */
.section--tint{background:var(--color-bg-tint)}
.narrow{max-width:940px;align-self:center;text-align:center}       /* zentrierte Überschrift/Absatz */
.lead{max-width:940px}                                             /* Einstiegs-Überschrift, linksbündig auf der Container-Achse */
.text-center{text-align:center}
.divider{display:flex;padding:20px 0}
.divider::before{content:"";width:100%;border-top:1px solid var(--color-line)}
@media (max-width:1024px){.container{max-width:1024px}}
@media (max-width:767px){.section{padding:60px 20px}}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:16px 20px;border:0;border-radius:100px;background:var(--color-red);color:#fff;font-size:17px;font-weight:500;line-height:1.7em;text-align:center;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.btn:hover,.btn:focus{background:var(--color-red-dark);color:#fff}
.btn--outline{background:transparent;color:var(--color-red);border:1px solid var(--color-red)}
.btn--outline:hover,.btn--outline:focus{background:var(--color-red-dark);color:#fff;border-color:var(--color-red-dark)}
.btn-wrap--center{text-align:center}
@media (max-width:1024px){
  .btn-wrap--center-tablet{text-align:center}
  .btn-wrap--full-tablet .btn{width:100%}
}
@media (max-width:767px){
  .btn-wrap--full-mobile .btn{width:100%}
}

/* ---------- Checkliste / Pfeilliste ---------- */
.checklist li{position:relative;display:block;padding-left:26px}
.checklist li+li{margin-top:6px}
.checklist li::before{content:"";position:absolute;top:5px;left:0;width:18px;height:18px;background:var(--color-red);
  -webkit-mask:url("/img/check.svg") no-repeat center/cover;mask:url("/img/check.svg") no-repeat center/cover}
.checklist--columns{padding-bottom:var(--gap)}
.checklist--columns li{display:inline-block;width:16.6666%}

/* ---------- Icon-Liste (Adresse, Telefon …) ---------- */
.icon-list li{display:flex;align-items:flex-start;position:relative}
.icon-list li+li{margin-top:5px}
.icon-list li:not(:last-child){padding-bottom:5px}
.icon-list a{display:flex;align-items:flex-start;color:inherit}
.icon-list__icon{display:flex;flex:none;position:relative;top:6px;padding-right:6px}
.icon-list__icon svg{width:16px;height:16px;margin-right:4px;fill:var(--color-red);transition:fill .3s}
.icon-list__text{align-self:center;padding-left:5px;color:var(--color-secondary);transition:color .3s}
.icon-list--inline{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -20px}
.icon-list--inline li,.icon-list--inline li:not(:last-child){margin:0 20px;padding:0;justify-content:center}
.icon-list--inline li+li{margin-top:0}
.icon-list--inline .icon-list__icon{padding-right:0}
@media (max-width:1024px){.icon-list--inline{margin:0 -10px}.icon-list--inline li,.icon-list--inline li:not(:last-child){margin:0 10px}}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:relative;z-index:10;display:flex;flex-direction:column;padding:0 40px;margin-bottom:-4.2%;
  background:url("/img/header-scaled-1.webp") bottom center/cover no-repeat}
.site-header .container{padding-bottom:10px}
.topbar{padding:10px 0;background:url("/img/shadow.webp") bottom center/contain no-repeat}
.topbar .icon-list{font-size:15px;line-height:1.7em}
.topbar .icon-list__icon svg{fill:rgba(255,255,255,.75)}
.topbar .icon-list__text{color:rgba(255,255,255,.8)}
.topbar li:hover .icon-list__icon svg{fill:#fff}
.topbar li:hover .icon-list__text{color:#fff}
.header-row{display:flex;align-items:center;gap:var(--gap);padding-bottom:10px}
.logo{flex:0 1 auto;margin-bottom:-30px;min-width:165px}
.logo img{width:165px;filter:drop-shadow(0 0 5px rgba(0,0,0,.5))}
.main-nav{display:flex;align-items:center;width:55%}
.main-nav ul{display:flex;flex-wrap:wrap;justify-content:center;width:100%;row-gap:30px}
.main-nav li{margin-right:30px}
.main-nav li:last-child{margin-right:0}
.main-nav a{display:flex;align-items:center;color:#fff;font-weight:600;line-height:1.7em;border-bottom:2px solid transparent;transition:border-color .3s}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:#fff;border-bottom-color:#fff}
html[lang="ru"] .main-nav{width:auto;flex:1}   /* längere russische Menüpunkte */
.lang-switch__short{display:none}
@media (max-width:767px){.lang-switch .icon-list__icon{display:none}.lang-switch .icon-list__text{padding-left:0}.lang-switch__long{display:none}.lang-switch__short{display:inline}}


/* Mobile Navigation (Tablet/Mobil): Hamburger + Off-Canvas-Panel, CSS-only über Checkbox */
.menu-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:8px;cursor:pointer}
.menu-btn span{display:block;height:3px;border-radius:2px;background:#fff;transition:transform .3s,opacity .3s}
.mobile-nav{display:none;position:fixed;inset:0;z-index:1000;pointer-events:none}
.mobile-nav__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);opacity:0;transition:opacity .3s}
.mobile-nav__panel{position:absolute;top:0;right:0;width:360px;max-width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:60px 30px;background:#fff;box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .6s}
.mobile-nav__close{position:absolute;top:16px;right:20px;width:44px;height:44px;line-height:44px;text-align:center;font-size:20px;color:var(--color-secondary);cursor:pointer}
.mobile-nav__close:hover{color:var(--color-red)}
.mobile-nav__logo img{width:140px;filter:drop-shadow(0 0 5px rgba(0,0,0,.25))}
.mobile-nav ul li a{display:block;padding:10px 0;color:var(--color-primary);font-weight:600;line-height:1.7em}
.mobile-nav ul li a:hover,.mobile-nav ul li a[aria-current="page"]{color:var(--color-red)}
.mobile-nav .btn{display:block}
@media (max-width:1024px){
  .menu-btn{display:flex}
  .mobile-nav{display:block}
  .menu-toggle:checked~.mobile-nav{pointer-events:auto}
  .menu-toggle:checked~.mobile-nav .mobile-nav__backdrop{opacity:1}
  .menu-toggle:checked~.mobile-nav .mobile-nav__panel{transform:none}
  .menu-toggle:checked~.container .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-toggle:checked~.container .menu-btn span:nth-child(2){opacity:0}
  .menu-toggle:checked~.container .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

@media (max-width:1024px){
  .site-header .container{max-width:1024px}
  .header-row{gap:0;padding:10px 0}
  .logo{min-width:0}
  .main-nav{width:auto;flex:1}
  .main-nav ul{display:none}
  .topbar .icon-list--inline li.hide-tablet{display:none}
}
@media (min-width:768px){
  .topbar .icon-list--inline li.hide-desktop{display:none}
}
@media (max-width:767px){
  .site-header{padding:0 20px}
  .topbar{padding:5px 0}
  .topbar .icon-list--inline li.hide-mobile{display:none}
  .logo img{width:140px}
}

/* ==========================================================================
   Hero / Bild-Sektion mit Verlauf
   ========================================================================== */
.hero{position:relative;display:flex;gap:var(--gap);background:rgb(var(--color-bg-light))}
.hero--tall{min-height:600px}
.hero__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:var(--gap);width:100%;padding:100px 0 100px 40px}
.hero__inner{display:flex;flex-direction:column;gap:var(--gap);width:100%;max-width:675px;flex-shrink:0;margin-left:25%}
.hero__image{position:relative;width:100%;margin-left:-25%;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero__image--right{background-position:100% 50%}
.hero__image::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to left,rgba(var(--color-bg-light),0) 50%,rgba(var(--color-bg-light),1) 100%)}
.box{display:flex;flex-direction:column;gap:20px;padding:30px;border-radius:var(--radius);background:rgba(255,255,255,.6);box-shadow:var(--shadow)}
.box--blur{backdrop-filter:blur(10px)}
.hero .eyebrow,.hero .subline{font-size:30px;font-weight:600;line-height:1.3em;color:var(--color-secondary)}
.hero h1{font-size:40px;line-height:1.2em}
.hero__content>.hero__inner>.stack{gap:20px}
.hero__actions{display:flex;gap:20px}
@media (min-width:1025px){
  .hero--tall .hero__content{padding-top:calc(4.2% + 100px)}
}
@media (min-width:1801px){.hero--tall{min-height:700px}}
@media (max-width:1024px){
  .hero{flex-direction:column-reverse}
  .hero--tall,.hero__image{min-height:500px}
  .hero__content{padding:0 40px 40px}
  .hero--flat .hero__content{padding:0 40px 100px}
  .hero__inner{max-width:none;margin-left:0}
  .hero__inner>.box{margin-top:-100px}
  .hero__image{margin-left:0}
  .hero__image::before{background-image:linear-gradient(180deg,rgba(var(--color-bg-light),0) 75%,rgba(var(--color-bg-light),1) 100%)}
  .hero .eyebrow,.hero .subline,.hero h1{text-align:center}
  .hero__actions{justify-content:center}
}
@media (max-width:767px){
  .hero--tall,.hero__image{min-height:300px}
  .hero__content{padding:0 20px 20px}
  .hero--flat .hero__content{padding:0 20px 60px}
  .box{padding:20px}
  .hero .eyebrow,.hero .subline{font-size:22px}
  .hero h1{font-size:30px}
  .hero__actions{flex-direction:column}
}

/* ==========================================================================
   Karten (Startseite: Über uns / Spezialitäten / In Ihrer Nähe)
   ========================================================================== */
.cards{display:flex;flex-wrap:wrap;gap:65px 40px}
.card{flex-grow:1;width:calc(33.333% - 27px);max-width:calc(33.333% - 27px);border-radius:var(--radius);background:rgba(255,255,255,.5);box-shadow:var(--shadow);backdrop-filter:blur(10px);text-align:center}
.card__img{display:block;margin:0 0 8px;aspect-ratio:2/.85;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:.3s}
.card__body{padding:10px 30px 30px}
.card__title{margin:0 0 10px;font-size:30px;line-height:1.3em}
.card__title a{color:var(--color-primary);font-size:30px;font-weight:600;line-height:1.2}
@media (max-width:1024px){.card{width:calc(50% - 20px);max-width:calc(50% - 20px)}}
@media (max-width:767px){.cards{gap:45px 20px}.card{width:100%;max-width:100%}.card__body{padding:10px 20px 20px}.card__title{font-size:22px}}

/* ==========================================================================
   Logo-Laufband (Marken)
   ========================================================================== */
.marquee{--n:6;--gap:20px;overflow:hidden;width:100%;container-type:inline-size}
.marquee__track{display:flex;gap:var(--gap);width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{flex:0 0 calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n));max-width:300px}
.marquee__item img{width:100%}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:1024px){.marquee{--n:4}}
@media (max-width:767px){.marquee{--n:2}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:100%}.marquee__item:nth-child(n+12){display:none}}

/* ==========================================================================
   Foto-Galerie (Sortiment) – Scroll-Snap, Pfeile per JS
   ========================================================================== */
.gallery{--n:4;--gap:20px;position:relative}
.gallery__track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-blocked:smooth;scrollbar-width:thin;padding-bottom:10px}
.gallery__item{flex:0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));margin:0;scroll-snap-align:start}
.gallery__item img{width:100%;border-radius:var(--radius)}
.gallery__btn{position:absolute;top:50%;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--color-primary);box-shadow:0 0 20px rgba(0,0,0,.15);font-size:18px;line-height:44px;cursor:pointer;transform:translateY(-50%)}
.gallery__btn:hover{background:var(--color-red);color:#fff}
.gallery__btn[hidden]{display:none}
.gallery__btn--prev{left:-22px}
.gallery__btn--next{right:-22px}
@media (max-width:1024px){.gallery{--n:3}}
@media (max-width:767px){.gallery{--n:2}.gallery__btn--prev{left:-10px}.gallery__btn--next{right:-10px}}

/* ==========================================================================
   Zweispaltige Inhaltsblöcke (Bild + Text, Listen + Bild)
   ========================================================================== */
.split{display:flex;align-items:center;gap:var(--gap)}
.split>*{width:100%}
.split .stack{width:100%}
.split__img img{border-radius:var(--radius);box-shadow:var(--shadow)}
.split__img--soft img{box-shadow:none;filter:drop-shadow(0 0 30px rgba(0,0,0,.15))}
.split__img--small img{max-width:380px;margin-inline:auto}
.list-row{display:flex;gap:var(--gap)}
@media (max-width:767px){
  .split{flex-wrap:wrap}
  .split--reverse-mobile{flex-direction:column-reverse;align-items:center}
}

/* ==========================================================================
   Text-Kacheln (Spezialitäten) & Vorteile (Icon-Boxen)
   ========================================================================== */
.tiles{display:flex;flex-wrap:wrap;gap:var(--gap)}
.tile{width:calc(50% - 20px);max-width:calc(50% - 20px);padding-top:8px;text-align:center}
.tile__icon{display:flex;justify-content:center;margin-bottom:12px}
.tile__icon svg.icon--line{width:44px;height:44px;fill:none;stroke:var(--color-red);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tile h3{margin:0 0 20px;font-size:20px;line-height:1.3em}
.features{display:flex;flex-wrap:wrap;gap:var(--gap)}
.feature{display:flex;flex-direction:column;gap:10px;width:calc(25% - 30px);max-width:calc(25% - 30px);text-align:center}
.feature__icon{display:flex;justify-content:center}
.feature__icon svg{width:50px;height:50px;fill:var(--color-red)}
.feature__icon svg.icon--line{fill:none;stroke:var(--color-red);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.feature h4{margin:8px 0 16px;font-size:25px;line-height:1.3em}
@media (max-width:1024px){.feature{width:calc(50% - 20px);max-width:calc(50% - 20px)}}
@media (max-width:767px){
  .tiles{gap:var(--gap)}
  .tile{width:100%;max-width:100%}
  .tile h3{font-size:18px}
  .features{gap:40px 20px}
  .feature{width:100%;max-width:100%}
  .feature h4{font-size:20px}
}

/* ==========================================================================
   Bewertungen
   ========================================================================== */
.reviews{width:100%}
.reviews__head{margin-bottom:30px;text-align:center}
.reviews__title{font-size:20px;font-weight:600;color:var(--color-primary)}
.reviews__total{margin:4px 0 12px;font-size:15px}
.reviews__write{display:inline-block;padding:8px 18px;border:1px solid var(--color-red);border-radius:50px;transition:.3s}
.reviews__write:hover{background:var(--color-red);color:#fff}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars svg{width:17px;height:17px;fill:#fbbc04}
.stars .star--empty{fill:#d6d6d6}
.reviews__list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{padding:24px;border-radius:var(--radius);background:#fff;box-shadow:0 0 30px rgba(0,0,0,.1)}
.review__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.review__head svg{width:20px;height:20px;flex:none}
.review__name{font-weight:600;color:var(--color-primary)}
.review__text{margin:10px 0 0;font-size:15px;line-height:1.6}
.reviews__list--single{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.img-caption{margin:10px 0 0;font-size:15px;color:var(--color-secondary);text-align:center}
@media (max-width:1024px){.reviews__list{grid-template-columns:repeat(2,1fr)}.reviews__list--single{grid-template-columns:1fr}}
@media (max-width:767px){.reviews__list{grid-template-columns:1fr}}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */
.form__fields{display:flex;flex-wrap:wrap;margin:0 -5px -20px}
.field{display:flex;flex-wrap:wrap;align-items:center;width:100%;padding:0 5px;margin-bottom:20px}
.field--half{width:50%}
.field label{padding-bottom:10px;width:100%}
.field--required label::after{content:"*";color:red;padding-left:.2em}
.field input:not([type="checkbox"]),.field select,.field textarea{width:100%;min-height:40px;padding:8px 16px;border:1px solid var(--color-line);border-radius:6px;background:#fff;color:var(--color-primary);line-height:1.7em}
.field select{padding:5px 20px 5px 14px;appearance:none;-webkit-appearance:none}
.field textarea{padding:5px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.field ::placeholder{color:inherit;opacity:.6}
.select-wrap{position:relative;width:100%}
.select-wrap svg{position:absolute;right:10px;top:50%;width:11px;height:11px;transform:translateY(-50%);fill:var(--color-primary);pointer-events:none}
.field--checkbox{display:block;font-size:14px;line-height:18px}
.field--checkbox label{display:inline;padding:0;width:auto}
.field--checkbox input{margin:0 8px 0 0;vertical-align:baseline}
.field--submit{align-items:flex-end}
.field--submit .btn{width:100%}
@media (max-width:767px){.field--half{width:100%}}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--color-bg-tint)}
.footer-cols{display:flex;gap:var(--gap)}
.footer-col{display:flex;flex-direction:column;gap:20px;width:100%}
.footer-col .logo-img{width:165px;filter:drop-shadow(0 0 5px rgba(0,0,0,.25))}
.footer-col .footer-heading{font-size:25px;font-weight:600;line-height:1.3em;color:var(--color-primary)}
.footer-col,.footer-col .icon-list,.footer-col .checklist{font-size:15px;line-height:1.7em;color:var(--color-secondary)}
.footer-col .icon-list__text{color:var(--color-secondary)}
.footer-nav li{position:relative;padding-left:20px}
.footer-nav li+li{margin-top:10px}
.footer-nav li::before{content:"";position:absolute;top:4px;left:0;width:18px;height:18px;background:var(--color-red);
  -webkit-mask:url("/img/arrow-right-line.svg") no-repeat center/cover;mask:url("/img/arrow-right-line.svg") no-repeat center/cover}
.footer-nav a{display:flex;align-items:center;color:var(--color-secondary)}
.footer-nav a:hover,.footer-nav a[aria-current="page"]{color:var(--color-red)}
.copyright{text-align:center;font-size:15px;line-height:1.7em;color:var(--color-secondary)}
@media (max-width:767px){
  .footer-cols{flex-wrap:wrap}
  .footer-col{align-items:center}
  .footer-col .footer-text{text-align:center}
  .footer-col .logo-img{width:140px}
  .footer-col .footer-heading{font-size:20px}
}

/* ==========================================================================
   Kontaktseite
   ========================================================================== */
.contact-logo{width:260px;filter:drop-shadow(0 0 5px rgba(0,0,0,.25))}
.contact-title{font-size:35px;line-height:1.3em;color:var(--color-red)}
.contact-subtitle{margin-top:-30px;font-size:25px;font-weight:600;line-height:1.3em;color:var(--color-primary)}
.form-title{font-size:25px;line-height:1.3em}
@media (max-width:767px){
  .contact-logo{width:160px}
  .contact-title{font-size:25px}
  .contact-subtitle,.form-title{font-size:20px}
}

/* ==========================================================================
   Einfache Seiten (Impressum, Datenschutz, In Ihrer Nähe, 404)
   ========================================================================== */
.section--simple{padding-top:calc(4.2% + 100px)}
.stack--wide{gap:60px}
.page-title{font-size:40px;line-height:1.2em}
@media (max-width:767px){.section--simple{padding-top:60px}.page-title{font-size:30px}}

/* ==========================================================================
   Regionale Seiten (Auch in Ihrer Nähe)
   ========================================================================== */
.ort-title{font-size:40px;line-height:1.2em}
.ort-eyebrow{font-weight:600;color:var(--color-secondary)}
.ort-lead{font-size:20px;font-weight:600;color:var(--color-primary)}
@media (max-width:767px){.ort-title{font-size:30px}}
.ort-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.ort-group h3{font-size:20px;line-height:1.3em;margin-bottom:12px}
.ort-list li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--color-line)}
.ort-list a{color:var(--color-primary)}
.ort-list a:hover{color:var(--color-red)}
.ort-km{font-size:15px;color:var(--color-secondary);white-space:nowrap}
.features--3 .feature{width:calc(33.333% - 27px);max-width:calc(33.333% - 27px);text-align:left}
.features--3 .feature h4{font-size:20px;margin:0 0 8px}
@media (max-width:1024px){.ort-groups{grid-template-columns:repeat(2,1fr)}.features--3 .feature{width:calc(50% - 20px);max-width:calc(50% - 20px)}}
@media (max-width:767px){.ort-groups{grid-template-columns:1fr}.features--3 .feature{width:100%;max-width:100%}}

/* ==========================================================================
   ProntoSite-Anbindung
   ========================================================================== */
/* Platzhalter für das Google-Bewertungs-Widget im Footer */
.reviews-box{width:100%;text-align:center}
.reviews-box>p{margin:0;color:var(--color-secondary);font-size:15px}

/* Impressum und Datenschutzerklaerung liefert ProntoSite als Block mit
   max-width:820px und margin:0 auto. Der steht dadurch mittig und beginnt
   190px neben der eigenen Ueberschrift. Linksbuendig zur Ueberschrift setzen,
   die Zeilenbreite von 820px bleibt (laengere Zeilen liest niemand gern).
   body davor, weil ProntoSite sein eigenes <style> nach dieser Datei einfuegt. */
body .ps-legal{margin-left:0;margin-right:auto}

/* Beim ersten Besuch liegt der Cookie-Banner ueber dem geoeffneten Handy-Menue
   und verdeckt dessen unteres Drittel samt "Jetzt anfragen". Solange das Menue
   offen ist, tritt der Banner zur Seite und kommt zurueck, sobald es zugeht.
   Der Banner haengt ausserhalb des <header>, darum :has() statt Geschwisterwahl;
   wo :has() fehlt, bleibt schlicht alles wie bisher. */
@media (max-width:1024px){
  body:has(.menu-toggle:checked) .ps-c-root{display:none}
}

/* ==========================================================================
   Sprachmenü mit Flaggen (Kopfzeile, Fußbereich, Handy-Menü)
   ========================================================================== */
.lang-menu{position:relative}
.lang-menu__details{position:relative}
.lang-menu__knopf{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;user-select:none}
.lang-menu__knopf::-webkit-details-marker{display:none}
.lang-menu__knopf::marker{content:""}
.lang-flag{display:block;flex:none;width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.lang-menu__pfeil{flex:none;width:10px;height:6px;transition:transform .2s}
.lang-menu__details[open] .lang-menu__pfeil{transform:rotate(180deg)}
.lang-menu__list{position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:190px;margin:0;padding:6px;list-style:none;
  background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);text-align:left}
.lang-menu__list li{margin:0;padding:0}
.lang-menu__list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--color-primary);
  font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap}
.lang-menu__list a:hover,.lang-menu__list a:focus{background:rgba(52,70,87,.08);color:var(--color-red)}

/* Kopfzeile */
.topbar .lang-menu__knopf{color:rgba(255,255,255,.8);font-size:15px;line-height:1.7em}
.topbar .lang-menu__knopf:hover,.topbar .lang-menu__details[open] .lang-menu__knopf{color:#fff}
.topbar .icon-list--inline li.lang-menu{align-items:center}
@media (max-width:767px){
  .lang-menu--top .lang-menu__knopf .lang-menu__name{display:none}
  .lang-menu--top .lang-menu__list{right:-10px}
}

/* Fußbereich: sichtbarer Knopf, Liste klappt nach oben auf */
.footer-nav li.lang-menu--footer{padding-left:0;margin-top:18px}
.footer-nav li.lang-menu--footer::before{display:none}
.lang-menu--footer .lang-menu__knopf{display:inline-flex;padding:8px 16px;border:1px solid var(--color-line);border-radius:50px;
  background:#fff;color:var(--color-primary);font-size:15px;font-weight:500;line-height:1.4}
.lang-menu--footer .lang-menu__knopf:hover{border-color:var(--color-red);color:var(--color-red)}
.lang-menu--footer .lang-menu__list{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
.footer-nav .lang-menu__list li{padding-left:0}
.footer-nav .lang-menu__list li+li{margin-top:0}
.footer-nav .lang-menu__list li::before{display:none}
.footer-nav .lang-menu__list a{color:var(--color-primary)}
.footer-nav .lang-menu__list a:hover{color:var(--color-red)}

/* Handy-Menü: Liste im Textfluss, weil das Panel scrollt */
.lang-menu--mobile{margin-top:10px;padding-top:10px;border-top:1px solid var(--color-line)}
.lang-menu--mobile .lang-menu__knopf{padding:10px 0;color:var(--color-primary);font-weight:600}
.lang-menu--mobile .lang-menu__list{position:static;min-width:0;margin-top:4px;padding:0;box-shadow:none;background:transparent}
.mobile-nav .lang-menu__list li a{display:flex;padding:8px 10px;font-weight:500}

/* ==========================================================================
   Menü-Überlauf: Burger-Symbol in der Desktop-Leiste
   ========================================================================== */
.nav-mehr{position:relative}
.main-nav li:has(+ .nav-mehr[hidden]){margin-right:0}
.nav-mehr__knopf{display:flex;align-items:center;justify-content:center;width:36px;height:30px;padding:0;border:0;border-bottom:2px solid transparent;
  background:none;color:#fff;cursor:pointer;transition:border-color .3s}
.nav-mehr__knopf svg{width:24px;height:24px}
.nav-mehr__knopf:hover,.nav-mehr.aktiv .nav-mehr__knopf{border-bottom-color:#fff}
.main-nav ul.nav-mehr__liste{display:block;position:absolute;top:calc(100% + 14px);right:0;z-index:60;width:auto;min-width:240px;margin:0;padding:8px;
  list-style:none;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.main-nav ul.nav-mehr__liste[hidden]{display:none}
.main-nav .nav-mehr__liste li{margin:0}
.main-nav .nav-mehr__liste a{display:block;padding:10px 14px;border-bottom:0;border-radius:6px;color:var(--color-primary);white-space:nowrap}
.main-nav .nav-mehr__liste a:hover,.main-nav .nav-mehr__liste a[aria-current="page"]{color:var(--color-red);background:rgba(52,70,87,.06)}
@media (max-width:1024px){.main-nav .nav-mehr{display:none}}

/* ==========================================================================
   Seitensuche
   ========================================================================== */
.suche-knopf{display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.75);transition:color .3s}
.suche-knopf:hover,.suche-knopf:focus-visible{color:#fff}
.suche-knopf svg{width:16px;height:16px}
.topbar .icon-list--inline li.suche-top{align-items:center;margin-left:0}
.suche-knopf--mobil{display:none;width:44px;height:44px;margin-left:auto;color:#fff}
.suche-knopf--mobil svg{width:24px;height:24px}
.suche-knopf--mobil+.menu-btn{margin-left:0}
@media (max-width:1024px){.suche-knopf--mobil{display:flex}}

body.suche-offen{overflow:hidden}
.suche{position:fixed;inset:0;z-index:2000;display:none}
.suche.offen{display:block}
.suche__hinten{position:absolute;inset:0;background:rgba(17,24,39,.45)}
.suche__fenster{position:absolute;width:640px;max-width:calc(100vw - 32px);max-height:min(640px,calc(100vh - 80px));display:flex;flex-direction:column;
  background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;font-size:16px;line-height:1.5}
.suche__kopf{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--color-line)}
.suche__kopf svg{flex:none;width:20px;height:20px;color:var(--color-secondary)}
.suche__feld{flex:1;min-width:0;padding:6px 0;border:0;outline:0;background:none;color:var(--color-primary);font:inherit;font-size:18px}
.suche__feld::-webkit-search-cancel-button{display:none}
.suche__zu{flex:none;padding:3px 8px;border:1px solid var(--color-line);border-radius:6px;background:#fff;color:var(--color-secondary);font:inherit;font-size:13px;cursor:pointer}
.suche__zu:hover{color:var(--color-red);border-color:var(--color-red)}
.suche__inhalt{flex:1;overflow-y:auto;padding:8px 8px 12px;overscroll-blocked:contain}
.suche__fuss{display:flex;gap:18px;padding:9px 16px;border-top:1px solid var(--color-line);background:#f7f8f9;color:var(--color-secondary);font-size:13px}
.suche__fuss kbd{display:inline-block;min-width:20px;padding:0 5px;margin-right:4px;border:1px solid var(--color-line);border-radius:4px;background:#fff;font:inherit;font-size:12px;text-align:center}
.suche__ueberschrift{margin:10px 8px 8px;color:var(--color-secondary);font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.suche__chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 8px 6px}
.suche__chip{padding:6px 14px;border:1px solid var(--color-line);border-radius:50px;background:#fff;color:var(--color-primary);font:inherit;font-size:15px;cursor:pointer}
.suche__chip:hover,.suche__chip:focus-visible{border-color:var(--color-red);color:var(--color-red)}
.suche__gemeint{margin:6px 8px 10px;color:var(--color-secondary);font-size:15px}
.suche__gemeint button{padding:0;border:0;background:none;color:var(--color-red);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.suche__liste{margin:0;padding:0;list-style:none}
.suche__treffer{display:block;padding:10px 12px;border-radius:8px;color:var(--color-text);text-decoration:none}
.suche__treffer:hover,.suche__treffer.aktiv{background:rgba(52,70,87,.07);color:var(--color-text)}
.suche__pfad{display:block;color:var(--color-secondary);font-size:13px}
.suche__titel{display:block;color:var(--color-primary);font-weight:600}
.suche__text{display:block;margin-top:2px;color:var(--color-secondary);font-size:14px;line-height:1.5}
.suche__treffer mark,.suche__karte mark{padding:0 1px;border-radius:2px;background:rgba(157,27,33,.14);color:inherit}
.suche__karte{margin:6px 4px 12px;padding:14px 16px;border:1px solid var(--color-line);border-radius:10px;background:#fafbfc}
.suche__karte h3{margin:0 0 8px;font-size:17px}
.suche__karte p{margin:0 0 6px;color:var(--color-text);font-size:15px}
.suche__karte .suche__aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.suche__karte .btn{padding:8px 16px;font-size:15px;line-height:1.4}
.suche__leer{margin:8px 4px;padding:14px 16px;border-radius:10px;background:#fafbfc;color:var(--color-secondary)}
@media (max-width:767px){
  .suche__fenster{inset:0;width:100%;max-width:none;max-height:none;border-radius:0}
  .suche__fuss{display:none}
  .suche__feld{font-size:17px}
}
.s-ziel{animation:s-ziel 2.6s ease-out}
@keyframes s-ziel{0%,40%{background:rgba(157,27,33,.16);box-shadow:0 0 0 8px rgba(157,27,33,.16)}100%{background:transparent;box-shadow:0 0 0 8px transparent}}

/* Menüleiste nimmt den ganzen freien Platz neben dem Logo (wie bisher nur für Russisch),
   damit der Burger nur dann erscheint, wenn es wirklich eng wird */
@media (min-width:1025px){.main-nav{width:auto;flex:1}}
/* Obere Leiste bleibt einzeilig: zwischen 1025 und 1219 px entfällt die Adresse */
@media (min-width:1025px) and (max-width:1219px){.topbar .icon-list--inline li.hide-mobile:first-child{display:none}}

/* ==========================================================================
   FAQ-Seite (Gerüst)
   ========================================================================== */
.faq{display:grid;grid-template-columns:280px minmax(0,1fr);gap:60px;align-items:start}
.faq__seite{position:sticky;top:24px;display:flex;flex-direction:column;gap:24px}
.faq__nav-titel{margin:0 0 8px;color:var(--color-secondary);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.faq__nav ul{margin:0;padding:0;list-style:none}
.faq__nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--color-primary);font-weight:500;line-height:1.4}
.faq__nav a:hover{background:rgba(52,70,87,.07);color:var(--color-red)}
.faq__symbol{flex:none;width:22px;height:22px;fill:none;stroke:var(--color-red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.faq__kontakt{padding:20px;border-radius:12px;background:var(--color-bg-tint)}
.faq__kontakt p{margin:0 0 10px}
.faq__kontakt-titel{color:var(--color-primary);font-weight:600}
.faq__kontakt .btn{display:block}
.faq__thema{margin-bottom:50px;scroll-margin-top:24px}
.faq__thema>h2{display:flex;align-items:center;gap:12px;margin-bottom:6px;font-size:30px;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.faq__thema>h2 .faq__symbol{width:30px;height:30px}
.faq__stand{margin:0 0 10px;color:var(--color-secondary);font-size:14px}
.faq__item{border-bottom:1px solid var(--color-line)}
.faq__item>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary h3{margin:0;font-size:19px;line-height:1.4;overflow-wrap:break-word;hyphens:auto}
.faq__item>summary:hover h3{color:var(--color-red)}
.faq__plus{position:relative;flex:none;width:24px;height:24px;transition:transform .25s}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:var(--color-red);transform:translate(-50%,-50%)}
.faq__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__plus{transform:rotate(45deg)}
.faq__antwort{padding:0 0 20px;overflow-wrap:break-word;hyphens:auto}
.faq__antwort>*{margin:0 0 10px}
.faq__liste,.faq__punkte{margin:0 0 10px;padding:0;list-style:none}
.faq__liste li{display:flex;gap:10px;padding:4px 0}
.faq__liste b{min-width:70px}
.faq__punkte li{position:relative;padding-left:18px}
.faq__punkte li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--color-red)}
.faq__zwischen{margin-top:14px;color:var(--color-primary);font-weight:600}
.faq__link{font-weight:600}
.faq__banner{background:#fff6e5;border-bottom:1px solid #f0d9a8;font-size:15px}
.faq__banner p{margin:0;padding:10px 0}
.faq__beispiel{margin:0;padding:6px;background:#9d1b21;color:#fff;font-size:13px;font-weight:600;text-align:center}
@media (max-width:1024px){
  .faq{grid-template-columns:minmax(0,1fr);gap:30px}
  .faq__seite{position:static}
  .faq__kontakt{display:none}
  .faq__nav-titel{display:none}
  .faq__nav ul{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .faq__nav a{flex:none;padding:8px 14px;border:1px solid var(--color-line);border-radius:50px;white-space:nowrap}
  .faq__thema>h2{font-size:24px}
}

/* Sprachmenü in der Kopfzeile: Listeneinträge nicht wie die Kopfzeilen-Punkte zentrieren und einrücken
   (.icon-list--inline li schlägt sonst in die Liste durch) */
.icon-list--inline .lang-menu__list li,
.icon-list--inline .lang-menu__list li:not(:last-child),
.icon-list--inline .lang-menu__list li+li{display:block;margin:0;padding:0;justify-content:flex-start}
.icon-list .lang-menu__list a{display:flex;align-items:center;justify-content:flex-start;color:var(--color-primary)}
.icon-list .lang-menu__list a:hover,.icon-list .lang-menu__list a:focus{color:var(--color-red)}

/* Handy: nichts darf über den Rand laufen (lange Wörter, E-Mail-Adresse, Markenliste) */
.card__title,.card__title a,h1,h2,h3{overflow-wrap:break-word;hyphens:manual}   /* keine Silbentrennung, ganze Wörter rutschen in die nächste Zeile */
.icon-list__text{overflow-wrap:anywhere}
@media (max-width:1024px){.checklist--columns li{width:33.333%}}
@media (max-width:767px){.checklist--columns li{width:50%}}

/* Menüleiste mittig zur Seite (wie die obere Leiste): rechts ein Platzhalter so breit wie das Logo.
   Passen die Punkte nicht mehr, wandern sie ins Burger-Symbol (siehe Menü-Überlauf). */
@media (min-width:1025px){.header-row::after{content:"";flex:0 0 165px}}
/* Handy: Hauptüberschrift so groß, dass auch lange Wörter (Lebensmittelgeschäft, восточноевропейских,
   wschodnioeuropejskie) ganz in eine Zeile passen, ohne Trennung */
@media (max-width:767px){main h1,.hero h1,main .prose h1,main h1.ort-title,main h1.page-title{font-size:clamp(21px,6.3vw,30px)}}

/* Karte "Auch in Ihrer Nähe" auf der Startseite ganz zeigen (nicht oben und unten abschneiden) */
.card__img img[src*="karte-region"]{object-fit:contain;background:#ebecf0}

/* Sortimentsseite (reine Textseite) und Vorschlagsformular */
.so h1{margin:0 0 10px;font-size:clamp(28px,4vw,42px)}
.so__lead{margin:0 0 6px;font-size:18px}
.so__stand{margin:0 0 24px;color:var(--color-secondary);font-size:15px}
.so__filter{margin:0 0 18px}
.so__filter label{display:block;margin:0 0 6px;font-weight:600;color:var(--color-primary)}
.so__filter input{width:100%;max-width:520px;padding:12px 14px;border:1px solid var(--color-line);border-radius:8px;font:inherit;font-size:16px}
.so__nav ul{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.so__nav a{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border:1px solid var(--color-line);border-radius:20px;color:var(--color-primary);font-size:15px;white-space:nowrap}
.so__nav a:hover{border-color:var(--color-red);color:var(--color-red)}
.so__zahl{color:var(--color-secondary);font-size:13px;font-weight:400}
.so__gruppe{border-top:1px solid var(--color-line)}
.so__gruppe>summary{display:flex;align-items:center;gap:14px;padding:16px 0;cursor:pointer;list-style:none}
.so__gruppe>summary::-webkit-details-marker{display:none}
.so__gruppe>summary h2{margin:0;font-size:22px;line-height:1.3}
.so__gruppe>summary .so__zahl{margin-left:auto}
.so__gruppe[open] .faq__plus{transform:rotate(45deg)}
.so__liste{margin:0 0 20px;padding:0;list-style:none;columns:2 420px;column-gap:48px}
.so__liste li{display:flex;flex-direction:column;break-inside:avoid;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.so__name{font-weight:600;color:var(--color-text);line-height:1.4}
.so__info{color:var(--color-secondary);font-size:15px;line-height:1.4}
.so__meta{display:flex;gap:10px;color:var(--color-secondary);font-size:14px}
.so__marke{text-transform:none}
.so__fehlt{margin-top:40px;padding:24px;border-radius:12px;background:var(--color-bg-tint)}
.so__fehlt h2{margin:0 0 8px;font-size:22px}
.so__fehlt p{margin:0 0 12px}
.so__tel,.so__gruppe>summary .so__zahl{white-space:nowrap}
@media (max-width:767px){
  .so__nav ul{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 24px;padding:0 20px 6px;scrollbar-width:thin}
  .so__gruppe>summary h2{font-size:20px}
  .so__liste li{padding:8px 0}
}
.so__status{margin:8px 0 0;color:var(--color-secondary);font-size:15px;min-height:1.4em}
.so__hinweis{margin:0 0 12px;padding:10px 14px;border-radius:8px;background:#fff6e5;font-size:15px}
.so__liste li[hidden],.so__gruppe[hidden],.so__nav[hidden]{display:none}
.so__schmal{max-width:760px}
.so__zurueck{margin:0 0 16px;font-size:15px}
.suche__alle{margin:4px 0 12px}
.suche__alle .suche__treffer{font-weight:600}

/* Öffnungszeiten: Kopfzeile in einer Zeile mit " / ", im Fußbereich untereinander */
.site-footer .zeit{display:block}
.site-footer .zeit-trenner{display:none}

/* Öffnungszeiten mit Bild (Startseite) */
.oz__buehne{position:relative}
.oz__bild img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.oz__feld{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;color:var(--color-text)}
.oz__feld h3{margin:0}
.oz__zeiten{display:flex;flex-direction:column;width:100%;max-width:400px}
.oz__zeiten p{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0;padding:12px 4px;line-height:1.4;text-align:left}
.oz__zeiten p+p{border-top:1px solid rgba(47,62,78,.18)}
.oz__zeiten br{display:none}
.oz__zeiten strong{font-weight:600}
.oz__feld .btn-wrap{margin:0}
@media (min-width:900px){
  .oz__feld{position:absolute;left:53.85%;top:4.24%;width:44.52%;height:85.04%;padding:3% 7%;box-sizing:border-box}
}
@media (min-width:900px) and (max-width:1180px){
  .oz__feld{gap:14px;padding:2% 5%}.oz__feld h3{font-size:27px}.oz__zeiten p{padding:7px 2px;font-size:15px;gap:12px}.oz__feld .btn{padding:11px 18px;font-size:16px}
}
@media (max-width:899px){
  .oz__buehne{border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .oz__bild img{border-radius:0;box-shadow:none}
  .oz__feld{padding:36px 28px 40px;background:#fbf7ee}
}
@media (max-width:599px){
  .oz__feld{padding:28px 20px 32px;gap:22px}
  .oz__zeiten p{flex-direction:column;align-items:center;gap:2px;text-align:center}
}
/* Ende Öffnungszeiten mit Bild */
/* Feinschliff nach Gesamtprüfung */
.card__title a{font-size:inherit}
@media (min-width:768px) and (max-width:1024px){.card__title{font-size:24px}}
@media (max-width:767px){.card__title{font-size:22px}}
@media (min-width:768px) and (max-width:1180px){.footer-cols>.footer-col:first-child{flex:0 0 320px}}
@media (max-width:1024px){a[href^="mailto:"] .icon-list__text{font-size:15px}}
@media (max-width:767px){
  .split--reverse-mobile{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:0 20px}
  .split--reverse-mobile>.split__img{order:-1;width:100%;margin-bottom:24px}
  .split--reverse-mobile>.checklist{width:calc(50% - 10px)}
}
/* Computer: Menü direkt neben dem Logo, nach links gerückt (Wunsch des Inhabers, 30.10.2026, Variante B) */
@media (min-width:1025px){.main-nav ul{justify-content:flex-start}}
/* Kontaktseite untereinander */
.kontakt-neu .split{flex-direction:column;align-items:stretch;gap:48px;max-width:1040px;margin:0 auto}
.kontakt-neu .split>.stack{align-items:center;text-align:center;gap:16px}
.kontakt-neu .contact-subtitle{margin-top:-8px}
.kontakt-neu .contact-list{display:grid;grid-template-columns:1fr 1fr 1.45fr 1fr;gap:20px;width:100%;margin-top:24px}
.kontakt-neu .contact-list li{margin:0;padding:28px 16px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:12px;text-align:center;font-size:17px;line-height:1.5}
.kontakt-neu .contact-list li>a{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--color-text)}
.kontakt-neu .contact-list li>a:hover{color:var(--color-red)}
.kontakt-neu .contact-list .icon-list__icon{top:0;padding:0}
.kontakt-neu .contact-list .icon-list__icon svg{width:28px;height:28px;margin:0}
.kontakt-neu .contact-list .icon-list__text{overflow-wrap:anywhere}
.kontakt-neu .contact-list li:nth-child(3) .icon-list__text{font-size:15px}
.kontakt-neu .zeit{display:block}.kontakt-neu .zeit-trenner{display:none}
.kontakt-anfahrt{width:100%;box-sizing:border-box;padding:36px 40px;gap:24px}
.kontakt-anfahrt .prose{display:grid;grid-template-columns:1fr 1fr;gap:8px 48px}
.kontakt-anfahrt .prose h5{grid-column:1/-1;margin:0 0 8px;text-align:center;font-size:28px}
.kontakt-anfahrt .prose p{margin:0}
.kontakt-anfahrt .btn-wrap{margin:0;text-align:center}
@media (max-width:1024px){.kontakt-neu .contact-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  .kontakt-neu .split{gap:32px}
  .kontakt-neu .contact-list{grid-template-columns:1fr;gap:14px}
  .kontakt-neu .contact-list li{padding:20px 14px}
  .kontakt-anfahrt{padding:24px 20px}
  .kontakt-anfahrt .prose{grid-template-columns:1fr;gap:16px}
  .kontakt-anfahrt .prose h5{font-size:22px}
}
.so__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0}
.so__knoepfe .btn{display:inline-flex;align-items:center;gap:10px}
.so__knoepfe svg{width:18px;height:18px;fill:currentColor}
@media (max-width:767px){.so__knoepfe .btn{flex:1 1 100%;justify-content:center}}
.ort-groups{display:block;columns:4 250px;column-gap:var(--gap)}
.ort-group{margin-bottom:28px}
.ort-group h3{break-after:avoid}
.ort-list li{break-inside:avoid}
/* Ende Feinschliff */
/* Marken mit Hintergrundbild (Über uns) */
.mk{position:relative;padding:0;background:#f0dcc3;overflow:hidden}
.mk__bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.mk__inhalt{display:flex;flex-direction:column;gap:24px;padding:60px 40px}
.mk__inhalt h2{margin:0}
.mk__inhalt>p,.mk__inhalt>p.narrow{margin:0;max-width:520px;text-align:left;align-self:flex-start}
.mk__listen{display:flex;gap:40px}
.mk__listen .checklist{margin:0}
@media (min-width:1200px){
  /* Bild in fester Höhe so gelegt, dass die Lebensmittel immer 40 px rechts neben dem Text beginnen
     (Bild 660 px hoch: Lebensmittel ab 571 px vom linken Bildrand; Text endet bei Containerrand + 500 px) */
  /* --h: Bildhöhe, mindestens 660 px; auf breiten Bildschirmen größer, damit das Bild bis zum rechten Rand reicht */
  .mk{--h:max(660px,calc(32.57vw + 72px));min-height:var(--h);display:flex;align-items:center;background:#f0d5ba}
  .mk__bild{position:absolute;top:50%;left:calc(max(0px,(100vw - 1300px) / 2) + 540px - 0.8653 * var(--h));height:var(--h);transform:translateY(-50%)}
  .mk__bild img{width:auto;height:var(--h);max-width:none;object-fit:fill;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 140px);mask-image:linear-gradient(to right,transparent 0,#000 140px)}
  .mk__inhalt{position:relative;box-sizing:border-box;width:100%;max-width:var(--container);margin:0 auto;justify-content:center;padding:50px 40px;gap:20px}
  .mk__inhalt>*,.mk__inhalt>p.narrow{max-width:460px}
}
@media (max-width:767px){
  .mk__inhalt{padding:36px 20px 44px;gap:20px}
  .mk__listen{gap:20px}
  .mk__listen .checklist{width:calc(50% - 10px)}
}
/* Ende Marken mit Hintergrundbild */
/* Tempo: Handy-Fassung der Titelbilder */
.hero__image--rs{background-image:var(--bg)}
@media (max-width:767px){.hero__image--rs{background-image:var(--bg-m)}}
/* Ende Tempo */