/* =============== FARBEN www.route66.travel ==================== */
/*
	weiss: #ffffff
	beige: #f2e4d5
	orange: #ff6600
	d'blau: #003366
	h'blau: #66b2ff
	
	türkis: #66d1c6
*/
/* =========================================== */


/* Helix-Fix für Offcanvas-Menü */
.offcanvs-position-right.offcanvas-active .offcanvas-menu {background: #fff;}
.offcanvas-menu {background-color: #fff;}
.offcanvas-menu .offcanvas-inner ul.menu > li > a  {color: #222;}



/* =============== Schwarzes SPLASH beim Seitenaufruf ==================== */

/* Schwarze Vollbild-Überlagerung */
#route66-splash-overlay {
  position: fixed;
  inset: 0;              /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease;
}

/* Zustand, wenn das Overlay ausgeblendet wird */
#route66-splash-overlay.route66-splash-hide {
  opacity: 0;
  pointer-events: none;
}

/* Logo-Container */
.route66-splash-logo img {
  max-width: 300px;
  width: 80vw;
  height: auto;
  filter: brightness(0) invert(1);
  animation: route66-heartbeat 1.2s ease-in-out forwards;
}

/* Herzschlag-Animation */
@keyframes route66-heartbeat {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  30% {
    transform: scale(1.0);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}







/* =============== KONTAKT-Sektion (top2, top3): weißer Hintergrund ==================== */

/* Kontakt-Sektion über gesamte Browserbreite einfärben */
#sp-kontakt {
    width: 100%;
    background-color: #f2e4d5;
    padding-top: 40px;     /* optional – etwas Luft oben */
    padding-bottom: 40px;  /* optional – etwas Luft unten */
}






/* =============== ACCORDIONS (aufklappbar) ============ */
/* ===================================================== */

/* =============== Motorräder-Grid (4 Spalten) (sp-motorradtouren, content5) =============== */
.bike-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* Karten */
.bike-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bike-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }

/* Bildbereich */
.bike-card .img-wrap {
  position: relative;
  background: #fff;
  padding: 18px 18px 6px;
  min-height: 165px;
  display: grid;
  place-items: center;
}
.bike-card .img-wrap img.bike {
  width: 100%;
  height: 150px;
  object-fit: contain;
}

/* Eaglerider-Logo (oben rechts im Bild) */
.bike-card .img-wrap .vendor {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 22px;
  width: auto;
  opacity: .9;
}

/* optionales Ribbon: "Gegen Aufpreis" */
.bike-card.price-up .ribbon {
  position: absolute;
  top: 12px;
  left: -10px;
  background: #ff6600;
  color: #fff;
  padding: 6px 14px;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .3px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(255,102,0,.3);
  transform: rotate(-4deg);
}

/* Textblock */
.bike-card .body {
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bike-card .model {
  font-weight: 800;
  color: #003366;
  font-size: 1.05rem;
  margin: 0;
}

/* Icons-Zeile */
.bike-card .features {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.bike-card .feature {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: start;
  min-width: 56px;
  text-align: center;
}
.bike-card .feature img {
  width: 26px; height: 26px;
  display: block;
}
.bike-card .feature small {
  margin-top: 4px;
  font-size: .72rem;
  color: #475569;
  line-height: 1.2;
}

/* Responsive */
@media (max-width: 1200px) {
  .bike-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  .bike-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bike-grid { grid-template-columns: 1fr; }
  .bike-card .img-wrap { min-height: 150px; }
}



/* Accordion – Abstände zwischen den Items */

.r66-acc-section{
  width:100vw;
  margin-left:calc(50% - 50vw);   /* zieht den Block auf volle Seitenbreite */
  background:#66b2ff;
  padding:20px 0;
}


/* Innerer, zentrierter Container */
.r66-acc-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 1.25rem;
}

/* =============== Variante A: GAP zwischen den Accordions =============== */
/* Der Container der <details>-Items ist ein Grid, der Zwischenraum kommt über gap */
.r66-acc{
  display:grid;
  padding:10px 0px 0px 0px;          /* -> Abstand zwischen den Accordions */
  margin:0;          /* Sicherheit: kein unerwünschter Außenabstand */
}

/* Einzelnes Accordion-Element */
.r66-acc-item{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* Summary als Button – große Schrift */
.r66-acc-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border:0;
  background:#fff;
  color:#003366;
  font:600 1.2rem/1.3 inherit;   /* größere Titel */
  text-align:left;
  cursor:pointer;
  list-style:none;               /* Standard-Dreieck ausblenden (Firefox) */
  -webkit-tap-highlight-color: transparent;
}
.r66-acc-btn:hover{ background:#f6f8fb; }
.r66-acc-btn::-webkit-details-marker{ display:none; } /* Dreieck in WebKit ausblenden */


/* Neuer moderner Plus-Button */
.r66-acc-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #003366;
  color: transparent; /* Text ausblenden */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}
.r66-acc-icon::before,
.r66-acc-icon::after {
  content: "";
  position: absolute;
  background: #fff;
  transition: all 0.3s ease;
}
/* Querstrich */
.r66-acc-icon::before { width: 12px; height: 2px; border-radius: 1px; }
/* Senkrechtstrich */
.r66-acc-icon::after  { width: 2px;  height: 12px; border-radius: 1px; }

/* Hover- oder Open-Zustand */
.r66-acc-btn:hover .r66-acc-icon { background: #ff6600; } /* Orange beim Hover */

/* Wenn geöffnet → Plus wird zu „x“ */
.r66-acc-item[open] .r66-acc-icon {
  transform: rotate(45deg);
  background: #ff6600;
}

/* Panel sanft auf/zu */
.r66-acc-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
  background:#fff;
}
.r66-acc-item[open] .r66-acc-panel{ grid-template-rows:1fr; }
.r66-acc-panel > div{
  overflow:hidden;
  padding:0 20px 18px;
  color:#1f2937;
  line-height:1.6;
}

/* Kleines Responsive-Tuning: etwas mehr Luft auf sehr kleinen Screens */
@media (max-width: 991.98px) {
  .r66-acc{ gap:16px; }
  .r66-acc-btn{ padding:16px 18px; font-size:1.1rem; }
}

/* 1) Gap sicher aktivieren */
.r66-acc { 
  display: grid !important; 
  gap: 14px; 
}

/* 2) Falls der Editor einen Wrapper (div/p/section) zwischen .r66-acc und <details> setzt,
      macht "display: contents" diesen für das Layout unsichtbar → gap wirkt wieder */
.r66-acc > div,
.r66-acc > p,
.r66-acc > section {
  display: contents;
}

/* 3) Fallback (wenn Grid/gap aus irgendeinem Grund nicht greift) */
@supports not (gap: 1rem) {
  .r66-acc .r66-acc-item { margin-bottom: 14px; }
  .r66-acc .r66-acc-item:last-of-type { margin-bottom: 0; }
}


/* ==================== Ende Accordions ==================== */




/* ==================== TOUR-BOX, BEWERTUNGSTABELLE, SIDETRIPS ==================== */

/* ==================== Tour-Box dunkelblau ==================== */

.tour-box-blau {
  background: #003366;
  color: #fff;
  padding: 22px 26px;
  border-radius: 6px;
  font-family: inherit;
  /* max-width: 560px; <--- ENTFERNT, um die volle Grid-Breite zu erlauben */
  width: 100%;
  margin: 0 auto 1.25rem auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  position: relative;
}



/* ==================== Sidetrips etc. hellgrau ==================== */

.route66-orange .route66-rating-wrap{
  /* max-width:560px; <--- ENTFERNT, um die volle Grid-Breite zu erlauben */
  width: 100%;
  margin:0 auto 1.25rem auto;
  border-radius:4px;
  overflow:hidden;
}
.route66-orange .route66-rating{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  font-family:inherit;
  font-size:1rem;
  font-weight:400;
  line-height:1.4;
}
.route66-orange .route66-rating td{
  background:#fefefe;
  color:#000;
  border-bottom:2px solid #fff;
  vertical-align:top;
  padding:10px 14px;
}
.route66-orange .route66-rating tr:last-child td{ border-bottom:none; }
.route66-orange .route66-rating td.label{
  border-right:2px solid #fff;
  white-space:nowrap;
  width:1%;
  max-width:45%;
}
.route66-orange .route66-rating td.value{ text-align:left; width:auto; word-break:normal; }
.route66-list{ list-style:none; margin:0; padding:0; }
.route66-list li + li{ margin-top:.4rem; }



/* ==================== Bewertungstabelle mit Sternen ==================== */

.route66-rating-wrap {
  /* max-width: 480px; <--- ENTFERNT, um die volle Grid-Breite zu erlauben */
  width: 100%;
  margin:0 auto 1.25rem auto;   /* zentriert die Tabelle */
  border-radius: 4px;
  overflow: hidden;
  display: block;
}

.route66-rating {
  width: 100%;
  table-layout: fixed;         /* Spaltenbreite bleibt stabil (55%/45%) */
  border-collapse: separate;
  border-spacing: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.route66-rating td {
  background: #003366;
  color: #fff;
  padding: 10px 14px;
  vertical-align: middle;      /* vertikal mittig */
  border-bottom: 2px solid #ffffff;
}

.route66-rating tr:last-child td {
  border-bottom: 0;
}

/* Linke Spalte */
.route66-rating td.label {
  width: 55%;
  font-weight: 400;
  border-right: 2px solid #ffffff;
}

/* Rechte Spalte: Sterne als Text */
.route66-rating td.stars {
  width: 45%;
  text-align: left;
  padding-left: 25px;
  letter-spacing: 2px;
  white-space: nowrap;
  color: #ff6600; /* aktive Sterne */
  font-size: 1.1rem;
  line-height: 1;
  font-family: system-ui, "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* „Leere“ Sterne (im <span class="off">★★</span>) */
.route66-rating td.stars .off {
  color: rgba(255, 255, 255, 0.28); /* blass / inaktiv */
}

/* Optional: leichte Animation beim Hover */
.route66-rating td.stars:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}








/* ============================ EFFEKTE ALLGEMEIN ============================ */

/* ==================== Erinnerungen - Rahmen mit Schatten ==================== */

.content-box {
  background: #ffffff;             /* weißer Hintergrund */
  border: 1px solid #e0e0e0;       /* dezente graue Umrandung */
  border-radius: 10px;             /* abgerundete Ecken */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* weicher Schatten */
  padding: 20px 28px;              /* Innenabstand (oben/unten, seitlich) */
  margin: 25px 0;                  /* Außenabstand oben/unten */
  line-height: 1.6;                /* bessere Lesbarkeit für Text */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Optional: leichter "Hover-Effekt" für moderne Optik */
.content-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}



/* ===================== Bild mit abgerundeten Ecken ===================== */
.rounded-img {
  width: 300px;              /* skaliert das Bild auf eine feste Größe */
  max-width: 100%;            /* skaliert das Bild auf Containerbreite */
  height: auto;             /* Seitenverhältnis bleibt erhalten */
  border-radius: 12px;      /* Ecken abrunden – Wert anpassbar */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* optional: weicher Schatten */
  display: block;           /* entfernt kleine Lücken unter dem Bild */
}



/* ===================== Bildunterschrift klein unter dem Bild ===================== */

.image-with-caption-left {
  display: inline-block;
  text-align: left;      /* Text linksbündig */
  margin: 1rem 0;        /* Abstand oben/unten */
}

.image-with-caption-left img {
  display: block;        /* Bild nimmt ganze Breite der Figure ein */
  max-width: 100%;       /* Responsive */
  height: auto;
  border-radius: 6px;    /* optional */
}

.image-with-caption-left figcaption {
  font-size: 0.9rem;     /* etwas kleinerer Text */
  color: #003366;
  font-style: italic;    /* leichte Kursivschrift */
  margin-top: 0.3rem;    /* etwas Abstand zum Bild */
  line-height: 1.4;
}



/* ===== Reiseversicherung – Blauer Icon links, Text rechts ===== */

.insurance-card {
  padding: 12px 16px;
  border: 1px solid #e6eaef;
  border-radius: 8px;
}

/* Eine Zeile: Icon + Text */
.ins-row {
  display: flex;
  align-items: center;          /* Icon vertikal mittig neben dem Text */
  gap: 16px;
}

/* runder, blauer Punkt mit Icon */
.ins-icon {
  flex: 0 0 56px;               /* feste Breite für die Spalte */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #003366;          /* dunkelblau */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;              /* Icon-Größe */
}

/* Text rechts – normale Schrift, keine Versalien */
.ins-text {
  flex: 1 1 auto;
  color: #003366;
  line-height: 1.5;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;         /* falls Template global uppercase setzt */
}

/* optional: kleine Variante auf Mobil */
@media (max-width: 991.98px) {
  .ins-icon{ flex-basis:48px; width:48px; height:48px; font-size:20px; }
}



/* ===================== Beitragsverschönerung "Urlaub von Anfang an" ===================== */

/* ===== Intro-Hero Modul (Modulklasse-Suffix: intro-hero) ===== */
.intro-hero .mod-hero{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:28px;
  background:#fff;
  border-radius:14px;
  padding:26px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* Bildblock */
.intro-hero .hero-media{
  margin:0;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.intro-hero .hero-media img{ display:block; width:100%; height:auto; }
.intro-hero .hero-media figcaption{
  position:absolute; left:12px; bottom:12px;
  background:#ff6600; color:#fff; font-weight:800;
  padding:6px 10px; border-radius:6px;
  box-shadow:0 6px 14px rgba(255,102,0,.35);
}

/* Texte */
.intro-hero .hero-title{
  margin:0 0 6px; font-size:34px; line-height:1.2; color:#003366; font-weight:900;
}
.intro-hero .hero-sub{
  margin:0 0 16px; font-size:20px; color:#ff6600; font-weight:800;
}
.intro-hero .hero-body p{ margin:0 0 14px; font-size:16px; line-height:1.65; color:#1e2a35; }

/* CTA */
.intro-hero .hero-cta{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }
.intro-hero .btn{
  display:inline-block; text-decoration:none; font-weight:800; letter-spacing:.02em;
  padding:10px 18px; border-radius:999px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.intro-hero .btn-primary{
  background:#ff6600; color:#fff;
  box-shadow:0 6px 16px rgba(255,102,0,.35);
}
.intro-hero .btn-primary:hover{ background:#e45500; transform:translateY(-1px); box-shadow:0 10px 22px rgba(255,102,0,.45); }
.intro-hero .btn-ghost{
  background:transparent; color:#003366; border:2px solid #003366;
}
.intro-hero .btn-ghost:hover{ background:#003366; color:#fff; }

/* Responsive */
@media (max-width: 992px){
  .intro-hero .mod-hero{ grid-template-columns: 1fr; padding:22px; }
  .intro-hero .hero-title{ font-size:28px; }
  .intro-hero .hero-sub{ font-size:18px; }
}
@media (max-width: 480px){
  .intro-hero .mod-hero{ padding:18px; border-radius:12px; }
  .intro-hero .hero-media{ border-radius:10px; }
}



/* ===================== Beitragsverschönerung "Anmeldung zu unseren Touren" ===================== */

.tour-info {
  font-family: 'Roboto', Arial, sans-serif;
  color: #003366;
  background: #f7f9fc;
  border-radius: 8px;
  padding: 30px 24px;
  max-width: 820px;
  margin: 0 auto 2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Einleitungsblock */
.info-intro {
  background: #fff;
  padding: 20px 24px;
  border-left: 6px solid #ff6600;
  border-radius: 6px;
  margin-bottom: 26px;
}

.info-intro h2 {
  font-size: 1.6rem;
  color: #003366;
  margin-bottom: 10px;
}

.info-intro p strong {
  color: #ff6600;
}

/* Abschnitt mit den Schritten */
.info-process h3 {
  text-transform: uppercase;
  font-size: 1.3rem;
  color: #ff6600;
  margin-bottom: 0;
}
.info-process .sub {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #003366;
}

.info-step {
  display: flex;
  gap: 18px;
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  align-items: flex-start;
  border-left: 4px solid #003366;
}

.step-number {
  background: #ff6600;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.step-content h4 {
  color: #003366;
  margin: 0 0 6px;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.step-content p {
  margin: 0 0 6px;
  line-height: 1.5;
}

.step-content .note {
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
}

/* Responsive */
@media (max-width: 991.98px) {
  .tour-info { padding: 20px 16px; }
  .info-step { flex-direction: column; gap: 10px; }
  .step-number { margin-bottom: 6px; }
}



/* ================= Beiträge 2-Spalten-Layout ================= */
.route66-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 10px;
}

.route66-two-cols .col-text h2 {
  color: #ff6600;
  font-size: 1.8rem;
  margin-bottom: 10px;
  /* text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);   */
}


.route66-two-cols .col-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #003366;
  margin-bottom: 1rem;
}

.route66-two-cols .col-img img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 991.98px) {
  .route66-two-cols {
    grid-template-columns: 1fr;
  }
  .route66-two-cols .col-img {
    order: -1;   /* Bild über oder unter Text – je nach Wunsch */
    margin-bottom: 20px;
  }
}



/* ==================== Sektion "Warum wir anders sind" ==================== */

/* Weiß über die gesamte Seitenbreite */
#sp-warum-wir-anders-sind {
  padding: 30px 0;
  background-color: #fff;
  text-align: center;
}

#sp-warum-wir-anders-sind .tour-services-heading {
  display: inline-block;
  background-color: #003366;
  padding: 18px 40px;
  border-radius: 8px; /* Radius */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  margin-bottom: 40px;
}


#sp-warum-wir-anders-sind .tour-services-heading h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Icon + Text in den Karten */
#sp-warum-wir-anders-sind .tour-icon {
  background: #003366;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

#sp-warum-wir-anders-sind .tour-icon i {
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

/* Text in den Karten */
#sp-warum-wir-anders-sind .ins-text {
  color: #111;
  font-size: 16px;
  line-height: 1.45;
}

/* Safety: Kein altes Helix-/Icon-Layout übernehmen */
#sp-warum-wir-anders-sind .ins-row i {
  background: none;
  width: auto;
  height: auto;
  padding: 0;
}

/* Abstand zwischen den Boxen */
#sp-warum-wir-anders-sind .card {
  margin-bottom: 25px;
}

#sp-warum-wir-anders-sind .col-sm-6 .card:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 991.98px) {

  #sp-warum-wir-anders-sind .ins-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #sp-warum-wir-anders-sind .tour-icon {
    margin: 0 0 12px 0;
  }
}





/* ==================== Zeile-Sektion "Mein Buch": hellgrauer Hintergrund ==================== */

 #sp-mein-buch {
  width: 100%;
  padding: 50px 0;
  border-top: 0px solid #d9d9d9;
  border-bottom: 0px solid #d9d9d9;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
}


/* Module innerhalb der Zeile */
#sp-mein-buch .sp-module {
  margin: 0;
}

/* === Linkes Modul (bottom1): Orange + Rahmen entfernen === */

#sp-mein-buch .sp-module,
#sp-mein-buch .sp-module .sp-module-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin-top: 0; /* ggf. anpassen, z. B. -10px */
  vertical-align: top;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Bild im linken Modul: ohne weißen Rahmen oder Abrundungen
#sp-mein-buch #sp-bottom1 img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block;
  max-width: 100%;
  height: auto;
}
*/


/* ========== Linkbutton orange (Allgemein) ========== */
a.link-btn,
.link-btn a {
  display: block;
  width: 100%;
  margin: 18px auto 0;
  padding: 12px 0;
  text-align: center;
  background-color: #ff6600;  /* Route 66 Orange */
  color: #ffffff !important;  /* Text immer weiß, auch wenn Links sonst orange sind */
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: background 0.25s ease, transform 0.2s ease;
  text-decoration: none !important;
}

/* Hover-Effekt */
a.link-btn:hover,
.link-btn a:hover {
  background-color: #e85c00;  /* dunkleres Orange beim Hover */
  transform: translateY(-2px);
  color: #ffffff !important;  /* bleibt weiß beim Hover */
}

/* ==================== Ende "Effekte Allgemein" ==================== */








/* ==================== Zeile/Sektion "FOOTER" ==================== */

/* ==================== dunkelblauer Hintergrund ==================== */

.site-footer {
  width: 100vw;                         /* volle Seitenbreite */
  margin-left: calc(50% - 50vw);        /* bricht aus Container aus */
  background-color: #003366;            /* dunkles Blau */
  color: #ffffff;
  padding: 50px 20px 40px;
  text-align: center;
  box-sizing: border-box;
}

/* Standard: gesamter Footer weiterhin mittig im Viewport */
.site-footer {
  text-align: center; /* beibehalten für zentrales Layout */
}

/* ABER: Spalten-Inhalte links ausrichten */
.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left; /* linksbündig in allen Spalten */
  gap: 20px;
}

/* Jede Spalte */
.site-footer .col-sm-3 {
  flex: 1 1 220px;
  min-width: 180px;
}

/* Logo mittig in der linken Spalte */
.site-footer .col-sm-3:first-child p {
  text-align: center;
}

/* ==================== Footer-Linkfarben: Template-Override ==================== */

/* Standard-Linkfarbe (weiß) */
.site-footer a,
.site-footer a:link,
.site-footer a:visited {
  color: #ffffff !important;          /* Weiß erzwingen */
  text-decoration: none !important;
  transition: color 0.3s ease;
}

/* Hover-Farbe */
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
  color: #ff6600 !important;          /* Orange beim Hover/Klick */
  text-decoration: none !important;
}

/* Footer-Textfarbe */
.site-footer p,
.site-footer h6 {
  color: #ffffff !important;
  margin: 0.3rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Optionale Feinheiten */
.site-footer h6 {
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

/* Responsive Anpassung */
@media (max-width: 991.98px) {
  .site-footer .row {
    flex-direction: column;
    text-align: center;
  }
  .site-footer .col-sm-3 {
    margin-bottom: 1.5rem;
  }
}

.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer h3 {
  color: #ff6600;                       /* Route66 Orange */
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.site-footer p {
  margin: 0.4rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e2e8f0;
}

.site-footer a {
  color: #ff6600;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Social Icons */
.site-footer .socials {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.site-footer .socials a {
  display: inline-block;
  font-size: 1.4rem;
  color: #ffffff;
  transition: transform 0.3s, color 0.3s;
}
.site-footer .socials a:hover {
  color: #ff6600;
  transform: scale(1.1);
}

/* Untere Leiste */
.site-footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: #cbd5e1;
}

/* Responsive Anpassungen */
@media (max-width: 991.98px) {
  .site-footer { padding: 40px 16px 30px; }
  .site-footer h3 { font-size: 1.1rem; }
  .site-footer p { font-size: 1rem; }
}






/* ==================== PARTNER-BEREICH ==================== */


/* Ganze Zeile (Sektion) in weiß */
#sp-unsre-partner {
  background: #fff;             /* weiß */
  width: 100%;
  padding: 0;                 /* etwas Innenabstand */
  border-top: 0px solid #d9d9d9;   /* optional: dezenter oberer Rand */
  border-bottom: 0px solid #d9d9d9;/* optional: dezenter unterer Rand */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03); /* leicht weiche Kante */
}


/* Überschrift wieder im Route66-Stil */
.partner-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.partner-title {
  text-align: center;
  color: #003366;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .5px;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin: 0 0 24px;
  position: relative;
}
.partner-title::after{
  content:"";
  display:block;
  width:88px;
  height:4px;
  background:#ff6600;
  border-radius:2px;
  margin:12px auto 0;
}

/* Eine Reihe, gleichmäßig verteilt – engerer Abstand */
.partner-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* gleichmäßig über die Breite */
  gap:14px;                       /* dichter zusammen */
  flex-wrap:nowrap;               /* auf Desktop eine Zeile */
  padding-inline:6px;             /* etwas Luft am Rand */
}

/* Logos: einheitliche Höhe -> größer */
.partner-item{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;                  /* schrumpfen erlaubt, kein Strecken nötig */
}
.partner-item img{
  height:100px;                    /* LOGO-GRÖSSE: hier anpassen */
  width:auto;
  max-width:none;                 /* HTML-Attribute width/height ignorieren */
  mix-blend-mode:luminosity;
  opacity:.85;
  transition:transform .25s ease, opacity .25s ease, mix-blend-mode .25s ease;
}
.partner-item:hover img{
  mix-blend-mode:normal;
  opacity:1;
  transform:scale(1.04);
}

/* Breakpoints */
@media (max-width: 1200px){
  .partner-item img{ height:78px; }
}
@media (max-width: 991.98px) {
  .partner-grid{ flex-wrap:wrap; justify-content:center; gap:20px 28px; }
  .partner-item img{ height:64px; }
}
@media (max-width: 600px){
  .partner-item img{ height:52px; }
}






/* ==================== RSFORM! PRO ==================== */

/* ==================== Kontaktformular Styling ==================== */
.rsform-container {
  background: #fff;
  padding: 2.5rem 2rem;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  max-width: 720px;
  margin: 0 auto;
}

.rsform-container h2 {
  font-size: 28px;
  font-weight: 900;
  color: #003366;
  margin-bottom: 1.2rem;
  text-align: center;
}

.rsform-input-box label {
  font-weight: 700;
  color: #003366;
  display: block;
  margin-bottom: 0.3rem;
}

/* ⇩ Rahmen etwas kräftiger & klarer ⇩ */
.rsform-input-box input,
.rsform-input-box textarea,
.rsform-input-box select {
  width: 100%;
  border: 2px solid #c3ccd8;            /* vorher #e2e6ea */
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  color: #1e2a35;
  transition: all .2s ease;
  background: #ffffff;                  /* vorher #fafafa */
  box-shadow: 0 0 0 1px rgba(0,0,0,.02);
}

/* Fokus noch etwas deutlicher */
.rsform-input-box input:focus,
.rsform-input-box textarea:focus {
  border-color: #ff6600;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,102,0,0.18); /* vorher 3px, etwas stärker */
}

/* Checkbox */
.rsform-checkbox label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.rsform-checkbox input[type=checkbox] {
  accent-color: #ff6600;
  margin-right: 6px;
}

/* Submit Button */
.rsform-submit-button {
  display: inline-block;
  background: #ff6600;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255,102,0,.35);
  transition: all .2s ease;
  cursor: pointer;
}
.rsform-submit-button:hover {
  background: #e45500;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,102,0,.45);
}

/* Pflichtfelder-Hinweis */
.rsform-required {
  color: #ff6600;
  font-weight: bold;
}


/* Pfeil im Dropdown-Feld */
/* Nur das Feld Staatsangehörigkeit (#land) */
#land.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* eigener SVG-Pfeil, unabhängig von Bootstrap */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpolygon points='0,0 14,0 7,10' fill='%23666'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px 10px !important;

    padding-right: 2.5rem !important;
    cursor: pointer;
}

/* Text vertikal mittig */
#land.form-select {
    height: calc(2.5rem + 2px) !important; /* 42px */
    line-height: calc(2.5rem + 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}






/* ===================== RSForm! Pro – Premium Look ===================== */
#userForm {
  --accent: #ff6600;      /* Route 66 Orange */
  --ink: #003366;         /* Dunkelblau */
  --line: #e6eaef;
  --bg: #ffffff;
  max-width: 820px;
  margin: 0 auto 2rem;
  background: var(--bg);
  border-radius: 12px;
  padding: 22px 22px 18px;
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  color: var(--ink);
}

/* Titel / Einleitungszeilen im Beitrag etwas absetzen */
#userForm h2, #userForm h3 {
  color: var(--ink);
  margin: 0 0 10px;
}

/* Felder-Layout: 2 Spalten auf Desktop, 1 Spalte mobil */
#userForm .rsform-block,
#userForm .formControls,
#userForm .formBody > div {
  margin-bottom: 14px;
}
@media (max-width: 991.98px) {
  #userForm .formBody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
  }
  /* große Felder über volle Breite */
  #userForm .rsform-block-textarea,
  #userForm .rsform-block-deine-anmerkungen,
  #userForm .rsform-block-captcha,
  #userForm .rsform-block-abschicken,
  #userForm .rsform-block-welcher-tour-termin,
  #userForm .rsform-block-bitte-waehle-zuerst-deine-art-der-anmeldung {
    grid-column: 1 / -1;
  }
}

/* Labels oben & klar lesbar */
#userForm label {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: inline-block;
}
#userForm .formRequired label::after,
#userForm .rsform-required label::after {
  content: " *";
  color: var(--accent);
  font-weight: 800;
}

/* ⇩ Inputs / Select / Textarea mit stärkeren Rahmen ⇩ */
#userForm input[type="text"],
#userForm input[type="email"],
#userForm input[type="tel"],
#userForm input[type="number"],
#userForm select,
#userForm textarea {
  width: 100%;
  appearance: none;
  border: 2px solid #c3ccd8;           /* vorher 1px solid var(--line) */
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 2px 0 rgba(0,0,0,.02) inset;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#userForm textarea { min-height: 140px; resize: vertical; }

#userForm input:focus,
#userForm select:focus,
#userForm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,102,0,.18);  /* etwas kräftiger als vorher */
}

/* Radio-Gruppen als „Chips“ (z. B. Anmeldungstyp & Termin) */
#userForm input[type="radio"] { display: none; }
#userForm input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 6px 0;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease;
  font-weight: 600;
}
#userForm input[type="radio"]:checked + label {
  border-color: var(--accent);
  background: rgba(255,102,0,.08);
}

/* Hinweise / „Bitte beachten“ Box */
#userForm .rsform-block-bitte-beachten,
#userForm .rsform-block-hinweis,
#userForm .notice-box {
  grid-column: 1 / -1;
  border-left: 4px solid var(--accent);
  background: #fff7f0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .95rem;
}

/* Captcha-Bereich kompakter */
#userForm .rsform-block-captcha,
#userForm .captcha,
#userForm .rsform-captcha-box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}
#userForm .rsform-captcha-refresh a { color: var(--accent); font-weight: 600; }

/* Fehlermeldungen modern & deutlich */
#userForm .formError,
#userForm .rsform-error,
#userForm .formRed {
  display: block;
  margin-top: 6px;
  color: #b00020;
  font-size: .9rem;
}
#userForm .invalid input,
#userForm .invalid select,
#userForm .invalid textarea {
  border-color: #b00020 !important;
  box-shadow: 0 0 0 3px rgba(176,0,32,.1) !important;
}

/* Aktionen (Absenden/Reset) */
#userForm .formActions,
#userForm .rsform-submit-button,
#userForm .rsform-reset-button {
  grid-column: 1 / -1;
}
#userForm input[type="submit"],
#userForm button[type="submit"]{
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 14px rgba(255,102,0,.28);
}
#userForm input[type="submit"]:hover { transform: translateY(-2px); background:#e55b00; }
#userForm input[type="submit"]:active { transform: translateY(0); }

#userForm input[type="reset"]{
  background: #e2e8f0;
  color: var(--ink);
  border: 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  margin-left: 10px;
}

/* Mobile: einspaltig & luftiger */
@media (max-width: 991.98px) {
  #userForm { padding: 18px 16px; }
  #userForm .formBody { display: block; }
}

/* ===================== Ende "RSForm! Pro " ===================== */








/* ===================== BILDERGALERIEN ===================== */

/* Abstand zum Modul darüber verkleinern */

/* Oberen Abstand des Hauptinhalts (sp-main-body) reduzieren */
#sp-main-body {
  margin-top: 20px !important;   /* vorher oft 60px–100px */
  padding-top: 0 !important;     /* optional, je nach Template */
}



/* Fotogalerien (3 Spalten, überall gleich) */

:root { --gallery-gap:18px; --gallery-radius:6px; }

.r66-gallery .gallery-wrap {
  max-width:1200px; margin:0 auto; padding:0 12px 32px;
}
.r66-gallery .gallery-title {
  font-size:clamp(1.6rem,3.5vw,2.6rem); text-align:center;
  margin:12px 0 22px; font-weight:600; color:#003366;
}
.r66-gallery .gallery {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--gallery-gap);
}
.r66-gallery .g-item { margin:0; }
.r66-gallery .g-item img {
  width:100%; height:auto; display:block;
  border-radius:var(--gallery-radius);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transition:transform .25s ease;
}
.r66-gallery .g-item img:hover { transform: translateY(-2px); }

@media (max-width:1024px){
  .r66-gallery .gallery { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
  .r66-gallery .gallery{
    display:flex; gap:var(--gallery-gap); overflow-x:auto; padding-bottom:8px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; position:relative;
  }
  .r66-gallery .g-item{ flex:0 0 85vw; scroll-snap-align:start; }
}


/* ===== GALERIE-ÜBERSICHT: 4 Spalten mit mehreren Kartenzeilen ===== */

/* ===== Galerie-Übersicht (Links auf viele Galerien) ===== */
.r66-gallery-overview {
  padding-top: 20px;               /* Abstand zum Header */
}

/* Jede Spalte (tour-box) */
.r66-gallery-overview .tour-box {
  background: #ff6600;                /* Weiße Boxen vor orangem Hintergrund */
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.1);
  margin-top: 0;                   /* kein extra Offset mehr nötig */
}

/* Titel innerhalb der Box */
.r66-gallery-overview .tour-title {
  margin: 0 0 12px;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #003366;
}

/* Kartenzeilen (weiße Pillen) */
.r66-gallery-overview .price-row {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 6px 12px;       /* minimal mehr Luft */
  margin: 5px;
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
}

/* Inhalt der Zeile */
.r66-gallery-overview .price-amount {
  display: flex;
  align-items: center;      /* vertikal zentrieren */
  justify-content: space-between;
  gap: 10px;
  font-weight: 400;         /* generell nicht so fett */
  color: #111;              /* Grundfarbe Text dunkel */
}

/* Tourname */
.r66-gallery-overview .price-amount .value {
  color: #000;              /* schwarz */
  font-weight: 400;         /* leicht betont, aber nicht fett */
}

/* (xxx Bilder-Link) – kleiner, zentriert ausgerichtet */
.r66-gallery-overview .price-amount small {
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: #555; /* neutrales Grau für Text ohne Link */
  text-decoration: none;
}

/* Nur wenn ein Link vorhanden ist → orange & unterstrichen */
.r66-gallery-overview .price-amount a small {
  color: #ff6600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

/* Hover-Effekt nur für verlinkte Version */
.r66-gallery-overview .price-amount a:hover small {
  color: #cc5200;
  text-decoration: none;
}



/* ===== Am Desktop/Laptop sichtbar, am Smartphone eingeklappt ===== */

/* Ab >= 992px (lg) Galerie-Modul trotz .collapse immer anzeigen */
@media (min-width: 992px) {
  .gallery-overview-target.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
  }
}








/* ==================== PARALLAX-BILDER ==================== */

/* ==================== Parallax - Bild über die gesamte Breite ("Die Erde...") ==================== */

/* 1) Vollbreite erzwingen – unabhängig vom .container/.row */
.parallax-erde{
  position: relative;
  width: 100vw !important;                 /* volle Viewportbreite */
  left: 50% !important;
  transform: translateX(-50%);             /* stabiler als calc-Margins */
  margin: 0 !important;

  /* Hintergrund / Parallax */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* Höhe / Innenabstand */
  min-height: 50vh;
  padding: 60px 0;

  /* Inhalt zentrieren */
  display: flex;
  align-items: center;                      /* vertikal */
  justify-content: center;                  /* horizontal */
  text-align: center;

  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

/* 2) Falls das Element als .row ausgegeben wird → Bootstrap-Ränder neutralisieren */
.parallax-erde.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Inhalt-bühne: jedes direkte Kind auf eine zentrierte max-Breite setzen */
.parallax-erde > *{
  width: 100%;
  max-width: 1200px;                        /* Wunschbreite für den Textbereich */
  padding: 0 16px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

/* 4) „Rechtsdrall“ im Helix/Bootstrap-Kontext neutralisieren */
.parallax-erde *{
  float: none !important;
}
.parallax-erde .pull-right,
.parallax-erde [class*="text-right"],
.parallax-erde [style*="text-align:right"]{
  text-align: center !important;
}

/* 5) Optik: Titel & Untertitel */
.parallax-erde h1,
.parallax-erde .h1{
  margin: 0 0 .4rem;
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: 1200;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.8);
}

.parallax-erde p{
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,.8);
}

/* 6) Overlay woanders deaktiviert? sicherheitshalber aus */
.parallax-erde::before{ content:none !important; }

/* 7) Mobile: fixed-Parallax deaktivieren (iOS/Android) */
@media (max-width: 991.98px){
  .parallax-erde{ background-attachment: scroll; padding: 40px 0; }
}







/* ===================== Abstände Hauptbeitrag auf der Startseite anpassen ===================== */

/* Gilt nur auf der Startseite */
body.home .item-page {
  margin-top: 1rem;   /* Abstand nach oben reduzieren (Standard oft ~4rem) */
  margin-bottom: 1rem; /* Abstand nach unten verringern */
  padding-top: 0;
  padding-bottom: 0;
}

/* Falls dein Template zusätzliche Section-Abstände hat */
body.home .sp-component {
  padding-top: 1rem !important;    /* war evtl. 4rem */
  padding-bottom: 1rem !important;
}

/* Optional: wenn zwischen Artikel & nächstem Modul zu viel Weißraum bleibt */
body.home #sp-main-body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}







/* ==================== TAGESETAPPEN ==================== */

/* ===== Stil für deine Tourtage (Bilder/Text unter „Tagesetappen“) ===== */
.tour-day {
  background: #f6f5f2;
  padding: 1rem 1.25rem 2rem;
  margin-bottom: 2rem;
  border-radius: 4px;
}

.tour-day h3 {
  background: #1f1f1f;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-radius: 3px;
}

.image-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.image-row img {
  flex: 1 1 48%;
  width: 48%;
  height: auto;
  border-radius: 3px;
  object-fit: cover;
}

.day-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #2b2b2b;
}

/* Entfernt die gestrichelte Linie und behält nur den Abstand */
.tour-day + .tour-day {
  padding-top: 2rem;
}

/* Responsive */
@media (max-width: 991.98px) {
  .r66-acc-btn {
    font-size: 1.2rem;
    padding: 16px;
  }

  /* Überschrift "Tag X" */
  .tour-day h3 {
    font-size: 1.45rem;   /* vorher 1.25rem */
    padding: 1rem;
  }

  /* Lauftext */
  .tour-day .day-text {
    font-size: 1.2rem;   /* vorher 1rem */
    line-height: 1.2;
  }

  /* Bilder untereinander statt nebeneinander */
  .image-row {
    flex-direction: column;
  }

  .image-row img {
    width: 100%;
  }
}





/* ==================== TOURENÜBERSICHT ==================== */

/* ==================== Tour-Box grau ==================== */

.tour-box {
  background: #fefefe;
  color: #003366;
  padding: 22px 26px;
  border-radius: 6px;
  font-family: inherit;
  /* max-width: 560px; <--- ENTFERNT, um die volle Grid-Breite zu erlauben */
  width: 100%;
  margin: 0 auto 1.25rem auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  position: relative;
}

.tour-header { margin-bottom: 14px; }

.tour-country {
  display: block;
  color: #ff6600;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.tour-title {
  font-size: 3rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.tour-date {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

/* Meta-Zeile oben in der Box */
.tour-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 10px;
  margin-top: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 0.9;
}
.meta-item i { font-size: 1rem; color: #003366; }

/* === Tour-Badge: oben rechts, immer proportional === */
.tour-badge {
  position: absolute;
  top: 15px;
  right: 18px;
  max-width: 240px;
  height: auto;
  aspect-ratio: auto;
  opacity: 0.95;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.tour-badge img { display: block; width: 100%; height: auto; border-radius: 2px; }
.tour-badge:hover { transform: scale(1.05); opacity: 1; }


/* === Preiskarte: 2 Zeilen (Items oben, Preis unten) === */

/* Sicherheitsnetz: Kartenabstand im Grid + Fallback über margin */
.tour-pricing {
  display: grid;
  row-gap: 3px; /* sichtbarer Abstand zwischen den 3 Karten */
  gap: 3px;
}

.price-row {
  /* vertikal stapeln */
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* einzelne, weiße Karten */
  background: #d9d9d9;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);

  /* größerer Abstand zwischen den 2 Zeilen */
  gap: 10px;

  padding: 5px 14px;
  margin: 0;           /* Grid regelt den Außenabstand */
}

/* Fallback, falls Grid-Gap nicht greift */
.price-row:not(:last-child) { margin-bottom: 12px; }

/* Obere Zeile: Items kleiner + Abstand zwischen Item-Gruppen */
.price-left {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;           /* Abstand zwischen den price-items */
  font-size: 0.8rem;
  line-height: 1.25;
}

/* Extra-Sicherheit für alte Browser ohne gap */
.price-left .price-item + .price-item { margin-left: 14px; }

.price-left .price-item i { font-size: 0.8rem; }

/* Untere Zeile: Preis linksbündig, etwas größer */
.price-amount {
  text-align: left;
  min-width: 0;
  align-self: flex-start;
}
.price-amount .value {
  font-size: 1rem;    /* etwas größer als vorher */
  font-weight: 600;
  color: #ff6600;
}
.price-amount small {
  font-size: .75rem;     /* „pro Person“ wie zuvor */
}

/* Responsive */
@media (max-width: 991.98px) {
  .tour-pricing { row-gap: 10px; }
  .price-row { gap: 12px; }
}

/* Anmeldebutton orange */
.tour-btn {
  display: block;
  /* max-width: 480px; <--- ENTFERNT, damit der Button die volle Breite der Tour-Box nutzt */
  width: 100%;
  margin: 18px auto 0;         /* Abstand nach oben, zentriert */
  padding: 12px 0;
  text-align: center;
  background-color: #ff6600;  /* Route 66 Orange */
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: background 0.25s ease, transform 0.2s ease;
  text-decoration: none;
}

.tour-btn:hover {
  background-color: #e55b00;  /* etwas dunkleres Orange */
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.tour-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 991.98px) {
  .tour-btn {
    width: 100%;
    margin-top: 14px;
    font-size: 0.95rem;
  }
}






/* ==================== Tourbild (Parallax) oben mit Text ==================== */

.parallax-hero {
  /* Layout */
  position: relative;
  min-height: 700px;
  display: flex;                    /* flex statt grid */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hero-gap, 0.2rem);     /* Abstand h1 <-> p */
  text-align: center;
  color: #fff;

  /* Hintergrund / Parallax */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

/* ---- Entfernt das globale Overlay ---- */
.parallax-hero::before {
  content: none !important;
}

/* ---- Entfernt den Hintergrund um den Text ---- */
.parallax-hero .hero-text {
  background: none !important;      /* keine dunkle Fläche */
  padding: 0;
  border-radius: 0;
  display: inline-block;
}

/* Sicherstellen, dass Text über allem liegt */
.parallax-hero > * {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1;
}

/* Haupttitel */
.parallax-hero h1,
.parallax-hero .h1 {
  color: #fff;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.8); /* weicher, dunkler Schatten */
}

/* Untertitel */
.parallax-hero p {
  color: #fff;
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  font-weight: 400;
  opacity: 0.95;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* dezenter Schatten */
}

/* Reset gegen Joomla/Bootstrap Margins */
.parallax-hero h1[class*="mb-"],
.parallax-hero p[class*="mb-"],
.parallax-hero h1[class*="mt-"],
.parallax-hero p[class*="mt-"] {
  margin: 0 !important;
}

/* Mobile-Fallback */
@media (max-width: 991.98px) {
  .parallax-hero { background-attachment: scroll; }
}





/* ==================== TOUR-LISTING (Info | Preis | Button) ==================== */

/* ==================== Preis-Listing Startseite: Info | Preis | Button ==================== */

.tour-list{
  display:flex; flex-direction:column; gap:22px;
  max-width:1100px; margin:0 auto; padding:10px 20px;
}

.tour-item{
  display:grid;
  grid-template-columns: 1fr auto auto; /* Info | Preis | Button */
  align-items:center; column-gap:22px;
  background:#d9d9d9; border:1px solid #e2e6ea; border-radius:12px;
  padding:22px 26px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .3s ease;
}
.tour-item:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.10); }

.tour-title{ font-size:18px; font-weight:800; color:#003366; margin:0 0 6px; }
.tour-desc{ margin:0; color:#333; line-height:1.5; font-size:15px; }
.tour-meta{ color:#6a7a8a; font-weight:600; font-size:14px; }

.tour-price{
  white-space:nowrap;
  font-weight:800; font-size:18px; color:#003366;
  text-align:right; min-width:130px;
}

/* Orangener, abgerundeter Button mit weißer Schrift */
.btn-tour{
  display:inline-block; background:#ff6600; color:#fff !important;
  font-weight:800; letter-spacing:.02em; text-decoration:none;
  padding:10px 20px; border-radius:999px; /* pill/abgerundet */
  box-shadow:0 4px 10px rgba(255,102,0,.25);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-tour:hover{ background:#e45500; transform:translateY(-1px); box-shadow:0 6px 14px rgba(255,102,0,.35); }
.btn-tour:active{ transform:translateY(0); }

/* Mobile: untereinander, Preis über Button vollbreit */
@media (max-width: 991.98px) {
  .tour-item{
    grid-template-columns: 1fr; row-gap:12px; padding:18px 18px;
  }
  .tour-price{ text-align:left; font-size:17px; }
  .btn-tour{ width:100%; text-align:center; }
}
/* ==================== Fix: Weiße Blöcke volle Breite ==================== */

/* Der weiße Info-Block im grauen Container soll immer gleich breit sein */
.tour-item > *:first-child {
  width: 100%;
  max-width: none;
  display: block;
}

/* Falls der weiße Block eine eigene Klasse hat (z. B. .tour-info oder .tour-card),
   greift diese Regel zusätzlich */
.tour-info {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}


/* ==================== Begrüßung unter Slider (links Bild, rechts Text) ==================== */

/* Weißer Hintergrund über gesamte Zeilenbreite */
#sp-begruessung-unter-slider {
  background: #fff !important;  /* weiss */
  width: 100%;
  padding: 5px 0 20px 0; /* Weniger Abstand oben (10px) und unten (20px) */
  color: #003366; /* Blauer Text */
  margin-bottom: 0 !important; /* Abstand nach unten entfernen */
}

/* Optional: sorgt dafür, dass Module nebeneinander (z. B. Bild + Text) korrekt angezeigt werden */
#sp-begruessung-unter-slider .row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Optional: etwas Abstand zwischen linkem und rechtem Modul */
#welcome-img {
  margin-right: 30px;
}









/* ==================== Motorrad-Touren mit Icons ==================== */

#sp-unsere-motorradtouren {
  background: #fff;
  width: 100%;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
}

#user1.tour-services {
  width: 100%;
  background: #fff;
  padding: 0;
}

#user1 .tour-services-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0 40px;
}

/* Überschrift – Dunkelblauer Balken */
#user1 .tour-services-heading {
  display: inline-block;
  background: #003366;
  color: #fff;
  padding: 14px 40px;
  border-radius: 8px; /* Radius */
  margin-bottom: 70px; /* Mehr Platz unter dem Balken */
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* HIER: h2 -> h3 + Farbe absichern */
#user1 .tour-services-heading h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: #fff !important;      /* falls das Template Typo-Farben erzwingt */
}

/* Icons-Container */
#user1 .tour-services-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

/* Einzelne Leistung */
#user1 .service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 140px;
  transition: transform 0.2s ease, background 0.3s ease;
}

/* Runder Icon-Hintergrund auf eigener Klasse (.tour-icon) */
#user1 .tour-icon {
  background: #003366;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Das eigentliche Font-Awesome-Icon */
#user1 .tour-icon i {
  color: #fff;
  font-size: 28px;
  line-height: 1;
}


/* Falls vorhanden: alte Kreis-Regel aufheben */
#user1 .service-item i {
  background: none;
  width: auto;
  height: auto;
  padding: 0;
}


/* Text unter dem Icon */
#user1 .service-item p {
  font-weight: 700;
  font-size: 14px;
  color: #003366;
  margin: 0;
}

/* Hover-Effekt */
#user1 .service-item:hover {
  transform: translateY(-6px);
}
#user1 .service-item:hover .ins-icon {
  background: #ff6600;
}








/* ===== Mobil-Symmetrie per Grid ===== */

/* Tablets & Phones: 3 saubere Spalten */
@media (max-width: 991.98px) {
  #user1 .tour-services-inner {
    padding: 40px 14px 30px;
  }

  /* statt Flex jetzt Grid mit festen Spalten */
  #user1 .tour-services-icons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;          /* horizontaler Abstand */
    row-gap: 28px;             /* vertikaler Abstand */
    justify-items: center;     /* Inhalte je Zelle mittig */
    align-items: start;
  }

  /* Items füllen die Grid-Zelle, keine feste max-width */
  #user1 .service-item {
    width: 100%;
    max-width: none;
  }

  #user1 .service-item i {
    width: 76px;
    height: 76px;
    font-size: 26px;
    margin-bottom: 10px;
  }

  #user1 .service-item p {
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    margin: 0 auto;
    max-width: 10ch; /* zweizeilig, schön zentriert */
  }

  /* Überschrift etwas kompakter */
  #user1 .tour-services-heading {
    padding: 12px 22px;
    margin-bottom: 36px;
  }
  #user1 .tour-services-heading h2 {
    font-size: 22px;
    line-height: 1.1;
  }
}

/* Sehr kleine Phones: 2 Spalten */
@media (max-width: 991.98px) {
  #user1 .tour-services-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 24px;
  }

  #user1 .service-item i {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }

  #user1 .service-item p {
    font-size: 13px;
    max-width: 12ch;
  }
}




/* DJ-ImageSlider: Beschreibungsfläche transparent */
#djslider110 .slide-desc-bg,
#djslider110 .slide-desc-bg.slide-desc-bg-default {
  background: transparent !important;
}




/* ==================== ANGEBOTENE TOUREN STARTSEITE =================== */

/* Touren: Ribbons schräg über dem Bild */
.tour-card {
  position: relative;
  overflow: hidden;
}
.tour-card .tour-img { position: relative; }
.tour-card .ribbon {
  position: absolute;
  top: 15px;
  left: -40px;
  transform: rotate(-45deg);
  z-index: 3;
  padding: 6px 35px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  background: #444;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.tour-card.status--soldout  .ribbon { background: #d32f2f; }
.tour-card.status--waitlist .ribbon { background: #f57c00; }
.tour-card.status--few      .ribbon { background: #2e7d32; }
.tour-card .ribbon.right { left: auto; right: -40px; transform: rotate(45deg); }

/* ===== Orange Hintergrund für die Tour-Zeilen (IDs anpassen, falls nötig) ===== */
#sp-touren-1.orange-section,
#sp-touren-2.orange-section,
section.orange-section {
  background: #ff6a00 !important;
  padding: 24px 0; /* etwas Luft, damit Orange sichtbar ist */
}

/* ===== Weißer Kartenrahmen um jedes Tour-Modul innerhalb der orangen Sektion ===== */
.orange-section .sp-module {
  background: #fff;
  border-radius: 12px;
  padding: 18px 18px 22px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  margin-bottom: 24px;
}

/* Bilder im Modul sauber */
.orange-section .sp-module img,
.orange-section .sp-module .img-fluid {
  width: 100%;
  height: auto;
  display: block;
}



/* ===== Preis-Button orange rechts unten vom Bild ===== */

/* Container für Bild und Button */
.tour-image-container {
  position: relative;
  display: inline-block;
}

/* Bild selbst */
.tour-image-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* optional */
}

/* Preis-Button unten rechts im Bild */
.price-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: linear-gradient(145deg, #ff7a1a, #e55a00); /* Licht von oben links */
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  transform: rotate(-12deg);
  z-index: 2;

  /* Achteckige Form */
  clip-path: polygon(
    30% 0%, 70% 0%, 100% 30%, 100% 70%, 
    70% 100%, 30% 100%, 0% 70%, 0% 30%
  );

  /* 3D-Schattierung */
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.4),  /* Glanzkante oben links */
    inset -3px -3px 6px rgba(0, 0, 0, 0.3),      /* Schatten innen unten rechts */
    0 3px 8px rgba(0, 0, 0, 0.25);               /* äußerer Schatten */
  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-Effekt mit "Push"-Animation */
.price-badge:hover {
  transform: rotate(-12deg) translateY(-3px) scale(1.05);
  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.5),
    inset -2px -2px 5px rgba(0, 0, 0, 0.4),
    0 6px 12px rgba(0, 0, 0, 0.3);
}







/* ===== Ribbon/Teaser bleibt wie gehabt ===== */
.tour-card { position: relative; overflow: hidden; }
.tour-card .tour-img { position: relative; }

/* ===== Button im Modul (dein <p class="link-btn"><a>…</a></p>) ===== */
p.link-btn { margin: 18px 0 0; }
p.link-btn a {
  display: block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  background: #ff6600;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: .5px;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
  transition: background .25s ease, transform .2s ease;
}
p.link-btn a:hover {
  background: #e85c00;
  transform: translateY(-2px);
}





/* ==================== SLIDESHOW ==================== */

/* Optional: Andersfarbiger Hintergrund über gesamte Zeilenbreite

#sp-slideshow {
  background: #ff6600 !important;
  width: 100%;
}
 */


/* Entfernt Abstände über und unter dem Slider */

#sp-slider, 
#sp-slideshow {
  margin: 0 !important;
  padding: 0 !important;
}

/* Falls Helix automatisch Abstände um Module legt */
#sp-slider .sp-module, 
#sp-slideshow .sp-module {
  margin: 0 !important;
  padding: 0 !important;
}


/* Slider-Sektion über die gesamte Bildschirmbreite */
#sp-slideshow > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* Optional: inneren Wrapper ebenfalls strecken */
#sp-slideshow .container-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}


/* Pfeile etwas nach innen holen */
#sp-slideshow .slideshowck .camera_prev {
  left: 25px !important;   /* Abstand vom linken Rand */
}

#sp-slideshow .slideshowck .camera_next {
  right: 25px !important;  /* Abstand vom rechten Rand */
}



/* Caption-Text zentrieren */
#sp-slideshow .slideshowck .camera_caption {
    text-align: center !important;
}

/* Optional: etwas Abstand links/rechts für die Lesbarkeit */
#sp-slideshow .slideshowck .camera_caption * {
    padding-left: 25px;
    padding-right: 25px;
}



/* Hintergrund der Caption auf Dunkelblau ändern */
#sp-slideshow .slideshowck .camera_caption {
    background: #003366 !important;
}

#sp-slideshow .slideshowck .camera_caption > div {
    background: #003366 !important;
}


/* Navigation (Punkte mittig unter der Slideshow) zentrieren */
.camera_wrap .camera_pag_ul {
    text-align: center !important;
}







/* ==================== ORANGE HINTERGRUND über gesamte Zeilenbreite ==================== */

/* ==================== TÜRKIS HINTERGRUND über gesamte Zeilenbreite ==================== */

.orange-section .container {
  background-color: #66b2ff; /* Fallback, falls Bild nicht geladen wird */
  padding: 40px 0;
}

/* Optionales Hintergrundbild
.orange-section .container {
  background-image: url("/images/travel/bg_dirt_road4_orange.jpg");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
*/





/* ==================== Weiße Modulboxen ==================== */

.orange-section .sp-module,
#sp-bottom1 .sp-module {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  padding: 20px;
  margin: 15px;
  color: #000;
}



/* ==================== Überschriften und Textfarben anpassen ==================== */

.orange-section .sp-module h3,
#sp-bottom1 .sp-module h3 {
  color: #000;
}

.orange-section .sp-module a,
#sp-bottom1 .sp-module a {
  color: #ff6600;
}
.orange-section .sp-module a:hover {
  color: #000;
}





/* ==================== Animierter Finger auf der 404-Error-Seite ==================== */

.error-message {
    text-align: center !important;
}

/* Icon zentrieren und etwas animieren */
.error-hand-icon {
    width: 48px;
    height: auto;
    margin: 10px auto 0;  /* zentriert durch auto */
    display: block;
    animation: handBounce 1.5s infinite ease-in-out;
    opacity: 0.9;
}

@keyframes handBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}







/* =============== Dezent strukturierter Hintergrund für die ganze Seite =============== */

/* Nur Farbe */

body {
  background-color: #f2e4d5 !important;          /* leicht beiger Fallback-Ton */
}

/* Optional: Mit Hintergrundbild

body {
  background-image: url("/images/travel/bg_dirt_road4.jpg") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-attachment: fixed !important; 
  background-position: center top !important;
  background-color: #f2e4d5 !important;
}
*/



/* =============== Hintergrund für die komplette Touren-Sektion über volle Breite =============== */

#sp-touren-1.orange-section,
#sp-touren-2.orange-section {
  background-color: #66b2ff !important; /* Fallback */
  /*
  background-image: url("/images/travel/bg_dirt_road4_orange.jpg") !important;
  background-repeat: repeat !important;
  background-position: top left !important;
  background-size: auto !important;   */
}








/* ============================================
             MOBILE HEADER FIX
   ============================================ */
@media (max-width: 991.98px) {

  /* Header-Höhe + etwas Innenabstand */
  #sp-header {
    min-height: 96px !important;
    padding: 8px 12px !important;
  }

  /* Container, der Logo + Menü enthält */
  #sp-header .menu-wrap {
    display: flex !important;
    align-items: center !important;       /* vertikal zentrieren */
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* Logo: links, vertikal zentriert, etwas größer */
  #sp-logo,
  #sp-logo .sp-column {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }

  #sp-header .logo img,
  #sp-header .logo-image img {
    max-height: 72px !important;          /* ggf. 76/80 testen */
    height: auto !important;
    width: auto !important;
    display: block !important;
  }

  /* Menü / Burger: kein flex-auto, komplett nach rechts */
  #sp-menu,
  #sp-menu.menu-with-social {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }

  #sp-menu .sp-column {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Offcanvas-Toggler selbst (der Burger) */
  #offcanvas-toggler,
  .offcanvas-menu-toggler,
  .sp-toggle-offcanvas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ============================================
   MOBILE: Logo feinjustieren (nach unten)
   ============================================ */
@media (max-width: 991.98px) {
  #sp-header .logo img,
  #sp-header .logo-image img {
    position: relative !important;
    top: 10px !important;        /* Logo etwas nach unten */
  }
}


/* ============================================
                OFFCANVAS-Menü
   ============================================ */


/* 2) Link-Farben im Offcanvas-Menü */
/* normale Farbe für alle Links */
.offcanvas-menu .menu li a {
    color: #555 !important;
}

/* Hover + aktiver Menüpunkt (z.B. TOUREN) */
.offcanvas-menu .menu li a:hover,
.offcanvas-menu .menu li a:focus,
.offcanvas-menu .menu li.active > a,
.offcanvas-menu .menu li.current > a {
    color: #000 !important;
}

/* Pfeil-Icons (>) neben Punkten mit Untermenü */
.offcanvas-menu .menu .deeper > a::after,
.offcanvas-menu .menu .parent > a::after {
    color: #888 !important;
}
.offcanvas-menu .menu .deeper > a:hover::after,
.offcanvas-menu .menu .parent > a:hover::after {
    color: #000 !important;
}

/* 3) Größerer Abstand NUR im Submenü */
.offcanvas-menu .menu .nav-child > li > a {
    display: block !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    line-height: 2.0 !important;
}

/* Abstand zwischen den Submenü-Zeilen */
.offcanvas-menu .menu .nav-child > li {
    margin-bottom: 10px !important;
}



/* ============================================
   OFFCANVAS CLOSE-BUTTON – sauberes X
   ============================================ */

/* Klickfläche oben rechts */
.offcanvas-menu .close-offcanvas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Container für die Linien */
.offcanvas-menu .close-offcanvas .burger-icon {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
}

/* Alle drei Spans als Linien vorbereiten */
.offcanvas-menu .close-offcanvas .burger-icon span {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    height: 2px !important;
    background-color: #000 !important;   /* Farbe des X */
    border-radius: 1px !important;
    transition: none !important;
}

/* obere Linie → Teil des X */
.offcanvas-menu .close-offcanvas .burger-icon span:nth-child(1) {
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

/* mittlere Linie ausblenden */
.offcanvas-menu .close-offcanvas .burger-icon span:nth-child(2) {
    display: none !important;
}

/* untere Linie → zweiter Teil des X */
.offcanvas-menu .close-offcanvas .burger-icon span:nth-child(3) {
    top: 50% !important;
    transform: translateY(-50%) rotate(-45deg) !important;
}