h1, h2, h3, h4{
    color: #31293f;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

h1, h2, h3, h4 {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Добавим небольшую задержку для красивого каскада */
h2 {
  font-size:25px;
  animation-delay: 0.2s;
}

h3 {
  font-size:22px;
  animation-delay: 0.4s;
}

h4 {
  animation-delay: 0.6s;
}

@media(max-width:680px){
  .h5{
    font-size:18px;
  }
  h2{
    font-size: 22px;
  }  
  
}
  /* 1) Глобально отключаем горизонтальный скролл */
html { overflow-x: clip; }               /* современные браузеры */
body { overflow-x: hidden; width: 100%; } /* фолбэк */

/* Farb-Theme (passt zu Bootstrap 5 Variablen) */
:root {
  --alpenor-primary: #007cc2; /* blau */
  --alpenor-dark: #3a3e41;    /* dunkelgrau */
  --alpenor-white: #ffffff;   /* weiß */

  /* Optional: Bootstrap-Theme-Variablen überschreiben (falls Bootstrap 5.3+) */
  --bs-primary: var(--alpenor-primary);
  --bs-body-color: var(--alpenor-dark);
}

/* Abschnitt */
#faq {
  background-color: #f7f9fb; /* leichtes hellgrau-blau, harmoniert mit #007cc2 */
}

/* Titel */
#faq h2 {
  color: var(--alpenor-dark);
  font-weight: 700;
}

/* FAQ-Item Grundstil */
.faq-item {
  border: 1px solid rgba(58, 62, 65, 0.15);
  border-radius: 0.5rem;
  background: var(--alpenor-white);
  overflow: hidden;
}

/* Summary als Headline-Button */
.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem 1rem 3rem;
  position: relative;
  margin: 0;
  font-weight: 600;
  color: var(--alpenor-dark);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Icon vor Summary (+ / –) */
.faq-summary::before {
  content: "+";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  width: 1.25rem;
  text-align: center;
  color: var(--alpenor-primary);
}

/* Hover/Focus States */
.faq-summary:hover {
  background-color: rgba(0, 124, 194, 0.06);
}
.faq-summary:focus {
  outline: none;
}
.faq-summary:focus-visible {
  outline: 3px solid rgba(0, 124, 194, 0.35);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Geöffnetes Item */
.faq-item[open] .faq-summary {
  color: var(--alpenor-primary);
  border-bottom: 1px solid rgba(58, 62, 65, 0.12);
}
.faq-item[open] .faq-summary::before {
  content: "–";
}

/* Inhalt */
.faq-content {
  padding: 1rem 1.25rem 1.25rem 3rem;
  color: var(--alpenor-dark);
  line-height: 1.6;
}

/* Feinheiten für mobile Darstellung */
@media (max-width: 575.98px) {
  .faq-summary,
  .faq-content {
    padding-left: 2.5rem;
  }
}

/* Optional: kleine Schatten, um Kartenoptik zu betonen */
.faq-item {
  box-shadow: 0 2px 6px rgba(58, 62, 65, 0.04);
}
.faq-item:hover {
  box-shadow: 0 4px 12px rgba(58, 62, 65, 0.08);
}

.section{ position: relative; }
.section-title{
  font-weight:700;
  line-height:1.2;
  padding-left:1rem;
  position:relative;
}
.section-title::before{
  content:"";
  position:absolute;
  left:0; top:0.2em;
  width:6px; height:0.9em;
  background:var(--alpenor-primary);
  border-radius:3px;
}

/* ====== Sektion 1: Hero ====== */
.section-hero .brand{ color:var(--alpenor-primary); }
.figure-box{
  border:1px solid rgba(58,62,65,.12);
  border-radius:.75rem;
  background:var(--alpenor-white);
  box-shadow:0 4px 14px rgba(58,62,65,.06);
  min-height:260px;
}
.figure-placeholder{
  width:100%; height:140px;
  border-radius:.75rem;
  background:linear-gradient(135deg, rgba(0,124,194,.12), rgba(0,124,194,.04));
  border:1px dashed rgba(0,124,194,.35);
}

/* Check list */
.check-item{
  padding-left:2rem;
  position:relative;
  margin-bottom:.5rem;
}
.check-item::before{
  content:"";
  position:absolute; left:0; top:.25rem;
  width:1.2rem; height:1.2rem;
  border-radius:50%;
  box-shadow: inset 0 0 0 2px var(--alpenor-primary);
  background:
    radial-gradient(closest-side, var(--alpenor-primary) 70%, transparent 71%);
}

/* ====== Sektion 2: Approach ====== */
.section-approach .card{
  border:1px solid rgba(58,62,65,.12);
  border-radius:.75rem;
}
.section-approach .card-title{ color:var(--alpenor-primary); font-weight:700; }

/* ====== Sektion 3: Dark / Team ====== */
.section-dark{
  background:var(--alpenor-dark);
  color:var(--alpenor-white);
}
.section-dark .section-title::before{ background:var(--alpenor-white); }

.team-chip{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:.75rem;
  padding:1rem;
  text-align:left;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.team-chip .chip-title{
  font-weight:700;
  margin-bottom:.25rem;
  color:#fff;
}
.team-chip .chip-text{
  color:#e8eef2;
  font-size:.95rem;
}

/* ====== Buttons ====== */
.btn-primary{
  background-color:var(--alpenor-primary);
  border-color:var(--alpenor-primary);
}
.btn-primary:hover,
.btn-primary:focus{
  background-color:#0066a1;
  border-color:#0066a1;
}

/* ====== Responsive tweaks ====== */
@media (max-width: 575.98px){
  .lead{ font-size:1.05rem; }
}

/* ===== Section ===== */
.section.business-model{
  background:#f8fbfe; /* leichtes, neutrales Hellblau */
}
.section-title{
  font-weight:700;
  position:relative;
  padding-left:1rem;
}
.section-title::before{
  content:"";
  position:absolute;
  left:0; top:0.25em;
  width:6px; height:0.9em;
  background:var(--alpenor-primary);
  border-radius:3px;
}

/* ===== Content Cards ===== */
.bm-card{
  background:var(--alpenor-white);
  border:1px solid rgba(58,62,65,.12);
  border-radius:.75rem;
  padding:1.25rem;
  box-shadow:0 4px 14px rgba(58,62,65,.06);
}
.bm-card-title{
  color:var(--alpenor-primary);
  font-weight:700;
  margin-bottom:.75rem;
}

/* Icon-list */
.bm-list{
  list-style:none;
  padding-left:0;
  margin-bottom:0;
}
.bm-list li{
  position:relative;
  padding-left:1.8rem;
  margin-bottom:.5rem;
}
.bm-list li::before{
  content:"";
  position:absolute; left:0; top:.2rem;
  width:1.1rem; height:1.1rem;
  border-radius:50%;
  box-shadow: inset 0 0 0 2px var(--alpenor-primary);
  background:
    radial-gradient(closest-side, var(--alpenor-primary) 70%, transparent 71%);
}

/* Steps (timeline ohne JS) */
.bm-steps{
  counter-reset: step;
  list-style:none;
  padding-left:0;
}
.bm-steps li{
  position:relative;
  padding-left:2.5rem;
  margin-bottom:1rem;
}
.bm-steps li::before{
  counter-increment: step;
  content: counter(step);
  position:absolute; left:0; top:.1rem;
  width:1.8rem; height:1.8rem;
  border-radius:50%;
  background:var(--alpenor-primary);
  color:#fff;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,124,194,.25);
}
.bm-step-title{
  display:block; font-weight:700; color:var(--alpenor-dark);
}
.bm-step-text{
  display:block; color:rgba(58,62,65,.9);
}

/* ===== Plans ===== */
.plan-card{
  display:flex; flex-direction:column;
  background:var(--alpenor-white);
  border:1px solid rgba(58,62,65,.12);
  border-radius:.75rem;
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(58,62,65,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.plan-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(58,62,65,.1);
}
.plan-featured{
  border-color: rgba(0,124,194,.45);
  box-shadow:0 8px 26px rgba(0,124,194,.15);
}
.plan-head{
  background: linear-gradient(135deg, rgba(0,124,194,.08), rgba(0,124,194,.02));
  border:1px solid rgba(0,124,194,.18);
  border-radius:.5rem;
  padding:.9rem 1rem;
  margin-bottom:1rem;
}
.plan-name{
  font-weight:700; color:var(--alpenor-primary);
}
.plan-note{
  color:rgba(58,62,65,.8); font-size:.95rem;
}
.plan-list{
  list-style:none; padding-left:0; margin-bottom:1rem;
}
.plan-list li{
  position:relative; padding-left:1.5rem; margin-bottom:.5rem;
}
.plan-list li::before{
  content:""; position:absolute; left:0; top:.45rem;
  width:.6rem; height:.6rem; border-radius:2px;
  background:var(--alpenor-primary);
}

/* Buttons */
.btn-primary{
  background-color:var(--alpenor-primary);
  border-color:var(--alpenor-primary);
}
.btn-primary:hover, .btn-primary:focus{
  background-color:#0066a1; border-color:#0066a1;
}
.btn-outline-primary{
  color:var(--alpenor-primary);
  border-color:var(--alpenor-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
  background:var(--alpenor-primary); color:#fff; border-color:var(--alpenor-primary);
}

/* ===== Responsive ===== */
@media (max-width: 575.98px){
  .lead{ font-size:1.05rem; }
}

.section-title{
  font-weight:700;
  position:relative;
  padding-left:1rem;
}
.section-title::before{
  content:"";
  position:absolute;
  left:0; top:0.25em;
  width:6px; height:0.9em;
  background:var(--alpenor-primary);
  border-radius:3px;
}
.pricing{
  background:#f7f9fb;
}

/* ===== Plan Cards ===== */
.plan-card{
  display:flex; flex-direction:column;
  background:var(--alpenor-white);
  border:1px solid rgba(58,62,65,.12);
  border-radius:.75rem;
  padding:1.25rem 1.25rem 1.5rem;
  box-shadow:0 6px 18px rgba(58,62,65,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.plan-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(58,62,65,.10);
}
.plan-featured{
  border-color: rgba(0,124,194,.45);
  box-shadow:0 10px 28px rgba(0,124,194,.16);
  position:relative;
}
.badge-popular{
  position:absolute; top: -12px; right: 12px;
  background: var(--alpenor-primary);
  color:#fff; font-weight:700;
  font-size:.8rem;
  padding:.35rem .5rem;
  border-radius:.35rem;
  box-shadow:0 6px 16px rgba(0,124,194,.35);
}

.plan-head{
  background: linear-gradient(135deg, rgba(0,124,194,.08), rgba(0,124,194,.02));
  border:1px solid rgba(0,124,194,.18);
  border-radius:.5rem;
  padding:.9rem 1rem;
  margin-bottom:1rem;
}
.plan-name{ font-weight:700; color:var(--alpenor-primary); }
.plan-note{ color:rgba(58,62,65,.8); font-size:.95rem; }

.plan-price{
  display:flex; align-items:baseline; gap:.35rem;
  margin-bottom:.75rem;
}
.plan-price .currency{
  font-weight:700; color:var(--alpenor-dark);
}
.plan-price .value{
  font-size:2rem; line-height:1; font-weight:800; color:var(--alpenor-dark);
  letter-spacing: .5px;
}
.plan-price .per{
  color:rgba(58,62,65,.8);
}

/* Features list */
.plan-list{
  list-style:none; padding-left:0; margin-bottom:1rem;
}
.plan-list li{
  position:relative; padding-left:1.5rem; margin-bottom:.5rem; color:var(--alpenor-dark);
}
.plan-list li::before{
  content:""; position:absolute; left:0; top:.45rem;
  width:.6rem; height:.6rem; border-radius:2px;
  background:var(--alpenor-primary);
}

/* Buttons */
.btn-primary{
  background-color:var(--alpenor-primary);
  border-color:var(--alpenor-primary);
}
.btn-primary:hover, .btn-primary:focus{
  background-color:#0066a1; border-color:#0066a1;
}
.btn-outline-primary{
  color:var(--alpenor-primary);
  border-color:var(--alpenor-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
  background:var(--alpenor-primary); color:#fff; border-color:var(--alpenor-primary);
}

/* ===== Add-ons ===== */
.addon-card{
  background:var(--alpenor-white);
  border:1px solid rgba(58,62,65,.12);
  border-radius:.75rem;
  padding:1rem 1.1rem;
  box-shadow:0 4px 14px rgba(58,62,65,.06);
}
.addon-title{
  font-weight:700; color:var(--alpenor-dark); margin-bottom:.25rem;
}
.addon-price{
  font-weight:800; color:var(--alpenor-dark); margin-bottom:.25rem;
}
.addon-per{ color:rgba(58,62,65,.8); font-weight:600; }
.addon-text{ color:rgba(58,62,65,.9); }

/* ===== Responsive ===== */
@media (max-width: 575.98px){
  .lead{ font-size:1.05rem; }
  .plan-price .value{ font-size:1.75rem; }
}