:root { --card-radius: 16px; }

body { background: #f6f7fb; }

.app-header { background: #fff; border-bottom: 1px solid #e9ecf3; }
.brand { font-weight: 800; letter-spacing: .2px; }

@media (max-width: 767.98px) {
  #brand-top-bar{flex-direction: column !important ;width: 100% !important;}
}
.card { border: 0; border-radius: var(--card-radius); box-shadow: 0 10px 26px rgba(16,24,40,.06); }
.pill { font-size: 12px; }
.price { font-weight: 800; }
.price.badge{font-size: 1em; padding:0.65rem 1rem;}
.cart-sticky { position: sticky; top: 16px; }
.muted { color: #667085; }
.small-note { font-size: 15px; color: #667085; }
.section-title { font-weight: 800; }
.focus-ring:focus { box-shadow: 0 0 0 .25rem rgba(13,110,253,.2); }

.qty-btn { width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; }
.qty-input { width: 177px; text-align:center; }

/* ===== Stepper (wie im Screenshot) ===== */
.steps-wrap{ background:#fff; border-bottom:1px solid #e9ecf3; }

.stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 14px;
}

.stepper .step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width: 105px;
}

.stepper .circle {
    width: 35px;
    height: 35px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border: 3px solid rgba(16,24,40,.18);
    background: #fff;
    color: rgba(16,24,40,.55);
}

.stepper .label {
    font-weight: 700;
    color: #344054;
    font-size: 13px;
    text-align: center;
    line-height: 1.1;
}

.stepper .bar{
  flex:1 1 auto;
  height:3px;
  margin-top: 23px; /* Kreis-Mitte */
  background: rgba(16,24,40,.18);
  border-radius: 99px;
  min-width: 70px;
}

/* states */
.stepper .step.active .circle{
  background:#1e4e79;   /* blau wie im Screenshot */
  border-color:#1e4e79;
  color:#fff;
}

.stepper .step.done .circle{
  border-color:#1e4e79;
  color:#1e4e79;
  background:#fff;
  position:relative;
}
.stepper .step.done .circle span{ display:none; }
.stepper .step.done .circle::before{
  content:"✓";
  font-size:20px;
  line-height:1;
  font-weight:900;
}

.stepper .bar.done{ background:#1e4e79; }
.stepper .bar.upcoming{ background: rgba(16,24,40,.18); }


.donate-card-img{
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 767.98px) {
  .donate-card-img {
    height: 140px;
    object-fit: cover;
  }
}


@media (max-width: 640px){
  .stepper{ flex-wrap:nowrap; justify-content:space-between;gap:5px; }
  .stepper .step {min-width: 16%;}
  .stepper .bar {min-width: 26px;}
  .stepper .circle {width: 30px;height: 30px;border: 2px solid rgba(16,24,40,.18);}
  .stepper .label {font-size: 12px;}

}

/* ===== Donate Card Layout (Bild links, Text rechts) ===== */
.donate-item.card{
  border: 1px solid #e9ecf3;
  box-shadow: none;
}

.donate-item .row.g-0{
  border-radius: var(--card-radius);
  overflow:hidden;
}


/* Controls unten sauber ausrichten */
.donate-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ===========================
   MOBILE BOTTOM CART (ONLY)
   Collapsed: only total + button
   Expanded: full cart visible
   =========================== */
@media (max-width: 991.98px) {

  /* Platz schaffen, damit Content nicht hinter dem Sheet verschwindet */
  body.page-index { padding-bottom: 130px; }

    body.page-index .cart-sticky{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1050;
    margin: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.18);
    background: #fff;
    overflow: hidden;
  }
   body.page-index .cart-sticky{
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
  }


  body.page-index .cart-sticky .card-body{
    padding: 10px 14px 14px;
  }

  /* Grip */
    body.page-index .cart-grip {
    width: 32px;
    height: 32px;
    margin: 8px auto 12px;
    position: sticky;
    z-index: 99;
    cursor: pointer;
  }

  /* Pfeil */
  body.page-index .cart-grip::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-right: 3px solid #9aa0a6;
    border-bottom: 3px solid #9aa0a6;
    transform: rotate(-135deg); /* ^ */
    transition: transform 0.2s ease;
  }

  /* Wenn Cart offen ist → Pfeil nach unten */
  body.page-index .cart-sticky.is-open .cart-grip::before {
    transform: rotate(45deg); /* v */
  }

  /* Expand Area: default hidden/collapsed */
  body.page-index .cart-expand{
    display: none;
  }

  /* Footer always visible */
  body.page-index .cart-footer{
    position: sticky;
    bottom: var(--ios-safe-bottom, 0);
    background: #fff;
    padding-top: 6px;
  }

  /* Expanded state */
  body.page-index .cart-sticky.is-open .cart-expand{
    display: block;
  }

  /* Make list scrollable when expanded */
  body.page-index .cart-sticky.is-open #cartBox{
    max-height: 38vh;
    overflow-y: auto;
    padding-right: 4px;
  }

  /* When open, allow the whole sheet to be larger */
  body.page-index .cart-sticky.is-open{
    max-height: 78vh;
  }

  /* When closed, keep it compact */
  body.page-index .cart-sticky:not(.is-open){
    max-height: 140px;
  }

  /* Bigger CTA for touch */
  .body.page-index cart-sticky .btn-lg{
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: 14px;
  }
}

@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

 body {
  touch-action: manipulation;
}

@media (max-width: 767.98px) {

  /* Dieser Wrapper ist bei dir: <div class="d-flex align-items-center gap-2"> */
  .donate-controls-fixed {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
    width: 100%;
  }

  /* Preis (15€) soll allein stehen */
  .donate-controls-fixed .price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: .55rem .9rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 12px;
  }

  .donate-controls-fixed  .input-group {
   width:auto;}


  .donate-controls-fixed .qty-input {
    max-width: 120px;
  }
}

.donate-controls-fixed .donate-controls-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
  }