@charset "utf-8";
/* CSS Document */
/* Mobile Standard: Menü versteckt */
#main-menu {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    #main-menu {
        display: none;
        flex-direction: column;
        background: #3366ff;
        padding: 10px;
    }

    /* Wenn JS die Klasse setzt → Menü sichtbar */
    #main-menu.menu-open {
        display: flex;
    }

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  color: inherit;
}

/* Hover */
.menu-toggle:hover {
  opacity: 0.8;
}

/* Fokus */
.menu-toggle:focus {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Active */
.menu-toggle:active {
  opacity: 0.6;
}


/* Desktop: Toggle-Button ausblenden */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}


#breadcrumbs ul li{display:block;font-size:small;width:auto;list-style-type:none;text-align:left;float:left;clear:none;padding:3px;margin-left:2px}
#breadcrumbs ul li a{text-decoration:none;color:#00000}
#breadcrumbs ul li:hover{text-decoration:underline}
#breadcrumbs ol {display:flex;flex-wrap:wrap;font-size:13px;list-style:none;padding:3px;margin-left:2px;}
#breadcrumbs ol li {margin:2px 5px;}
#breadcrumbs ol li + li::before {content:'› ';}
#breadcrumbs ol li a {text-decoration:none;color:#000;}
#breadcrumbs ol li:hover a {text-decoration:underline;}
.tel-block {display:flex;flex-direction:row;justify-content:space-between;font-size:14px;margin:0 10px;align-content:center;}
#phone {display:flex;flex-direction:column;text-align:right;}
#phone p {margin:0;line-height:1.4;}
.visually-hidden {position:absolute;left:-9999px;}
.boot-specs {display: flex;flex-wrap: wrap;width: 100%;}
.boot-specs dt {width: 60%;padding: 5px 0;border-bottom: 1px solid #eee;}
.boot-specs dd {width: 40%;text-align: right;margin: 0;padding: 5px 0;border-bottom: 1px solid #eee;font-weight: bold;}
.ratio_1200_280{padding-top:23.333333%}
.ratio_1200_280 img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ratio_1200x636{padding-top:63.6%}
.ratio_1200x636 img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.img_530x161{padding-top:30.37735849%;position:relative;width:100%;}
.img_530x161 img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ratio_300x104{padding-top:33.66666667%}.ratio_300x104 img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}

.top50{padding-top: 51px}
.bg-weiss{background-color: #ffffff}


/* flex */
* {box-sizing: border-box;}
.flex-cont{display: flex;flex-direction: row;justify-content: center;flex-wrap: wrap}
.flex-between{display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap}
.flex-between-r{display: flex;flex-direction: row-reverse;justify-content: space-between;flex-wrap: wrap}
.box{width: 350px;margin: 10px}
.box350{width: 350px;margin: 10px}
a .ratio_550x350 img{filter: brightness(80%);}
a .ratio_550x350 img:hover {filter: brightness(100%);}
.ueber-bild{position: absolute;bottom: 0; background: rgb(0, 0, 0); /* Fallback color */background: rgba(0, 0, 0, 0.5);
  color: #ffffff;line-height: 50px;width: 100%; z-index: 2;text-align: center}
.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);}
.fotobild{padding: 1%;margin-bottom: 1%;}
div .fotobild p{text-align: center}

.box250 {width: 250px;align-items: stretch;padding: 1%;margin: 1%;}
.gelb{padding: 1%;-webkit-box-shadow: 10px 10px 5px 5px #666;margin: 1%;box-shadow: 10px 10px 5px 5px #666;background-color: #FFFF99;}
.hellblau{background-color:#cee3f6;-webkit-box-shadow:10px 10px 5px 5px #666;box-shadow:10px 10px 5px 5px #666;padding:1%}
.gruen{background-color:#dbf7ca;-webkit-box-shadow:10px 10px 5px 5px #666;box-shadow:10px 10px 5px 5px #666;padding:1%}
.weisse-flaeche{background-color:#ffffff;-webkit-box-shadow:10px 10px 5px 5px #666;box-shadow:10px 10px 5px 5px #666;padding:1%}

summary{line-height: 45px;margin: 1px;padding-left: 10px;background: #3333ff;color:white;border:solid 1% #ffffff;border-radius: 8px;margin-top: 1%}
summary:hover{background: #c00}

.box-boot{width: 220px;margin:10px;padding:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);font-size: 90%;background:#ffffff}	
.euro-w{text-align: center;font-weight: bold}
.euro-w::after{content: ' €/Woche'}
.hafen::before{content: 'Hafen: '}
.box-boot .offer{margin:10px auto;background: #f3f3f3;padding: 5px}
.box-boot .ueber-bild {font-weight: bold;height: 38px;display: flex;flex-direction: column;justify-content: center;align-items: center;line-height: 1.0;gap: 2px;}
.box-boot .ueber-bild small {font-size: 0.85em;line-height: 1.0;display: block}
h3.ueber-bild {font-size: inherit;min-height: auto;font-weight: 700;border-bottom: none;padding-top: 0;line-height: 50px;margin-bottom: 0}


button {display: flex;justify-content: center;align-items: center;width: 100%;max-width:1000px;height: 50px;margin: 0 auto;font-size: 1rem;font-weight: 700;color: #fff;border: 2px solid #fff;border-radius: 8px;cursor: pointer;text-decoration: none;box-sizing: border-box;padding: 0;appearance: none;transition:background-color 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease;}
button:hover {transform: translateY(-2px);border: none}
button:focus {outline: none}
button:active {transform: translateY(0);outline: none;} 

#neuer-name p{font-weight: bold;text-align: center;font-size: 120%}
.claim-box {position: absolute;left: 0;right: 0;bottom: 6%; margin-left: auto; margin-right: auto;width: max-content; background: rgba(0,0,0,0.35);padding: 0.6% 2%;border-radius: 4px; color: #fff;font-size: 110%; font-weight: 500; text-align: center}


@media (max-width: 480px) {
.tech-specs {grid-template-columns: 1fr;}
.tech-specs dt { border-bottom: none;padding-bottom: 0;}
.tech-specs dd {padding-top: 4px;margin-right: 2px;}
}

@media (max-width:600px){button{width:100%;margin:0}}


@media screen and (max-width:760px)
{
    .tel-block {flex-direction:column;}
#phone{flex-direction:row;justify-content:flex-end;gap:12px;}
.weg2{display:none;}
}