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;}
/* Gilt NUR bei der Variante mit bild_links (also in der Kachelansicht) Ausgabe Hausbootseiten*/
.bild_links .youtube-video iframe {
width: 270px !important;
height: 180px !important;
display: block;
}
/* Falls der Cookie-Hinweis statt des iframes angezeigt wird Ausgabe Hausbootseiten */
.bild_links .youtube-video .bild_rechts {
width: 270px !important;
}
.basis_video {
clear: right; /* Video beginnt unterhalb des Basisbildes */
}
.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 {
position: relative; /* für absolute Positionierung des Badges */
display: block; /* block, damit die Höhe nur vom Titel abhängt */
margin-top: 6px;
}
.bootstypen-name {
font-size: 1.1em;
color: #09428a;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bootstypen-header .angebot_gewaesser {
font-size: 1.1em;
color: #09428a;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
margin: 0;
padding-right: 60px; /* Platz schaffen, damit Text nicht unter Badge läuft */
}
.bootstypen-badge,
.bootstypen-badge-lc {
position: absolute;
top: 0;
right: 0;
}
.bootstypen-badge img,
.bootstypen-badge-lc img {
height: auto; /* Originalgröße */
width: auto;
}
.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 */
}
}
/* GRID: füllt immer bis 100% Breite, ohne rechte Lücke */
.hb-katalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
/* Karten/Boxen – keine feste Breite/Höhe, keine floats */
.hb-katalog-card {
box-shadow: 2px 2px 3px #e4e4e4;
border: 1px solid #e4e4e4;
padding: 12px;
font-size: 18px;
color: #3d4f56;
line-height: 26px;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box; /* wichtig für sauberes Grid-Layout */
background: #fff; /* optional, falls nötig */
}
/* Logos skalieren brav und behalten Proportionen */
.hb-katalog-card__logo {
width: 100%;
height: auto;
max-height: 140px; /* einheitliche Optik; bei Bedarf anpassen/entfernen */
object-fit: contain;
margin-bottom: 16px;
}
/* Linkliste innen kompakt */
.hb-katalog-card__links {
list-style: none;
padding-left: 0;
margin: 0;
}
.hb-katalog-card__links li + li {
margin-top: 6px;
}
.hb-katalog-card__links a {
text-decoration: none;
white-space: nowrap; /* verhindert Umbruch in der Mitte von Wörtern */
}
/* iPad Querformat: explizit 3 Spalten erzwingen (falls Nadine das fix will) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
.hb-katalog-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.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;
}
/* Container: Abstand/Grundlayout */
.vm-block { margin: 16px 0 28px; }
.vm-title { margin: 0 0 12px 0; line-height: 1.2; }
/* Desktop: 60% Text | 40% Logo */
.vm-row {
display: grid;
grid-template-columns: 60% 40%;
grid-template-areas: "text logo";
gap: 24px;
align-items: start;
}
.vm-text { grid-area: text; line-height: 1.5; }
.vm-logo { grid-area: logo; display: flex; justify-content: center; align-items: center; }
.vm-logo img { display: block; width: auto; height: auto; } /* Originalgröße beibehalten */
/* Mobile: untereinander – erst Logo, dann Text */
@media (max-width: 768px) {
.vm-row {
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"text";
gap: 14px;
}
.vm-logo { justify-self: center; }
.vm-logo img { max-width: 80%; height: auto; } /* Sicherheitsbremse für sehr große Dateien */
}
/* 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 */
}
/* Tooltip Container */
.tooltip{
position: relative;
display: block;
}
/* Overlay-Box */
/* Overlay-Box: tiefer starten (wie Bild 2) */
.tooltip .tooltiptext{
position: absolute;
left: 10px;
right: 10px;
top: 55%; /* <- HIER der Hauptpunkt */
transform: translateY(-50%);
z-index: 50;
background: #fff;
border-radius: 6px;
padding: 10px 12px;
box-sizing: border-box;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease;
}
/* Hover sichtbar */
.tooltip:hover .tooltiptext,
.tooltip.is-open .tooltiptext{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.tooltip .tooltiptext b{
font-size: 12px;
font-weight: 700;
color: #014578;
line-height: 1.15;
margin: 0 0 6px 0;
display: block;
}
.hb-basis-dd{
position: relative;
}
/* Dropdown Button */
.hb-basis-dd__btn{
width: 100%;
background: #f2f2f2;
border: 1px solid #cfcfcf;
border-radius: 4px;
padding: 5px 9px; /* etwas kompakter */
font-size: 13px;
text-align: left;
cursor: pointer;
color: #333;
}
.hb-basis-dd__panel{
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px); /* <- startet DIREKT unter dem Button */
max-height: 240px;
overflow-y: auto;
background: #fff;
border-radius: 6px;
padding: 6px 0;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transition: opacity .15s ease;
z-index: 100;
}
.hb-basis-dd.is-open .hb-basis-dd__panel{
opacity: 1;
visibility: visible;
}
/* Einzelne Basen */
.hb-basis-dd__opt{
padding: 5px 10px; /* minimal weniger */
font-size: 13px;
line-height: 1.25; /* dezenter */
color: #555;
}
/* Hover-Effekt */
.hb-basis-dd__opt:hover{
background: #eeeeee;
color: #333;
}
.hb-basis-dd__title{
font-size: 12px;
font-weight: 700; /* jetzt wirklich fett */
color: #014578;
line-height: 1.15; /* dezenter/kompakter */
margin: 0 0 6px 0;
}
/* Immer "Hand"-Cursor in der geöffneten Liste */
.hb-basis-dd__panel,
.hb-basis-dd__panel * {
cursor: pointer !important;
}
/* Optional: verhindert Text-Cursor/Markieren beim Drüberfahren */
.hb-basis-dd__opt,
.hb-basis-dd__opt * {
user-select: none;
}
.hb-basis-dd__btn,
.hb-basis-dd__btn * {
cursor: pointer;
}
.tooltiptext:empty { display:none !important; }
/* Boot-Grid (Suche, Vermieter, Bootstypen etc.) */
.bootstypen-container{
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
box-sizing: border-box;
padding: 0; /* wichtig: kein Innenabstand, sonst wird’s wieder “zu breit” */
margin: 0;
}
/* Items: alles “alte” Layout neutralisieren */
.bootstypen-container .bootstypen-box{
width: auto !important;
margin: 0 !important;
float: none !important;
min-width: 0; /* verhindert seltsames Überlaufen durch lange Inhalte */
box-sizing: border-box;
}
/* Responsive */
@media (max-width: 1100px){
.bootstypen-container{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
.bootstypen-container{ grid-template-columns: 1fr; }
}
.bootstypen-container > div[style*="clear:left"]{
display:none !important;
}
/* =========================================================
hausboot.de – CharterCheck Block (FINAL MASTER)
-> ganz unten in die CSS setzen, damit es ALLES überschreibt
========================================================= */
/* Wrapper (keine seitlichen Außenabstände mehr) */
.cc-booking-wrap{
width: 100%;
margin: 22px 0 28px 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
/* Headline + Subline */
.cc-booking-title{
font-size: 30px;
font-weight: 800;
color: #09428a;
line-height: 1.15;
text-align: center;
margin: 0 0 6px 0 !important;
}
.cc-booking-sub{
text-align: center;
font-size: 20px;
line-height: 1.2;
color: #ef7b00;
margin: 0 0 18px 0 !important;
}
.cc-booking-sub b{ font-weight: 800; }
/* =========================================
FULL WIDTH – aber gleiches Innenmaß
(Grid + Bestpreis-Bar sollen exakt gleich starten/enden)
========================================= */
.cc-booking-grid,
.cc-bestpreis-bar{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 0px !important; /* DAS ist euer „Seitenbündig“ Maß */
box-sizing: border-box;
}
/* Abstand zwischen Karten und Bestpreis-Box (damit nix klebt) */
.cc-booking-grid{
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
margin-bottom: 18px !important;
align-items: stretch !important;
}
/* Mobile */
@media (max-width: 980px){
.cc-booking-grid{
grid-template-columns: 1fr !important;
padding: 0 14px !important;
}
.cc-bestpreis-bar{
padding: 0 14px !important;
}
}
/* =========================================
CARDS – alle gleich hoch + sauberer Aufbau
========================================= */
.cc-booking-card,
.cc-booking-card--info,
.cc-booking-card-badgewrap > .cc-booking-card{
position: relative;
border-radius: 16px;
border: 1px solid #e6d8c9;
text-decoration: none;
box-shadow: 0 10px 24px rgba(9,66,138,0.12);
background: linear-gradient(
to top,
rgba(255, 246, 226, 0.22) 0%,
rgba(255, 252, 245, 0.18) 40%,
rgba(255, 255, 255, 1.00) 100%
);
overflow: hidden;
isolation: isolate;
/* sorgt für gleiche Kartenhöhe */
display: flex;
flex-direction: column;
height: 100%;
}
/* Orange Linie oben – mit Rundung */
.cc-booking-card:after{
content:"";
position:absolute;
left:0;
top:0;
height:4px;
width:100%;
background:#ef7b00;
z-index: 5;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
/* Kopfbereich */
.cc-booking-card-head{
position: relative;
padding: 18px 18px 10px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: linear-gradient(
to bottom,
rgba(232, 242, 252, 0.95) 0%,
rgba(245, 250, 255, 0.70) 55%,
rgba(255, 255, 255, 0.00) 100%
) !important;
}
/* Icons */
.cc-booking-ico{
width: 90% !important;
height: auto !important;
max-width: 230px;
display: block;
margin: 0 auto 6px auto;
border-radius: 10px;
mix-blend-mode: darken;
}
/* Titel in Karte */
.cc-booking-card-title{
color: #09428a;
font-weight: 800;
font-size: 22px; /* <- größer wie gewünscht */
text-align: center;
margin: 0;
}
/* Body */
.cc-booking-card-body{
padding: 8px 18px 0 18px;
color: #09428a;
font-size: 17px;
line-height: 1.45;
text-align: center;
min-height: 110px;
}
/* Telefonzeile */
.cc-booking-phone{
margin-top: 14px;
font-size: 22px;
color: #09428a;
}
/* CTA unten immer „nach unten drücken“ => gleiche Höhe */
.cc-booking-card-cta{
margin-top: auto;
padding: 14px 18px 22px 18px;
display: flex;
justify-content: center;
}
/* Buttons */
.cc-cta-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 14px;
border-radius: 10px;
font-weight: 800;
text-decoration: none;
line-height: 1;
user-select: none;
}
.cc-cta-btn--orange{
background: #ef7b00;
color: #ffffff;
box-shadow: 0 8px 16px rgba(239,123,0,0.18);
}
.cc-cta-btn--orange:hover{ background: #d96e00; }
.cc-cta-btn--light{
background: #f7f9fc;
color: #09428a !important;
border: 2px solid rgba(9,66,138,0.22);
box-shadow: 0 6px 14px rgba(9,66,138,0.10);
}
.cc-cta-btn--light:hover{
background: #ffffff;
border-color: rgba(9,66,138,0.40);
}
.cc-cta-arrow{
font-size: 18px;
margin-left: 2px;
opacity: 0.95;
}
.cc-btn-ico{
width: 18px;
height: 18px;
display: block;
}
/* Hover */
.cc-booking-card:hover{
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(9,66,138,0.16);
}
/* =========================================
BADGE – darf NICHT einfärben & bleibt sichtbar
========================================= */
.cc-booking-card-badgewrap{
position: relative;
height: 100%;
}
/* Badge sitzt „auf“ der Karte, ragt aber nicht aus dem Viewport */
.cc-booking-card-badgewrap .cc-corner-badge{
position: absolute;
right: 6px; /* weiter links, wie du es wolltest */
top: -14px;
width: 80px;
height: 80px;
z-index: 50;
pointer-events: none;
mix-blend-mode: normal !important;
filter: none !important;
opacity: 1 !important;
}
/* =========================================
Bestpreis-Bar unten – volle Breite, eigenes Padding bleibt gleich
========================================= */
.cc-bestpreis-bar{
border: 1px solid #e6d8c9;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(9,66,138,0.10);
/* Innenleben */
display: flex;
align-items: center;
gap: 12px;
/* echtes Innenpadding (zusätzlich zu den 24px außen) */
padding-top: 14px !important;
padding-bottom: 14px !important;
padding-left: 24px!important;
}
/* Wichtig: Bild-Reset NICHT global auf alle img im Wrap,
sonst versaust du dir wieder irgendwas */
.cc-bestpreis-ring{
width: 26px;
height: 26px;
flex: 0 0 auto;
}
.cc-bestpreis-bar-text{
flex: 1 1 auto;
color: #09428a;
font-size: 17px; /* <- größer wie gewünscht */
line-height: 1.35;
}
.cc-bestpreis-bar-text b{
font-size: 19px; /* <- größer wie gewünscht */
}
.cc-bestpreis-more{
flex: 0 0 auto;
text-decoration: none;
color: #09428a;
font-weight: 800;
font-size: 14px;
white-space: nowrap;
}
/* =========================
MOBILE PATCH (<= 980px)
========================= */
@media (max-width: 980px){
/* 1) Gleiche Bündigkeit: wir geben dem GANZEN Block seitliche Luft,
Grid & Bestpreis-Bar bleiben 100% breit und bündig zueinander */
.cc-booking-wrap{
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
}
.cc-booking-grid,
.cc-bestpreis-bar{
width: 100%;
margin-left: 0;
margin-right: 0;
/* wichtig: KEIN eigenes Padding hier, sonst laufen sie wieder auseinander */
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
/* Wenn du die Cards mobil untereinander hast */
.cc-booking-grid{
grid-template-columns: 1fr;
row-gap: 16px;
}
/* 2) Badge soll NICHT mehr nach oben raus ragen (sonst stößt er an Karte drüber) */
.cc-booking-card-badgewrap .cc-corner-badge{
top: 10px; /* statt -14px */
right: 10px; /* bleibt in der Card */
}
/* Optional: Badge etwas kleiner auf Mobile */
.cc-booking-card-badgewrap .cc-corner-badge{
width: 72px;
height: 72px;
}
/* 3) Bestpreis-Leiste: Rettungsring soll oben neben "Bestpreisgarantie" bleiben */
.cc-bestpreis-bar{
align-items: flex-start; /* statt center */
flex-wrap: nowrap; /* verhindert "Icon oben, Text mittig" */
gap: 10px;
}
.cc-bestpreis-ring{
margin-top: 2px; /* optisch bündig zur ersten Textzeile */
flex: 0 0 auto;
}
.cc-bestpreis-bar-text{
flex: 1 1 auto;
min-width: 0; /* wichtig für sauberes Wrapping im Flex */
}
}
/* =========================
MOBILE PATCH (<= 980px)
========================= */
@media (max-width: 980px){
/* 1) Block wirklich 100%: kein seitliches Padding mehr */
.cc-booking-wrap{
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
box-sizing: border-box;
}
/* Grid + Bestpreis-Bar ebenfalls 100% ohne Innenpadding */
.cc-booking-grid,
.cc-bestpreis-bar{
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
/* Mobile: 1 Spalte */
.cc-booking-grid{
grid-template-columns: 1fr !important;
row-gap: 16px !important;
margin-bottom: 20px !important; /* 20px Luft zur Bestpreis-Box */
}
/* 2) Badge soll wieder rausragen, aber NICHT an die Bestpreis-Box "stoßen" */
.cc-booking-card-badgewrap{
position: relative;
overflow: visible !important; /* damit Badge raus darf */
}
.cc-booking-card-badgewrap .cc-corner-badge{
top: -12px !important; /* wieder raus */
right: -10px !important; /* leicht raus – wie Desktop */
width: 74px !important;
height: 74px !important;
z-index: 50 !important;
}
/* 3) Bestpreis-Box bekommt oben Abstand (falls Grid-Margin irgendwo überschrieben wird) */
.cc-bestpreis-bar{
margin-top: 20px !important;
}
/* optional: auch die Subline unter "Individuelles Angebot" etc. */
.cc-booking-card-title{
font-size: 22px !important;
}
/* Rettungsring-Fix beibehalten (bei dir funktioniert es ja schon gut) */
.cc-bestpreis-bar{
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
.cc-bestpreis-ring{
margin-top: 2px !important;
flex: 0 0 auto !important;
}
.cc-bestpreis-bar-text{
min-width: 0 !important;
}
}
/* =========================
MOBILE FINETUNE (<= 980px)
========================= */
@media (max-width: 980px){
/* 1) Abstand zwischen Karten und Bestpreis-Box */
.cc-booking-grid{
margin-bottom: 20px !important; /* Abstand NACH unten */
}
.cc-bestpreis-bar{
margin-top: 20px !important; /* Sicherheit, falls was überschreibt */
}
.cc-booking-card-badgewrap {
margin-top: 20px !important; /* Schiebt die gesamte Box inkl. Badge nach unten */
}
/* 2) Badge: NICHT rausragen (weiter nach links, komplett im Bild) */
.cc-booking-card-badgewrap .cc-corner-badge{
right: 10px !important; /* statt negativ raus */
top: -20px !important; /* sitzt sauber im Header */
width: 74px !important;
height: 74px !important;
}
/* 3) Bestpreis-Box Innenabstände:
- links KEIN 24px (Rettungsring bündig)
- rechts 24px (mehr Luft am Rand)
*/
.cc-bestpreis-bar{
margin-top: 40px !important;
padding-left: 0 !important;
padding-right: 24px !important;
}
/* Rettungsring bündig, aber mit minimalem Abstand zur Rundung */
.cc-bestpreis-ring{
margin-left: 10px !important; /* optisch bündig ohne am Rand zu kleben */
}
/* Text soll nicht am Rand kleben und sauber umbrechen */
.cc-bestpreis-bar-text{
padding-right: 0 !important;
}
}