/* =========================================================
   AP CAFE MENU – COMPLETE CSS
   Untere Button-Reihe (Tags) eigenständig gestaltet
   ========================================================= */

:root{
  --apcafe-controls-bg: #000;
  --apcafe-accent: #ED7502;

  --apcafe-pill-bg: #ED7502;
  --apcafe-pill-text: #fff;

  --apcafe-controls-padding-y: 12px;
  --apcafe-controls-padding-x: 12px;
  --apcafe-controls-padding-y-mobile: 8px;
  --apcafe-controls-padding-x-mobile: 10px;
  --apcafe-controls-margin-bottom: 22px;

  --apcafe-cat-sticky-top: 150px;
  --apcafe-cat-sticky-top-mobile: 200px;
  --apcafe-cat-scroll-margin: 170px;
  --apcafe-cat-scroll-margin-mobile: 220px;

  --apcafe-catbar-radius: 14px;
  --apcafe-catbar-padding-y: 10px;
  --apcafe-catbar-padding-x: 14px;
  --apcafe-cat-gap-before: 18px;
  --apcafe-cat-gap-after: 26px;

  --apcafe-grid-cols-mobile: 2;
  --apcafe-grid-cols-desktop: 4;
}

/* =========================
   FIXED CONTROLS
   ========================= */
.apcafe-controls{
  position:sticky;
  top:0;
  z-index:9999;
  background:#000;
  padding:var(--apcafe-controls-padding-y) var(--apcafe-controls-padding-x);
  margin-bottom:var(--apcafe-controls-margin-bottom);
}

/* =========================
   CATEGORY BUTTONS (OBERE REIHE)
   ========================= */
.apcafe-cat-filter .apcafe-filter{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

.apcafe-cat-filter .apcafe-filter button{
  background:#ED7502;
  color:#fff;
  border:0;
  padding:12px 18px;
  font-size:14px;
  font-weight:800;
  border-radius:6px;
  cursor:pointer;
  text-transform:uppercase;
}

.apcafe-cat-filter .apcafe-filter button:hover{
  background:#ff8a1c;
}

.apcafe-cat-filter .apcafe-filter button[data-active="1"]{
  background:#fff;
  color:#ED7502;
}

/* =========================
   TAG BUTTONS (UNTERE REIHE)
   ========================= */
.apcafe-tags-filter{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:14px;
}

.apcafe-tags-filter .apcafe-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

/* bewusst kleiner & dezenter */
.apcafe-tags-filter .apcafe-filter button{
  background:transparent;
  color:#ED7502;
  border:2px solid #ED7502;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  border-radius:20px;
  cursor:pointer;
  transition:all .2s ease;
}

.apcafe-tags-filter .apcafe-filter button:hover{
  background:#ED7502;
  color:#fff;
}

.apcafe-tags-filter .apcafe-filter button[data-active="1"]{
  background:#ED7502;
  color:#fff;
}

/* =========================
   CATEGORY HEAD
   ========================= */
.apcafe-cat{
  padding-top:var(--apcafe-cat-gap-before);
  scroll-margin-top:var(--apcafe-cat-scroll-margin);
}

.apcafe-cat-head{
  position:sticky;
  top:var(--apcafe-cat-sticky-top);
  z-index:5000;
  background:#ED7502;
  border-radius:var(--apcafe-catbar-radius);
  padding:var(--apcafe-catbar-padding-y) var(--apcafe-catbar-padding-x);
  margin-bottom:var(--apcafe-cat-gap-after);
}

.apcafe-cat-head h2{
  margin:0;
  font-size:var(--apcafe-cat-title-size) !important;
  color:var(--apcafe-cat-title-color, #fff) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}

/* =========================
   GRID
   ========================= */
.apcafe-grid{
  display:grid;
  grid-template-columns:repeat(var(--apcafe-grid-cols-mobile),1fr);
  gap:18px;
}

@media(min-width:1024px){
  .apcafe-grid{
    grid-template-columns:repeat(var(--apcafe-grid-cols-desktop),1fr);
    gap:24px;
  }
}

/* =========================
   CARD
   ========================= */
.apcafe-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.apcafe-card a{
  display:block;
  text-decoration:none;
  color:inherit;
}

.apcafe-img{
  aspect-ratio:4/3;
  background:#f2f2f2;
}

.apcafe-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.apcafe-body{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:8px;
  padding:12px 12px 52px;
  min-height:230px;
}

.apcafe-title{
  font-size:var(--apcafe-item-title-size) !important;
  color:var(--apcafe-item-title-color, #000) !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

.apcafe-desc{
  font-size:13px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#222;
}

.apcafe-icons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-height:48px;
}

.apcafe-icons img{
  width:44px;
  height:auto;
  object-fit:contain;
}

.apcafe-price-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  background:rgba(255,255,255,.92);
  color:#ED7502;
  font-weight:900;
  padding:7px 10px;
  border-radius:999px;
}

/* =========================
   SINGLE PAGE
   ========================= */
.apcafe-single-inner{
  max-width:980px;
  margin:0 auto;
  padding:18px 14px 28px;
}

.apcafe-single-title{
  font-size:28px;
  font-weight:900;
  color:#000;
}

.apcafe-single-image{
  text-align:center;
  margin:14px 0;
}

.apcafe-single-image img{
  max-width:100%;
  height:auto;
}

.apcafe-single-kicker{
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:8px;
}

.apcafe-single-sep{
  height:2px;
  background:#ED7502;
  margin:18px 0;
  border-radius:999px;
}

/* Icons zentriert in EINER Reihe */
.apcafe-single-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
  margin:18px 0;
}

.apcafe-single-icons img{
  width:150px;
  height:90px;
  object-fit:contain;
}

.apcafe-back-button{
  display:inline-block;
  margin:20px 0 10px;
  color:#ED7502;
  font-weight:700;
  text-decoration:none;
}

.apcafe-single-seo{
  font-size:14px;
  color:#333;
}

/* =========================
   MOBILE
   ========================= */
@media(max-width:767px){

	  .apcafe-cat-head h2{
    font-size:var(--apcafe-cat-title-size-mobile) !important;
  }

	  .apcafe-title{
    font-size:var(--apcafe-item-title-size-mobile) !important;
  }

	.apcafe-controls{
    padding:var(--apcafe-controls-padding-y-mobile)
            var(--apcafe-controls-padding-x-mobile);
  }

  .apcafe-cat{
    scroll-margin-top:var(--apcafe-cat-scroll-margin-mobile);
  }

  .apcafe-cat-head{
    top:var(--apcafe-cat-sticky-top-mobile);
  }

  .apcafe-grid{
    gap:14px;
  }

  .apcafe-body{
    min-height:215px;
  }

  .apcafe-single-title{
    font-size:24px;
  }

  .apcafe-single-icons{
    flex-wrap:wrap;
    gap:14px;
  }
}