html {
	scroll-behavior: smooth;
}

:root {
        --brand-1: #4cc1ff;      /* helles Blau */
        --brand-2: #0b84e5;      /* mittleres Blau */
        --brand-3: #0a66c2;      /* dunkleres Blau */
        --accent:  #21c4ff;      /* Akzent */
        --dark:    #0c2546;      /* sehr dunkles Blau */
      }
      body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: #12263a; }
      .navbar { box-shadow: 0 8px 24px rgba(10,102,194,.08); }
      .navbar-brand img { height: 44px; }
      .btn-brand {
        background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
        border: none; color: #fff; border-radius: 999px; padding: .65rem 1.25rem; font-weight: 600;
        box-shadow: 0 8px 20px rgba(11,132,229,.25);
      }
      .btn-brand:hover { filter: brightness(1.05); color: #fff; }
      .hero {
        background: radial-gradient(1200px 600px at 10% -20%, rgba(76,193,255,.35), transparent 60%),
                    radial-gradient(900px 500px at 90% 0%, rgba(11,132,229,.30), transparent 60%),
                    linear-gradient(180deg, rgba(10,102,194,.06), rgba(10,102,194,0));
      }
      .hero .display-4 { font-weight: 800; letter-spacing: -.02em; color: var(--dark); }
      .hero .lead { color: #325b8a; }
      .badge-soft {
        background: linear-gradient(135deg, rgba(76,193,255,.25), rgba(11,132,229,.15));
        color: var(--brand-3);
        border-radius: 999px; padding: .4rem .7rem; font-weight: 600;
      }
      .feature-card {
        border: 0; border-radius: 1rem;
        box-shadow: 0 8px 40px rgba(2,35,77,.08);
      }
      .feature-card .icon {
        width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff;
        box-shadow: 0 8px 20px rgba(11,132,229,.25);
      }
      .section-title { font-weight: 800; color: var(--dark); }
      .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(11,132,229,.25), transparent); }
      .wave { position: relative; }
      .wave:after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 80px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 80"><path fill="%23ffffff" d="M0,64L80,53.3C160,43,320,21,480,21.3C640,21,800,43,960,53.3C1120,64,1280,64,1360,64L1440,64L1440,80L1360,80C1280,80,1120,80,960,80C800,80,640,80,480,80C320,80,160,80,80,80L0,80Z"></path></svg>') center bottom / cover no-repeat;
      }
      .bg-brand-gradient {
        background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
        color: #fff;
      }
      .footer { color: #dfefff; }
      .footer a { color: #fff; opacity: .9; }
      .form-control:focus { border-color: var(--brand-2); box-shadow: 0 0 0 .2rem rgba(11,132,229,.25); }
      .smallprint { opacity: .75; }

      .rustler-logo {width:202px;
                     padding-left:15px;
                     padding-bottom:15px;}

.promo-banner {
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}



/* === FULLWIDTH HERO CAROUSEL === */
.hero {
  margin: 0;
  padding: 0;
}


.carousel-wave {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Sliderbilder */
.hero-slide-img {
  width: 100%;
  height: 85vh;              /* Höhe: 85% der Viewporthöhe */
  object-fit: cover;
}

/* Wellenabschluss unten */
.carousel-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 80px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 80'><path fill='%23ffffff' d='M0,64L80,53.3C160,43,320,21,480,21.3C640,21,800,43,960,53.3C1120,64,1280,64,1360,64L1440,64L1440,80L1360,80C1280,80,1120,80,960,80C800,80,640,80,480,80C320,80,160,80,80,80L0,80Z'/></svg>")
    center bottom / cover no-repeat;
  z-index: 1;
}

/* Captions */
.carousel-caption {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  padding: 1rem 1.5rem;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: left;
  z-index: 2;
}
.carousel-caption h5 {
  font-size: 1.5rem;
  font-weight: 700;
}
.carousel-caption p {
  font-size: 1rem;
  margin-bottom: 0;
}

/* Indikatoren */
.carousel-indicators {
  bottom: 100px;
  z-index: 3;
}
.carousel-indicators li {
  background-color: rgba(255, 255, 255, 0.4);
}
.carousel-indicators .active {
  background-color: var(--brand-2);
}

.carousel-control-next {
  background-color: #31a8f4; /* Hintergrundfarbe */
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Rundes Icon */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15%;
  margin-right: 10%;
}

.carousel-control-prev {
  background-color: #31a8f4;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15%;
  margin-left: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); /* macht das Icon weiß */
}

/* === PREISLISTE === */
.price-table-wrap { border-radius:.5rem; box-shadow:0 8px 30px rgba(2,35,77,.08); overflow:auto; }
.price-table {
  width:100%;
  border-collapse:collapse;
  margin-bottom:0;
  background:#fff;
  table-layout:fixed;
  font-variant-numeric: tabular-nums;
}
.price-table thead th{
  position:sticky; top:0; z-index:5;
  background:#31a8f4;     /* kräftiges Rot wie im Bild */
  color:#fff;
  font-weight:700;
  text-align:center;
  padding:.75rem .5rem;
  border:2px solid #000;
}
.price-table tbody td{
  padding:.6rem .5rem;
  border:2px solid #000;  /* starke Rahmen wie im Bild */
  vertical-align:middle;
  text-align:center;
  white-space:nowrap;
}
.price-table tbody tr:nth-child(even){ background:#f9fbff; } /* dezente Zebra-Zeilen */
.price-table .table-section td{
  background:#f1f1f1; font-weight:700; text-align:left;
}

#kontaktForm .form-control {
  border-radius: .6rem;
  border: 1px solid #dce6f2;
  transition: all .2s ease;
}
#kontaktForm .form-control:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 .2rem rgba(11,132,229,.2);
}
#kontaktForm label {
  font-weight: 600;
  color: var(--dark);
}
#kontaktForm .form-check-label a {
  color: var(--brand-2);
  text-decoration: underline;
}

.content-link {color:#000000;}

.content-link:hover {color:#000000;
                    text-decoration: none;}

/* Responsive Anpassung */
@media (max-width: 991.98px) {
  .hero-slide-img { height: 60vh; }
  .carousel-caption h5 { font-size: 1.25rem; }
}
@media (max-width: 575.98px) {
  .hero-slide-img { height: 50vh; }
  .carousel-caption { display: none; }
}


 @media (max-width: 768px) and (orientation:portrait) {

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    background: #fff;
    table-layout: auto;
    font-variant-numeric: tabular-nums;
}

.content-img {width:350px;
              height:250px;}

.pb-4, .py-4 {
    padding-bottom: 8.5rem !important;
}

.carousel-control-prev {
    background-color: #31a8f4;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40%;
    margin-left: 10%;
}

.carousel-control-next {
    background-color: #31a8f4;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40%;
    margin-right: 10%;
}

}