/* ============================================
   MOBILE REDESIGN – Dorfladen Oberornau
   Active only on screens <= 768px
   Desktop layout stays completely unchanged
   ============================================ */

/* === MOBILE-ONLY ELEMENTS: hidden on desktop === */
.mob-only{display:none!important}

@media(max-width:768px){

/* Show mobile elements, hide desktop elements */
.mob-only{display:block!important}
.mob-only.mob-popup-bg{display:none!important}
.mob-only.mob-popup-bg.open{display:flex!important}
.mob-only.mob-nav-overlay{display:none!important}
.mob-only.mob-nav-overlay.open{display:block!important}
.desk-only{display:none!important}

/* === THE COMPROMISE: "MODERN COUNTRY & SAGE" ===
   Combines the warmth and freshness of the Sage-Green App style 
   with the clean structure, premium elegance and lightness of the Nordic theme.
================================================== */
:root {
  --m-bg: #faf9f6; /* Warm oat-milk background */
  --m-primary: #1e463a; /* Deep elegant sage green */
  --m-primary-light: #f0f4f1; /* Soft pastel moss */
  --m-secondary: #bd8b5c; /* Warm clay / brass accent */
  --m-secondary-light: #f7f3ed; /* Soft oat cream */
  --m-text: #1f2521;
  --m-muted: #5c6660;
  --m-card-bg: #ffffff;
  --m-red: #a8242a;
  --m-red-light: #fdf2f2;
}

/* === RESET body for mobile === */
body{
  padding-bottom:0!important;
  padding-top:98px!important; /* standard for subpages without status bar */
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--m-bg);
  color: var(--m-text);
  overflow-x: hidden;
}
body.mob-home {
  padding-top: 138px!important; /* extra padding for fixed status bar on homepage */
}

/* === MOBILE TICKER (top) === */
.mob-only.mob-ticker{
  display:flex!important;
  background: var(--m-primary);
  color:#fff;
  align-items:center;
  font-size:.85rem;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  height: 40px;
}
.mob-ticker-label{
  flex-shrink:0;
  padding:0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight:700;
  background: var(--m-red);
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mob-ticker-track{
  flex:1;
  overflow:hidden;
  display: flex;
  align-items: center;
}
.mob-ticker-content{
  display:inline-block;
  white-space:nowrap;
  animation:mob-scroll 28s linear infinite;
  font-weight: 500;
}
.mob-ticker-content:hover,.mob-ticker-content:active{animation-play-state:paused}
@keyframes mob-scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* === MOBILE HEADER === */
.mob-only.mob-header{
  display:flex!important;
  position:fixed;
  top:40px;
  left:0;
  right:0;
  z-index:190;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--m-text);
  padding:6px 12px;
  align-items:center;
  justify-content:space-between;
  box-shadow: 0 2px 10px rgba(0,0,0,.02);
  border-bottom: 1px solid rgba(30, 70, 58, 0.08);
  height: 50px;
  box-sizing: border-box;
}
.mob-header-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.mob-header-logo img{
  height:36px;
  width:auto;
  flex-shrink:0;
  object-fit:contain;
  background:transparent;
  border-radius:0;
}
.mob-header-logo img[src]:not([src='']){display:inline-block}
.mob-header-logo .logo-text-fallback{
  display:flex;
  align-items:center;
  color: var(--m-secondary);
}
.mob-header-title{
  font-size:0.95rem;
  font-weight:800;
  color: var(--m-primary);
  text-align:center;
  line-height:1.2;
  letter-spacing:.2px;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mob-header-menu{
  flex-shrink:0;
  background: var(--m-primary-light);
  border:none;
  color: var(--m-primary);
  font-size:1.3rem;
  cursor:pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:0;
  z-index:310;
  transition: all 0.2s ease;
}
.mob-header-menu:active {
  transform: scale(0.92);
}

/* === MOBILE BACK/HOME BUTTON (subpages) === */
.mob-back{
  position:relative;
  left:0;
  display:flex;
  flex-shrink:0;
  margin-right:8px;
  align-items:center;
  gap:6px;
  color: var(--m-primary);
  text-decoration:none;
  font-size:.85rem;
  font-weight:700;
  padding:8px 12px;
  border-radius:10px;
  background: var(--m-primary-light);
  transition:all .15s ease;
}
.mob-back:active{
  transform: scale(0.95);
}
.mob-back svg{width:14px;height:16px;stroke: var(--m-primary);}

/* === MOBILE NAV DRAWER === */
.mob-nav-overlay{
  position:fixed;
  inset:0;
  background: rgba(26, 34, 30, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:299;
  display:none;
}
.mob-nav-overlay.open{display:block}
.mob-nav{
  position:fixed;
  top:0;
  right:-280px;
  width:280px;
  height:100%;
  z-index:300;
  background:#fff;
  box-shadow:-4px 0 30px rgba(0,0,0,.06);
  transition:right .3s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;
  padding:24px 0;
  border-radius: 16px 0 0 16px;
}
.mob-nav.open{right:0}
.mob-nav-close{display:flex;justify-content:flex-end;padding:0 20px 12px}
.mob-nav-close button{
  background: var(--m-primary-light);
  border:none;
  font-size:1.4rem;
  cursor:pointer;
  color: var(--m-primary);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mob-nav a{
  display:flex;
  align-items: center;
  gap: 12px;
  padding:14px 24px;
  font-size:.95rem;
  font-weight:600;
  color: var(--m-text);
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,0.03);
  transition:all .15s ease;
}
.mob-nav a svg {
  color: var(--m-muted);
  transition: color 0.15s ease;
}
.mob-nav a:active{
  background: var(--m-primary-light);
}
.mob-nav a.acc{
  color: var(--m-red);
}
.mob-nav a.acc svg {
  color: var(--m-red);
}
.mob-nav a.active{
  color: var(--m-primary);
  background: var(--m-primary-light);
  font-weight:700;
}
.mob-nav a.active svg {
  color: var(--m-primary);
}

/* === HIDE DESKTOP ELEMENTS on mobile === */
.tb{display:none!important}
.nv{display:none!important}
.hero{display:none!important}
.promo-bar{display:none!important}
.meat-promo{display:none!important}
.news-ticker{display:none!important}
.wa-float{display:none!important}
.wp-card{display:none!important}
.wa-info{display:none!important}
.ang-card{display:none!important}
.info-grid{display:none!important}
.dgih{display:none!important}
.news-section{display:none!important}
.cookie-bar{display:none!important}

/* === HIDE MAIN desktop content on mobile === */
.mn{display:block!important;padding:0!important;margin:0!important;max-width:100%!important}
.mn > div:first-child{display:none!important}
.mn > aside.side{display:none!important}

/* === ROTER PUNKT page compact === */
.ct-full .ct{padding:10px 12px!important}
.ct-full .ct h1{font-size:1.2rem!important;margin:0 0 8px!important}
.bc{font-size:.82rem!important;padding:6px 12px!important;margin:0!important}

/* === ROTER PUNKT table fix === */
.rp-wrap{padding:0 12px!important}
.rp-group{
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.03);
  margin-bottom:12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.01);
  overflow:hidden;
}
.rp-toggle{
  width:100%;
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:14px 16px!important;
  background:#fff!important;
  border:none!important;
  cursor:pointer;
  font-size:.92rem!important;
  font-weight:750!important;
  color: var(--m-text);
  text-align:left;
  transition: background 0.15s ease;
}
.rp-toggle:active{
  background: var(--m-primary-light)!important;
}
.rp-wg-name{
  flex:1;
  font-weight:800;
  color: var(--m-text);
}
.rp-count{
  background: var(--m-primary-light)!important;
  color: var(--m-primary)!important;
  padding:3px 8px;
  border-radius:6px;
  font-size:.75rem!important;
  font-weight:750;
}
.rp-avg{
  background: #fbf9f4 !important;
  color: #bd8b5c !important;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: .75rem !important;
  font-weight: 750;
  margin-left: 6px;
  border: 1px solid #e4dfd5;
}
.rp-arrow{
  color: var(--m-muted);
  font-size:.7rem;
  flex-shrink:0;
  margin-left: 4px;
}
.rp-panel{
  padding:0 14px 12px;
}
.rp-table{
  table-layout:fixed!important;
  font-size:.85rem!important;
  width:100%!important;
  border-collapse:collapse;
}
.rp-table th{
  font-size:.72rem!important;
  font-weight:800!important;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color: var(--m-muted)!important;
  padding:10px 4px!important;
  background:transparent!important; /* Removed teal background! */
  border-bottom:2px solid #e5e7eb!important;
}
.rp-table td{
  padding:10px 4px!important;
  border-bottom:1px solid rgba(0,0,0,0.03)!important;
  vertical-align:middle!important;
}
.rp-table tr:last-child td{
  border-bottom:none!important;
}
.rp-th-name,.rp-name{
  width:42%!important;
  white-space:normal!important;
  word-break:break-word!important;
  overflow:visible!important;
  font-weight:600;
  color: var(--m-text);
}
.rp-th-vk{width:22%!important;text-align:right!important}
.rp-th-uvp{width:16%!important;text-align:right!important}
.rp-th-disc{width:20%!important;text-align:right!important}
.rp-vk{text-align:right!important;font-size:.88rem!important;font-weight:750;color: var(--m-primary)!important}
.rp-uvp{text-align:right!important;font-size:.82rem!important;color: var(--m-muted)!important;text-decoration:line-through!important}
.rp-disc{text-align:right!important;font-size:.82rem!important}
.rp-badge{
  background: var(--m-red)!important;
  color:#fff!important;
  padding:2px 6px!important;
  border-radius:4px!important;
  font-size:.72rem!important;
  font-weight:800!important;
  display:inline-block!important;
}
.rp-saving{
  font-size:.72rem!important;
  color: var(--m-muted)!important;
  font-weight:600;
  display:block!important;
  margin-left:0!important;
  margin-top:2px!important;
}

/* === HIDE SIDEBAR on subpages === */
.sb{display:none!important}
.content-wrap{max-width:100%!important;padding:16px!important}
main{padding:0!important;margin:0!important}

/* === MOBILE STATUS BAR (open/closed) === */
.mob-only.mob-status{
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:10px 16px; /* reduced from 14px 20px */
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  background: var(--m-primary-light);
  color: var(--m-primary);
  border-bottom:1px solid rgba(30, 70, 58, 0.08);
  margin: 0;
  position: fixed; /* fix it! */
  top: 90px; /* 40px ticker + 50px header */
  left: 0;
  right: 0;
  z-index: 180;
  height: 40px;
  box-sizing: border-box;
}
.mob-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#16a34a;
  animation: mob-pulse 2s infinite;
}
.mob-status.closed .mob-status-dot{
  background: var(--m-red);
  animation: none;
}
.mob-status.closed {
  background: var(--m-red-light);
  color: var(--m-red);
}
.mob-status-hint{
  margin-left:auto;
  font-size:.82rem;
  font-weight:600;
  color: var(--m-primary);
  opacity: 0.8;
}
.mob-status.closed .mob-status-hint {
  color: var(--m-red);
}

/* === MOBILE HERO === */
.mob-hero{
  display:block!important;
  text-align:left;
  padding:44px 20px 36px;
  background: url('../images/hero.jpg') center/cover no-repeat!important;
  position:relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
.mob-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(to right, rgba(250, 249, 246, 0.50) 40%, rgba(250, 249, 246, 0.05) 100%);
  z-index: 1;
}
.mob-hero h1{
  position:relative;
  font-size:1.55rem;
  font-weight:850;
  color: var(--m-primary);
  margin-bottom:6px;
  letter-spacing:-0.3px;
  line-height: 1.25;
  z-index: 2;
}
.mob-hero p{
  position:relative;
  font-size:.9rem;
  color: var(--m-muted);
  font-weight:600;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.mob-hero p svg {
  animation: heartbeat 1.5s infinite;
  color: var(--m-red);
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* === MOBILE QUICK ACTIONS (Bento & List Hybrid Grid) === */
.mob-only.mob-actions-full{
  display:block!important;
  padding:16px 16px 0;
}
.mob-only.mob-actions-row{
  display:grid!important;
  grid-template-columns:1fr 1fr; /* Hybrid: 2 elegant organic columns */
  gap:12px;
  padding:12px 16px 16px;
}
.mob-action-wide{
  display:flex;
  align-items:center;
  gap:16px;
  background: var(--m-primary);
  color: #fff;
  border-radius:16px;
  padding:18px;
  box-shadow: 0 4px 12px rgba(30, 70, 58, 0.1);
  cursor:pointer;
  transition:all .15s ease;
  border: none;
}
.mob-action-wide:active{
  transform: scale(0.98);
}
.mob-action-wide .mob-action-icon{
  margin:0;
  flex-shrink:0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 12px;
}
.mob-action-wide-text{flex:1;min-width:0}
.mob-action-wide-text .mob-action-label{
  font-size:1.1rem;
  font-weight:800;
  color: #fff;
}
.mob-action-wide-text .mob-action-sub{
  text-align:left;
  display:block;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  font-size: .85rem;
  margin-top: 1px;
}

.mob-action{
  background: #fff;
  border-radius:16px;
  padding:12px; /* reduced padding */
  text-align:left;
  cursor:pointer;
  transition:all .15s ease;
  border: 1px solid rgba(0,0,0,0.03);
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 4px 10px; /* row-gap column-gap */
  box-shadow: 0 2px 8px rgba(0,0,0,0.01);
}
.mob-action:active{
  transform:scale(.97);
  background: var(--m-primary-light);
}
.mob-action.highlight{
  border-color: rgba(168, 36, 42, 0.1);
  background: var(--m-red-light);
}
.mob-action.highlight .mob-action-icon{
  color: var(--m-red);
  background: rgba(168, 36, 42, 0.05);
}
.mob-action-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  margin:0; /* removed bottom margin */
  background: var(--m-primary-light);
  color: var(--m-primary);
  grid-row: 1 / 3; /* span both rows */
}
.mob-action-label{
  display:block;
  font-size:0.88rem; /* slightly tighter */
  font-weight:800;
  color: var(--m-text);
  line-height:1.2;
  grid-column: 2;
  grid-row: 1;
}
.mob-action-sub{
  display: block;
  font-size:.75rem; /* slightly tighter */
  color: var(--m-muted);
  margin: 0;
  line-height:1.2;
  text-align:left;
  font-weight: 500;
  grid-column: 2;
  grid-row: 2;
}

/* === MOBILE PREISLISTE POPUP === */
.mob-pl-group{
  margin-bottom:8px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0, 0, 0, 0.04);
}
.mob-pl-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  background:#f9fafb;
  border:none;
  cursor:pointer;
  font-size:.92rem;
  text-align:left;
  transition: background 0.15s ease;
}
.mob-pl-toggle:active{background:#f3f4f6}
.mob-pl-toggle.open{background: var(--m-primary-light)}
.mob-pl-wg-name{
  font-weight:750;
  color: var(--m-primary);
  flex:1;
}
.mob-pl-count{
  background: var(--m-primary);
  color:#fff;
  padding:2px 8px;
  border-radius:6px;
  font-size:.75rem;
  font-weight:700;
}
.mob-pl-arrow{color: var(--m-muted);font-size:.7rem;flex-shrink:0}
.mob-pl-items{padding:0 12px 4px;max-height:70vh;overflow-y:auto}
.mob-pl-filters{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px;
}
.mob-pl-filter{
  flex-shrink:0;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(0, 0, 0, 0.06);
  background:#fff;
  font-size:.82rem;
  font-weight:700;
  color: var(--m-text);
  cursor:pointer;
  transition:all .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mob-pl-filter.active{
  background: var(--m-primary);
  color:#fff;
  border-color: var(--m-primary);
}
.mob-pl-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.03);
  gap:12px;
}
.mob-pl-row:last-child {
  border-bottom: none;
}
.mob-pl-header{
  position:sticky;top:0;z-index:1;
  background:#f5f5f5;
  padding:8px 0;
  border-bottom:2px solid #e5e7eb;
  font-size:.72rem;
  font-weight:600;
  color:#666;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.mob-pl-header .mob-pl-name{font-weight:600;color:#666}
.mob-pl-header .mob-pl-price{font-weight:600;color:#666}
.mob-pl-name{
  flex:1;
  min-width:0;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
  color: var(--m-text);
  font-weight: 600;
  font-size:.85rem;
}
.mob-pl-price{
  flex:0 0 auto;
  text-align:right;
  font-weight:750;
  color: var(--m-primary);
  font-size:.85rem;
  white-space:nowrap;
}
.mob-pl-menge{display:inline-block;margin-left:6px;padding:1px 7px;background:#e8f5e9;color:#2e7d32;border-radius:10px;font-size:.68rem;font-weight:600;white-space:nowrap;vertical-align:middle}
.mob-pl-rp .mob-pl-name{border-left:2px solid var(--m-red);padding-left:8px}
.mob-pl-ang .mob-pl-name{border-left:2px solid var(--m-secondary);padding-left:8px}

/* === MOBILE PREISLISTE LINK === */
.mob-only.mob-preislink{display:block!important;text-align:center;padding:0 16px 16px}
.mob-preislink a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--m-primary);
  color:#fff;
  font-weight:750;
  font-size:.88rem;
  padding:12px 26px;
  border-radius:12px;
  text-decoration:none;
  box-shadow:0 6px 15px rgba(30, 70, 58, 0.15);
  transition:all .15s ease;
}
.mob-preislink a:active{
  transform: scale(0.97);
}

/* === MOBILE POPUPS (bottom-sheet style) === */
.mob-popup-bg{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(26, 34, 30, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:400;
  align-items:flex-end;
  justify-content:center;
  padding:0;
}
.mob-popup-bg.open{display:flex}
.mob-popup{
  background:#fff;
  width:100%;
  max-height:86vh;
  border-radius:20px 20px 0 0;
  overflow-y:auto;
  padding:0 0 32px 0; /* padding handled inside sticky elements */
  position:relative;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.15,.85,.32,1);
  -webkit-overflow-scrolling:touch;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.08);
  box-sizing: border-box;
}
.mob-popup-bg.open .mob-popup{transform:translateY(0)}
.mob-popup-handle{
  width:100%;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  touch-action:none;
  flex-shrink:0;
}
.mob-popup-handle::after{
  content:'';
  width:36px;
  height:4px;
  border-radius:10px;
  background:#d1d5db;
}
.mob-popup-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:16px;
  position: sticky; /* make it sticky! */
  top: 0;
  background: #ffffff;
  z-index: 100;
  padding: 10px 20px 14px 20px; /* added horizontal padding */
  border-bottom: 1px solid rgba(0,0,0,0.04); /* premium divider when scrolling */
}
.mob-popup-top h2{
  margin:0;
  flex:1;
  font-size:1.15rem!important;
  font-weight:800!important;
  color: var(--m-primary)!important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mob-popup-top h2 svg {
  color: var(--m-secondary);
}
.mob-popup-x{
  background: var(--m-primary-light);
  border:none;
  font-size:1.1rem;
  color: var(--m-primary);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  padding:0;
  line-height:1;
  flex-shrink:0;
  font-weight: 700;
}
/* Scrollable contents inside the popup get padding */
.mob-popup > *:not(.mob-popup-handle):not(.mob-popup-top) {
  padding-left: 20px;
  padding-right: 20px;
}
.mob-popup h3{
  font-size:.95rem;
  font-weight:800;
  margin:18px 0 8px;
  color: var(--m-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mob-popup h3 svg {
  color: var(--m-secondary);
}
.mob-popup p,.mob-popup li{font-size:.88rem;line-height:1.6;color: var(--m-muted);font-weight: 500;}
.mob-popup table{width:100%;border-collapse:collapse;font-size:.88rem;margin:8px 0}
.mob-popup table td{padding:8px 4px;border-bottom:1px solid rgba(0,0,0,0.03);color: var(--m-text);font-weight: 600;}

/* === MOBILE WOCHENPLAN === */
.mob-wp-day{
  padding:14px;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.03);
  background: #fbfbf9;
}
.mob-wp-day:last-child{margin-bottom:0}
.mob-wp-day-name{font-weight:800;font-size:.9rem;color: var(--m-primary);margin-bottom:4px}
.mob-wp-day-menu{font-size:.88rem;font-weight:600;color: var(--m-text);line-height:1.4}
.mob-wp-day-price{font-size:.8rem;color: var(--m-muted);font-weight: 600;margin-top: 4px;display: block;}
.mob-wp-day.today{
  background: var(--m-primary-light);
  border:1.5px solid var(--m-primary);
}

/* === ANGEBOTE KACHELN === */
.mob-ang-grid{display:flex;flex-direction:column;gap:12px}
.mob-ang-item{
  background:#fff;
  border:1px solid rgba(0,0,0,0.04);
  border-radius:14px;
  padding:12px;
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr auto; /* 48px instead of 60px */
  gap:0 12px;
  min-height:70px; /* reduced from 80px */
  overflow:visible;
  align-items: center;
}
.mob-ang-badge{
  position:absolute;
  top:-5px;
  left:4px;
  background: var(--m-red);
  color:#fff;
  font-size:.58rem; /* slightly smaller badge */
  font-weight:800;
  padding:2px 5px; /* tighter padding */
  border-radius:4px;
  letter-spacing: .3px;
  z-index:3;
  text-transform: uppercase;
}
.mob-ang-img{
  width:48px; /* 48px instead of 60px */
  height:48px; /* 48px instead of 60px */
  overflow:hidden;
  border-radius:8px;
  background:#faf9f6;
  display:flex;
  align-items:center;
  justify-content:center;
  grid-row:1/3;
  border: 1px solid rgba(0,0,0,0.02);
}
.mob-ang-img span{font-size:1.8rem;opacity:.3}
.mob-ang-info{min-width:0;display:flex;flex-direction:column;justify-content:center;grid-column:2;grid-row:1/3}
.mob-ang-name{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:.86rem;color: var(--m-text);margin-bottom:2px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-clamp:3;overflow:hidden;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;letter-spacing:-0.012em}
.mob-ang-det{font-size:.78rem;color: var(--m-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight: 500;}
.mob-ang-tag{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:70px;gap:2px}
.mob-ang-price{
  background: var(--m-red);
  color:#fff;
  font-weight:800;
  font-size:1rem;
  padding:6px 10px;
  border-radius:6px;
  text-align:center;
  white-space:nowrap;
  position:relative;
}
.mob-ang-price .euro{font-size:.6em;vertical-align:super;margin-left:1px}
.mob-ang-statt{font-size:.75rem;color: var(--m-muted);text-decoration:line-through;font-weight:600}

/* === MOBILE FOOTER (minimal) === */
.ft{margin-top:0!important}
.ft-in{display:none!important}
.ft-bottom{
  flex-direction:column!important;
  text-align:center!important;
  padding:24px 16px!important;
  font-size:.78rem;
  background: var(--m-bg);
  border-top:1px solid rgba(0,0,0,0.03);
  color: var(--m-muted);
}
.ft-bottom a {
  color: var(--m-primary);
  font-weight: 700;
  text-decoration: none;
}

/* === MOBILE SECTION CARDS === */
.mob-section{
  background:#fff;
  border-radius:14px;
  padding:18px;
  border: 1px solid rgba(0,0,0,0.03);
  margin-bottom:12px;
}

/* === Postfiliale Link === */
.mob-only.mob-postlink{display:flex!important;align-items:center;gap:10px;padding:0 16px 12px;cursor:pointer}
.mob-postlink a{font-size:.85rem;color: var(--m-primary);font-weight:700;text-decoration:none;display:flex;align-items:center;gap:6px}

/* === MOBILE CONTENT CARDS === */
.mob-cards{padding:4px 16px 16px}
.mob-card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  margin-bottom:12px;
  border:1px solid rgba(0,0,0,0.03);
  border-left:4px solid var(--m-primary);
}
.mob-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mob-card-icon{
  font-size:1.2rem;
  width:34px;
  height:32px;
  background: var(--m-primary-light);
  color: var(--m-primary);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mob-card-title{font-weight:800;font-size:.95rem;color: var(--m-text)}
.mob-card-body{font-size:.85rem;line-height:1.6;color: var(--m-muted);font-weight: 500;}
.mob-card-body a{color: var(--m-primary);font-weight:700;text-decoration:none;display: inline-flex;align-items: center;gap: 4px;}

/* === MOBILE PRICE TABLE (inside cards) === */
.mob-price-tbl{width:100%;border-collapse:collapse;font-size:.9rem;margin:10px 0}
.mob-price-tbl th{text-align:left;font-size:.78rem;text-transform:uppercase;color:#6b7280;padding:8px 5px;border-bottom:2px solid #e5e7eb;letter-spacing:.3px}
.mob-price-tbl td{padding:9px 5px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
.mob-price-tbl .col-name{font-weight:600;min-width:45%;width:45%}
.mob-price-tbl .col-vk{font-weight:700;color:#2e7d4f;white-space:nowrap;text-align:right}
.mob-price-tbl .col-uvp{font-size:.85rem;color:#6b7280;text-decoration:line-through;white-space:nowrap;text-align:right}
.mob-price-tbl .col-save{font-size:.85rem;color:#c62828;font-weight:600;white-space:nowrap;text-align:right}
.mob-price-tbl th.col-vk,.mob-price-tbl th.col-uvp,.mob-price-tbl th.col-save{text-align:right}

/* === MOBILE CONTACT === */
.mob-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  background:#fff;
  margin:0 16px 16px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.03);
}
.mob-contact-icon{
  color: var(--m-secondary);
  flex-shrink:0;
  margin-top:2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mob-contact-info{font-size:.85rem;line-height:1.7;color: var(--m-muted);font-weight: 500;}
.mob-contact-info strong{color: var(--m-text);font-size:.9rem;font-weight: 800;}
.mob-contact-info a{color: var(--m-primary);font-weight:700;text-decoration:none;display: inline-flex;align-items: center;gap: 4px;margin-top: 2px;}
.mob-contact-map{width:100%;flex-basis:100%}
.mob-contact-map iframe{border-radius:12px;border: 1px solid rgba(0,0,0,0.02)!important;}
.mob-route-btn{
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align:center;
  margin-top:10px;
  padding:10px 16px;
  background: var(--m-primary);
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  border-radius:10px;
  text-decoration:none;
  transition:all .15s ease;
  box-shadow: 0 4px 10px rgba(30, 70, 58, 0.1);
}
.mob-route-btn:active{
  transform: scale(0.98);
}

/* === MOBILE WHATSAPP CTA === */
.mob-wa{text-align:center;padding:0 16px 20px}
.mob-wa a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#25D366;
  color:#fff;
  padding:12px 24px;
  border-radius:12px;
  font-weight:800;
  font-size:.88rem;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(37,211,102,.15);
  transition: all 0.15s ease;
}
.mob-wa a:active {
  transform: scale(0.97);
}

/* === MOBILE GALLERY === */
.gallery-section{margin:0 12px 16px}
.gallery-section .cd-h{background:var(--m-primary-light);color:var(--m-primary);font-size:.9rem;padding:10px 14px;border-radius:12px 12px 0 0;font-weight:700}
.gallery-section .cd-b{padding:12px}
.gallery-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
.gallery-item{aspect-ratio:1/1!important;border-radius:8px!important}
.lightbox-nav{padding:8px 12px;font-size:1.5rem}
.lightbox-prev{left:8px}
.lightbox-next{right:8px}
.lightbox-img{max-width:95vw;max-height:75vh}

/* === MOBILE FOOTER (minimal) === */
.ft{margin-top:0!important}
.ft-in{display:none!important}
.ft-bottom{flex-direction:column!important;text-align:center!important;padding:20px 16px!important;font-size:.85rem}

} /* end @media(max-width:768px) */