/* Zentrierung aller Footer-Boxen auf SYCA – Anweisung vom Kapitän René */
.footer-widgets-wrap .widget {
text-align: center;
}
.footer-widgets-wrap .footer-logo,
.footer-widgets-wrap address,
.footer-widgets-wrap abbr,
.footer-widgets-wrap a,
.footer-widgets-wrap h4,
.footer-widgets-wrap h5,
.footer-widgets-wrap p,
.footer-widgets-wrap ul,
.footer-widgets-wrap li,
.footer-widgets-wrap form,
.footer-widgets-wrap img {
margin-left: auto;
margin-right: auto;
display: block;
}
.footer-widgets-wrap ul {
padding-left: 0;
list-style-position: inside;
}
.footer-widgets-wrap .social-icon {
display: inline-block;
float: none !important;
}
/* Newsletter-Rückmeldung zentriert */
.footer-widgets-wrap .widget-subscribe-form-result {
text-align: center;
}
.input-group-btn .btn {
height: 50px;
}
/* WICHTIG: Newsletter-Eingabe bleibt horizontal, auch mobil */
@media screen and (max-width: 767px) {
.newsletter-block {
flex-wrap: nowrap !important;
gap: 0.3em;
}
}
/* Footer-Spaltenstruktur mobil anpassen */
@media screen and (max-width: 767px) {
.footer-widgets-wrap .col_one_third,
.footer-widgets-wrap .col_two_third,
.footer-widgets-wrap .col_half,
.footer-widgets-wrap .col_last {
width: 100% !important;
float: none !important;
margin: 0 auto 40px !important;
text-align: center !important;
}
#copyrights .col_half {
width: 100% !important;
float: none !important;
text-align: center !important;
margin-bottom: 18px;
}
#copyrights .col_half.col_last {
text-align: center !important;
}
#copyrights .fright {
float: none !important;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
#copyrights a {
white-space: nowrap;
}
}
/* Yacht Polaris Hintergrund zum Logo */
.syp-icon {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
overflow: hidden;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin-right: 10px;
}
.syp-icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.syp-icon:hover {
background-color: #ffffff;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}
.syp-icon:hover img {
transform: scale(1.03);
transition: transform 0.3s ease;
}
/* Logo vergrößern */
.footer-logo {
transition: all 0.3s ease;
border-radius: 8px;
}
.footer-logo:hover {
background-color: #ffffff;
padding: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}
.footer-widgets-wrap .widget_links h2 {
font-size: 14px;
font-weight: normal;
/* optional: weniger wuchtig */
margin-bottom: 12px;
/* optional: etwas Abstand zu den Links */
}
/* Yachtpool-Siegel sanft vergrößern bei Hover */
.widget img[src*="yacht-pool"] {
transition: transform 0.3s ease;
transform: scale(1);
cursor: default;
}
.widget img[src*="yacht-pool"]:hover {
transform: scale(1.05);
}
/* Text-Einblendung-MMK-Suche */
.mobile-only-hint {
display: none;
}
@media screen and (max-width: 767px) {
.mobile-only-hint {
display: block;
font-size: 15px;
color: #444;
text-align: center;
padding: 1em;
animation: fadeInHint 1s ease-out 0.3s both;
}
@keyframes fadeInHint {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* Texte auf Smartphones ausblenden */
@media screen and (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}
.schnell-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 16px;
border-left: 2px solid #f4e04d;
border-right: 2px solid #f4e04d;
border-top: none;
border-bottom: none;
border-radius: 20px;
color: #FAB12D;
/* Standard-Text & Icon-Farbe */
text-decoration: none;
font-weight: bold;
min-width: 160px;
max-width: 200px;
transition: all 0.3s ease;
background: transparent;
}
/* Gemeinsames Styling */
.schnellsuche-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.6rem 2rem;
margin-top: 2rem;
position: relative;
}
.schnell-link img {
width: 42px;
height: 42px;
margin-bottom: 0.6rem;
fill: FAB12D;
transition: fill 0.3s ease, transform 0.3s ease;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}
.schnell-link:hover {
background: rgba(74, 143, 172, 0.42);
/* sanftes maritimes Blau */
color: #00213E;
/* Text + Icon-Farbe bei Hover */
transform: scale(1.03);
}
.schnell-link:hover img {
opacity: 0.95;
transform: scale(1.05);
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
transition: transform 0.3s ease, filter 0.3s ease;
}
/* Mobile Optimierung */
@media (max-width: 768px) {
.schnellsuche-links {
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.schnell-link {
min-width: 120px;
padding: 12px 14px;
font-size: 1.2rem;
}
.schnell-link img {
width: 36px;
height: 36px;
margin-bottom: 0.4rem;
}
.schnell-link.unten {
top: 0;
}
}
/*Mischpult für Reviertexte*/
.reviertext {
max-width: 700px;
margin: 60px auto;
padding: 0 20px;
text-align: center;
font-size: 1.3rem;
line-height: 1.7;
}
.reviertext h2,
.reviertext h3 {
font-family: 'Georgia', serif;
margin-bottom: 10px;
}
.reviertext .autor {
font-size: 1.15rem;
color: #d4af37;
/* dein Goldton */
margin-bottom: 30px;
font-style: italic;
}
.revierbild {
text-align: center;
margin: 60px 0;
}
.revierbild-img {
width: 35%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
.revierbild-img {
width: auto;
max-width: 90%;
}
}
.revier-link-button {
display: inline-block;
padding: 10px 20px;
background-color: #003366;
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.revier-link-button:hover {
background-color: #005599;
}
.contact-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
white-space: nowrap;
font-size: 1.32rem;
display: flex;
align-items: center;
gap: 0.4rem;
transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-btn i {
color: gold;
transition: color 0.3s ease;
}
.contact-btn:hover {
color: gold;
border-color: gold;
}
.contact-btn:hover i {
color: gold;
}
/* Startseite */
/* Goldene Rahmen für die SEO-Box */
.seo-section {
border-left: 4px solid #d1b777;
border-right: 4px solid #d1b777;
padding-left: 1rem;
padding-right: 1rem;
margin-top: 2rem;
margin-bottom: 3rem;
}
/* Harmonische Typografie innerhalb der SEO-Box */
.seo-section h2 {
font-size: 1.28rem;
color: #fff;
margin-top: 2rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 215, 0, 0.4);
padding-bottom: 0.3rem;
}
.seo-section p {
color: #ccc;
font-size: 1.18rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* Containerzentrierung */
.seo-section .container {
max-width: 960px;
margin: 0 auto;
}
/* Links in der SEO-Box */
.seo-section a {
color: #f4e04d;
text-decoration: none;
border-bottom: 1px dotted rgba(244, 224, 77, 0.7);
transition: color 0.2s ease, border-bottom-color 0.2s ease;
font-weight: 500;
}
.seo-section a:hover,
.seo-section a:focus {
color: #ffffff;
border-bottom-color: #f4e04d;
}
/* Optional: etwas mehr Abstand bei langen Links im Fließtext */
.seo-section p a {
padding-bottom: 1px;
}
/* MMK - Frame */
.mmk-frame {
position: relative;
z-index: 0;
/* Neutral */
max-width: 75vw;
min-height: 80vh;
/* Sicherstellen, dass der Container mindestens so hoch ist wie der iframe */
margin: 1.5rem auto;
transition: max-width 0.4s ease;
border-left: 4px solid #d1b777;
border-right: 4px solid #d1b777;
padding: 0 1rem;
overflow: hidden;
/* Wichtig: verhindert Überschuss */
}
/* MMK – Lade-Overlay */
.mmk-frame::before {
content: "Die Suche wird geladen. Bitte einen Moment warten.";
position: absolute;
inset: 0;
/* Füllt das gesamte Element */
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
color: #fff;
background: rgba(0, 0, 0, 0.6);
/* Ruhiger dunkler Schleier */
padding: 1rem 1.5rem;
border-radius: 10px;
z-index: 1;
/* Unterhalb des iframe */
pointer-events: none;
/* Kein Klicken blockieren */
text-align: center;
text-shadow: 0 0 6px #d1b777;
animation: pulse 3s ease-in-out infinite;
}
/* MMK – iFrame */
.mmk-frame iframe {
width: 100%;
min-height: 80vh;
border: none;
opacity: 0;
/* Unsichtbar beim Start */
transition: opacity 0.5s ease;
/* Sanftes Einblenden */
position: relative;
z-index: 2;
/* Über dem Lade-Overlay */
}
/* Nach dem Laden: iFrame sichtbar */
.mmk-frame iframe.loaded {
opacity: 1;
}
/* Puls-Animation */
@keyframes pulse {
0%,
100% {
text-shadow: 0 0 6px #d1b777;
}
50% {
text-shadow: 0 0 15px #ffd700;
}
}
/* Button-Wrapper */
.iframe-resize-wrapper {
text-align: center;
margin-top: 1.5rem;
}
/* Sichtbarer, kontrastreicher Button */
.iframe-resize-button {
background-color: rgba(255, 215, 0, 0.12);
/* dezenter Goldschimmer */
color: #fff;
/* weiße Schrift für besten Kontrast */
border: 1px solid rgba(255, 215, 0, 0.6);
/* leicht transparenter Goldton */
padding: 0.6rem 1.2rem;
font-size: 1.2rem;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
opacity: 0.95;
display: none;
/* wird per JS eingeblendet */
transition: all 0.25s ease;
}
.iframe-resize-button:hover {
background-color: rgba(255, 215, 0, 0.3);
border-color: gold;
color: #fff;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
opacity: 1;
}
/* Nur sichtbar auf Smartphone Portrait */
@media screen and (max-width: 767px) and (orientation: portrait) {
.iframe-resize-button {
display: inline-block;
}
}
/* MMK – Navigation für Sucharten */
.mmk-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
max-width: 75vw;
margin: 2rem auto;
padding: 0 1rem;
box-sizing: border-box;
}
/* MMK – Buttons */
.mmk-button {
background: transparent;
color: #fff;
border: 2px solid gold;
padding: 0.75rem 1.5rem;
font-size: 1.15rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
min-width: 160px;
text-align: center;
}
/* Tooltips bei Hover */
.mmk-button::after {
content: attr(data-tooltip);
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 0.3rem 0.6rem;
border-radius: 4px;
font-size: 1.2rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.mmk-button:hover::after {
opacity: 1;
}
/* Hover- und Aktivzustand */
.mmk-button:hover,
.mmk-button.active {
background: gold;
color: #003344;
}
/* Responsive: Smartphone Portrait */
@media screen and (max-width: 767px) {
.mmk-button {
flex: 0 1 calc(50% - 1rem);
/* Zwei Buttons pro Zeile */
min-width: unset;
padding: 1rem;
font-size: 1.2rem;
}
.mmk-nav {
gap: 1rem 1rem;
}
}
/* Jetzt aber ruhe im Text */
.emphasis-title,
[data-animate="fadeInUp"],
[data-animate] {
opacity: 1 !important;
transform: none !important;
animation: none !important;
visibility: visible !important;
transition: none !important;
}
/* Saubere Platzreservierung für den Slider */
.full-screen.force-full-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Wellen bändigen*/
@media screen and (max-width: 1024px) {
.full-screen.force-full-screen {
background-attachment: scroll !important;
background-position: center center !important;
background-size: cover !important;
height: 100vh;
min-height: 100vh;
width: 100%;
max-width: 100%;
overflow: hidden;
object-fit: cover;
position: relative;
}
#slider {
overflow-x: hidden;
}
}
.video-module {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: 20px auto;
width: 100%;
}
.responsive-video {
width: 25vw;
/* Feste Desktop-Breite */
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.4s ease, box-shadow 0.4s ease;
display: block;
}
/* Hover-Effekt nur aufs Video */
.responsive-video:hover {
transform: scale(1.02);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.video-caption {
margin-top: 10px;
font-size: 1.2rem;
color: #FFFFFF;
text-align: center;
max-width: 90%;
opacity: 0.8;
transition: opacity 0.4s ease;
}
/* Caption leicht verstärken bei Hover */
.responsive-video:hover+.video-caption {
opacity: 1;
}
/* Smartphone-Optimierung */
@media (max-width: 768px) {
.responsive-video {
width: 60vw;
}
}
/* Mobile-Menü V2 - Final korrigiert */
.mobile-header {
position: fixed;
top: 25px;
left: 18px;
right: 18px;
z-index: 9999;
width: calc(100% - 36px);
/* Linker und rechter Abstand beachten */
display: flex;
justify-content: space-between;
/* Logo links, Warenkorb rechts */
align-items: center;
}
/* SYC-Logo */
.syc-logo {
width: 60px;
animation: slideInLeft 1s ease-out 0.5s forwards;
opacity: 0;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
cursor: pointer;
}
/* Slide-In Animation für das Logo */
@keyframes slideInLeft {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* Overlay für das Mobile-Menü */
.mobile-menu-overlay {
display: flex;
/* Immer Flex, aber erstmal unsichtbar */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
/* Sanfte Verdunkelung */
backdrop-filter: blur(2px);
/* Dein geliebter Milchglas-Effekt */
z-index: 9998;
justify-content: center;
align-items: center;
/* Transition für sanftes Ein-/Ausblenden */
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* Wenn aktiv */
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* Popup-Inhalt des Menüs */
.mobile-menu-content {
background: #18344a;
padding: 15px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 55%;
max-width: 400px;
text-align: center;
border-top: 2px solid #d4af37;
border-bottom: 2px solid #d4af37;
}
/* Kategorie-Liste */
.mobile-menu-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu-content ul li {
margin: 7.5px 0;
padding: 7.5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.mobile-menu-content ul li:last-child {
border-bottom: none;
}
.mobile-menu-content a {
text-decoration: none;
color: #ffffff;
font-size: 1.15em;
font-weight: 400;
letter-spacing: 0.05em;
}
/* Warenkorb */
.cart-icon {
margin-left: -25px !important;
}
/*Warenkorb erst nach einer Bildschirmlänge*/
.cart-icon {
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.6s ease, transform 0.6s ease;
cursor: pointer;
}
.cart-icon.visible {
opacity: 1;
transform: translateY(0);
}
/* Sichtbarkeit: Mobile Only */
@media (min-width: 1024px) {
.mobile-header,
.mobile-menu-overlay {
display: none !important;
}
}
/* Altes Hauptmenü auf Tablet und Smartphone ausblenden */
/* Mobile: alten Header komplett ausblenden */
@media (max-width: 1024px) {
#header-wrap,
#header {
/* falls du #header statt #header-wrap nutzt */
display: none !important;
}
}
@media (max-width: 1024px) {
#primary-menu {
display: none !important;
}
}
@media (max-width: 1024px) {
#primary-menu-trigger {
display: none !important;
}
}
.mobile-menu-content a:hover {
color: #a3d5ff;
/* zartes, leicht helles Blau */
text-shadow: 0 0 6px rgba(163, 213, 255, 0.5);
/* sanfter Schimmer */
transition: all 0.3s ease;
}
/* Hover-Effekt: nur das Warenkorb-Icon vergrößern */
.syc-logo {
width: 60px;
animation: slideInLeft 1s ease-out 0.5s forwards;
opacity: 0;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
cursor: pointer;
transition: transform 0.3s ease !important;
/* <-- !important */
}
.syc-logo:hover {
transform: scale(1.05) !important;
/* <-- !important */
}
/* Links im Overlay bleiben klickbar */
#welcome-overlay a {
pointer-events: auto;
}
/* Text-Styles */
.welcome-text {
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.welcome-small {
font-size: 1.2rem;
margin: 0.5rem 0;
}
.welcome-main {
font-size: 5rem;
margin: 0.5rem 0;
font-weight: 700;
letter-spacing: 1px;
}
.welcome-sub {
font-size: 1.5rem;
margin: 0.5rem 0;
}
.welcome-tagline {
font-size: 1.3rem;
margin: 0.5rem 0 0;
font-style: italic;
}
/* Fadeout beim Scrollen */
#welcome-overlay.fade-out {
opacity: 0;
transform: translate(-50%, -60%);
}
/* Nur auf Desktop: sanftes Einblenden */
@media (min-width: 768px) {
#welcome-overlay {
opacity: 0;
transform: translate(-50%, -60%);
animation: welcomeFadeIn 0.6s ease forwards;
}
}
/* Keyframes für das Fade-In */
@keyframes welcomeFadeIn {
from {
opacity: 0;
transform: translate(-50%, -60%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
/* --------------------------------------------
Kontaktbereich + Rabatt-Label im Hero
-------------------------------------------- */
/* Kontakt: Iris + Telefonnummer untereinander */
.welcome-overlay .kontakt-link a {
display: block;
text-align: center;
margin-bottom: 0.15rem;
}
/* Basis: nur Text + zarte Goldlinien, keine Pille */
.rabatt-label {
position: relative;
display: inline-block;
/* Breite folgt dem Text */
padding: 0.1rem 0.3rem;
/* minimaler Abstand um den Text */
font-weight: 600;
font-size: 0.98rem;
color: #f4e04d;
text-transform: uppercase;
letter-spacing: 0.08em;
background: transparent;
/* KEIN Kasten im Normalzustand */
border-radius: 0;
box-shadow: none;
transition: background 0.25s ease, color 0.25s ease;
}
/* Goldene Linien ober- & unterhalb, leicht länger als der Text */
.rabatt-label::before,
.rabatt-label::after {
content: "";
position: absolute;
left: 50%;
width: 120%;
/* ragt leicht über den Text hinaus */
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg,
rgba(244, 224, 77, 0),
rgba(244, 224, 77, 0.95),
rgba(244, 224, 77, 0));
}
.rabatt-label::before {
top: -0.35rem;
}
.rabatt-label::after {
bottom: -0.35rem;
}
/* Hover: dunkler Verlauf, der zu den Rändern ausfadet – kein harter Kasten */
.rabatt-label:hover,
.welcome-scroll-link:hover .rabatt-label {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.55),
rgba(0, 0, 0, 0));
color: #ffffff;
}
/* Goldlinien beim Hover etwas kräftiger */
.rabatt-label:hover::before,
.rabatt-label:hover::after {
background: linear-gradient(90deg,
rgba(244, 224, 77, 0),
rgba(244, 224, 77, 1),
rgba(244, 224, 77, 0));
}
/* Black-Friday-Link: eigene Zeile unter der Telefonnummer */
.welcome-overlay a[href*="faq-rabatte"] {
display: block;
text-align: center;
margin-top: 0.9rem;
/* Luft zur Nummer */
}
/* Mobile Feintuning */
@media (max-width: 480px) {
.welcome-overlay .telefonnummer {
font-size: 1.1rem;
}
.rabatt-label {
font-size: 0.9rem;
letter-spacing: 0.06em;
}
}
/* ================================= */
/* NauSys – Infoboxen auf /mehr */
/* ================================= */
.nausys-info {
max-width: 720px;
margin: 60px auto 40px auto;
padding: 32px 26px;
text-align: center;
line-height: 1.8;
background-color: rgba(255, 255, 255, 0.035);
border-radius: 14px;
/* → macht deine schönen Bögen */
box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
font-size: 1.35rem;
color: #f0f0f0;
}
/* Varianten: oben / unten mit Goldkante */
.nausys-info--top {
border-top: 4px solid #ffd700;
}
.nausys-info--bottom {
border-bottom: 4px solid #ffd700;
}
/* Überschriften */
.nausys-info h2,
.nausys-info h3,
.nausys-info h4 {
font-weight: 600;
margin-bottom: 1.1em;
color: #ffffff;
}
.nausys-info h2 {
font-size: 1.9rem;
}
.nausys-info h3 {
font-size: 1.7rem;
}
.nausys-info h4 {
font-size: 1.6rem;
}
/* Normale Absätze */
.nausys-info p {
margin-bottom: 1.2em;
}
/* Kleine Hinweise / Tooltips-Hinweis */
.nausys-note {
margin-top: 1.8em;
font-size: 1.05rem;
color: #aaaaaa;
}
.nausys-tooltip-hint {
color: #f4e04d;
font-weight: 600;
}
/* Linkstil in den Boxen */
.nausys-info a {
color: #ffffff;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.nausys-info a:hover {
text-decoration-thickness: 2px;
}
/* Liste der Orientierungsfragen */
.nausys-list {
list-style: none;
padding: 0;
margin: 0 0 1.6em 0;
font-weight: 600;
}
.nausys-list li {
margin: 0.1em 0;
}
.nausys-list li::before {
content: "•";
color: #f4e04d;
margin-right: 0.45em;
}
/* Signatur */
.nausys-signature {
font-weight: 600;
margin-top: 1.4em;
}
/* Responsive */
@media (max-width: 800px) {
.nausys-info {
padding: 26px 20px 28px;
font-size: 1.25rem;
}
.nausys-info h2 {
font-size: 1.7rem;
}
.nausys-info h3,
.nausys-info h4 {
font-size: 1.45rem;
}
}
.nausys-highlight {
color: #f4e04d;
font-weight: 600;
}
/* Infobox Kalender */
.calendar-info-box {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 8px;
border: 1px solid #ddd;
text-align: center;
font-size: 1.2rem;
color: #163447;
/* dunkles Blau */
}
.calendar-info-box a.calendar-link {
color: #276b9c;
font-weight: bold;
text-decoration: none;
}
.calendar-info-box a.calendar-link:hover {
color: #276b9c;
text-decoration: underline;
}
/* Für den kleinen "Zur Auswahl hinzufügen"-Button */
.calendar-info-box .add-to-cart {
display: inline-block;
margin-top: 10px;
background-color: #062e4e;
/* kräftiger Blauton */
color: #ffffff;
font-weight: bold;
text-decoration: none;
font-size: 1.3rem;
padding: 10px 18px;
border-radius: 8px;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.calendar-info-box .add-to-cart:hover {
background-color: #0c3e66;
transform: scale(1.03);
}
.price-calendar-nav {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 0.75rem;
}
.price-cal-btn {
padding: 0.5rem 1.1rem;
border-radius: 4px;
border: 1px solid #f4e04d;
background: rgba(0, 0, 0, 0.25);
color: #ffffff;
font-size: 0.95rem;
cursor: pointer;
transition:
background 0.18s ease,
color 0.18s ease,
transform 0.15s ease,
box-shadow 0.18s ease;
}
.price-cal-btn:hover {
background: #f4e04d;
color: #1B3546;
transform: translateY(-1px);
box-shadow: 0 0 10px rgba(244, 224, 77, 0.6);
}
/* Close-Button Fix */
.mfp-close {
position: absolute;
left: 50%;
transform: translateX(-50%);
transform-origin: center center;
z-index: 9999;
font-size: 30px;
color: #fff;
background: none;
border: none;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s ease;
width: 60px;
/* Feste Breite */
height: 60px;
/* Feste Höhe */
line-height: 60px;
/* Mitte ausgleichen */
text-align: center;
/* Das Kreuz perfekt mittig */
padding: 0;
/* Kein Innenabstand */
}
.mfp-close:hover {
opacity: 1;
}
/* Pagination Listen */
.pagination {
text-align: center;
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
margin: 30px 0;
font-family: inherit;
}
.pagination .page-link {
display: inline-block;
padding: 6px 12px;
min-width: 36px;
text-align: center;
border-radius: 6px;
text-decoration: none;
background-color: transparent;
color: #d3e4f1;
border: 1px solid transparent;
transition: all 0.2s ease;
}
.pagination .page-link:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.pagination .page-link[style*="background-color"] {
background-color: #0077cc !important;
color: white !important;
font-weight: bold;
border-color: #0077cc !important;
box-shadow: 0 0 5px rgba(0, 119, 204, 0.3);
}
.link-highlight-start {
color: #c8a039;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
/* optional für noch klarere Gliederung */
transition: all 0.3s ease;
}
.link-highlight-start:hover {
color: #d9b55f;
font-size: 15px;
letter-spacing: 0.7px;
transform: scale(1.03);
/* sehr dezent, aber fühlbar */
}
/* Kontaktformular 2.0 Styling – Scoped für .kontaktformular-20 */
/* Labels */
.kontaktformular-20 label {
display: block;
margin-bottom: 0.25rem;
font-weight: 600;
color: #FFFFFF;
}
/* Eingabefelder */
.kontaktformular-20 input[type="text"],
.kontaktformular-20 input[type="email"],
.kontaktformular-20 input[type="tel"],
.kontaktformular-20 input[type="password"],
.kontaktformular-20 textarea,
.kontaktformular-20 select {
width: 100%;
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
transition: border-color 0.3s ease;
font-size: 1.25rem;
}
/* Fokusrahmen in Gold */
.kontaktformular-20 input:focus,
.kontaktformular-20 textarea:focus,
.kontaktformular-20 select:focus {
outline: none;
border-color: #bfa760;
box-shadow: 0 0 0 1px #bfa760;
}
/* Spaltenstruktur */
.kontaktformular-20 .col_half {
width: 48%;
float: left;
margin-right: 4%;
}
.kontaktformular-20 .col_last {
margin-right: 0 !important;
}
.kontaktformular-20 .col_full {
width: 100%;
float: none;
clear: both;
}
/* Responsiv auf Smartphone */
@media (max-width: 768px) {
.kontaktformular-20 .col_half,
.kontaktformular-20 .col_last {
width: 100%;
float: none;
margin-right: 0;
}
.kontaktformular-20 .tab-nav {
flex-direction: column;
gap: 0.5rem;
}
.kontaktformular-20 .tab-nav li {
width: 100%;
}
.kontaktformular-20 .tab-nav li a {
text-align: center;
}
}
/* Submit-Button */
.kontaktformular-20 .button {
background-color: #bfa760;
color: white;
border: none;
border-radius: 8px;
padding: 0.85rem 2rem;
font-size: 1.15rem;
font-weight: bold;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kontaktformular-20 .button:hover {
background-color: #a38c50;
}
/* Checkbox Styling */
.kontaktformular-20 .checkbox-style {
display: inline-block;
margin-right: 0.5rem;
}
/* Trennlinien */
.kontaktformular-20 hr {
border: none;
height: 1px;
background-color: #12384e;
margin: 2rem 0;
}
/* Tab-Navigation Container */
.kontaktformular-20 .tab-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
justify-content: flex-start;
}
/* Tab-Buttons */
.kontaktformular-20 .tab-nav li {
list-style: none;
margin: 0;
}
.kontaktformular-20 .tab-nav li a {
display: inline-block;
padding: 0.75rem 1.5rem;
color: #0a2d3e !important;
border: 1px solid #0a2d3e;
border-radius: 0.5rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
outline: none;
box-shadow: none;
}
.kontaktformular-20 .tab-nav li a:hover {
background-color: #bfa760;
color: #0a2d3e !important;
border-color: #bfa760;
}
.kontaktformular-20 .tab-nav li.ui-tabs-active a {
background-color: #bfa760;
color: #ffffff !important;
border-color: #bfa760;
}
/* Nur aktiver Tab-Inhalt sichtbar */
.kontaktformular-20 .tab-content {
display: none;
}
.kontaktformular-20 .tab-content.ui-tabs-active,
.kontaktformular-20 .tab-content.active {
display: block;
}
/* CAPTCHA sichtbar machen */
.kontaktformular-20 #captcha_spam {
filter: contrast(160%) brightness(70%);
border: 1px solid #bfa760;
border-radius: 4px;
padding: 4px;
}
/* Iris anrufen */
.welcome-text {
pointer-events: auto;
}
.kontakt-link {
margin-top: 10px;
text-align: center;
display: inline-block;
}
.telefonnummer {
font-size: 1.3rem;
font-weight: bold;
color: #f4e04d;
text-decoration: underline;
display: inline-block;
margin-top: 4px;
}
.telefonnummer:hover {
color: #ffe76d;
text-shadow: 0 0 4px rgba(255, 231, 109, 0.5);
}
.welcome-text .kontakt-label {
font-size: 1.5rem !important;
font-weight: 300;
color: #ffffffcc;
display: block;
margin-bottom: 6px;
line-height: 1.2;
letter-spacing: 0.2px;
}
/* Container fix */
.kontaktformular-20::after {
content: "";
display: table;
clear: both;
}
.willkommen-auf-schaefer-charter-com,
.willkommen-auf-schaefer-charter-com-ende-begrüßung {
max-width: 880px;
margin: 100px auto 120px auto;
padding: 60px 40px;
background: rgba(255, 255, 255, 0.035);
border-radius: 24px;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.06);
color: #ffffff;
font-size: 1.4rem;
line-height: 1.85;
text-align: center;
}
.willkommen-auf-schaefer-charter-com h2,
.willkommen-auf-schaefer-charter-com-ende-begrüßung h2 {
font-size: 2.4rem;
font-weight: bold;
margin-bottom: 1.8rem;
}
.kontaktbild-figure {
margin: 0 auto 2.8rem;
text-align: center;
}
.kontaktbild {
width: 350px;
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
display: block;
margin-left: auto;
margin-right: auto;
}
.kontaktbild-figure figcaption {
margin-top: 1em;
font-size: 1.2rem;
color: #cccccc;
}
/* Goldränder */
.gold-top {
border-top: 5px solid #f4e04d;
}
.gold-bottom {
border-bottom: 5px solid #f4e04d;
}
.gold-left {
border-left: 5px solid #f4e04d;
}
.gold-right {
border-right: 5px solid #f4e04d;
}
.search-hinweis-box {
position: relative;
z-index: 0;
/* explizit niedrig halten */
pointer-events: none;
/* verhindert, dass sie Klicks blockiert */
}
.search-hinweis-box a,
.search-hinweis-box * {
pointer-events: auto;
/* erlaubt Interaktion innerhalb der Box */
}
.formular-container,
.kontaktformular-20 {
max-width: 960px;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
}
.revier-boxen-container {
max-width: 960px;
margin: 60px auto;
padding: 0 20px;
}
.revier-boxen-headline {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: #f4e04d;
font-family: 'Georgia', serif;
}
.revier-boxen-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
}
.revier-box {
width: 30%;
min-width: 240px;
max-width: 320px;
background: rgba(255, 255, 255, 0.04);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.revier-box:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.revier-box-link {
color: inherit;
text-decoration: none;
display: block;
height: 100%;
}
.revier-box-img {
width: 100%;
height: auto;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.revier-box-text {
padding: 1rem;
text-align: center;
}
.revier-box-text h4 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: #fff;
}
.revier-box-text p {
font-size: 1.1rem;
color: #ccc;
margin-bottom: 0.75rem;
line-height: 1.4;
min-height: 60px;
}
.revier-box-button {
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid #f4e04d;
border-radius: 6px;
color: #f4e04d;
font-weight: bold;
font-size: 1.05rem;
transition: background-color 0.3s ease;
}
.revier-box-button:hover {
background-color: #f4e04d;
color: #003344;
}
/* Smartphone: 75% Breite */
@media screen and (max-width: 767px) {
.revier-box {
width: 75%;
}
}
/* =============================== */
/* Startseite V3 */
/* Kopfbereich Willkommen */
/* =============================== */
/* ===== Globales Basisset (klein & neutral) ===== */
.fullscreen-gallery {
position: relative;
height: 100vh;
height: 100dvh;
width: 100%;
max-width: 100vw;
overflow: hidden;
z-index: 1;
}
.fullscreen-gallery .slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 2s ease-in-out;
z-index: 1;
}
.fullscreen-gallery img.zoom {
transform: scale(1.1);
}
/* Optionale globale Caption */
.fullscreen-gallery .caption {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
color: #fff;
background: rgba(0, 0, 0, .5);
padding: .6em 1.2em;
border-radius: 8px;
opacity: 0;
transition: opacity 1.5s ease-in-out 1.2s;
pointer-events: none;
font-size: 1.2em;
white-space: nowrap;
}
.fullscreen-gallery .slide.active .caption {
opacity: 1;
}
.fullscreen-gallery .slide.active {
opacity: 1;
z-index: 2;
}
.fullscreen-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 10s ease-in-out;
}
/* Startseite V3 – spezialisierte Variante */
.StartseiteV3 .fullscreen-gallery {
contain: layout paint;
}
/* CLS-Guard */
.StartseiteV3 .fullscreen-gallery .slide {
height: 100%;
overflow: hidden;
}
/* Optional mobile Ruhe */
@media (hover:none) and (pointer:coarse) {
.StartseiteV3 .fullscreen-gallery {
pointer-events: none;
}
.StartseiteV3 .fullscreen-gallery img {
pointer-events: none;
user-select: none;
touch-action: none;
}
}
/* Kleiner Zoom-Einstieg (per JS .start-zoom) */
.StartseiteV3 .fullscreen-gallery .slide.start-zoom img.zoom {
animation: heroKenburnsIn 12s ease-out forwards;
}
@keyframes heroKenburnsIn {
from {
transform: scale(1)
}
to {
transform: scale(1.06)
}
}
/* Abdunkelung wie im Zählerbereich */
.slider-overlay.slider-overlay-full.StartseiteV3-overlay {
position: absolute;
inset: 0;
z-index: 5;
background: rgba(0, 0, 0, .22);
pointer-events: none;
}
/* Begrüßungs-Overlay */
.StartseiteV3 #welcome-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
width: 100%;
max-width: 90%;
background: none !important;
pointer-events: none;
transition: opacity .8s ease, transform .8s ease;
}
@keyframes welcomeFadeIn {
from {
opacity: 0;
transform: translate(-50%, -60%)
}
to {
opacity: 1;
transform: translate(-50%, -50%)
}
}
@media (min-width:768px) {
.StartseiteV3 #welcome-overlay {
animation: welcomeFadeIn .3s ease forwards;
}
}
.StartseiteV3 #welcome-overlay.fade-out {
opacity: 0;
transform: translate(-50%, -60px);
}
/* Willkommenstext */
.StartseiteV3 .welcome-text {
position: relative;
z-index: 2;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
transition: transform .3s ease;
}
.StartseiteV3 .welcome-text h1 {
font-size: clamp(2.2rem, 6.2vw, 3.6rem);
font-weight: 700;
margin: .9rem 0;
letter-spacing: 2px;
line-height: 1.2;
text-shadow: 0 0 14px rgba(0, 0, 0, .6);
}
.StartseiteV3 .welcome-text span,
.StartseiteV3 .welcome-text .small,
.StartseiteV3 .welcome-text .kontakt-label {
font-size: clamp(1.5rem, 4vw, 2.1rem);
line-height: 1.7;
color: #ffffffcc;
text-shadow: 0 0 6px rgba(0, 0, 0, .6);
}
/* „Leinen los!“ */
.StartseiteV3 .leinenlos-highlight {
font-size: 1.8rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
transition: color .3s ease, text-shadow .3s ease;
}
.StartseiteV3 .leinenlos-highlight:hover {
color: #ffe76d;
text-shadow: 0 0 6px rgba(255, 255, 255, .6);
}
@media (max-width:768px) {
.StartseiteV3 .leinenlos-highlight {
text-decoration: none;
}
}
/* Telefonnummer */
.StartseiteV3 .telefonnummer {
font-size: clamp(1.4rem, 4.2vw, 2.1rem);
font-weight: 700;
color: #f4e04d;
text-decoration: underline;
display: inline-block;
margin-top: 8px;
transition: all .3s ease;
text-shadow: 0 0 8px rgba(0, 0, 0, .6);
}
.StartseiteV3 .telefonnummer:hover {
color: #ffe76d;
text-shadow: 0 0 12px rgba(255, 231, 109, .85);
transform: scale(1.07);
}
/* Welcome-Glas + Sonnenkreis (einzige Quelle der Wahrheit) */
.StartseiteV3 .welcome-glass {
position: relative;
display: inline-block;
margin: 0 auto;
z-index: 1;
padding: 3.5rem 3rem;
/* Luft um Text & Sonne */
/* wichtig: KEIN contain: paint; das würde clippen */
isolation: isolate;
backface-visibility: hidden;
overflow: visible;
will-change: transform, opacity;
pointer-events: auto;
/* Links im Text klickbar */
}
/* Sonne: frei, groß, ohne Clipping */
.StartseiteV3 .welcome-glass::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
transform: translate(-50%, -50%);
/* perfekt zentriert */
width: clamp(360px, 52vmin, 980px);
/* Desktop-Skalierung */
height: clamp(360px, 52vmin, 980px);
background-image: url('/media/images/ux/logos/Schaefer_Yacht_Charter_Logo-KreisRundTransparent.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: .22;
pointer-events: none;
}
/* Smartphone: fast bis an den Rand (ohne zu überragen) */
@media (max-width:768px) {
.StartseiteV3 .welcome-glass {
padding: clamp(2rem, 6vmin, 5rem) 1.6rem;
}
.StartseiteV3 .welcome-glass::before {
width: clamp(240px, 95vw, 620px);
/* dein Wunsch: ~95% Breite */
height: clamp(240px, 95vw, 620px);
top: calc(50% + 1.5vmin);
/* hauch tiefer => kein Randkuss */
opacity: .20;
}
}
/* Hover – dezent, ohne Layoutsprung */
.StartseiteV3 .welcome-glass:hover::before {
transform: translate(-50%, -50%) scale(1.03);
opacity: .9;
transition: opacity .6s ease, transform .6s ease;
}
.StartseiteV3 .welcome-glass:hover .welcome-text {
transform: scale(1.04);
}
/* Bewegungspräferenz */
@media (prefers-reduced-motion: reduce) {
.StartseiteV3 .welcome-glass:hover::before,
.StartseiteV3 .welcome-glass:hover .welcome-text {
transition: none;
transform: translate(-50%, -50%);
opacity: .6;
}
}
/* Kein horizontales Scrollen (Bugwellen-Guard) */
html,
body {
overflow-x: hidden;
}
.menu-hint {
position: absolute;
bottom: 2.5%;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
font-weight: 700;
/* 600 = halb-fett, 700 = fett */
color: #fefefebb;
text-shadow: 0 0 4px rgba(131, 131, 131, 0.6);
text-align: center;
z-index: 10;
pointer-events: none;
opacity: 1;
transition: opacity 1.5s ease;
}
.menu-hint.fade-out {
opacity: 0;
pointer-events: none;
}
.menu-hint .menu-arrow {
display: block;
font-size: 18px;
margin-top: 4px;
animation: bounceDown 2s infinite;
}
@keyframes bounceDown {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(6px);
}
}
/* Header-Logo: Grundzustand */
@media (max-width: 1199px) and (hover: hover) and (pointer: fine) {
#logo {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(0.96);
}
}
/* ToolTips Hero */
.welcome-scroll-link {
position: relative;
}
#copyrights .col_half,
#copyrights .col_half * {
color: #FFFFFF;
}
.sc-image-block {
text-align: center;
margin: 0 auto 2rem;
}
.sc-image-block img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
display: inline-block;
}
.sc-image-block figcaption {
margin-top: 0.3rem;
font-size: 1.25rem;
color: #cccccc;
}
/* Parallax 3 komplett ausblenden – auf allen Geräten */
#parallax-startpage-2 {
display: none !important;
background-image: none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
@media screen and (max-width: 767px) {
#parallax-startpage-1 {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center center !important;
}
}
@media screen and (max-width: 767px) {
.section.parallax {
background-attachment: scroll !important;
will-change: auto;
}
}
/* FIX: Kein 100vw -> verhindert horizontales Wackeln durch Scrollbar-Breite */
.StartseiteV3 .fullscreen-gallery {
width: 100%;
max-width: 100%;
}
/* ================= SUNMENU – clean layout ================= */
/* Overlay */
.sunmenu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(3px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s ease;
display: flex;
justify-content: center;
align-items: center;
}
.sunmenu-overlay.active {
opacity: 1;
visibility: visible;
}
/* zentriert, mit ausgewogenem Rand oben/unten */
.sunmenu-inner {
width: 90%;
max-width: 600px;
color: #fff;
background: transparent;
text-align: center;
border-radius: 16px;
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* vorher: top = env(...), bottom = 10vh -> schob nach oben
jetzt: beide Seiten gleich groß (z.B. 8vh) */
padding: calc(8vh + env(safe-area-inset-top)) 1.5rem calc(8vh + env(safe-area-inset-bottom));
}
/* bleibt: 5vh Abstand zwischen Booten und Buttons */
.sunmenu-boats {
position: static;
margin-bottom: 3vh;
display: flex;
justify-content: center;
gap: 5vw;
flex-wrap: wrap;
}
.boat-link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #e9f6ff;
font-size: 1.2rem;
}
.boat-link img {
height: 52px;
margin-bottom: 6px;
filter: brightness(1.65) contrast(1.08) drop-shadow(0 0 6px rgba(255, 255, 255, .45));
transition: filter .25s ease;
}
.boat-link:hover img {
filter: brightness(1.9) contrast(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, .6));
}
/* Menü-Grid: immer 2 Spalten; weitere Items laufen automatisch in neue Reihen */
.sunmenu-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
/* Luft zu den Booten */
margin-bottom: 36px;
/* optische Balance nach unten */
}
/* Buttons */
.sunmenu-button {
display: block;
text-decoration: none;
text-align: center;
background: #25495e;
color: #fff;
padding: 14px 16px;
font-size: 1.2rem;
border-radius: 12px;
transition: background .3s ease, box-shadow .3s ease;
box-shadow: 0 0 8px rgba(255, 255, 255, .10);
}
.sunmenu-button:hover {
background: #2e5b75;
box-shadow: 0 0 12px rgba(255, 255, 255, .20);
}
/* Sehr schmale Phones: notfalls 1 Spalte */
@media (max-width:360px) {
.sunmenu-grid {
grid-template-columns: 1fr;
}
}
/* Sicherheitsnetz */
.sunmenu-overlay,
.sunmenu-inner {
overflow: visible;
}
.yacht-header {
position: relative;
background-color: transparent;
/* war vorher dunkel */
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
.yacht-header::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 180px;
height: 180px;
background-image: url('/media/schaefer-yacht-charter_logo_segelyacht-motoryacht-katamarane.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform: translate(-50%, -50%);
opacity: 0.06;
z-index: 1;
}
.yacht-header h1,
.yacht-header h3,
.yacht-header .text-rotater-wrapper {
z-index: 2;
position: relative;
color: white;
}
/* Debug für Layoutshift des Rotators */
.text-rotater-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
min-height: 95px;
/* Sicherheit für zweizeilig + Flip */
line-height: 1.4;
text-align: center;
overflow: hidden;
position: relative;
}
.t-rotate {
display: inline-block;
white-space: normal;
word-break: break-word;
min-height: 2.8em;
/* Platzreserve für Flip-Effekt */
}
/* Animation stabilisieren */
.animated.flipInX {
backface-visibility: hidden;
animation-fill-mode: both;
transform: none !important;
/* optional, falls das "Zucken" sichtbar ist */
}
.yacht-header {
background-color: transparent !important;
}
#copyrights a {
color: #f0f0f0;
/* oder deine Wunschfarbe */
white-space: nowrap;
}
.text-rotater-clean p {
margin: 0.3em 0;
color: white;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
.category-filter-form .category-select {
background-color: #1f2b38;
color: #f4e04d;
border: 1px solid #f4e04d;
border-radius: 8px;
padding: 8px 16px;
font-size: 1.1rem;
font-weight: 500;
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=UTF-8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
transition: all 0.3s ease;
}
.category-filter-form .category-select:hover {
background-color: #263545;
}
.category-filter-form .category-select option {
background-color: #1f2b38;
color: #ffffff;
}
/* Grid für Hafen-Kacheln */
.boat-list .harbor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 30px;
}
/* Einzelne Kachel */
.boat-list .harbor-card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 18px 20px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.16);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
color: #f0f0f0;
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease,
border-color 0.2s ease;
}
/* leichte Bewegung bei Hover */
.boat-list .harbor-card:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(244, 224, 77, 0.7);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}
/* Titel & Land */
.boat-list .harbor-card-name {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 4px;
}
.boat-list .harbor-card-name a {
color: inherit;
text-decoration: none;
}
.boat-list .harbor-card-name a:hover {
color: #f4e04d;
}
.boat-list .harbor-card-country {
font-size: 1.05rem;
opacity: 0.8;
}
/* Meta-Zeile unten (Yachten / auf Anfrage) */
.boat-list .harbor-card-meta {
margin-top: 10px;
display: flex;
justify-content: flex-start;
}
/* Badge für Yachtanzahl */
.boat-list .harbor-card-tag {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: rgba(244, 224, 77, 0.18);
color: #f4e04d;
font-size: 0.95rem;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.boat-list .harbor-card-tag:hover {
background: rgba(244, 224, 77, 0.32);
color: #ffffff;
}
/* „auf Anfrage“ etwas gedeckter */
.boat-list .harbor-card-tag-muted {
background: rgba(255, 255, 255, 0.05);
color: #f0f0f0;
}
/* Mobile: Spalte vollbreit, aber weiter Grid-Logik */
@media (max-width: 575.98px) {
.boat-list .harbor-grid {
grid-template-columns: 1fr;
}
}
/* Tabellen-Wrapper: immer horizontal scrollbar, wenn nötig */
.boat-list .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Basis-Tabelle */
.boat-list .table {
width: 100%;
margin: 0;
border-collapse: collapse;
background-color: transparent;
}
/* Zarte Streifenoptik */
.boat-list .table.table-striped>tbody>tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.02);
}
.boat-list .table.table-striped>tbody>tr:nth-of-type(even) {
background-color: rgba(255, 255, 255, 0.01);
}
/* Tabellen-Kopf: Sortierbare Spalten (z. B. Land) */
.boat-list .table thead th {
font-size: 1.25rem;
color: #f4e04d;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 10px;
white-space: nowrap;
}
/* Erste Spalte (Name/Hafen) linksbündig */
.boat-list .table thead th:first-child {
text-align: left;
}
/* Tabellen-Zellen */
.boat-list .table td {
font-size: 1.2rem;
color: #f0f0f0;
vertical-align: middle;
padding: 10px 10px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Erste Spalte (Name/Hafen): linksbündig */
.boat-list .table td:first-child {
text-align: left;
}
/* Links in den Zellen: normal hellgrau, Gold nur bei Hover */
.boat-list .table td a {
color: #f0f0f0;
text-decoration: none;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.boat-list .table td a:hover {
color: #f4e04d;
text-shadow: 0 0 6px rgba(244, 224, 77, 0.8);
}
/* Sortierbare Links im Kopf (z. B. Land) */
.boat-list .table th a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
position: relative;
padding-right: 16px;
/* Platz für Pfeil */
}
/* Pfeil rechts vom Text über data-sort */
.boat-list .table th a::after {
content: attr(data-sort);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 0.95rem;
opacity: 0.7;
}
/* Hover-Effekt im Kopf */
.boat-list .table th a:hover {
color: #ffffff;
}
/* Pagination (A–Z) */
.boat-list .pagination {
text-align: center;
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin: 30px 0 20px 0;
padding-left: 0;
}
.boat-list .pagination li {
list-style: none;
}
.boat-list .pagination li a {
display: inline-block;
padding: 6px 12px;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.05);
color: #f4e04d;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
border: 1px solid transparent;
font-size: 1.05rem;
}
.boat-list .pagination li a:hover {
background-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 6px rgba(244, 224, 77, 0.6);
}
.boat-list .pagination li.active a {
font-weight: bold;
background-color: #f4e04d;
color: #00213E;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}
/* Kleine Typo-Anpassung ab Tablet aufwärts */
@media (min-width: 768px) {
.boat-list .table td {
font-size: 1.25rem;
}
.boat-list .table td:first-child {
padding-right: 1rem;
/* wie dein bisheriger Partner-Style */
}
}
/* Auf sehr kleinen Screens Schrift etwas verkleinern */
@media (max-width: 575.98px) {
.boat-list .table thead th,
.boat-list .table td {
font-size: 1.05rem;
white-space: nowrap;
}
.boat-list .table {
min-width: 480px;
/* sorgt für sauberes horizontales Scrollen */
}
}
/* Mobile: Bootsliste mit Außenabstand */
@media (max-width: 1000px) {
.harbor-boatlist-wrapper {
width: auto;
margin: 0 20px !important;
/* 5px Abstand links/rechts zur Viewport-Kante */
}
}
/* ============================
SYC – Hafen-Detail: Bootsliste
============================ */
.harbor-boatlist-wrapper {
max-width: 1000px;
/* etwas schmaler, wirkt ruhiger */
margin: 60px auto 80px auto;
padding: 40px 24px;
/* innen Luft für die Tabelle */
box-sizing: border-box;
background: rgba(255, 255, 255, 0.03);
/* leichter Glas-Effekt */
border-radius: 20px;
box-shadow: 0 0 22px rgba(0, 0, 0, 0.12);
}
/* Tabelle nutzt den vorhandenen Rahmen voll aus */
.harbor-boatlist-table .table.cart {
width: 100%;
margin: 0;
border-collapse: collapse;
}
/* Bild etwas kompakter */
.harbor-boatlist-table .table.cart td:first-child img {
max-width: 110px;
height: auto;
}
/* SYC – Hafenliste: horizontal scrollen, vertikal frei lassen */
.harbor-boatlist-table {
overflow-x: auto;
overflow-y: visible;
/* vertikales Scrollen nicht blocken */
-webkit-overflow-scrolling: touch;
/* touch-action bewusst weggelassen: iOS darf wieder hoch/runter scrollen */
}
/* Sicherheit: Tabelle darf breiter als der Viewport werden */
.harbor-boatlist-table .table.cart {
width: 100%;
min-width: 600px;
/* passt zu deinem inline-style, kann bei Bedarf angepasst werden */
}
/* Aktions-Spalte rechtsbündig (kommt gleich mit den neuen Buttons ins Spiel) */
.harbor-boat-actions {
text-align: right;
white-space: nowrap;
}
.harbor-boat-actions-inner {
display: inline-flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
/* Buttons im Hafen-Listing */
.harbor-boat-actions-inner .btn {
min-width: 170px;
font-size: 0.95rem;
}
/* Mobile: Buttons nebeneinander, weil vertikal sonst lang wird */
@media (max-width: 767px) {
.harbor-boatlist-wrapper {
margin: 40px auto 60px auto;
padding: 24px 16px;
}
.harbor-boat-actions-inner {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.harbor-boat-actions-inner .btn {
min-width: unset;
font-size: 0.9rem;
}
}
.box-elegant {
max-width: 880px;
margin: 80px auto;
padding: 70px 40px;
background: rgba(255, 255, 255, 0.04);
border-radius: 24px;
box-shadow: 0 0 28px rgba(0, 0, 0, 0.1);
text-align: center;
color: #ffffff;
font-size: 1.4rem;
line-height: 1.85;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover-Effekt */
.box-elegant.hover-effekt:hover {
transform: scale(1.02);
box-shadow: 0 0 36px rgba(255, 255, 255, 0.08);
}
/* Goldränder */
.box-gold-top {
border-top: 5px solid #f4e04d;
}
.box-gold-bottom {
border-bottom: 5px solid #f4e04d;
}
.box-gold-left {
border-left: 5px solid #f4e04d;
}
.box-gold-right {
border-right: 5px solid #f4e04d;
}
body {
background-color: #092839 !important;
}
/* Kategorie SYMYKAT */
.category-filter-form {
text-align: center;
margin: 40px auto;
}
.category-filter-form select {
margin: 0 auto;
display: inline-block;
padding: 10px 34px 10px 14px;
/* meehr Platz rechts für den ▼ */
font-size: 1.1rem;
border-radius: 12px;
border: 2px solid #f4e04d;
background-color: #192e3d;
color: #f4e04d;
appearance: none;
/* Optional: schöner Pfeil */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
}
/* Liste Häfen */
.table.cart td {
vertical-align: middle;
padding: 12px 16px;
}
.table.cart td:nth-child(2) a {
display: inline-block;
max-width: 280px;
white-space: normal;
line-height: 1.4;
}
/* SYC: größere Tap-Zone für die Kalender-Pfeile (Glyphicons) */
@media (max-width: 640px),
(pointer: coarse) {
.calendar-header {
overflow: visible;
}
/* falls vorher abgeschnitten */
.calendar-header th.prev,
.calendar-header th.next {
position: relative;
}
/* Icon optisch vergrößern, ohne den Table-Flow zu ändern */
.calendar-header th.prev .glyphicon,
.calendar-header th.next .glyphicon {
display: inline-block;
transform: scale(2.4);
/* ≈ 38–40px aus 16px */
transform-origin: 50% 50%;
line-height: 1;
cursor: pointer;
}
/* Zusätzliche unsichtbare Hit-Area – extra breit */
.calendar-header th.prev .glyphicon::after,
.calendar-header th.next .glyphicon::after {
content: "";
position: absolute;
top: -14px;
bottom: -14px;
/* Höhe ~48px */
left: -70px;
right: -70px;
/* Breite jetzt ~ +56px extra */
border-radius: 999px;
}
}
/* Goldenes Leuchten, wenn der Kalender Contactlight anpingt */
#contactlight-box.cl-highlight {
position: relative;
box-shadow: 0 0 26px rgba(244, 224, 77, 0.5);
}
#contactlight-box.cl-highlight::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: -4px;
/* Ändere von bottom zu top */
height: 3px;
/* Falls du das Leuchten dicker oder dünner machen willst, ändere den Wert hier */
background: linear-gradient(90deg,
transparent,
rgba(244, 224, 77, 0.95),
transparent);
box-shadow: 0 0 14px rgba(244, 224, 77, 0.9);
border-radius: 999px;
}
/* Contactlight – Date-Felder komfortabel machen */
#contactlight-box .contactlight-form input[type="date"] {
/* Darstellung & Größe */
box-sizing: border-box;
width: 100%;
height: 48px;
/* klare Touch-Höhe */
min-height: 48px;
padding: 0 .9rem;
font-size: 16px;
/* iOS Zoom vermeiden */
line-height: 48px;
/* Text mittig */
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .06);
color: #fff;
/* System-/Browserverhalten */
color-scheme: dark;
/* dunkle Picker-UI, wo unterstützt */
-webkit-appearance: none;
appearance: none;
outline: none;
}
/* Contactlight – Hauptaktion "Zur Auswahl hinzufügen" */
#contactlight-box .add-to-cart.syc-btn {
padding: 12px 22px;
border-radius: 999px;
background: #0b4f85;
/* tiefes SYC-Blau */
border: 1px solid rgba(244, 224, 77, 0.75);
color: #ffffff;
font-size: 1.08rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
text-decoration: none;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.18s ease,
border-color 0.25s ease;
}
#contactlight-box .add-to-cart.syc-btn i {
font-size: 0.95rem;
}
#contactlight-box .add-to-cart.syc-btn:hover {
background-color: #0f629f;
border-color: #f4e04d;
box-shadow: 0 9px 22px rgba(0, 0, 0, 0.55);
transform: translateY(-1px);
}
/* Firefox: konsistente Darstellung */
@-moz-document url-prefix() {
#contactlight-box .contactlight-form input[type="date"] {
-moz-appearance: textfield;
}
}
/* iOS Safari: Innenwert explizit hochziehen */
@supports (-webkit-touch-callout: none) {
#contactlight-box .contactlight-form input[type="date"] {
line-height: normal;
/* verhindert Clipping */
min-block-size: 48px;
/* sichert Blockhöhe */
}
#contactlight-box .contactlight-form input[type="date"]::-webkit-date-and-time-value {
min-height: 28px;
/* „leere“ Höhe sichtbar */
}
}
/* Optional: Placeholder */
#contactlight-box .contactlight-form input[type="date"]::placeholder {
color: #ffffffa8;
}
/* Contact-Light – Buttons vertikal zentrieren */
#contactlight-box .contactlight-form .button,
#contactlight-box .contactlight-form .btn,
#contactlight-box .contactlight-form button {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.2;
vertical-align: middle;
}
/* ————————————————————————————— */
/* WhatsApp-Buttons: nur auf Touch-Geräten anzeigen */
#btnWhatsApp,
#cl-wa {
display: inline-flex;
}
/* mobil sichtbar */
/* Desktop/Laptop: Maus + Hover vorhanden → ausblenden */
@media (hover: hover) and (pointer: fine) {
#btnWhatsApp,
#cl-wa {
display: none !important;
}
}
/* Fallback: ab 1024px ebenfalls ausblenden (ältere Browser) */
@media (min-width: 1024px) {
#btnWhatsApp,
#cl-wa {
display: none !important;
}
}
/* =========================================
Contactlight-Box – Card-Optik, Hintergrund ruhiger
========================================= */
#contactlight-box.contactlight-box {
max-width: 680px;
margin: 48px auto 70px auto;
padding: 30px 24px 26px;
border-radius: 18px;
border: 1px solid rgba(244, 224, 77, 0.14);
/* sehr ruhiger Goldrand */
box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
/* etwas sanfterer Shadow */
text-align: center;
line-height: 1.8;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}
#contactlight-box.contactlight-box:hover {
border-color: rgba(244, 224, 77, 0.55);
/* beim Hover deutlicher Goldrand */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
/* Überschrift & Texte – Gold, aber nicht neon */
#contactlight-box h2 {
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 1em;
color: #f2dd76;
/* weiches Gold */
letter-spacing: 0.4px;
}
/* Contactlight – Lead-Zeile vor dem Formular */
#contactlight-box .cl-lead {
font-size: 1.2rem;
/* spürbar größer */
font-weight: 500;
/* etwas kräftiger */
color: #ffffff;
margin: 10px 0 10px;
/* oben/unten ca. 10px Abstand */
letter-spacing: 0.02em;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
/* dezenter Hover – „hier geht’s direkt zu Iris“ */
#contactlight-box .cl-lead:hover {
color: #f2dd76;
/* weiches Gold */
text-shadow: 0 0 6px rgba(242, 221, 118, 0.45);
}
#contactlight-box .cl-info {
margin: 0 0 1.2em;
color: #f0f0f0;
}
#contactlight-box .cl-info strong {
color: #f2dd76;
}
#contactlight-box .cl-note {
margin: 1.2em 0 0.5em;
color: #f0f0f0;
}
#contactlight-box .cl-hint {
font-size: 0.95rem;
color: #bfbfbf;
margin: 0.4em 0 0;
}
#contactlight-box .cl-signature {
font-weight: bold;
color: #ffffff;
margin-top: 1.2em;
}
/* Date-Felder – Wrapper & Labels */
#contactlight-box .contactlight-form {
display: flex;
gap: 0.8em;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 1em;
}
#contactlight-box .cl-date-field {
display: flex;
flex-direction: column;
gap: 0.35em;
min-width: 210px;
}
#contactlight-box .cl-date-field label {
color: #f1dd7c;
/* goldene Label-Schrift, leicht gedimmt */
font-size: 0.95rem;
text-align: left;
}
/* Buttons – angelehnt an Revier-Kacheln, aber ruhig */
#contactlight-box .cl-buttons {
display: flex;
justify-content: center;
gap: 0.8em;
flex-wrap: wrap;
margin: 1.2em 0 0.6em;
}
#contactlight-box .syc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid rgba(244, 224, 77, 0.55);
background-color: rgba(255, 255, 255, 0.02);
color: #f4e04d;
text-decoration: none;
font-weight: 500;
letter-spacing: 0.25px;
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease,
border-color 0.25s ease;
}
#contactlight-box .syc-btn:hover {
background-color: #f4e04d;
color: #031018;
border-color: #f4e04d;
box-shadow: 0 0 16px rgba(244, 224, 77, 0.45);
transform: translateY(-1px);
}
/* kleine Abstufung für WhatsApp-Button (optional) */
#contactlight-box .cl-btn-wa {
opacity: 0.95;
}
#contactlight-box .cl-btn-wa:hover {
opacity: 1;
}
/* Contactlight – Mindestaußenabstand auf kleinen Screens */
@media (max-width: 767.98px) {
#contactlight-box.contactlight-box {
margin: 32px 15px 60px;
/* 15px links/rechts, oben/unten leicht kompakter */
box-sizing: border-box;
/* Sicherheit, falls später noch was dazukommt */
}
}
/* Falls The7/Elementor stärker ist, erhöhe die Spezifität: */
/* .mmk-button.js-whatsapp#btnWhatsApp { … } */
/* =========================================
SYC – Boat-Details: stabiles Layout
========================================= */
/* 1) Kein horizontales Seitenscrollen im Boat-Bereich */
#boat {
overflow-x: clip;
}
/* 2) Root-Row unter #boat ent-guttern (Mobile) */
@media (max-width: 991.98px) {
#boat > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
#boat > .row > [class^="col-"],
#boat > .row > [class*=" col-"] {
padding-left: 15px;
padding-right: 15px;
}
}/* =========================================
SYC – Yacht-Galerie (Redaxo)
Stabil, kein Driften, responsive Basis
========================================= */
/* --- Galerie-Wrapper --- */
.yachtdetails-gallery-container {
width: 100%;
overflow: hidden;
background: transparent;
margin: 0 auto;
padding: 0;
}
/* --- Slider: horizontales Scrollen, flex Layout --- */
.yachtdetails-gallery-slider {
display: flex;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
/* scrollbar-Hack optional — ggf. testen */
padding-top: 6px;
box-sizing: content-box;
}
/* --- Desktop: Galeriehöhe optional, wenn gewünscht --- */
@media (min-width: 992px) {
.yachtdetails-gallery-container {
height: 75vh;
max-height: 900px;
}
.yachtdetails-gallery-slider {
height: 100%;
}
.gallery-slide {
height: 100%;
}
}
/* --- Mobile: flexibel, Bildgröße passt sich an --- */
@media (max-width: 991.98px) {
.yachtdetails-gallery-container {
/* Höhe flexibel — lässt Bilder ihre natürliche Höhe bestimmen */
height: auto;
}
.yachtdetails-gallery-slider,
.gallery-slide {
height: auto;
}
}
/* --- Slides: flex Items --- */
.gallery-slide {
flex: 0 0 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* --- Bilder: natürlich, responsive, ohne Verzerrung --- */
.gallery-slide img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 14px;
display: block;
}
/* --- Label: dezent und lesbar --- */
.gallery-origin-label {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.35);
padding: 4px 14px;
border-radius: 999px;
white-space: nowrap;
font-size: 0.9rem;
color: #fff;
/* fallback falls backdrop-filter nicht verfügbar: */
/* background: rgba(0,0,0,0.5); */
/* outline statt border-radius für alte Browser */
}
/* --- Seite: kein horizontales Scrollen außerhalb der Galerie --- */
html, body {
overflow-x: hidden !important;
}
/* 4) Content-Blöcke bündig halten, aber den Kalender NICHT anfassen */
@media (max-width: 991.98px) {
.syc-content,
#price_overview {
padding-left: 15px;
padding-right: 15px;
}
}
/* 5) WICHTIG: Alle früheren Eingriffe am Kalender rückgängig machen */
#price_calendar {
display: block !important;
/* falls vorher flex/grids erzwungen wurden */
width: 100%;
max-width: 100%;
padding-left: 0 !important;
/* falls irgendwo gesetzt wurde */
padding-right: 0 !important;
}
/* FAQ – Grundlayout */
.faq-section {
margin: 80px auto;
padding: 0 20px;
}
.faq-container {
max-width: 960px;
margin: 0 auto;
text-align: left;
}
.faq-container h1 {
font-size: 2.4rem;
margin-bottom: 1.2rem;
text-align: center;
}
.faq-intro {
text-align: center;
font-size: 1.3rem;
line-height: 1.7;
max-width: 44rem;
margin: 0 auto 2.8rem;
/* schön mittig unter der Überschrift */
padding-bottom: 1.4rem;
/* Abstand zur Linie */
border-bottom: 1px solid #f4e04d;
/* goldene Linie */
}
/* sorgt dafür, dass Anker-Ziele nicht unter dem Header verschwinden */
.faq-item {
scroll-margin-top: 180px;
/* ggf. an deine Headerhöhe anpassen */
}
/* FAQ-Items */
.faq-item+.faq-item {
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 1.8rem;
padding-top: 1.8rem;
}
/* Fragezeile */
/* Nur die FRAGE färben, nicht die Antwort */
.faq-question {
/* deine bisherigen Eigenschaften */
width: 100%;
background: transparent;
border: none;
padding: 0;
margin: 0 0 0.7rem 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
color: #ffffff;
font-size: 1.45rem;
text-align: left;
position: relative;
transition: color 0.25s ease;
/* neu */
}
/* Ghost-Element links, damit Text wirklich mittig sitzt */
.faq-question::before {
content: "";
flex-shrink: 0;
width: 26px;
height: 26px;
margin-right: 1.3rem;
}
.faq-question span:first-child {
flex: 1;
padding: 0 1.3rem;
text-align: center;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Plus/Minus-Icon */
.faq-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #f4e04d;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
line-height: 1;
transition: all 0.25s ease;
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
/* aus + wird optisch ein X */
background-color: #f4e04d;
color: #003344;
}
.faq-item.open .faq-question span:first-child {
color: #f4e04d;
/* offene Frage = gold */
}
.faq-item:not(.open) .faq-question:hover span:first-child {
color: #e9d364;
/* dezentes Hover-Gold bei geschlossenen Fragen */
}
/* Antwortblock = Vorschau + Volltext in einem */
.faq-answer {
position: relative;
max-height: 5.2em;
/* ~3 Zeilen bei line-height 1.7 */
text-align: center;
overflow: hidden;
opacity: 1;
transform: translateY(0);
margin-top: 0.2rem;
transition:
max-height 0.4s ease,
opacity 0.35s ease,
transform 0.35s ease;
}
/* „Nebel“-Verlauf unten für die Vorschau */
.faq-answer::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.4em;
pointer-events: none;
background: linear-gradient(to bottom,
rgba(9, 40, 57, 0),
rgba(9, 40, 57, 0.98));
filter: none;
}
/* Geöffneter Zustand: komplette Antwort, kein Nebel */
.faq-item.open .faq-answer {
max-height: 1200px;
/* genug für lange Antworten */
}
.faq-item.open .faq-answer::after {
opacity: 0;
height: 0;
transition: opacity 0.25s ease, height 0.25s ease;
}
.faq-answer p {
font-size: 1.2rem;
line-height: 1.7;
color: #f5f5f5;
margin: 0 0 0.9rem 0;
max-width: 52rem;
/* angenehme Zeilenlänge */
margin-left: auto;
margin-right: auto;
}
.faq-answer a {
color: #f4e04d;
text-decoration: underline;
}
.faq-answer a:hover {
color: #ffe76d;
}
/* Mobile-Optimierung */
@media (max-width: 767px) {
.faq-container {
padding: 40px 20px;
}
.faq-container h1 {
font-size: 2rem;
}
.faq-question {
font-size: 1.35rem;
}
.faq-answer {
max-height: 5.6em;
/* etwas meehr Platz auf kleineren Screens */
transition: none;
/* „sanftes Zoomen“ auf Mobil deaktiviert */
transform: none;
}
.faq-item.open .faq-answer {
max-height: 1200px;
/* klappt trotzdem auf, aber ohne Animation */
}
}
/* FAQ-Glossar A–Z */
.faq-glossar {
max-width: 960px;
margin: 70px auto 40px auto;
padding: 40px 30px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.02);
box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
}
.faq-glossar h2 {
text-align: center;
font-size: 1.9rem;
margin-bottom: 0.8rem;
}
.faq-glossar-intro {
text-align: center;
font-size: 1.25rem;
color: #e0e0e0;
max-width: 40rem;
margin: 0 auto 2rem;
}
.faq-glossar-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.6rem 2.2rem;
}
.faq-glossar-item strong {
display: block;
font-size: 1.15rem;
margin-bottom: 0.3rem;
}
.faq-glossar-item p {
margin: 0.1rem 0 0.3rem 0;
font-size: 1.08rem;
line-height: 1.6;
color: #f5f5f5;
}
.faq-glossar-item a {
font-size: 1.15rem;
color: #f4e04d;
text-decoration: underline;
display: inline-block;
margin-top: 0.2rem;
}
.faq-glossar-item a:hover {
color: #ffe76d;
}
/* Mobile */
@media (max-width: 767px) {
.faq-glossar {
padding: 32px 20px;
}
.faq-glossar-grid {
grid-template-columns: 1fr;
}
}
/* FAQ-Teaser auf der Startseite */
.faq-teaser-section {
padding: 0 20px;
margin: 80px 0;
}
/* Grundbox – an deine übrigen Boxen angelehnt */
.faq-teaser-box {
position: relative;
max-width: 1100px;
margin: 0 auto;
padding: 2.8rem 2.4rem 3rem;
border-radius: 28px;
text-align: center;
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 0 28px rgba(0, 0, 0, 0.12);
}
/* Typo */
.faq-teaser-box h2 {
font-size: 2.2rem;
margin-bottom: 1.4rem;
}
.faq-teaser-intro {
font-size: 1.35rem;
line-height: 1.8;
margin-bottom: 1.2rem;
}
.faq-teaser-examples {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 2.2rem;
opacity: 0.9;
}
/* Textbreite begrenzen */
.faq-teaser-box h2,
.faq-teaser-intro,
.faq-teaser-examples {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* Button */
.faq-teaser-button {
display: inline-block;
padding: 0.9rem 2.4rem;
background-color: #f4e04d;
color: #003344;
border-radius: 999px;
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease,
color 0.25s ease;
}
.faq-teaser-button:hover {
transform: translateY(-1px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
background-color: #ffe76d;
color: #003344;
}
/* Goldene Eck-Bögen (SVG) – EINMAL definiert */
.faq-corner {
position: absolute;
width: 52px;
height: 52px;
pointer-events: none;
/* sicherheitshalber */
}
/* Oben links */
.faq-corner-tl {
top: -18px;
left: -18px;
}
/* Oben rechts */
.faq-corner-tr {
top: -18px;
right: -18px;
}
/* Unten links */
.faq-corner-bl {
bottom: -18px;
left: -18px;
}
/* Unten rechts */
.faq-corner-br {
bottom: -18px;
right: -18px;
}
/* Responsive */
@media (max-width: 900px) {
.faq-teaser-box {
padding: 2.2rem 1.6rem 2.6rem;
border-radius: 24px;
}
.faq-teaser-box h2 {
font-size: 1.9rem;
}
.faq-teaser-intro {
font-size: 1.2rem;
}
.faq-teaser-examples {
font-size: 1.1rem;
}
.faq-teaser-box h2,
.faq-teaser-intro,
.faq-teaser-examples {
max-width: 95%;
}
.faq-corner {
width: 42px;
height: 42px;
}
.faq-corner-tl,
.faq-corner-tr {
top: -14px;
}
.faq-corner-tl,
.faq-corner-bl {
left: -14px;
}
.faq-corner-tr,
.faq-corner-br {
right: -14px;
}
.faq-corner-bl,
.faq-corner-br {
bottom: -14px;
}
}
/* Auf Touch-Geräten keine Hover-Sprünge beim Button */
@media (hover: none) and (pointer: coarse) {
.faq-teaser-button:hover {
transform: none;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}
}
/* =========================================== */
/* Globale Scrollbar-Gestaltung SYC */
/* =========================================== */
/* Chrome, Edge, Safari (WebKit-basierte Browser) */
::-webkit-scrollbar {
width: 9px;
/* Breite des Scrollbalkens */
}
::-webkit-scrollbar-track {
background: #0f2531;
/* dunkler Track – passend zum Seitenhintergrund */
}
::-webkit-scrollbar-thumb {
background: #9fa4ac;
/* dezentes Grau für den Thumb */
border-radius: 10px;
/* abgerundete Ecken */
}
/* Hover-Effekt: Thumb hebt sich leicht ab */
::-webkit-scrollbar-thumb:hover {
background: #f4e04d;
/* Gold bei Hover – SYC-Akzentfarbe */
}
/* Firefox – eigene Syntax */
html {
scrollbar-width: thin;
/* "auto" | "thin" | "none" */
scrollbar-color: #9fa4ac #0f2531;
/* Thumb-Farbe, Track-Farbe */
}
/* ============================== */
/* ÜBER UNS – HINTERGRUNDBOX */
/* ============================== */
/* Wrapper */
.ueber-uns-wrapper {
max-width: 1100px;
width: 100%;
margin: 80px auto;
padding: 70px 50px;
background: rgba(255, 255, 255, 0.04);
border-radius: 28px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
color: #ffffff;
text-align: center;
border: none;
box-sizing: border-box;
}
/* Header */
.ue-header {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 20px;
}
/* Einleitender Text */
.ue-sub {
font-size: 1.3rem;
line-height: 1.8;
max-width: 880px;
margin: 0 auto 14px auto;
opacity: 0.96;
}
/* Rollen-Satz darunter – etwas kleiner & dezenter */
.ue-sub-info {
font-size: 1.05rem;
line-height: 1.7;
max-width: 820px;
margin: 0 auto 28px auto;
opacity: 0.9;
}
/* Grid */
.ue-grid {
display: grid;
gap: 60px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
max-width: 100%;
margin: 30px auto 0 auto;
}
/* Person Card */
.ue-person {
background: rgba(255, 255, 255, 0.05);
padding: 35px;
border-radius: 26px;
box-shadow: 0 0 22px rgba(0, 0, 0, 0.10);
transition: all 0.45s ease;
position: relative;
overflow: hidden;
}
/* Gold-Highlight on Hover – Top + Bottom */
.ue-person::before,
.ue-person::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 4px;
background: #f4e04d;
opacity: 0;
transition: opacity 0.4s ease;
}
.ue-person::before {
top: 0;
}
.ue-person::after {
bottom: 0;
}
.ue-person:hover::before,
.ue-person:hover::after {
opacity: 1;
}
/* Card Hover */
.ue-person:hover {
transform: translateY(-10px) scale(1.015);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.22);
}
/* Image Container */
.ue-img {
overflow: hidden;
border-radius: 22px;
margin-bottom: 20px;
}
.ue-img img {
width: 100%;
height: auto;
border-radius: 22px;
transition: transform 0.55s ease;
transform-origin: center;
}
.ue-person:hover .ue-img img {
transform: scale(1.08) rotate(0.25deg);
}
/* Titles */
.ue-person h2 {
margin-top: 10px;
font-size: 1.7rem;
font-weight: 700;
}
.ue-person h3 {
margin-top: 5px;
font-size: 1.3rem;
font-weight: 400;
color: #f4e04d;
}
/* Text */
.ue-person p {
margin-top: 18px;
font-size: 1.2rem;
line-height: 1.75;
text-align: left;
opacity: 0.92;
}
/* =============================== */
/* /mehr – ÜBERSICHT SUCHSYSTEME */
/* =============================== */
.searchhub-wrapper {
max-width: 1100px;
margin: 80px auto 100px auto;
padding: 0 20px;
text-align: center;
color: #ffffff;
}
/* Sucht-Karten: Box verbreitern, damit 3er-Grid möglich ist */
.searchhub-wrapper.sc-box {
max-width: 1200px !important; /* statt 880px */
padding-left: 40px;
padding-right: 40px;
}
/* Optional: Karten-Gap etwas anpassen */
.searchhub-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
/* Grid mit drei Karten */
.searchhub-grid {
margin-top: 60px;
display: grid;
gap: 40px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Karte */
.searchhub-card {
background: rgba(255, 255, 255, 0.04);
border-radius: 24px;
padding: 26px 24px 30px 24px;
box-shadow: 0 0 22px rgba(0, 0, 0, 0.16);
position: relative;
overflow: hidden;
text-align: left;
transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
/* Goldlinien */
.searchhub-card::before,
.searchhub-card::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, rgba(244, 224, 77, 0), #f4e04d, rgba(244, 224, 77, 0));
opacity: 0;
transition: opacity 0.35s ease;
}
.searchhub-card::before {
top: 0;
}
.searchhub-card::after {
bottom: 0;
}
.searchhub-card:hover {
transform: translateY(-6px);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.22);
}
.searchhub-card:hover::before,
.searchhub-card:hover::after {
opacity: 1;
}
/* Typografie */
.searchhub-card h2 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 0.8rem;
}
.searchhub-card p {
font-size: 1.2rem;
line-height: 1.75;
opacity: 0.95;
margin-bottom: 1.6rem;
}
/* Unit Buttons (CTA) */
.searchhub-button {
display: inline-block;
padding: 0.55rem 1.3rem;
border-radius: 999px;
border: 1px solid #f4e04d;
color: #f4e04d;
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: background-color 0.3s ease, color 0.3s ease,
box-shadow 0.3s ease, transform 0.25s ease;
}
.searchhub-button:hover {
background-color: #f4e04d;
color: #003344;
box-shadow: 0 0 14px rgba(244, 224, 77, 0.55);
transform: translateY(-1px);
}
/* Drei CTA-Buttons im Pill-Style — Desktop: inline */
.searchhub-3buttons {
display: flex;
gap: 16px;
justify-content: flex-start;
/* oder center, wenn du magst */
flex-wrap: wrap;
margin: 24px 0 10px 0;
}
.searchhub-3buttons .searchhub-button {
flex: 0 0 auto;
white-space: nowrap;
min-width: 160px;
text-align: center;
}
/* ======================== */
/* KONTAKTBEREICH /mehr */
/* ======================== */
.contacthub-wrapper {
max-width: 900px;
margin: 80px auto;
padding: 0 20px;
text-align: center;
color: #ffffff;
}
/* Titel & Texte */
.contacthub-title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 20px;
}
.contacthub-text {
font-size: 1.35rem;
line-height: 1.8;
margin-bottom: 18px;
opacity: 0.95;
}
.contacthub-text.small {
font-size: 1.25rem;
opacity: 0.85;
margin-bottom: 40px;
}
/* Kontaktlinien */
.contacthub-lines {
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-line {
display: flex;
justify-content: space-between;
align-items: center;
border: 1.5px solid rgba(244, 224, 77, 0.6);
border-radius: 14px;
padding: 12px 20px;
text-decoration: none;
color: #ffffff;
transition: 0.25s ease;
}
.contact-line:hover {
background: rgba(244, 224, 77, 0.08);
border-color: #f4e04d;
}
/* Label = kleine goldene Klammer */
.contact-label {
font-weight: 600;
font-size: 1.2rem;
color: #f4e04d;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Wert */
.contact-value {
font-size: 1.2rem;
font-weight: 600;
}
/* ============================= */
/* MOBILE – ZENTRIERUNG FIX */
/* ============================= */
@media (max-width: 768px) {
/* Wrapper bekommen 5vw Luft links/rechts, bleiben aber mittig */
.ueber-uns-wrapper,
.searchhub-wrapper,
.contacthub-wrapper {
margin: 40px auto 60px auto;
padding: 40px 5vw 50px;
max-width: 1100px;
width: 100%;
box-sizing: border-box;
}
.ue-sub {
font-size: 1.2rem;
margin-bottom: 40px;
}
/* Grids: EINSPALTIG, keine feste Mindestbreite mehr */
.ue-grid,
.searchhub-grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
justify-items: stretch;
}
.ue-person {
padding: 26px 20px;
margin: 0 auto;
max-width: 600px;
}
.ue-person p {
font-size: 1.2rem;
line-height: 1.7;
}
.searchhub-card {
margin: 0 auto;
max-width: 600px;
}
/* Drei Buttons untereinander */
.searchhub-3buttons {
flex-direction: column;
gap: 14px;
justify-content: center;
align-items: stretch;
}
.searchhub-3buttons .searchhub-button {
width: 100%;
min-width: unset;
flex: unset;
}
/* Kontaktlinien untereinander */
.contact-line {
flex-direction: column;
gap: 6px;
text-align: center;
}
/* Team-Hintergrund (col-md-12.team-wrapper) komplett ausblenden */
.col-md-12.team-wrapper {
display: none;
}
/* Sicherheitshalber: kein horizontaler Scrollbalken */
body {
overflow-x: hidden;
}
}
.schnellsuche-filter-box {
max-width: 880px;
margin: 40px auto 30px;
padding: 26px 26px 22px;
background: rgba(255, 255, 255, 0.03);
border-radius: 18px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.10);
color: #ffffff;
text-align: left;
font-size: 1.1rem;
line-height: 1.6;
border-bottom: 3px solid #f4e04d;
}
.schnellsuche-filter-box h2 {
font-size: 1.5rem;
margin: 0 0 0.3em;
}
.schnellsuche-filter-sub {
margin: 0 0 1.2rem;
color: #e0e0e0;
}
.schnellsuche-filter-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem 1.2rem;
margin-bottom: 1.2rem;
}
@media (max-width: 991px) {
.schnellsuche-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.schnellsuche-filter-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.sff-field label {
display: block;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
color: #f4e04d;
}
.sff-field input {
width: 100%;
padding: 7px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(10, 20, 32, 0.9);
color: #ffffff;
font-size: 1rem;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.sff-field input:focus {
border-color: #f4e04d;
box-shadow: 0 0 0 1px rgba(244, 224, 77, 0.5);
background: rgba(12, 26, 40, 1);
}
.schnellsuche-filter-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: flex-end;
}
.syc-btn-primary,
.syc-btn-ghost {
display: inline-block;
padding: 8px 20px;
border-radius: 999px;
font-size: 0.95rem;
cursor: pointer;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
transform 0.12s ease;
}
.syc-btn-primary {
background: #f4e04d;
color: #1B3546;
border: 1px solid #f4e04d;
}
.syc-btn-primary:hover {
background: #ffe96b;
box-shadow: 0 0 12px rgba(244, 224, 77, 0.6);
transform: translateY(-1px);
}
.syc-btn-ghost {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.syc-btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-1px);
}
/*hat stress mit javascript-scroll
html {
scroll-behavior: smooth;
}
*/
/* Gemeinsamer Rahmen für 404-Boxen (Hafen & Partner) */
.harbor-404-wrapper,
.partner-404-wrapper {
max-width: 880px;
margin: 60px auto 40px;
padding: 0 15px;
text-align: center;
color: #ffffff;
}
.harbor-404-box,
.partner-404-box {
padding: 40px 50px;
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
/* Logo */
.harbor-404-logo,
.partner-404-logo {
max-width: 220px;
margin: 0 auto 1.5rem;
display: block;
}
/* Titel */
.harbor-404-title,
.partner-404-title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
/* Fließtext */
.harbor-404-box p,
.partner-404-box p {
font-size: 1.25rem;
line-height: 1.8;
margin-bottom: 0.5rem;
}
/* Button-Zeile */
.harbor-404-actions,
.partner-404-actions {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
/* Telefon-/Hinweis-Zeile */
.harbor-404-phone-hint,
.partner-404-phone-hint {
margin-top: 1.5rem;
font-size: 1.15rem;
opacity: 0.7;
}
/* Mobile-Anpassung */
@media (max-width: 767px) {
.harbor-404-box,
.partner-404-box {
padding: 30px 24px;
}
.harbor-404-box p,
.partner-404-box p {
font-size: 1.1rem;
}
}
/* Buttons – angelehnt an den Black-Friday-Button aus renestyle.css */
.syca-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 10px 22px;
border-radius: 999px;
font-weight: 700;
font-size: 1.15rem;
text-decoration: none;
letter-spacing: 0.02em;
cursor: pointer;
border: 2px solid transparent;
transition:
background 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease,
transform 0.12s ease;
}
/* Primärer Gold-Button (Black-Friday-Stil) */
.syca-cta-primary {
background: linear-gradient(135deg, #f4e04d, #ffd95a);
border-color: #f4e04d;
color: #0c364b;
box-shadow: 0 0 18px rgba(244, 224, 77, 0.35);
}
.syca-cta-primary:hover {
background: #ffe878;
color: #0c364b;
transform: translateY(-1px);
box-shadow: 0 0 20px rgba(244, 224, 77, 0.5);
}
/* Sekundäre Variante: transparenter Button mit Gold-Rand */
.syca-cta-secondary {
background: transparent;
border-color: rgba(244, 224, 77, 0.9);
color: #f4e04d;
}
.syca-cta-secondary:hover {
background: rgba(244, 224, 77, 0.12);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 0 14px rgba(244, 224, 77, 0.4);
}
/* Outline für den "Iris"-Button – etwas persönlicher, zarter */
.syca-cta-outline {
background: transparent;
border-style: dashed;
border-color: rgba(244, 224, 77, 0.9);
color: #ffffff;
}
.syca-cta-outline:hover {
background: rgba(244, 224, 77, 0.08);
color: #f4e04d;
transform: translateY(-1px);
box-shadow: 0 0 14px rgba(244, 224, 77, 0.35);
}
/* Mobile-Anpassung */
@media (max-width: 767px) {
.harbor-404-box {
padding: 30px 24px;
}
.harbor-404-box p {
font-size: 1.15rem;
}
.syca-cta-btn {
width: 100%;
min-width: 0;
}
}
/* Basis-Layout für AGB, Datenschutz & Co. */
.legal-box {
max-width: 880px;
margin: 80px auto;
padding: 60px 40px;
background: rgba(255, 255, 255, 0.04);
border-radius: 24px;
box-shadow: 0 0 28px rgba(0, 0, 0, 0.08);
color: #ffffff;
font-size: 1.4rem;
line-height: 1.85;
text-align: center;
}
/* Haupt-Titel (z.B. "AGB", "Datenschutzerklärung") */
.legal-box .legal-main-title {
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 2.5rem;
}
/* Abschnittsüberschriften (Ziffer 1., 2., 3. …) */
.legal-box h3 {
font-size: 1.9rem;
font-weight: bold;
margin: 2.5rem 0 1.5rem;
}
/* Meta-Zeilen wie "Schäfer Yacht Charter / Stand: ..." */
.legal-box .legal-meta {
margin-bottom: 2.5rem;
}
/* Links im Rechtsbereich */
.legal-box a {
color: #f4e04d;
text-decoration: none;
}
.legal-box a:hover,
.legal-box a:focus {
text-decoration: underline;
}
/* Listen im Legal-Bereich */
.legal-box ul {
list-style-position: inside;
padding-left: 0;
margin: 0.5rem 0 1.5rem;
}
/* Varianten für AGB und Datenschutz */
.legal-box--agb {
border-left: 5px solid #f4e04d;
border-right: 5px solid #f4e04d;
}
.legal-box--privacy {
border-top: 5px solid #f4e04d;
border-bottom: 5px solid rgba(244, 224, 77, 0.6);
}
/* Responsive Feinschliff */
@media (max-width: 767px) {
.legal-box {
margin: 40px auto;
padding: 40px 20px;
font-size: 1.25rem;
}
.legal-box .legal-main-title {
font-size: 2rem;
}
.legal-box h3 {
font-size: 1.7rem;
}
}
/* -------------------------------------------------
Impressum / Abschlussboxen – Layout-Varianten
--------------------------------------------------*/
/* Gemeinsame Basis für Abschlussboxen im Legal-Kontext */
.legal-box--impressum-outro,
.legal-box--impressum-links {
margin: 100px auto 120px auto;
background: rgba(255, 255, 255, 0.035);
box-shadow: 0 0 24px rgba(0, 0, 0, 0.06);
}
/* Untere Goldlinie (Seitenentwicklung / Dankesabschnitt) */
.legal-box--impressum-outro {
border-bottom: 5px solid #f4e04d;
}
/* Obere Goldlinie (Haftung für Links / Änderungsvorbehalt) */
.legal-box--impressum-links {
border-top: 5px solid #f4e04d;
}
/* Typografie-Spezialrollen in den Abschlussboxen */
.legal-box .legal-subtitle {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
.legal-box .legal-subheadline {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 1em;
}
.legal-box .legal-text-narrow {
max-width: 740px;
margin: 0 auto 2em;
}
.legal-box .legal-note {
font-style: italic;
color: #cccccc;
margin-bottom: 1.4em;
}
.legal-box .legal-signature {
font-size: 1.3rem;
color: #dddddd;
margin-bottom: 0.2em;
}
/* Zusätzliche Rolle: Credits-Zeile im Impressums-Outro */
.legal-box .legal-credits {
font-size: 0.95rem;
color: #cccccc;
margin-bottom: 1.6em;
line-height: 1.5;
}
.legal-box .legal-credits-label {
font-weight: 600;
color: #e6e6e6;
}
/* Links im Credits-Block dezent, mit „goldenem“ Hinweis */
.legal-box .legal-credits a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted rgba(244, 224, 77, 0.65);
padding-bottom: 1px;
}
.legal-box .legal-credits a:hover {
color: #f4e04d;
border-bottom-color: #f4e04d;
}
/* -------------------------------------------------
SYC Content-Boxen & Typografie
--------------------------------------------------*/
/* Basis für große Inhalte (Intro, Yachtsuche, Sicherheitsbox etc.) */
.sc-box {
max-width: 880px;
margin: 80px auto;
padding: 60px 40px;
background: rgba(255, 255, 255, 0.035);
border-radius: 24px;
box-shadow: 0 0 28px rgba(0, 0, 0, 0.06);
color: #ffffff;
font-size: 1.4rem;
line-height: 1.85;
text-align: center;
border: none;
transition:
transform 0.2s ease,
box-shadow 0.25s ease,
border-color 0.25s ease,
background 0.2s ease;
/* NEU: Flex, damit Inhalt vertikal zentriert wird */
display: flex;
flex-direction: column;
justify-content: center;
/* vertikal zentrieren */
}
/* etwas kleinere Boxen (z. B. Textboxen innerhalb der Grids) */
.sc-box--narrow {
max-width: 720px;
margin: 40px auto 50px auto;
padding: 24px 24px;
/* noch schlanker */
border-radius: 14px;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
font-size: 1.30rem;
justify-content: center;
/* Inhalt bleibt vertikal zentriert */
}
/* Intro-Box (Willkommen an Bord) mit etwas mehr Abstand */
.sc-box--intro {
margin: 100px auto 120px auto;
}
/* Gold-Linien-Varianten */
.sc-box--gold-top {
border-top: 5px solid #f4e04d;
}
.sc-box--gold-bottom {
border-bottom: 5px solid #f4e04d;
}
/* Hover-Effekt für Boxen */
.sc-box:hover {
transform: translateY(-3px);
box-shadow: 0 0 32px rgba(0, 0, 0, 0.16);
background: rgba(255, 255, 255, 0.045);
}
.sc-box--gold-top:hover,
.sc-box--gold-bottom:hover {
border-color: #ffe666;
}
/* Überschriften & Untertitel */
.sc-heading-main {
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 2rem;
}
.sc-heading-main--intro {
font-size: 2.4rem;
margin-bottom: 1.8rem;
}
.sc-heading-medium {
font-size: 2.0rem;
font-weight: bold;
margin-bottom: 1.5rem;
}
.sc-heading-medium--small {
font-size: 2.0rem;
margin-bottom: 1.0rem;
}
.sc-subtitle {
font-size: 1.45rem;
font-weight: 600;
margin-bottom: 2rem;
}
.sc-subtitle-small {
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
/* NEU */
}
/* schmale Textspalten */
.sc-text-narrow {
max-width: 740px;
margin: 0 auto 2rem;
text-align: center;
/* NEU */
}
.sc-text-narrow-small {
max-width: 620px;
margin: 0 auto 1.2rem;
text-align: center;
/* NEU */
}
.sc-text-block-spaced {
margin: 2em auto 1em;
}
.sc-text-narrow--signature {
margin-top: 2.2em;
font-weight: bold;
}
.sc-avatar-round {
border-radius: 50%;
width: 120px;
height: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: block;
margin: 0 auto;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* Hover: leichtes Zoom + dezenter Gold-Halo */
.sc-figure:hover .sc-avatar-round {
transform: scale(1.05);
box-shadow:
0 0 0 2px rgba(244, 224, 77, 0.65),
/* feiner goldener Ring */
0 0 22px rgba(0, 0, 0, 0.28);
/* weicher dunkler Schatten */
}
/* Überschrift weniger Luft nach unten in schmaler Box */
.sc-box--narrow .sc-heading-medium--small {
margin-bottom: 1.2rem;
}
/* Abstände zwischen Absätzen in schmaler Box leicht reduziert */
.sc-box--narrow .sc-text-narrow-small {
margin-bottom: 0.9rem;
}
/* letzter Absatz wirklich bündig unten */
.sc-box--narrow .sc-text-narrow-small:last-child {
margin-bottom: 0;
}
/* Zitate (immer zentriert) */
.sc-quote {
text-align: center;
font-style: italic;
}
.sc-signature {
font-size: 1.35rem;
color: #dddddd;
}
.sc-phone-highlight {
font-size: 1.45rem;
font-weight: bold;
color: #f4e04d;
}
/* Links in Boxen */
.legal-box a,
.sc-box a {
color: #f4e04d;
text-decoration: none;
}
.legal-box a:hover,
.legal-box a:focus,
.sc-box a:hover,
.sc-box a:focus {
text-decoration: underline;
}
/* Yachtsuche-Anker: sauberer Scroll-Offset */
.anchor-offset {
scroll-margin-top: 120px;
}
/* -------------------------------------------------
2-Spalten-Grids (Bild + Box nebeneinander)
--------------------------------------------------*/
/* Grundlayout für alle 2-Spalten-Bereiche */
.sc-grid-2 {
max-width: 980px;
margin: 40px auto 80px auto;
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
}
/* Variante: Spalten vertikal zueinander zentrieren */
.sc-grid-2--center {
align-items: center;
}
/* Spalten selbst */
.sc-grid-item {
flex: 1 1 0;
min-width: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* NEU: vertikal zentrieren */
}
@media (max-width: 991px) {
.sc-grid-item {
align-items: stretch;
}
}
.sc-grid-item h3 {
text-align: center;
}
/* Boxen im Grid sollen nicht erneut außen verschoben werden */
.sc-grid-2 .sc-box {
max-width: 100%;
margin: 0;
}
/* Boxen im Grid: kompakter halten */
.sc-grid-2 .sc-box--narrow {
max-width: 100%;
margin: 0;
padding: 22px 26px;
/* vorher 28px / 30px – deutlich straffer */
font-size: 1.3rem;
/* minimal kleiner, wirkt weniger „ballonartig“ */
}
/* Überschrift in Grid-Boxen: kein extra Abstand nach oben */
.sc-grid-2 .sc-box--narrow h2,
.sc-grid-2 .sc-box--narrow h3 {
margin-top: 0;
}
/* letzter Absatz in Grid-Boxen: unten nicht so viel Luft */
.sc-grid-2 .sc-box--narrow p:last-child {
margin-bottom: 0;
}
/* Überschrift in sc-box: kein extra Top-Margin */
.sc-box h2,
.sc-box h3 {
margin-top: 0;
}
/* letzter Absatz in Box: kein großer Bottom-Margin */
.sc-box p:last-child {
margin-bottom: 0;
}
/* in schmalen Boxen auch die schmalen Texte sanfter enden lassen */
.sc-box--narrow .sc-text-narrow-small:last-child {
margin-bottom: 0.4rem;
/* statt 1.2rem */
}
/* Mobile: Spalten untereinander */
@media (max-width: 991px) {
.sc-grid-2 {
flex-direction: column;
margin: 20px auto 60px auto;
}
.sc-grid-item {
align-items: stretch;
}
.sc-box--intro {
margin: 80px auto;
}
}
/* Listen in Boxen – zentriert mit goldenem Bullet */
.sc-list {
list-style: none;
padding: 0;
margin: 0 0 1.2rem 0;
}
/* jede Zeile ist ein flex-Container */
.sc-list li {
display: flex;
align-items: center;
/* Bullet + Text vertikal zentriert */
justify-content: center;
/* komplette Zeile zentriert */
gap: 0.55rem;
/* Abstand zwischen Bullet und Text */
margin: 0.3rem 0;
}
/* goldener Punkt als eigenes „Element“ */
.sc-list li::before {
content: "•";
color: #f4e04d;
font-size: 1.25em;
line-height: 1;
}
/* -------------------------------------------------
Bilder & Figuren (mit Hover-Effekt)
--------------------------------------------------*/
.sc-figure {
margin: 0 auto 2.8rem;
text-align: center;
}
.sc-figure--small {
margin: 0 auto 2rem;
}
/* ehemals "tall": jetzt normal, damit nichts mehr frei schwebt */
.sc-figure--tall {
margin: 0 auto 2rem;
}
.sc-image {
max-width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
display: block;
margin-left: auto;
margin-right: auto;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
transform-origin: center center;
}
/* Hover-Vergrößerung für Fotos */
.sc-figure:hover .sc-image {
transform: scale(1.03);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
/* Standard-Captions */
.sc-figure figcaption {
margin-top: 1em;
font-size: 1.3rem;
color: #cccccc;
}
.sc-figure-caption-small {
font-size: 1.2rem;
}
/* -------------------------------------------------
Yacht-Pool Siegel
--------------------------------------------------*/
.sc-cert-logo {
max-width: 210px;
height: auto;
border-radius: 0;
/* Siegel bleibt "kantig" */
box-shadow: 0 0 16px rgba(0, 0, 0, 0.18);
display: block;
margin: 0.5rem auto 0;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.sc-cert-logo:hover {
transform: scale(1.05);
box-shadow: 0 0 22px rgba(0, 0, 0, 0.3);
}
/* ---------------------------------------------
Versicherungs-Abschnitt – Typografie & Layout
----------------------------------------------*/
.sc-insurance-section {
/* entspricht deiner früheren versicherungen-abschluss-box */
max-width: 880px;
margin: 100px auto 120px auto;
padding: 60px 40px;
background: rgba(255, 255, 255, 0.04);
border-radius: 24px;
box-shadow: 0 0 28px rgba(0, 0, 0, 0.08);
color: #ffffff;
text-align: center;
font-size: 1.4rem;
line-height: 1.85;
border-bottom: 5px solid #f4e04d;
}
/* kleine Einleitungszeile oben */
.sc-insurance-intro {
max-width: 720px;
margin: 0 auto 1.4rem;
font-size: 1.3rem;
color: #e9f3ff;
}
/* gelbe Hauptzeile */
.sc-insurance-title {
font-size: 2rem;
font-weight: 700;
color: #f4e04d;
margin-bottom: 1.8rem;
}
/* Block-Überschriften (Skipperhaftpflicht etc.) */
.sc-insurance-section h4 {
font-size: 1.6rem;
font-weight: 700;
margin: 2.4rem auto 0.8rem;
}
/* Fließtext unterhalb der h4 */
.sc-insurance-section p {
max-width: 820px;
margin: 0 auto 1.6rem;
}
/* Footer unten im Block */
.sc-insurance-section .sc-insurance-footer {
margin-top: 2.8rem;
}
.sc-insurance-section .sc-insurance-footer-title {
font-size: 1.55rem;
font-weight: 700;
margin-bottom: 0.8rem;
}
.sc-insurance-section .sc-insurance-footer-note {
font-size: 1.2rem;
color: #d0d7e5;
margin-bottom: 0.6rem;
}
.sc-insurance-section .sc-insurance-footer-sign {
font-size: 1.30rem;
color: #f4e04d;
}
/* -------------------------------------------------
Goldene Trenner zwischen den Blöcken
--------------------------------------------------*/
.sc-insurance-separator {
width: 80%;
max-width: 520px;
height: 2px;
margin: 1.8rem auto 0;
background: linear-gradient(to right,
rgba(244, 224, 77, 0) 0%,
rgba(244, 224, 77, 0.45) 50%,
rgba(244, 224, 77, 0) 100%);
opacity: 0.5;
transition:
opacity 0.35s ease,
box-shadow 0.35s ease;
}
/* etwas kräftiger für z. B. vor der letzten Versicherung */
.sc-insurance-separator--highlight {
opacity: 0.8;
}
/* „Aufleuchten“, wenn im Fokus/Hover (optional, aber hübsch) */
.sc-insurance-separator:hover {
opacity: 1;
box-shadow: 0 0 14px rgba(244, 224, 77, 0.45);
}
/* etwas kleiner auf schmalen Screens */
@media (max-width: 767px) {
.sc-insurance-section {
margin: 70px auto 90px auto;
padding: 42px 26px;
font-size: 1.25rem;
}
.sc-insurance-title {
font-size: 1.7rem;
}
.sc-insurance-section h4 {
font-size: 1.4rem;
margin-top: 2rem;
}
.sc-insurance-separator {
width: 88%;
}
}
/* -------------------------------------------------
Versicherungs-Logos (Pantaenius, Schomacker, YachtPool)
--------------------------------------------------*/
/* Container für alle drei Logos */
.sc-insurance-logos {
max-width: 980px;
margin: 0 auto 3rem auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.5rem;
/* Abstand zwischen den Logos */
}
/* einzelne Logo-Kachel */
.sc-insurance-logo {
background: #ffffff;
padding: 10px 18px;
border-radius: 10px;
box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
/* "so lange wie möglich nebeneinander" */
flex: 1 1 230px;
/* Basisbreite ~230px, schrumpf- und wachstumsfähig */
max-width: 280px;
/* nicht unendlich breit werden */
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
/* Logo-Bild selbst – skaliert weich mit der Kachel */
.sc-insurance-logo-img {
display: block;
width: 100%;
/* ~75 % der alten 300px, je nach verfügbarer Breite */
height: auto;
}
/* Hover-Effekt: sanftes „Aufleuchten“ */
.sc-insurance-logo:hover,
.sc-insurance-logo:focus {
transform: translateY(-3px);
box-shadow:
0 0 0 1px rgba(244, 224, 77, 0.7),
0 0 28px rgba(255, 255, 255, 0.9);
background: #ffffff;
}
/* -------------------------------------------------
Responsive Verhalten für Logos
--------------------------------------------------*/
@media (max-width: 768px) {
.sc-insurance-logos {
gap: 2rem;
}
.sc-insurance-logo {
flex: 1 1 45%;
/* meist 2 Logos pro Zeile */
max-width: 260px;
}
}
@media (max-width: 480px) {
.sc-insurance-logo {
flex: 1 1 100%;
/* ein Logo pro Zeile */
max-width: 260px;
}
}
/* Kontakt-Box – feiner Unterton für Hinweis und Tagline */
.sc-box--contact {
margin: 100px auto;
}
.sc-contact-note {
font-size: 1.2rem;
color: #cccccc;
margin-bottom: 2.2rem;
}
.sc-contact-tagline {
margin-top: 2.2rem;
font-size: 1.35rem;
color: #aaaaaa;
font-style: italic;
}
/* auf kleineren Screens etwas kompakter */
@media (max-width: 767px) {
.sc-box--contact {
margin: 70px auto;
padding: 46px 26px;
}
.sc-contact-tagline {
font-size: 1.3rem;
}
}
/* Box für „zum ersten Mal chartern“ */
.sc-firsttime-box {
margin: 100px auto 120px auto;
}
/* zarter Akzent für den motivierenden Satz */
.sc-firsttime-highlight {
margin-top: 1.4rem;
margin-bottom: 1.4rem;
}
/* Bullet-Liste in der Mitte, mit goldenen Punkten */
.sc-bullet-list {
list-style: none;
padding: 0;
margin: 0 0 1.2rem 0;
text-align: left;
display: inline-block;
/* damit sie in der Mitte sitzt */
}
.sc-bullet-list li {
position: relative;
padding-left: 1.4rem;
margin: 0.25rem 0;
}
.sc-bullet-list li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: #f4e04d;
font-size: 1.15em;
}
/* Mobile: etwas luftiger */
@media (max-width: 767px) {
.sc-firsttime-box {
margin: 80px auto 100px auto;
padding: 46px 26px;
}
}
/* Abschlussbild – sicher vollbreit ohne horizontales Wackeln */
.fullbleed-hero {
position: relative;
width: 100%;
/* kein 100vw → keine Scrollbar-Überbreite */
line-height: 0;
/* verhindert Extra-Whitespace */
overflow: hidden;
/* für den Zoom-Crop */
isolation: isolate;
/* Overlay sauber trennen */
margin: 0;
padding: 0;
}
/* Bild kontrolliert skalieren */
.fullbleed-hero .hero-img {
display: block;
width: 100%;
height: clamp(480px, 62vh, 820px);
/* schön adaptiv */
object-fit: cover;
transform: scale(1);
transition: transform 8s ease-out;
/* sanfter Ken-Burns auf Hover */
will-change: transform;
}
/* Abdunkelung wie oben */
.fullbleed-hero .slider-overlay-full {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.22);
pointer-events: none;
}
/* Desktop: dezenter Zoom bei Hover */
@media (hover:hover) and (pointer:fine) {
.fullbleed-hero:hover .hero-img {
transform: scale(1.06);
}
}
/* Option: Nutzer mit reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
.fullbleed-hero .hero-img {
transition: none;
transform: none;
}
}
/* ============================================
NAUSYS – Minimal, stabil, sauber
============================================ */
/* Wrapper: fester sichtbarer Raum */
.nausys-wrapper {
width: 100%;
max-width: 1000px;
margin: 60px auto;
height: 760px; /* feste Höhe */
border-left: 4px solid #d1b777;
border-right: 4px solid #d1b777;
overflow: hidden; /* iFrame scrollt INNEN */
position: relative;
background: transparent;
}
/* iFrame: füllt den gesamten Rahmen und scrollt intern */
#nsWidgetResults iframe {
display: block;
width: 100% !important;
height: 760px !important; /* wichtigste Regel */
border: none;
overflow-y: scroll !important; /* interne Scrollbar */
}
/* --------------------------------------------
Cookie-Banner im Wrapper
-------------------------------------------- */
.nausys_cookie_banner {
text-align: center;
padding: 40px 20px;
color: #ffffff;
background: rgba(255,255,255,0.04);
border-radius: 12px;
box-shadow: 0 0 14px rgba(0,0,0,0.15);
}
.nausys_cookie_buttons {
margin-top: 20px;
}
.nausys_cookie_btn--primary,
.nausys_cookie_btn--secondary {
display: block;
margin: 10px auto;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
font-size: 1.2rem;
}
/* Aktivierungsbutton */
.nausys_cookie_btn--primary {
border: 1px solid #f4e04d;
background: rgba(0,0,0,0.25);
color: #ffffff;
}
.nausys_cookie_btn--primary:hover {
background: #f4e04d;
color: #1B3546;
}
/* Alternativ-Button */
.nausys_cookie_btn--secondary {
border: 1px solid rgba(244,224,77,0.3);
color: #f4e04d;
}
.nausys_cookie_btn--secondary:hover {
background: rgba(244,224,77,0.1);
}
/* Fade-Out-Effekt beim Ausblenden */
.fade-out {
opacity: 0;
transition: opacity .5s ease;
}
/* Kontaktblock Startseite */
.contacthub-wrapper {
max-width: 1100px;
margin: 60px auto 100px auto;
padding: 0 20px;
text-align: center;
color: #ffffff;
}
.contacthub-title {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1rem;
}
.contacthub-text {
font-size: 1.2rem;
line-height: 1.7;
max-width: 720px;
margin: 0.5rem auto;
opacity: 0.95;
}
.contacthub-text.small {
font-size: 1.1rem;
opacity: 0.85;
}
.contacthub-lines {
display: flex;
flex-direction: row;
justify-content: center;
gap: 26px;
margin: 2rem auto 1.5rem auto;
flex-wrap: wrap;
}
.contact-line {
display: flex;
flex-direction: column;
text-align: center;
padding: 14px 26px;
border: 1px solid #f4e04d;
border-radius: 999px;
color: #f4e04d;
font-size: 1.1rem;
text-decoration: none;
transition: all 0.25s ease;
}
.contact-line:hover {
background: #f4e04d;
color: #003344;
transform: translateY(-2px);
box-shadow: 0 0 12px rgba(244,224,77,0.5);
}
.contacthub-signature {
margin-top: 2.5rem;
font-weight: 600;
opacity: 0.9;
}