/* === Global Reset === */
html, body {
  margin:0;
  padding:0;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;   /* ✅ kein horizontales Scrollen */
  box-sizing:border-box;
}
*,
*::before,
*::after {
  box-sizing:inherit;
}


/* === Hero Section === */
.hero {
  background:linear-gradient(135deg,#ff9900,#ff7f00);
  color:#fff;
  text-align:center;
  padding:80px 20px;
  border-radius:12px;
  margin-bottom:40px;
}
.hero h1 {
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:15px;
}
.hero p {
  font-size:1.2rem;
  margin-bottom:20px;
}
.hero .btn.primary {
  background:#fff;
  color:#ff9900;
  font-weight:600;
  border:none;
}
.hero .btn.primary:hover {
  background:#f0f0f0;
}

/* === Buttons Custom === */
.btn {
  display:inline-block;
  padding:.6rem 1.2rem;
  border-radius:8px;
  text-decoration:none;
  transition:.2s ease;
  text-align:center;
}
.btn.primary {
  background:#ff9900;
  color:#fff;
  font-weight:600;
  border:none;
}
.btn.primary:hover {
  background:#e68a00;
  color:#fff;
}
.btn:disabled {
  opacity:.6;
  cursor:not-allowed;
}

/* === Cards === */
.card {
  background:#fff;
  border-radius:10px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-sizing:border-box;   /* ✅ */
  max-width:100%;          /* ✅ */
  overflow:hidden;         /* ✅ */
}
.card:hover {
  transform:translateY(-5px);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.card .btn {
  display:block;           /* ✅ volle Breite */
  width:100%;              /* ✅ */
  margin:0 auto;
  box-sizing:border-box;
}

/* === Review Slider === */
.review-slider {
  position:relative;
  overflow:hidden;
  height:220px;
}
.review-slide {
  position:absolute;
  top:0;
  left:100%;
  width:100%;
  opacity:0;
  transition:all 1s ease;
  text-align:center;
  padding:20px;
}
.review-slide.active {
  left:0;
  opacity:1;
}
.review-slide.prev {
  left:-100%;
  opacity:0;
}
.review-item {
  flex:0 0 100%;
}

/* === Read More === */
.description.expanded {
  max-height:none!important;
}
.read-more {
  cursor:pointer;
  color:#ff9900;
  font-weight:600;
}
.read-more:hover {
  text-decoration:underline;
}

/* === Spinner (weiß, größer) === */
.spinner-border {
  display:inline-block;
  width:28px;
  height:28px;
  vertical-align:middle;
  border:3px solid rgba(255,255,255,0.6);
  border-top-color:#fff;
  border-radius:50%;
  margin-right:8px;
  animation:spin 1s linear infinite;
}
@keyframes spin {
  from { transform:rotate(0deg) }
  to { transform:rotate(360deg) }
}

/* === Utility === */
.text-center{text-align:center}
.mt-4{margin-top:1.5rem}
.mt-5{margin-top:3rem}
.mb-3{margin-bottom:1rem}
.mb-4{margin-bottom:1.5rem}
.mb-5{margin-bottom:3rem}
.p-4{padding:1.5rem}
.p-5{padding:3rem}
.w-100{width:100%}
.shadow-sm{box-shadow:0 2px 5px rgba(0,0,0,.1)}

/* === Mobile Fixes === */
@media (max-width:576px) {
  .card { margin:0 auto 1rem auto; }
  .card .btn {
    font-size:.95rem;
    padding:.6rem;
  }
}