.text-telefood {
    color: #e91e63!important;
}

.text-bg-telefood {
    color: #fff!important;
    background-color: #e91e63!important;
}

/* Standard */
.btn-telefood {
    color: #fff !important;
    background-color: #e91e63 !important; /* Basisfarbe */
    border-color: transparent !important;
    transition: background-color 0.2s ease-in-out;
}

/* Hover */
.btn-telefood:hover {
    color: #fff !important;
    background-color: #d81b60 !important; /* etwas dunkleres Pink */
    border-color: transparent !important;
}

/* Focus & Active */
.btn-telefood:focus,
.btn-telefood:active {
    color: #fff !important;
    background-color: #ad1457 !important; /* noch dunkleres Pink */
    border-color: transparent !important;
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.3) !important;
}

.btn-telefood:disabled {
    color: #fff !important;
    background-color: #ccc !important; /* abgeblasstes Orange für disabled */
    border-color: transparent !important;
}

header {
    box-shadow: rgba(0, 0, 0, 0.32) 0px 1px 3px 0px;
    z-index: 22;
}

.modal-header {
    border-bottom: none !important;
}

@media (min-width: 576px) {
    .stripes {
        rotate: -2deg;
    }
}

.stripes {
    position: absolute;
    width: 100%;
    height: 65px;
    bottom: -40px;
    left: -1px;
    z-index: -1;
    rotate: -1deg;
    background: #e91e63;
}

.lead-light {
  font-size: 17px;
  line-height: 24px;
}

/* HERO: just the background strip */
.sedi-bg {
  background: #fff url('../images/sedi-bg.png') center/cover no-repeat;
  height: 104px;
}

.checkout-bg {
  --heroHeight: 242px;                 /* Höhe des sichtbaren Hero-Bereichs */
  background: #e1dfd9 url('../images/checkout-background.png') center/cover no-repeat;
  height: var(--heroHeight);
}

@media (max-width: 991px) {
    .checkout-bg {
      height: 196px!important;
    }
}

@media (min-width: 991px) {
    .checkout-hero {
      position: sticky!important;
      top: 20px!important;
    }
    /* HERO: just the background strip */
  .sedi-bg {
    height: 190px!important;
  }
}

/* White section under the hero */
.after-hero-checkout {
  --overlap-checkout: 160px;                     /* wie weit die Karte in den Hero ragt */
}

/* Card belongs to white section but overlaps upward into hero */
.overlap-card-checkout {
  margin: 0 auto;                      /* zentrieren */
  margin-top: calc(-1 * var(--overlap-checkout)); /* nach oben in den Hero ziehen */
}

/* White section under the hero */
.after-hero {
  --overlap: 80px;                    /* wie weit die Karte in den Hero ragt */
  z-index: 2;
  position: relative;
}

/* Card belongs to white section but overlaps upward into hero */
.overlap-card {
  margin: 0 auto;                      /* zentrieren */
  margin-top: calc(-1 * var(--overlap)); /* nach oben in den Hero ziehen */
}


/* Optional: Schatten */
.card-shadow{ box-shadow: rgba(0,0,0,0.32) 0px 1px 3px 0px; }

.rating-ob {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center
}

.rating-ob>input {
    display: none
}

.rating-ob>label {
    position: relative;
    width: 1em;
    font-size: 38px;
    font-weight: 300;
    color: #e91e63;
    cursor: pointer
}

.rating-ob>label::before {
    content: "\2605";
    position: absolute;
    opacity: 0
}

.rating-ob>label:hover:before,
.rating-ob>label:hover~label:before {
    opacity: 1 !important
}

.rating-ob>input:checked~label:before {
    opacity: 1
}

.rating-ob:hover>input:checked~label:before {
    opacity: 0.4
}

/* Gesamtes Widget bleibt im normalen Flow, mittig in der Spalte */
.timer{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 0 auto;
}

/* Quadratischer Kreis-Container */
.dial{
  position: relative;            /* Bezug für den Center-Overlay */
  width: 162px;                  /* Größe nach Wunsch */
  aspect-ratio: 1 / 1;           /* Höhe = Breite */
}

/* SVG skaliert sauber mit */
.svg_timer{
  width: 100%;
  height: 100%;
  display: block;
}

/* Hintergrundring (optional) */
.ring-bg{
  fill: none;
  stroke: #e5e5e5;
  stroke-width: 16;
}

/* Fortschrittsring */
.c1 {
  fill: none;
  stroke: #e5e5e5;
  stroke-width: 10px;
  stroke-linecap: round;
  transform: rotate(-90deg);     /* Startpunkt: oben */
  transform-origin: 50% 50%;

  stroke-dasharray: 502;         /* ~ Umfang (2πr bei r=80 ≈ 502) */
  stroke-dashoffset: 0;          /* Start: komplett sichtbar */
  transition: stroke-dashoffset 1s linear;
}


/* Inhalte exakt in der Mitte des Kreises */
.dial-center{
  position: absolute;
  inset: 0;                      /* füllt den .dial-Container */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;       /* perfekte Zentrierung */
  pointer-events: none;          /* Klicks gehen an den Kreis falls nötig */
}

.time{
  color: #e91e63;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 900;
}

.label-x{
  margin-top: .25rem;
  color: #e91e63;
  font-size: .85rem;
  text-align: center;
}

.modal-footer {
    border-top: none !important;
}

.after-hero .accordion-button:not(.collapsed), .after-hero .accordion-button:focus {
    background: transparent!important;
    box-shadow: none !important;
    color: var(--bs-accordion-btn-color)!important;
}

.accordion-button {
  align-items: center !important; /* alle flex items mittig */
}

.accordion-button i,
.accordion-button span {
  display: inline-flex;       /* inline-block reicht auch */
  align-items: center;        /* zentriert das innere Icon/Text */
}

@media (min-width: 576px) {
    .modal-sm {
        --bs-modal-width: 372px;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.modal-title {
    font-weight: 900 !important;
}

.dropdown.user > a.btn-lg {
    display: flex;                /* für Avatar + Text nebeneinander */
    align-items: center;          /* vertikal mittig */
    gap: 0.5rem;                  /* Abstand zwischen Avatar und Name */
    font-weight: 700;             /* nicht zu fett */
    font-size: 1rem;              /* konsistent mit btn-lg */
    line-height: 1.5;             /* gleiche Zeilenhöhe */
    padding: 0.5rem 1rem;         /* exakt wie Bootstrap */
}

.dropdown.user > a.btn-lg figure {
    margin: 0;
    width: 32px;                  /* Avatar-Größe */
    height: 32px;
    border-radius: 50%;           /* rund */
    overflow: hidden;
}

.dropdown.user > a.btn-lg figure img {
    width: 100%;
    height: auto;
    display: block;
}

.underline-colored {
  position: relative;
  color: inherit;              /* Textfarbe bleibt wie normal */
  text-decoration: none;       /* falls ein <a> ist, Standard-Underline weg */
  z-index: 1;
}

.underline-colored::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  z-index: -1;
  width: 100%;
  height: 2px;                 /* Dicke der Linie */
  background-color: #e91e63;   /* deine gewünschte Farbe */
}

.link-underline {
    text-decoration: underline;
    text-decoration-color: RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important;
}

.font-large {
    font-size: 16px;
}

.gurulo-ik {
  display: inline-block;
  animation: gurulo-shake 1.5s ease-in-out infinite;
}

@keyframes gurulo-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-2px);
  }
  40% {
    transform: translateX(2px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

.payment-button {
  font-weight: bold;
  font-size: 1.1rem;
  background: #fff!important;
}

.payment-button:hover {
  background: #f2f2f2!important;
}

.payment-button:active, .payment-button:focus, .btn-check:checked + .payment-button {
  background: #f2f2f2!important;
}

.mbh-4 {
    margin-bottom: 4px;
}

.bg-promo-info {
  background: #fce9f0;
}

.list-card-info {
  margin-bottom: -2px;
}

.list-card-info.text-bg-telefood {
  background: #ea6294!important;
}

a.btn_map {
  border: 1px solid #efece6;
}

.bg-categories-flavour {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(233, 30, 99, 0.2);
}
.text-muted {
  color: #666666!important;
}

.hourglass-tilt {
  display: inline-block;
  animation: hourglass-tilt 4s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes hourglass-tilt {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}