angebotsboxhtml {height:100%; overflow-y:scroll;}

body {
	color:#000000;
 	font-size:9pt;
 	font-family: 'Open Sans', sans-serif;
	margin:0pt;
	-webkit-text-size-adjust: none;
}
       .faq-container {
            width: 100%;
						border-radius: 5px;
						border-width: 1px;
						border-style: solid;
						border-color:#e3d7cb;
						padding:8px;
						padding-bottom:10px;
						box-sizing: border-box;
						
						
						
        }
        h1 {
            text-align: left;
            font-size: 24px;
            color: #333;
        }
        p.subtitle {
            text-align: left;
            color: #666;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .faq-item {
            border-bottom: 1px solid #ddd;
            padding: 15px 0;
            cursor: pointer;
        }
        .faq-item:last-child {
            border-bottom: none;
        }
        .faq-question-container {
            display: flex;
            align-items: center;
        }
        .faq-icon {
            font-size: 18px;
            color: #007bff;
            margin-right: 10px;
            transition: transform 0.3s ease;
        }
        .faq-question {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        .faq-answer {
            display: none;
            padding: 10px 0;
						padding-left: 20px;
            font-size: 14px;
            color: #555;
        }
        .faq-item.active .faq-answer {
            display: block;
        }
        .faq-item .faq-icon::before {
            content: "+";
        }
        .faq-item.active .faq-icon::before {
            content: "-";
						padding-right:4px!important;
        }

FONT		 {font-size: 14px; font-family: 'Open Sans', sans-serif;}


P {font-family: 'Open Sans', sans-serif; font-size: 1.125rem; line-height: 1.75rem; margin-top:0px;}

.date-input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
	font-size:14px;
	background-color:#f6f6f7;
	border-color:#f6f6f7; border-width:1px; border-style:solid;
}


.mehrspaltig {
	margin-left:0px;
	width:100%;
	max-width:1200px;
	column-count:2;
	column-gap:3em;
	text-align: left;
}
.mehrspaltig h2 {
    break-inside: avoid; /* Verhindert, dass eine Überschrift mitten in einer Spalte beginnt */
    margin-top: 0; /* Entfernt zusätzlichen Abstand oben */
}

.mehrspaltig h3 {
    break-inside: avoid; /* Verhindert, dass eine Überschrift mitten in einer Spalte beginnt */
    margin-top: 0; /* Entfernt zusätzlichen Abstand oben */
}


DIV			 {font-family: 'Open Sans', sans-serif; font-size: 1.0rem;  line-height: 1.75rem;}

TD			 {font-size: 14px; font-family: 'Open Sans', sans-serif;}

FORM 		 {font-size: 11px; font-family: 'Open Sans', sans-serif;}
INPUT		 {font-size:  8pt; font-family: 'Open Sans', sans-serif;}
TEXTAREA {font-size:  8pt; font-family: 'Open Sans', sans-serif;}
SELECT	 {font-size:  8pt; font-family: 'Open Sans', sans-serif;}

IMG 		 {border:0px;}

h1 {font-size: 1.85rem; line-height: 2.0rem; font-family: 'Open Sans', sans-serif; color:#09428a; font-weight:lighter; margin-bottom:10px;}
h2 {margin-bottom:10px; font-size: 18pt; font-family: 'Open Sans', sans-serif; color:#09428a; font-weight:lighter; padding-top:10px; border-top: 1px dotted #014578;}
h3 {font-size: 16pt; font-family: 'Open Sans', sans-serif; color:#09428a; font-weight:lighter;}
h4 {font-size: 9pt; font-family: 'Open Sans', sans-serif; color:#000000;}
h5 {font-size: 9pt; font-family: 'Open Sans', sans-serif; color:#a09fa2;}
h6 {font-size: 8pt; font-family: 'Open Sans', sans-serif; color:#000000;}

hr {border: 0px; border-bottom: 1px dotted #014578;}

ul {list-style-type:square; margin-top:0px;}
li {font-family: 'Open Sans', sans-serif; font-size: 1.125rem; line-height: 1.75rem;}

a:link		{color:#0056B3;}
a:hover   {color:#09428a; outline: none;}
a:visited {color:#0056B3; outline: none;}
a:active	{color:#0056B3; outline: none;}
a:focus	  {color:#0056B3; outline: none;}

.blau {color:#09428a; font-family: 'Open Sans', sans-serif; font-size: 1.0rem;}

.absatz {height:20px;}

.ausblenden2 {visibility:hidden; display:none;}


.hinweisbox {
  background-color: #f5f8fb;
  border: 1px solid #dce4ec;
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 24px;
  color: #003366;
  font-size: 16px;
  line-height: 1.5;
}


.seitenbreitenavioben {width:100%; max-width:1400px; margin-right:auto; margin-left:auto;}

.navieinaus {padding-left:0px; text-align:left; margin-left:24px;}

.kopfmenu {font-family: 'Vollkorn', serif; BACKGROUND: none; font-size:25pt; color:#565655; letter-spacing: 1px;}


.personen-container {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 1px) / 3)); /* bei gap: 8px → 2 Lücken = 16px */
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}


.personenboxstyle {
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  text-decoration: none;
  position: relative;
  display: block;
}





.personentextblock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,51,102,0.85);
    color: #fff;
    padding: 6px 10px;
    height: 72px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.personentextblock h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.personentextblock p {
    margin: 2px 0 0;
    font-size: 13.5px;
    line-height: 1.2;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



@media screen and (max-width: 1024px) {
  .personen-container {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media screen and (max-width: 600px) {
  .personen-container {
    grid-template-columns: 100%;
  }
}

/* Scrollbare Version nur auf Startseite, nur auf kleinen Screens */
@media (max-width: 768px) {
  .personen-startseite .personen-container {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .personen-startseite .personenboxstyle {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}







.bootsbeschreibung {float:left; width:340px; margin-right:15px; height:214px; padding-left:5px;}

.skipper-overlay-bg {
  margin-top: -60px;
  width: 100%;
  height: 55px;
  background-color: #2a3534;
  opacity: 0.8;
}

.skipper-textblock {
  position: absolute;
  top: auto;
  margin-top: -60px;
  width: 280px;
  height: 60px;
  padding-left: 5px;
  padding-top: 7px;
  font-family: Arial, sans-serif;
  font-size: 23px;
  font-weight: normal;
  color: white;
}

.skipper-title {
  font-size: 23px;
  font-weight: normal;
  color: white !important;
  text-decoration: none;
}

.skipper-sub {
  display: block;
  font-size: 14px;
  color: white;
  line-height: 18px;
  margin-top: 2px;
}




.bootsbild {
    float: left;
    position: relative;
    
    margin-right: 15px;
}

.bootsbild img {
    display: block;
}

.overlay-balken {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #2a3534;
    opacity: 0.7;
    z-index: 1;
}

.overlay-text {
    position: absolute;
    bottom: 15px;
    left: 10px;
    z-index: 2;
    color: white;
    font-style: normal;         /* kein Kursiv */
    font-size: 16px;            /* kleinerer Text */
    line-height: 30px;          /* vertikal mittig im 30px hohen Balken */
    font-family: inherit;       /* übernimmt Standardschrift der Seite */
}



.personen-info {
    font-size: 0.9em;
    color: #777;
    margin-top: 0px;
    margin-bottom: 0px; /* HIER gezielt nur kleiner Abstand */
}




.vermieterinfo {
    font-size: 0.9em;
    color: #777;
    margin-top: -10px;
    margin-bottom: 0px; /* HIER gezielt nur kleiner Abstand */
}



/* Bild-Wrapper für die Overlay-Funktion */
.bootstypen-overlay-wrapper {
    position: relative;
    width: 100%;
}


.basen-ueberschrift {
    margin-bottom: 7px;
    line-height: 1.1;
		text-align: left;
}

/* Bootsbilder mit Overlay */
.bootstypen-overlay-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay-Box über dem Bild */
.bootstypen-overlay-box {
    position: absolute;
    top: 55%;                              /* leicht nach unten versetzt */
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 10px;
    text-align: center;
    width: auto;
    max-width: 90%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 10;
    box-sizing: border-box;
    border-radius: 6px;
    white-space: nowrap;       /* Kein Umbruch */
}

/* Überschrift in der Overlay-Box – kleiner, nicht umbrechend */
.bootstypen-overlay-box b {
    color: #09428a;
    font-size: 0.85em;
    font-weight: bold;
    display: block;
    white-space: normal;          /* erlaubt Umbruch */
    word-break: break-word;      /* bricht an Wortgrenzen */
    overflow-wrap: break-word;   /* zusätzliche Absicherung */
    text-align: left;
		margin-bottom: 0; /* Kein Abstand zur Selectbox */
}

/* Auswahlbox selbst – klein wie früher */
.bootstypen-overlay-box select {
	 margin-top: 0;
    width: auto;
    max-width: 100%;
    min-width: 220px;
    font-size: 0.85em;
    padding: 2px 4px;
    line-height: 1.2;
    box-sizing: border-box;
}


/* Anzeige nur bei Hover */
.bootstypen-overlay-wrapper:hover .bootstypen-overlay-box {
    display: block;
}


.bootstypen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    gap: 8px;
}

.bootstypen-name {
    font-size: 1.1em;
    color: #09428a;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bootstypen-badge img {
    height: 22px;
    margin-left: 6px;
    vertical-align: middle;
}



.bootstypen-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
}

.bootstypen-box {
    flex: 0 0 calc(33.333% - 16px);
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 280px;
}

.bootstypen-image {
    width: 100%;
    height: auto;
    display: block;
}

.bootstypen-info {
    margin-top: 8px;
}

.bootstypen-title,
.bootstypen-title:link,
.bootstypen-title:visited {
    color: #09428a;  /* Einheitlicher Farbton wie Überschrift */
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin-top: 8px;
}

.bootstypen-title:hover,
.bootstypen-title:active {
    text-decoration: underline;
    color: #09428a;
}

.bootstypen-details {
    font-size: 0.9em;
    color: #666;
    margin-top: 4px;
}


@media (max-width: 768px) {
    .bootstypen-box {
        flex: 1 1 calc(50% - 16px);
    }
}

@media (max-width: 480px) {
    .bootstypen-box {
        flex: 1 1 100%;
    }
}








.base-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

/* 5 Spalten auf großen Bildschirmen */
@media (min-width: 1400px) {
    .base-list-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.base-list-item {
    background-color: #f5f8fb;
    border: 1px solid #dbe3eb;
    border-radius: 8px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.base-list-link {
    display: block;
    padding: 8px 14px; /* weniger Innenabstand oben/unten */
    text-decoration: none;
    color: #1a2a4f;
    position: relative;
		margin-top:-3px;
}

.base-list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.base-list-title {
    font-size: 16px; /* leicht reduziert */
    font-weight: 600;
    color: #1a3e78;
}

.base-list-icon {
    font-size: 16px;
    color: #1a3e78;
    margin-left: 8px;
}

.base-list-location {
    font-size: 13px;
    color: #4f6480;
    margin-top: 2px; /* enger an Titel gerückt */
}

.base-list-item:hover {
    background-color: #e9f0f9;
    box-shadow: 0 4px 10px rgba(0, 30, 60, 0.08);
}

.base-list-title,
.base-list-location {
    line-height: 1.2;
}





/* Menü-Wrapper */
.mein-menue-wrapper {
  width: 100%; /* Wunschbreite */
	max-width: 1351px;
  display: table; /* gleichmäßige Zellen */
  table-layout: fixed; /* gleiche Breite */
  border-spacing: 0; /* kein Abstand */
	margin-left: auto;
	margin-right: auto;
	/* transform: translateX(-12px);  leichte Verschiebung */
	
}


.mein-menue-wrapper .menupunkt {
  box-sizing: border-box; /* Padding einberechnen */
  padding: 10px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 60px;
  white-space: nowrap;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 12px;
  background: none;
  outline: none;
  /* optional feste Mindestbreite zur Stabilisierung */
  min-width: 1px;
}





/* Bild über dem Text */
.mein-menue-wrapper .menupunkt::before {
  display: block; /* wichtig: Bild über Text */
  margin: 0 auto 4px auto; /* zentriert + Abstand unten */
  content: ''; /* wird pro Menüpunkt spezifisch überschrieben */
  width: 32px; /* z.B. 32x32px, anpassbar */
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mein-menue-wrapper .menupunkt:hover {
  color: #09428A !important; /* Damit überschreibt es alles andere */
  background: #FFFFFF !important;
  text-decoration: none !important;
}

/* Aktiver Zustand */
.mein-menue-wrapper .menupunkt:active {
  background: none;
  color: #FFFFFF;
  text-decoration: none;
}

/* Besuchter Link */
.mein-menue-wrapper .menupunkt:visited {
  color: #FFFFFF;
  text-decoration: none;
}

/* Home */
.menuhomehb::before { background-image: url(/images/menu/home-weiss.png); }
.menuhomehb:hover::before { background-image: url(/images/menu/home-blau.png); }

/* Reviere */
.menurevierehb::before { background-image: url(/images/menu/place-weiss.png); }
.menurevierehb:hover::before { background-image: url(/images/menu/place-blau.png); }

/* Typen */
.menutypenhb::before { background-image: url(/images/menu/boot-weiss.png); }
.menutypenhb:hover::before { background-image: url(/images/menu/boot-blau.png); }

/* Angebote */
.menuangbotehb::before { background-image: url(/images/menu/angebote-weiss.png); }
.menuangbotehb:hover::before { background-image: url(/images/menu/angebote-blau.png); }


/* Online buchen HINTERGRUND */
.menuobhb {
  background: #fed53a!important; /* gelbe Hintergrundfarbe */
  color: #09428A!important; /* evtl. Textfarbe anpassen, wenn nötig */
}

/* Hover-Zustand von "Online buchen" (optional angepasst) */
.menuobhb:hover {
  background: #FFFFFF; /* z.B. Weiß beim Hover */
  color: #09428A; /* Lesbare Schrift beim Hover */
}

/* Optional: aktiver Zustand */
.menuobhb:active {
  background: #fed53a; /* bleibt gelb beim Klicken */
  color: #09428A;
}

/* Online buchen */
.menuobhb::before { background-image: url(/images/menu/online-buchen-blau.png); }
.menuobhb:hover::before { background-image: url(/images/menu/online-buchen-blau.png); }





/* Kataloge */
.menukatalogehb::before { background-image: url(/images/menu/kataloge-weiss.png); }
.menukatalogehb:hover::before { background-image: url(/images/menu/kataloge-blau.png); }

/* Kontakt */
.menukontakthb::before { background-image: url(/images/menu/kontakt-weiss.png); }
.menukontakthb:hover::before { background-image: url(/images/menu/kontakt-blau.png); }

/* Tipps */
.menutippshb::before { background-image: url(/images/menu/tipps-weiss.png); }
.menutippshb:hover::before { background-image: url(/images/menu/tipps-blau.png); }

/* Vermieter */
.menuvermieterhb::before { background-image: url(/images/menu/vermieter-weiss.png); }
.menuvermieterhb:hover::before { background-image: url(/images/menu/vermieter-blau.png); }


  .kontakt-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
  }

  .kontakt-block {
    flex: 1;
    min-width: 250px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #f9f9f9;
  }

  .kontakt-block b {
    display: block;
    font-size: 1.1em;
    margin-bottom: 10px;
  }

  .kontakt-block a {
    color: #0066cc;
    text-decoration: none;
  }

  .kontakt-block a:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .kontakt-container {
      flex-direction: column;
    }
  }

  .team-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
  }

  .team-box {
    flex: 1;
    min-width: 250px;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f9f9f9;
  }

  .team-image-wrapper {
    position: relative;
    width: 100%;
  }

  .team-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }

  .team-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(42, 53, 52, 0.75);
    color: #fff;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
  }

  .team-name {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }

  .team-role {
    font-size: 14px;
    color: #ffffff;
    line-height: 1.3em;
    margin-top: 4px;
  }

  @media (max-width: 768px) {
    .team-image-wrapper {
      height: auto;
    }

    .team-image-wrapper img {
      height: auto;
      object-fit: contain;
    }
  }


.seitenbreite {width:100%; max-width:1400px;}
.seitenbreitenachnavi {width:100%; max-width:1400px; background-color:#FFFFFF; position:relative; padding-top:161px; margin-left:auto; margin-right:auto;}
.bilderboxstartseite {padding-right:25px; padding-left: 25px; box-sizing: border-box;width:100%; margin-top:-21px;}
.slidertext {background:#f1f1f1; font-size:20px; padding:10px; padding-right:20px; position:absolute; margin-top:0px; margin-top:500px; float:left;}
.slidertext2 {color:#000000; font-size:20px;}
.textbreite {margin-left:24px; margin-right:24px; text-align:left; margin-top:20px;}

.iframe_kartengroesse {border: 1px solid #b0bd8e; width:100%; height:550px;}

.logozeilemobile {visibility:hidden; display:none;}

.wochenangebote_box {text-align:left; width:310px; height:430px; margin-right:15px; margin-bottom:15px; float:left; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px;}
.bootstypen_ergebnisse_box {text-align:left; width:310px; height:300px; float:left; margin-right:15px; margin-bottom:15px; padding:10px; border-width:1px; border-style:solid; border-color:#c0c0c0; box-shadow: 2px 2px 3px #e4e4e4;}


.wochenangebote_box_loca {text-align:left; width:95%; height:700px; margin-right:15px; margin-bottom:10px; float:left; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px; padding-bottom:52px;}


.personenboxstyle {background-color:#E9F2FB; text-align:center; margin-right:15px; margin-bottom:15px; float:left; padding:5px; padding-bottom:15px; padding-top:10px;}

.laenderbox {width:310px; height:350px;}

.hausboot_reviere_uebersicht {text-align:left; width:310px; height:350px; margin-right:15px; margin-bottom:15px; float:left; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px;}

.skippertippbox {text-align:left; width:310px; margin-right:15px; margin-bottom:15px; float:left; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px; padding-bottom:15px;}

.onlinebuchenbox {text-align:left; width:230px; height:280px; margin-right:10px; float:left; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px; padding-bottom:15px;}

.navibox {position:relative; top:0px; padding-top:0px; padding-bottom:0px; z-index:3; background-color:#09428a; width:100%; position: fixed; top:90px; left:0px;}


.schnellsuchbox {margin-top:2px; margin-right:4px; margin-top:0px;}

.hausbootsuchbox {width:21%; margin-left:24px; margin-right:-24px; background-color:#ffd300;}

.menufarbe    {background: none; font-size:9pt; color:#98c61b; text-decoration: none; margin:0px; line-height:23px;}

.fussnotentext {font-size:14px; color:#FFFFFF; line-height:15px;}

.ausstattungdiv {width:99%; margin-bottom:15px; background-color:#f6f6f7; padding:5px; line-height:25px; border-color:#e8e6e6; border-style:solid; border-width:1px;}

.aktionsstyle {height:115px; vertical-align:middle; display:table-cell; font-size:19px; color:#ffffff; font-weight:bold; line-height:28px; padding-left:0px; padding-right:2px; text-decoration:none;}

.blauebox {margin-top:10px; padding-left:7px; padding-top:6px; padding-bottom:8px; font-size:13px; border:1px solid #4F595E; background-color:#09428a; color:#FFFFFF; font-weight:bold; width:100%;}

.zuletztangesehen {text-align:left; width:250px; min-height:300px; float:left; margin-left:2px; margin-right:10px; background-color:#FED53A; margin-bottom:10px;}

.regionenliste {text-decoration:none; font-size:18px; color:#3d4f56; line-height:26px;}
.basis_bilduntertitel {text-decoration:none; font-size:18px; color:#3d4f56; line-height:26px; text-align:center;}

.abstandboxpfeil {width:95%; text-align:right; margin-top:-40px; position:absolute;}

.bootzuletztangesehen {width:250px; margin-right:10px;}

.positiongelberpfeil {margin-top:260px; margin-left:205px; position:absolute;}

.fussnote_partnerprogramm {font-size:small; line-height:18px; color:#b6b4b4; padding-left:25px; padding-right:25px;}

.eingabefelder {width:90%; height:25px; border-color:#09428A; border-width:1px; border-style:solid; margin-bottom:15px; margin-top:4px;}
.texteingabefeld {width:93%; border-color:#09428A; border-width:1px; border-style:solid; padding:10px; font-size:12px;}
.kurzesfeld {width:25px; height:25px; border-color:#09428A; border-width:1px; border-style:solid; margin-bottom:10px; margin-top:10px; padding-left:10px;}
.abschickfeld {width:95%; height:30px; border-color:#09428A; border-width:1px; border-style:solid; background-color:#09428A; color:#FFFFFF; font-size: 14px; font-weight: bold;}
.formularbox {width:50%; float:left; color:#6E7573;}

.video_einbindung_youtube {width:320px; height:180px;}

.dreispalten {width:30%; margin-right:25px; float:left;}
.abstandberatung {margin-left:10px;}
.abstandrueckfragen {margin-left:10px;}
.laenderkatalogauswahl {margin-bottom:10px; width:15%; float:left;}

.eingabefelder2 {width:71%; height:25px; border-color:#09428A; border-width:1px; border-style:solid; margin-bottom:15px; margin-top:4px;}
.kurzesfeld2 {width:40px; height:25px; border-color:#09428A; border-width:1px; border-style:solid; margin-bottom:10px; margin-top:10px;}

.eingabefeld {width:400px; padding-left:5px; height:30px; background-color:#FFFFFF; margin-right:22px; margin-top:15px; border: 1px solid #c0c1c2; font-weight:bold; color:#c0c1c2; font-size:11pt; font-family: 'Open Sans', sans-serif;}
.lupenstyle {text-align:right; width:100%; text-align:right; margin-left:-30px; margin-top:-30px;}



.buechertippboxen {float:left;}
.buecherseite_grafik {float:right; margin-left:10px; text-align:center; font-size: 8pt; color:#014578; line-height:12px;}

.zentralenboxtext {background-color:#F6F6F7; padding:5px; height:300px;}

.vermieterbox {padding:10px; padding-bottom:15px; float:left; margin-top:10px; width:230px; margin-right:10px; height:400px; border-width:1px; border-style:solid; border-color:#c0c0c0; box-shadow: 2px 2px 3px #e4e4e4;}
.vermieterlogo_ausrichtung {height:240px; width:100%; text-align:center; vertical-align:middle; margin-top:25px!important;}
.vermietername {margin-top:0px; margin-left:0px; width:100%; text-align:center;}

.menu:link    {background: none; font-size:14px; color:#a9a9a9; text-decoration: none; margin:0px;}
.menu:visited {background: none; font-size:14px; color:#a9a9a9; text-decoration: none; margin:0px; outline: none;}
.menu:hover   {background: none; font-size:14px; color:#014578; text-decoration: none; margin:0px; outline: none;}
.menu:active  {background: none; font-size:14px; color:#a9a9a9; text-decoration: none; margin:0px; outline: none;}

.menukontakt:link    {background: none; font-size:11px; color:#ebe9e9; text-decoration: none;}
.menukontakt:visited {background: none; font-size:11px; color:#ebe9e9; outline: none; text-decoration: none; outline: none;}
.menukontakt:hover   {background: none; font-size:11px; color:#fed53a; outline: none; text-decoration: none; outline: none;}
.menukontakt:active  {background: none; font-size:11px; color:#ebe9e9; outline: none; text-decoration: none; outline: none;}


.menukopf:link          {letter-spacing: 0.3px; font-family: 'Vollkorn', serif; BACKGROUND: none; font-size:15pt; color:#565655; text-decoration: none; text-transform: uppercase; vertical-align: middle; border-left: 1px solid; border-color:#565655; border-right: 1px solid; border-color:#565655; padding-left:10px; padding-right:10px; padding-top:3px; margin-left:-9px;}
.menukopf:visited       {letter-spacing: 0.3px; font-family: 'Vollkorn', serif; BACKGROUND: none; font-size:15pt; color:#565655; outline: none; text-decoration: none; outline: none; text-transform: uppercase; }
.menukopf:hover         {letter-spacing: 0.3px; font-family: 'Vollkorn', serif; BACKGROUND: #eff4e9; font-size:15pt; color:#565655; outline: none; text-decoration: none; outline: none; text-transform: uppercase; }
.menukopf:active        {letter-spacing: 0.3px; font-family: 'Vollkorn', serif; BACKGROUND: none; font-size:15pt; color:#565655; outline: none; text-decoration: none; outline: none; text-transform: uppercase; }

.infozeileboote {max-height:270px;}
.flugstorno {height:282px; float:left; position:relative;}
.flugstornobutton {position:absolute; bottom:0;}
.grundrissposition {position:absolute; top:0;}

.impressum             {background: none; font-size:12px; color:#FFFFFF; text-decoration: none;}
.menuimpressum:link    {background: none; font-size:12px; color:#FFFFFF; text-decoration: none;}
.menuimpressum:visited {background: none; font-size:12px; color:#FFFFFF; outline: none; text-decoration: none; outline: none;}
.menuimpressum:hover   {background: none; font-size:12px; color:#2594e5; outline: none; text-decoration: none; outline: none;}
.menuimpressum:active  {background: none; font-size:12px; color:#FFFFFF; outline: none; text-decoration: none; outline: none;}


.blauezeile             {background: none; font-size:12px; color:#FFFFFF; text-decoration: none;}
.menublauezeile:link    {background: none; font-size:12px; color:#FFFFFF; text-decoration: none;}
.menublauezeile:visited {background: none; font-size:12px; color:#FFFFFF; text-decoration: none; outline: none;}
.menublauezeile:hover   {background:#FFFFFF; font-size:12px; color:#09428A; outline: none; text-decoration: none;}
.menublauezeile:active  {background: none; font-size:12px; color:#FFFFFF; outline: none; text-decoration: none;}






.menurot:link    {background: none; font-size:13px; color:#ebe9e9; text-decoration: none; font-weight:bold; margin-left:2px;}
.menurot:visited {background: none; font-size:13px; color:#ebe9e9; outline: none; text-decoration: none; outline: none; font-weight:bold; margin-left:2px;}
.menurot:hover   {background: none; font-size:13px; color:#fed53a; outline: none; text-decoration: none; outline: none; font-weight:bold; margin-left:2px;}
.menurot:active  {background: none; font-size:13px; color:#ebe9e9; outline: none; text-decoration: none; outline: none; font-weight:bold; margin-left:2px;}

.infobuttonbox      {text-align:center; font-size:11px; width:12px; height:13px; float:left; margin-right:10px; margin-top:2px; text-decoration: none; border: 1px solid; border-color:#d3d3d3;}

 a.tooltip {color:#d3d3d3; text-decoration: none; outline:none;}
 a.tooltip strong {line-height:15px;}
 a.tooltip:hover {background-color: #ff9200; color:#ffffff; text-decoration:none;}
 a.tooltip span { z-index:10;display:none; padding:4px 4px; margin-top:3px; margin-left:-9px; width:200px; line-height:16px; }
 a.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0;;}
 .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
 /*CSS3 extras*/
 a.tooltip span { border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 5px 5px 8px #CCC; -webkit-box-shadow: 5px 5px 8px #CCC; box-shadow: 5px 5px 8px #CCC; }


.reitermenu {
 border-bottom-left-radius:7px;
 border-bottom-right-radius:7px;
 border-color:#e8e6e6;
 border-style:solid;
 border-width:1px;
 padding-bottom:3px;
 padding-right:6px;
 padding-left:6px;
 font-size:17px;
 text-decoration: none;
 font-weight:bold;
}

.reitermenu:link {
 background-color:#f6f6f7;
 border-color:#e8e6e6;
 color:#727171;
}

.reitermenu:visited {
 background-color:#f6f6f7;
 border-color:#e8e6e6;
 color:#727171;
}

.reitermenu:hover {
 background-color:#014578;
 border-color:#e8e6e6;
 color:#f6f6f7;
 border-width:1px;
}

.reitermenu:active {
 background-color:#f6f6f7;
 border-color:#e8e6e6;
 color:#727171;
}

.reitermenuaktiv {
 border-bottom-left-radius:7px;
 border-bottom-right-radius:7px;
 border-color:#e8e6e6;
 border-style:solid;
 border-width:0px;
 padding-bottom:3px;
 padding-right:6px;
 padding-left:6px;
 font-size:17px;
 text-decoration: none;
 font-weight:bold;
 background-color:#014578;
 border-color:#e8e6e6;
 color:#f6f6f7;
}


.fussnotenboxstyling {position:relative; max-width:1400px; margin-left: auto; margin-right: auto; background-color:#09428A}

.cpreiterbox {width:100%; z-index:700;}

.scrollerDatenschutz {scroll-margin-top:180px;}

.tabtitelzeile {font-size: 1.0rem; sans-serif; line-height: 1.75rem; color:#000000; background-color:#e8e6e6; padding:5px;}
.tabtextzeile  {font-size: 1.0rem; sans-serif; line-height: 1.75rem; color:#000000; background-color:#f6f6f7; padding:5px;}

.reiter_styling {background-color:#014578; padding-left:4px; padding-left:4px; padding-right:4px; padding-bottom:2px; padding-top:1px; margin-right:5px; float:left; border:1px solid #e8e6e6;}

.anfang	 {font-size:14pt; color:#000000;}
.kontakt {background: none; font-size:14px; color:#a9a9a9;}
.klein	 {font-size:12px; color:#000000; line-height:13px;}

.autor_rubrik			{font-size: 12px; color:#b2b2b5; margin-top:3px;}
.kleinfarbig			{font-size: 14px; color:#a09fa2;}

/* für die Vorlagen im CKEditor */
.bild_links {float:left; text-align:center; margin-right:0px; margin-bottom:15px; border-right-width: 15px; border-style: solid; border-color:#ffffff; break-inside:avoid;}
.bild_rechts {float:right; text-align:center; margin-left:0px; margin-bottom:15px; border-left-width: 15px; border-style: solid; border-color:#ffffff; break-inside:avoid;}

.bild_links_reisebericht {width:31%; float:left; text-align:center; margin-right:0px; margin-bottom:15px; border-right-width: 15px; border-style: solid; border-color:#ffffff; break-inside:avoid;}
.bild_rechts_reisebericht {width:31%; float:right; text-align:center; margin-left:0px; margin-bottom:15px; border-left-width: 15px; border-style: solid; border-color:#ffffff; break-inside:avoid;}


.bild_mittig {width:100%; text-align:center; margin-top:15px; margin-bottom:15px; break-inside:avoid;}

.bildunterschrift {text-decoration:none; font-size:18px; color:#3d4f56; line-height:26px;}
.rahmen_1px{display: table; margin-left:auto; margin-right:auto; box-shadow: 2px 2px 3px #e4e4e4; border-width: 1px; border-style: solid; border-color:#e4e4e4; background-color:#ffffff; padding:10px;}

.hinweistext {text-decoration:none; font-size:16px; color:#014578; line-height:22px;}

.buch_produkt_links_ausgerichtet  {float:left; margin-right:7px; padding-right:25px; background-color:#FFFFFF;}
.buch_produkt_rechts_ausgerichtet {float:right; margin-left:7px; padding-left:25px; background-color:#FFFFFF;}
.buch_produkt_mittig_ausgerichtet {text-align:center; width:100%;}

.farbig	{font-family: 'Open Sans', sans-serif; font-size: 1.125rem; line-height: 1.75rem; color:#014578;}
.bootsinfo	{font-family: 'Open Sans', sans-serif; font-size: 1.0rem; line-height: 1.5rem; color:#014578;}
.signal	{font-size:14x; color:#cf1312;}

.weissinblau {font-size: 1.0rem; line-height: 1.5rem; color:#FFFFFF; text-decoration:none;}

.angebot_gewaesser	{font-size: 18pt; font-weight:lighter; color:#014578;}
.angebot_gross	{font-size:20px; color:#014578;}
.angebot_klein	{font-size:14px; color:#014578;}
.preise	{font-size: 1.0rem; line-height: 1.5rem; color:#014578;}

.reiseberichte_gutscheinbox {line-height:20px; width:400px; float:right; margin-top:15px; margin-bottom:20px; margin-left:20px; margin-right:30px; border:1px solid #cf1312; padding:5px;}



.buttonanfrage {padding-top:7px; padding-bottom:7px; font-size:13px; border:1px solid #e0bc2e; background-color:#09428a; color:#FFFFFF; font-weight:bold; width:98%;}
.buttonanfrage:hover {padding-top:7px; padding-bottom:7px; font-size:13px; border:1px solid #000000; background-color:#09428a; color:#FFFFFF; font-weight:bold; width:98%;}

.auswahlstyle {padding-top:7px; padding-bottom:7px; font-size:13px; border:1px solid #e0bc2e; background-color:#ffffff; color:#525151; width:98%; background: url(/images/Auswahlpfeil.png) no-repeat right #ddd;}

.styled-select 							{font-size:13px; margin-top:7px; width:98%; overflow:hidden; border-right: 1px solid #e0bc2e; background: url(/images/Auswahlpfeil.png) no-repeat right #ffffff;}
.styled-select select 			{padding-top:7px; padding-bottom:7px; font-size:13px; background: transparent; width:120%; color:#525151; border: 1px solid #e0bc2e;}
.styled-select:hover 				{font-size:13px; width:98%; overflow:hidden; border-right: 1px solid #000000; background: url(/images/Auswahlpfeil.png) no-repeat right #ffffff;}
.styled-select:hover select {padding-top:7px; padding-bottom:7px; font-size:13px; background: transparent; width:120%; color:#525151; border: 1px solid #000000;}


.styled-select-gesperrt 				{font-size:13px; -moz-opacity: 0.5; opacity: 0.5; margin-top:7px; width:98%; overflow:hidden; border-right: 1px solid #e0bc2e; background: url(/images/Auswahlpfeil.png) no-repeat right #ffffff;}
.styled-select-gesperrt select 	{padding-top:7px; padding-bottom:7px; font-size:13px; background: transparent; width:120%; color:#525151; border: 1px solid #e0bc2e;}




.tooltip {
position: relative;

}
.tooltip em {
display: none;

font-size:11px;
color:#014578;
padding: 6px;
line-height: 20px;
font-style: normal;
font-weight: bold;
text-align: left;
outline: 2px solid #014578;
background: transparent;
}
.tooltip em b {
display: block;
text-align: left;
font-size: 11px;
font-weight: bold;
line-height: 16px;
padding: 3px;

background: #FFFFFF;
}
.tooltip:hover {
color: #CC2200; z-index: 1; background: #FFFFFF;
}
.tooltip:hover em {
display: block;
position: absolute;
left:9px; top: -100px;
width: 220px;
background: #FFFFFF;}


/* Social-Media-Profile */

div#jj_sl_navigation {
	display: inline-block;
  vertical-align:right;
	width:10px;
	height:50px;
	margin-top:0px;
  position: absolute;
  list-style: none;
  z-index:9999;
	font-family: Arial,Helvetica,sans-serif;
}

div#jj_sl_navigation li {
	margin-left: -40px;
	text-align:left;
	-webkit-transition: margin-left 0.3s;
	-moz-transition: margin-left 0.3s;
	-ms-transition: margin-left 0.3s;
	-o-transition: margin-left 0.3s;
	transition: margin-left 0.3s;
	padding: 1px 0px 1px 0px;
  overflow:hidden;
	direction: ltr;
	border: 0;
}

div#jj_sl_navigation li:hover { margin-left: -230px;}

div#jj_sl_navigation li a {
	background-color:#e3e3e3;
	text-align:left;
	color:#ffffff !important;
	padding: 7px 0px 7px 7px;
	margin-left: -2px;
  display: block;
  width: 240px;
  background-repeat:no-repeat;
	text-decoration: none;
	outline: none;
	font-size: 13px;
	font-weight: bold;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}



div#jj_sl_navigation li a .jj_social_text {
	display: inline-block;
	margin-left:50px;
	width: 160px;
	text-transform: inherit;
}

div#jj_sl_navigation .jj_sl_facebook a { background-position: 10px 50%; background-image: url(/images/Facebook-Profil-Button.png); }
div#jj_sl_navigation .jj_sl_google a { background-position: 10px 50%; background-image: url(/images/Google-Plus-Button.png); }

div#jj_sl_navigation .jj_sl_facebook a:hover{ background-color: #3B5998; }
div#jj_sl_navigation .jj_sl_google a:hover{ background-color: #DB4A39; }


div#jj_sl_navigation .jj_sl_facebook a:hover,
div#jj_sl_navigation .jj_sl_google a:hover,
{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


    #beispiel-01 {
      display: -webkit-flex;
      display: flex;
    }


.video_leboat {width:100%; height:570px; border-width:0px; overflow:hidden;}

.foto_land {float:center; margin-right:0px; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px; margin-bottom:20px;}
.foto_region {float:left; margin-right:20px; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px; margin-bottom:20px;}
.foto_basis {float:right; margin-left:20px; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px; margin-bottom:20px; background-color:#FFFFFF;}
.foto_skippertipps {float:right; margin-left:20px; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px; margin-bottom:20px;}


.wasserfall-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 0; /* Kein Innenabstand, damit Boxen direkt am Rahmen starten */
    box-sizing: border-box;
}

.wasserfall-box {
    width: calc((100% - 40px) / 3); /* 2 x 20px Abstand für 3 Boxen */
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 15px;
    box-sizing: border-box;
    color: #000;
}

.wasserfall-logo {
    text-align: center;
    margin-bottom: 10px;
}

.wasserfall-inhalt {
    padding-left: 2px;
    padding-bottom: 5px;
    margin-bottom: 30px;
}

.wasserfall-sonder {
    margin-top: 20px;
    text-align: center;
}

@media screen and (max-width: 992px) {
    .wasserfall-box {
        width: 48%;
    }
}

@media screen and (max-width: 600px) {
    .wasserfall-box {
        width: 100%;
    }
}








.angebotsbox {
	width:315px;
	box-shadow: 2px 2px 3px #e4e4e4;
	border-width:1px;
	border-style:solid;
	border-color:#e4e4e4;
	padding:10px;
}

    .container {
      display: flex;
      flex-wrap: wrap; /* Ermöglicht Umbruch bei Bedarf */
      justify-content: space-between; /* Gleichmäßiger Abstand zwischen den Boxen */
    }

    .box {
      flex-basis: 30%; /* Jede Box nimmt ca. 30% der Breite ein */
      color:#ffffff;
			letter-spacing:0.1em;
			padding: 20px;
			font-size:14px; 
			line-height:17px;
      margin-bottom: 20px; /* Abstand zwischen den Boxen in der vertikalen Richtung */
    }

    /* Mobile Ansicht - Boxen untereinander */
    @media (max-width: 768px) {
      .box {
        flex-basis: 100%; /* Boxen nehmen auf kleineren Bildschirmen die volle Breite ein */
      }
    }

#flexmother {display: -webkit-flex;
   					 display: -ms-flex;
   					 display: flex;
   					 -webkit-flex-wrap: wrap;
   					 -ms-flex-wrap: wrap;
   					 flex-wrap: wrap;
}


.wls-custom {
    margin-top:15px; padding:15px; background-color: #fbba00;
}

.wls-custom .wls-connect-widget .btn-secondary {
    background-color: #4dc0b5;
}

.wls-custom .wls-connect-widget .btn-secondary:hover {
    background-color: #4f8a9e;
}

/* Hauptcontainer für die Presse-Box */
.presse-logo {
  margin-top: 15px;
  padding: 15px;
  background-color: #09428a;
  text-align: center;
  overflow: hidden; /* Verhindert, dass Inhalte über den Container hinausragen */
}

/* Überschrift: bleibt oberhalb der scrollbaren Logos */
.presse-heading {
  text-align: left;
  margin-bottom: 10px;
}

/* Container für die Logos */
.presse-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start; /* Verhindert, dass die Logos gestreckt werden */
}

/* Styling für die Logos */
.presse-logos img {
  margin-right: 30px; /* Abstand zwischen den Logos */
  display: inline-block;
  /* Optional: max-width setzen, damit sie nicht breiter als ihr Container werden */
  max-width: 100%;
}

/* Entferne den rechten Außenabstand beim letzten Logo */
.presse-logos img:last-child {
  margin-right: 0;
}

/* Mobile Ansicht: Bei kleineren Bildschirmen sollen die Logos in einer Zeile angezeigt werden,
   die sich horizontal scrollen lässt. Dabei sollen die Logos linksbündig beginnen.
   Zusätzlich verhindern wir, dass die Bilder verzerrt werden, indem wir ein Schrumpfen
   (flex-shrink) unterbinden. */
@media screen and (max-width: 800px) {
  .presse-logos {
    white-space: nowrap;             /* Verhindert Zeilenumbrüche der Logos */
    overflow-x: auto;                /* Ermöglicht horizontales Scrollen */
    -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
    flex-wrap: nowrap;               /* Alle Logos bleiben in einer Zeile */
    justify-content: flex-start;     /* Logos werden linksbündig ausgerichtet */
    align-items: flex-start;         /* Auch in der mobilen Ansicht nicht strecken */
  }
  .presse-logos img {
    flex-shrink: 0; /* Verhindert, dass die Bilder durch Flexbox verzerrt werden */
  }
}


.katalogboxen {
  width: 230px;
  height: 280px;
  margin-bottom: 10px;
  margin-right: 10px;
  box-shadow: 2px 2px 3px #e4e4e4;
  border: 1px solid #e4e4e4;
  padding: 10px;

  font-size: 18px;
  color: #3d4f56;
  line-height: 26px;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  float: left; /* Nur notwendig, wenn du noch nicht auf Grid/Flexbox umgestiegen bist */
}


.katalog-logo {
  width: 230px;
  height: auto;
  margin-bottom: 20px;
}
.katalog-links {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.katalog-links li {
  margin-bottom: 5px;
}

.katalog-links a {
  text-decoration: none;
  font-size: 1rem;
  color: #3d4f56;
}

.katalog-links a:hover {
  text-decoration: underline;
}


.vermieter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

@media (min-width: 1024px) {
  .vermieter-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vermieter-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  height: 100%;
}

.vermieter-bild {
  width: 100%;
  height: auto;
  display: block;
}

.vermieter-logo {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
}

.vermieter-logo-img {
  max-height: 60px;
  max-width: 90%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

.vermieter-info {
  margin-top: 0px;         /* weniger Abstand zum Logo */
  margin-bottom: 18px;     /* mehr Luft zum unteren Boxenrand */
  font-size: 15px;
  font-weight: 500;
  color: #09428a;
  text-align: center;
}

.bootetypen-link {
  text-decoration: none;
  color: #09428a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.arrow {
  font-size: 16px;
}







/* ANFANG CSS für Wochenangebote Startseite */

.angebote-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.angebote-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
}

.flexchild-wochenangebote {
    flex: 0 0 auto;
    width: 80%;
    max-width: 300px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
		
		font-size:14px;
		line-height:22px;
		margin-bottom:16px;
		border-width: 1px;
  	border-style: solid;
  	border-color:#e3d7cb;
  	padding:5px;
  	padding-bottom:10px;
    
}

/* Verhindert, dass die Preisbox mit der oberen Textbox zusammenfließt */
.image-wrapper {
    position: relative;
    display: block;
}

.angebot-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Container für den gesamten Text-Overlay-Bereich */
.text-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
		right:3px;
    width: calc(100% - 5px);  /* Verhindert Überlappen in den Rahmen (z.B. 3px links/rechts) */
    box-sizing: border-box;  /* Stellt sicher, dass Padding/Borders die Breite nicht überschreiten */
		padding-right:0px;
}

/* Box für den Bootsnamen, Vermieter und Gewässer */
.text-overlay {
    padding-top: 5px;
		padding-left: 5px;
    background-color: rgba(0, 0, 0, 0.5);  /* Dunkelgrau mit 50% Transparenz */
    color: white;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Spezifische Positionierung für die obere linke Box */
.top-left {
    width: 100%;  /* Füllt die gesamte Breite des übergeordneten Containers */
    text-align: left;
}

.boot-name {
    font-size: 1.4em;
    font-weight: bold;
    display: block;
}

.laendername {
    font-size: 1.2em;
    font-weight: 600;
    

}

.vermieter-name {
    font-size: 1em;
    margin-top: -30px; /* Vermieter näher an den Bootsnamen ziehen */
    display: block;
}

.gewaesser-name {
    font-size: 0.9em;
    margin-top: -8px;
    display: block;
    font-style: italic;
}

/* Preisbox richtig in der unteren rechten Ecke des Bildes platzieren */
.bottom-right {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #09428a;  /* Blaue Hintergrundfarbe für den Preis */
    padding: 0px 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
}


.preis-hinweis {
    font-size: 1.0em;
    font-weight: bold;
    color: white;
}

/* Angebots-Text unter dem Bild */
.angebot-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Links ausgerichtet */
}


.angebot-text-box {
    padding: 2px 2px;
    font-size: 1em;
    color: #333;
    text-align: left;  /* Links ausgerichtet */
    min-height: 60px;
    width: 100%;
}

/* Desktop-Ansicht - Erhöhter Zeilenabstand */
@media (min-width: 768px) {
    .angebote-container {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .flexchild-wochenangebote {
        flex: 1 1 30%;
        max-width: none;
    }

    .angebot-text-box {
        line-height: 30px; /* Erhöhter Zeilenabstand auf Desktop */
    }
}



/* ENDE CSS für Wochenangebote Startseite */

.reise-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2%;
}

.reise-flex-item {
  box-sizing: border-box;
  width: 32%;
  margin-bottom: 20px;
  border: 1px solid #e3d7cb;
  padding: 5px;
  position: relative;
  background-color: white;
}

.reise-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.reise-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.reise-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(42, 53, 52, 0.8);
  padding: 10px;
  color: #fff;
  box-sizing: border-box;
}

.reise-caption .titelzeile {
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
}

.reise-caption .untertitelzeile {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

.reise-flex-item.last-center {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* Wenn genau 2 letzte Boxen vorhanden sind → zentriert in eigener Zeile */
.last-two-wrapper {
  display: flex;
  justify-content: center;
  gap: 2%;
  width: 100%;
  margin-top: 20px;
}

.reise-flex-item.placeholder {
  visibility: hidden;
}

@media (max-width: 900px) {
  .reise-flex-item {
    width: 48%;
  }
}

@media (max-width: 600px) {
  .reise-flex-item {
    width: 100%;
  }
}





.flexchild {float:left;
							font-size:14px;
							line-height:22px;
  						width:30%;
							margin-right:1.8%;
							margin-bottom:16px;
  						border-width: 1px;
  						border-style: solid;
  						border-color:#e3d7cb;
  						padding:5px;
  						padding-bottom:10px;}


.flexchild25 {float:left;
							font-size:14px;
							line-height:22px;
  						width:22%;
							margin-right:1.8%;
							margin-bottom:16px;
  						border-width: 1px;
  						border-style: solid;
  						border-color:#e3d7cb;
  						padding:5px;
  						padding-bottom:10px;}




/* ===== Neue Klassen für Länderausgabe (Desktop) ===== */

/* Bild + Overlay (Optik der Länder-Karten) */
.laender-card { border: 1px solid #e3d7cb; background:#fff; }

.laender-imgwrap { position: relative; width: 100%; overflow: hidden; }
.laender-img     { display:block; width:100%; height:auto; }

.laender-overlay {
  position:absolute; top:0; left:0; width:100%; height:55px;
  background:#2a3534; opacity:0.8;
}

.laender-text {
  position:absolute; top:0; left:0; width:100%; height:55px;
  padding:7px 8px 0 5px; font-weight:lighter;
}
.laender-text a { color:#fff; text-decoration:none; }

.laendername-overlay {
  font-size: 1.4em;
  font-weight: 600;
}

.laender-sub { font-size:14px; line-height:18px; }


/* Länder-Grid auf derselben "Schiene" wie die Wochenangebote */
.angebote-container.laender-scroll-container {
  --gap: 16px;
  --cols: 3;                  /* Desktop: 3 Spalten */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: flex-start; /* letzte Reihe linksbündig */
}

/* exakt passende Spaltenbreite: (100% - (cols-1)*gap) / cols */
.angebote-container.laender-scroll-container .flexchild-wochenangebote {
  flex: 0 0 calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  max-width: calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  margin: 0;                  /* falls in der Basis-Klasse Margin gesetzt ist */
  box-sizing: border-box;
}

/* Responsiv identisch skaliert wie die anderen Box-Rubriken */
@media (max-width: 980px) {
  .angebote-container.laender-scroll-container { --cols: 2; }
}
@media (max-width: 600px) {
  .angebote-container.laender-scroll-container { --cols: 1; }
}


/* Keine eigenen Flex-/Gap-Regeln hier!
   So übernimmt .angebote-container + .flexchild-wochenangebote das Grid
   → gleiche Kanten, gleiche Spalten, gleiche Abstände wie bei „Momentan stark gefragt“. */




/* Fahrgebiete: gleiches Grid wie Wochenangebote */
.angebote-container.fahrgebiete-container {
  --gap: 16px;
  --cols: 3;                    /* Desktop: 3 Spalten */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: flex-start;  /* letzte Reihe linksbündig */
}

/* exakte Spaltenbreite = (100% - (cols-1)*gap) / cols */
.angebote-container.fahrgebiete-container .flexchild-wochenangebote {
  flex: 0 0 calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  max-width: calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  box-sizing: border-box;
  margin: 0; /* falls Basis-Margins existieren */
}

/* Karte + Overlay (keine Kursivschrift) */
.fahrgebiet-card { border: 1px solid #e3d7cb; background:#fff; }
.fahrgebiet-imgwrap { position: relative; width:100%; overflow:hidden; }
.fahrgebiet-imgwrap img { display:block; width:100%; height:auto; }

.fahrgebiet-overlay {
  position:absolute; top:0; left:0; width:100%; height:55px;
  background:#2a3534; opacity:.8;
}
.fahrgebiet-text {
  position:absolute; top:0; left:0; width:100%; height:55px;
  padding:7px 8px 0 5px; font-weight:400;
}
.fahrgebiet-text a { color:#fff; text-decoration:none; }

.fahrgebiete-name-overlay { font-size:23px; line-height:26px; font-style:normal; font-weight:600; }
.fahrgebiete-sub { font-size:14px; line-height:18px; font-style:normal; }

/* Regionenliste sicher nicht kursiv */
.regionenliste, .regionenliste a { font-style: normal; }

/* Responsiv wie auf der Startseite */
@media (max-width: 980px) { .angebote-container.fahrgebiete-container { --cols: 2; } }
@media (max-width: 600px) { .angebote-container.fahrgebiete-container { --cols: 1; } }


/* Regionenlinks in Fahrgebiete-Boxen wieder schwarz */
.regionenliste,
.regionenliste a,
.regionenliste a:visited {
    color: #000;
    text-decoration: none;
    font-style: normal;
}

.regionenliste a:hover {
    text-decoration: underline;
}





#div_angebotsseite {

}

.locaboat_box {margin-left:8px; margin-bottom:20px; width:96%; box-shadow: 2px 2px 3px #e4e4e4; border-width:1px; border-style:solid; border-color:#e4e4e4; padding:10px;}
.angebote_von {background-color:#EF7B00; margin-top:-10px; margin-left:-10px; margin-right:-10px; margin-bottom:10px; padding-left:3px; text-decoration:none; font-size:13px; font-weight:bold; color:#FFFFFF; line-height:26px; text-align:left;}
.ganzjaehrige_angebote	{font-size:10px; color:#014578;}
.rabattseite {float:left; width:45%; margin-right:90px;}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/includes/fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/includes/fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/includes/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/includes/fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/includes/fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/includes/fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* vollkorn-regular - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: url('/includes/fonts/vollkorn-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/includes/fonts/vollkorn-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/includes/fonts/vollkorn-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/includes/fonts/vollkorn-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/includes/fonts/vollkorn-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/includes/fonts/vollkorn-v12-latin-regular.svg#Vollkorn') format('svg'); /* Legacy iOS */
}



#gallery img {
  width: 100%;
  margin: 0;
  padding: 0;
}

.changer figure {        /* wird erst per JS aktiviert */
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;

}

.changer figcaption {
  position: absolute;
	width: 85%;
  left: 0em;
  top: -1em;
  color: white;
}

main {
  position:relative;
  height: auto;
  padding: 0px;

}

.reisefuehrer {float:left; margin-right:10px;}

.wls-connect-widget {font-family: 'Open Sans', sans-serif;}


div.privacy-msg p {
    width:98.5%;
    height:540px;
    border: 1px solid #f1f1f1;
    padding-top: 20px;
    padding-left:3px;
    padding-right:3px;
    text-align:center;
    position: relative;
    color:#000000;
    font-size:16px;
    background-image:url(/images/karteeinblenden.jpg);
    background-size: 100%;
    background-repeat: no-repeat;

}


        .datepicker {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .datepicker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        .datepicker-input {
            width: calc(50% - 5px);
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
        }
        .calendar {
            padding: 10px;
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .calendar-header button {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }
        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        .day {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30px;
            cursor: pointer;
            border-radius: 50%;
        }
        .day:hover {
            background-color: #e0e0e0;
        }
        .day.selected {
            background-color: #007bff;
            color: white;
        }
        .day.range {
            background-color: #e6f2ff;
        }

       /* Cookie-Overlay */
        #cookieOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Durchscheinender Hintergrund */
            z-index: 1000;
            display: none;
        }

        /* Cookie-Einwilligungsbox */
        #cookieConsentBox {
            position: fixed;
            top: 50%; /* Mittig ausrichten */
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 600px;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            z-index: 1001;
            display: none;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Schatten für besseres Design */
        }

				/* Buttons */
				.cookie-buttons {
					display: flex;
					flex-direction: column; /* Buttons untereinander anordnen */
					gap: 7px; /* Abstand zwischen den Buttons */
					margin-top: 0px;
				}

				.cookie-button {
					width: 100%;
					padding: 10px 20px;
					border: none;
					cursor: pointer;
					font-size: 16px; /* Schriftgröße für die Buttons */
				}
				
				.Cookietextklein {
					font-size: 14px; /* Schriftgröße für den Erklärungstext */
					line-height: 1.5; /* Zeilenhöhe für den Erklärungstext */
					margin-bottom: 20px; /* Abstand nach unten */
					color: #333; /* Schriftfarbe (falls du eine neutrale Farbe verwenden möchtest) */
				
				}

        .accept-button {
            background-color: #28a745; /* Grün */
            color: white;
        }

        .reject-button {
            background-color: #1e73be; /* Blau */
            color: white;
        }

        .custom-button {
            background-color: #000000; /* Schwarz */
            color: white;
        }


				/* Button Style */
				.custom-button-fuss {
						display: inline-flex;
						align-items: center;
						background-color: #1e73be; /* Standard Hintergrundfarbe (Blau) */
						color: #ffffff!important;
						border: none;
						padding: 4px 10px;
						font-size: 14px;
						cursor: pointer;
						border-radius: 4px;
						transition: background-color 0.3s ease; /* Weicher Übergang beim Hover */
						text-align: center;
						text-decoration: none; /* Entfernt die Standardunterstreichung beim Link */
				}

				.custom-button-fuss:hover {
						background-color: #145a86; /* Hintergrundfarbe beim Hover (dunkleres Blau) */
				}


.cookie-option {
    margin-bottom: 10px;
		margin-left:20px;
		font-size:16px;
}

.cookie-option label {
    display: flex;
    align-items: center;
}

.toggle-button {
    background: none;
    border: none;
    color: #007BFF;
    cursor: pointer;
    font-size: 14px;
    margin-left: 21px;
    padding: 0;
}

.toggle-button:hover {
    text-decoration: underline;
}



				.beschreibung-cookie{
					font-size: 12px; /* Schriftgröße für den Erklärungstext */
					line-height: 1.5; /* Zeilenhöhe für den Erklärungstext */
					margin-bottom: 20px; /* Abstand nach unten */
					color: #333; /* Schriftfarbe (falls du eine neutrale Farbe verwenden möchtest) */
					margin-left: 25px;
					margin-top: 5px;
				}
				
				
				.beschreibung-kartennutzung{
					font-size: 14px; /* Schriftgröße für den Erklärungstext */
					line-height: 1.5; /* Zeilenhöhe für den Erklärungstext */
					margin-bottom: 20px; /* Abstand nach unten */
					color: #333; /* Schriftfarbe (falls du eine neutrale Farbe verwenden möchtest) */
					max-width:500px;
				}				

				/* Grafik/Icon im Button */
				.button-icon {
						width: 16px; /* Größe des Icons */
						height: 16px;
						margin-right: 8px; /* Abstand zwischen Icon und Text */
						vertical-align: middle;
				}


/* CSS für den Schließen-Button */
#customSettingsBox .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #333;
}

#customSettingsBox .close-button:hover {
    color: #000;
}




				#cookie-footnote {
					font-size: 12px; /* Schriftgröße für den Fußbereich */
					text-align: left; /* Zentriert den Text im Fußbereich */
					margin-top: -15px; /* Abstand über dem Fußbereich */
					margin-bottom:1
					color: #FFFFFF; /* Standardfarbe */
				}
				
				a.privacy-link {
					color: #1e73be; /* Blauton für den Link (du kannst einen beliebigen Hex-Farbcode wählen) */
					text-decoration: none; /* Unterstreichung entfernen */
					border-bottom: 0px solid #1e73be; /* Alternative "Unterstreichung" mit mehr Abstand */
					padding-bottom: 0px; /* Abstand zwischen Text und Unterstreichung */
				}

				a.privacy-link:hover {
					color: #1e73be; /* Beibehaltung des Farbtons beim Hover */
					border-bottom: 1px solid #1e73be; /* Beibehaltung der Unterstreichung */
				}

				.UeberschriftCookiebox {
					color: #1e73be;					
				}

        /* Box für individuelle Einstellungen */
        #customSettingsBox {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 600px;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            z-index: 1001;
            display: none;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Schatten für besseres Design */
        }