/* Theme Name: twentyseventeen child theme Description: Write here a brief description about your child-theme Author: Surferhai Author URL: Write here the author's blog or website url Template: twentyseventeen Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen-child */ /* Write here your own personal stylesheet */ /* Platz für das Logo sofort zu reservieren */ .custom-logo-link img { aspect-ratio: 350 / 130; width: 350px; height: auto; } /* Hero Img Overlay unter Safari verhinder */ @media screen and (min-width: 48em) { .twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media { height: 700px !important; /* oder dein Wunschwert, z. B. 80vh oder auto */ } } /* Zwingt das große Header-Bild auf seine Maße */ .custom-header-media img { width: 1920px; height: 1151px; aspect-ratio: 1920 / 1151; } /* Behebt den Font-Jump (Roboto) */ html, body, h1, h2, h3 { font-display: swap !important; } /* Kompakter Fix für Telefon-Links */ a[href^="tel:"] { display: inline-block; padding: 6px 10px; /* Weniger Abstand, aber genug für den Daumen */ margin-bottom: 2px; /* Nur ein minimaler Abstand nach unten */ line-height: 1.2; /* Hält die Zeilen eng zusammen */ min-width: 44px; /* Mindestbreite, damit es klickbar bleibt */ } h1, h2, h3, h4, h5, h6, strong, b { overflow-wrap: break-word; hyphens: auto; } /* Optionales CSS für ein besseres Design von FAQ */ section details { border-bottom: 1px solid #eee; padding: 10px 0; transition: all 0.3s ease; } summary { font-weight: bold; cursor: pointer; list-style: none; position: relative; padding-right: 30px; font-size: 1.1rem; } summary::-webkit-details-marker { display: none; } /* Kleines Plus/Minus Icon rechts */ summary::after { content: '+'; position: absolute; right: 10px; color: #0088cc; } details[open] summary::after { content: '-'; } details p { padding: 15px 10px; background: #f9f9f9; margin-top: 10px; border-radius: 5px; } .menu-home-menue-container ul#top-menu li a { justify-content: left !important; } /* Grunddesign der Rückmeldung (für alle Zustände) */ .wpcf7-response-output { font-size: 1rem; font-weight: 500 !important; margin-bottom: 1em; /* Etwas mehr Platz nach unten */ padding: 0.8em 1em; /* Angenehmeres Padding */ border-radius: 8px; /* Moderne abgerundete Ecken */ text-align: center; /* Text zentriert für bessere Optik */ border: none !important; /* Entfernt den Standard-Rahmen von CF7 */ } /* Design bei Fehlern (Ungültige Eingabe / Senden fehlgeschlagen) */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background-color: #ff0000; /* Kräftiges Rot als Hintergrund */ color: #ffffff; border: 2px solid #b30000 !important; /* Dunklerer Rand statt 5px (wirkt edler) */ } /* Fehlerhinweise direkt unter den Eingabefeldern */ .wpcf7-form .wpcf7-not-valid-tip { margin-bottom: 5px; font-size: 0.85em; font-weight: 600; color: #ffffff !important; /* Weißer Text für besseren Kontrast */ background-color: #d00; /* Roter Hintergrund für sofortige Sichtbarkeit */ padding: 2px 4px; /* Kleiner Puffer um den Text */ border-radius: 4px; /* Abgerundete Ecken passend zum Rest */ display: inline-block; /* Verhindert, dass der rote Balken die ganze Breite einnimmt */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Dezenter Schatten */ } /* Optional: Das Eingabefeld selbst bei Fehler hervorheben */ .wpcf7-form .wpcf7-not-valid { border: 2px solid #d00 !important; background-color: #fffafa !important; /* Ganz leichter Rotschimmer im Feld */ } /* OCF7 Senden Button ausgrauen/deaktivieren wenn ein formular gesendet wird */ .wpcf7-form.submitting .wpcf7-submit { opacity: 0.6; pointer-events: none; } /* Twenty Seventeen – Header mit festem Seitenverhältnis */ .has-header-image:not(.home) .custom-header { height: auto; max-height: 720px; } /* Bild sauber einpassen */ .has-header-image:not(.home) .custom-header-media img { width: 100%; height: 100%; object-fit: cover; } /* 1. GRUNDGERÜST: Die gesamte Seite aufweiten */ #page { width: 100% !important; max-width: 100% !important; } /* 2. NAVIGATION: Menü-Breite fixieren */ /* Wir sorgen dafür, dass das Menü auf der Subdomain genauso breit ist wie der Content */ .navigation-top .wrap { max-width: 1430px !important; width: 95% !important; margin: 0 auto !important; padding: 0 20px !important; } /* 3. CONTENT: Den Hauptinhaltsbereich auf allen Domains gleichschalten */ #content { max-width: 1430px !important; width: 95% !important; margin: 0 auto !important; padding: 0 !important; } /* 4. BREAKOUT: Das "Zwei-Spalten-Gefängnis" sprengen */ /* Auf Subdomains denkt das Theme, es gäbe eine Sidebar. Das lösen wir hier auf. */ @media screen and (min-width: 48em) { #primary { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; } /* Entfernt den künstlichen weißen Platz links auf den Subdomain-Seiten */ .page-two-column #primary { width: 100% !important; } .site-content .wrap { max-width: 100% !important; /* Da der äußere #content schon begrenzt, darf der innere wrap 100% haben */ width: 100% !important; padding: 0 !important; } } /* 5. ENTRY-FIX: Textbreite innerhalb der Seite */ .entry-content, .entry-header { width: 100% !important; max-width: 100% !important; } /* Header-Video nicht bildschirmfüllend */ .wp-custom-header video, .wp-custom-header iframe { width: 100% !important; max-height: 500px !important; /* Höhe anpassen */ object-fit: cover; } /* Play/Pause-Button ausblenden */ .wp-custom-header-video-button { display: none !important; } .social-links-menu a { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 8px; margin-right: 8px; border-radius: 4px; transition: background 0.2s, outline 0.2s; } .social-links-menu a:focus, .social-links-menu a:hover { outline: 2px solid #005fcc; background: #e6f0fa; outline-offset: 2px; } .social-links-menu li:last-child a { margin-right: 0; } /* SVG-Icons deutlich größer darstellen */ .social-links-menu svg { width: 32px; height: 32px; vertical-align: middle; position: static; } /* Screenreader-Text */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; } /* Mindestgröße für Touch-Ziele */ a.menu-scroll-down, a.mail-link { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; /* justify-content: center; */ padding: 0; /* ggf. anpassen */ font-size: 1.1em; /* optional, für bessere Lesbarkeit */ } /* Submenü-Links linksbündig ausrichten und mit Abstand vom linken Rand */ .menu-home-menue-container ul#top-menu ul.sub-menu li a { justify-content: flex-start; /* Text linksbündig */ text-align: left; /* Textausrichtung links */ padding-left: 5px !important; /* Abstand vom linken Rand */ } /* Schatten für den Submenü-Container */ .main-navigation ul ul { box-shadow: 0 4px 16px rgba(0, 0, 0, .25); border: none !important; } /* Abstand zwischen Menü-Links erhöhen */ .menu-home-menue-container ul#top-menu li { margin-bottom: 0; /* vertikaler Abstand */ margin-right: 8px; /* horizontaler Abstand */ } /* Abstabd der Überschrift nach oben in den News */ .nomargintop { margin-top: 0 !important; } /* Vergangene Feiertags Special ausblenden */ .hide-past-special { display: none; } /* Header Bild auf Steinhuder Meer UNTERKUNFT Buchungsseite ausblenden */ .page-id-8913 .custom-header { display: none !important; } /* Header Bild auf Steinhuder Meer Buchungsseite ausblenden */ .page-id-1623 .custom-header { display: none !important; } .page-id-6697 .custom-header { display: none !important; } .page-id-6426 .custom-header { display: none !important; } /* Header Bild auf DK Buchungsseite ausblenden */ .page-id-182 .custom-header { display: none !important; } /* Mehr Abstand oberhalb des Steinhuder Meer Buchungsformulars auf der Buchungsseite */ .page-id-1623 .site-content { padding-top: 60px !important; /* Erhöht den Abstand von oben */ } .page-id-6697 .site-content { padding-top: 60px !important; /* Erhöht den Abstand von oben */ } .page-id-6426 .site-content { padding-top: 60px !important; /* Erhöht den Abstand von oben */ } /* Mehr Abstand oberhalb des DK Buchungsformulars auf der Buchungsseite */ .page-id-182 .site-content { padding-top: 60px !important; /* Erhöht den Abstand von oben */ } .panel-content .entry-content li a { color: #005fa3!important; } label { font-weight: 600!important; font-size: 1rem!important; } /* Verstecke die Checkbox */ #toggle-text { display: none; } /* Button-Styling */ .toggle-button { vertical-align: middle; text-decoration: none !important; margin: 2px 4px 0 0 !important; background: #d93c02 !important; color: #fff !important; border: 1px solid #d93c02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; border-radius: 10px; padding: 5px 10px !important; transition: background 0.3s ease-in-out; } /* Hover-Effekt */ .toggle-button:hover { background-color: #fff!important; color: #d93c02!important; border: 1px solid #d93c02; } /* Standardmäßig den Text verstecken */ .hidden-text { opacity: 0; visibility: hidden; height: 0; overflow: hidden; transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out; } /* Wenn Checkbox aktiviert ist, Text einblenden */ #toggle-text:checked ~ .hidden-text { opacity: 1; visibility: visible; height: auto; overflow: visible; } /* Wenn die Box ausgeklappt ist, nur den "Weniger anzeigen"-Button anzeigen */ #toggle-text:checked ~ .toggle-button-less { display: inline-block; } #toggle-text:checked ~ .toggle-button-read { display: none; } /* Wenn die Box zugeklappt ist, nur den "Weiterlesen"-Button anzeigen */ #toggle-text:not(:checked) ~ .toggle-button-read { display: inline-block; } #toggle-text:not(:checked) ~ .toggle-button-less { display: none; } /* ... Newsbox ... .orange_border { background-color: #ffffff!important; box-shadow: 2px 2px 5px rgba(0, 0, 0, .6); border-left: 7px solid #d93c02; padding: 20px; margin-top: 30px; } */ /* ... Newsbox ... */ .orange_border { background-color: #fff!important; box-shadow: 2px 2px 5px rgb(0 0 0 / 60%); border-left: 7px solid #d93c02; padding: 20px 0 10px 10px; /* max-width: 1000px; Maximale Breite der Box auf 1000px setzen */ width: 100%; /* Stellt sicher, dass die Box die verfügbare Breite nutzt, aber nicht größer als 1000px wird */ } .orange_border p { font-size: 1rem; } .orange_border strong { font-size: 1rem; } .orange_border li a { color: #d93c02!important; } .orange_border li a:hover { text-decoration: underline!important; } .orange_border li { font-weight:500; } /* ... Weiterlesen Button... */ .weiterlesen-button { vertical-align: middle; text-decoration: none !important; margin: 2px 4px 0 0!important; /* Mehr Abstand in alle Richtungen */ background: #d93c02 !important; color: #fff !important; border: 1px solid #fff!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; border-radius: 10px; padding: 5px 10px !important; /* Größere Buttons für bessere Klickbarkeit */ } .weiterlesen-button:hover { background-color: #fff!important; border: 1px solid #d93c02!important; color: #d93c02 !important; } /* Den ausgeblendeten Text stilisieren */ .weiterlesen-content { margin-top: 10px; } /* ... Bilder nebeneinander... */ .bilder-container { display: flex; flex-wrap: wrap; /* Standardwert = nowrap */ /* justify-content: space-between; Optional für gleichmäßigen Abstand */ } .bild { padding: 5px; /* Optional für Abstand zwischen den Bildern */ } .bild img { /* width: 300px!important; */ height: auto; /* Höhe wird automatisch angepasst */ } .rahmen { border: 1px solid #004b8d; } form { margin-bottom: 5px; } /* Tabs Anreise Tarifa */ .rtbs .rtbs_menu li a.active { font-weight: 500!important; position: relative; color: white!important; } /* Img Rahmen */ .border { padding: 1em; border: 1px solid silver; margin: 2em; transform: rotate(2deg); background: #fff; box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px; } .border-left { padding: 1em; border: 1px solid silver; margin: 2em; transform: rotate(-2deg); background: #fff; box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px; } /* .entry-content .wp-block-columns .wpb_button { font-weight: 600!important; color: #ffffff; } */ /* --------- .page-id-1970 .custom-header-media { display: none; } .page-id-1970 .custom-logo { display: none; } .page-id-1970 .site-branding-text { display: none; } .page-id-1970 .site-title { display: none; } ----- */ /* ----- #post-1970 h1 { text-align: center!important } ------ */ .alignfull, .alignwide { left: 50%; max-width: none; position: relative; transform: translate(-50%); width: 100vw; } .alignwide { max-width: 1200px; } .alignfull img, .alignwide img { width: 100%!important; } .site-content { overflow-x: hidden; } p.alignfull, p.alignwide { padding-left: 1rem; padding-right: 1rem; } /* Parallay Ipad */ @media only screen and (width >= 768px) and (width <= 1024px) and (min-device-pixel-ratio: 2) { .cover-header.bg-attachment-fixed { background-attachment: scroll; } } /* Register support for Gutenberg wide images in your theme */ .alignwide, .alignfull { margin: 32px calc(50% - 50vw); max-width: 100vw; width: 100vw; } @media (width <= 920px) { .alignwide { margin: 32px calc( ( 767px - 920px ) / 2 ); max-width: 920px; width: 920px; } } /* Galerie Slider Buttons */ .qligg-mfp-wrap .mfp-arrow { background: white!important; color: #000!important; } /* The sub-menu to have no border and a white background. */ .main-navigation ul ul { border: 1px #000 solid; } /* Gutschein buttons weiße Schrift .entry-content .wp-block-columns a { color: #fff!important; } */ /* Wingsurf Spalten ohne Abstand */ .tabelle_no_space { margin: 0!important; border: 1px #07a4b2 solid; padding-right: 0!important; } .iswhiteblue { /* background-image: linear-gradient(to top, red 0%, #B61F29 100%)!important; */ background-color: #004b8d; color: #fff!important; padding: 1em 1.5em!important; line-height: 1.4; width: 100%!important; } .iswhiteblue td { padding: 0 .8em .5em 0; } .container div { margin-right: .4em!important; } @media screen and (width <= 48em) { .navigation-top { border-bottom: 0 solid #eee; border-top: 0 solid #eee; } } /* Image */ img.alignleft { margin-right: 1em!important; margin-bottom: 1em!important } .site-branding-text p { text-align: center; } /* Cookie Banner */ #cn-accept-cookie, #cn-more-info, #cn-refuse-cookie, #cn-close-notice, #cn-notice-text { min-width: 44px; min-height: 44px; padding: 5px !important; /* sorgt für größere Klickfläche */ margin: 10px !important; /* Abstand zwischen Buttons */ touch-action: manipulation; /* verbessert Touch-Erkennung */ font-size: 16px; } .cookie-notice-container { padding: 15px 30px; } /* Home Icon Menue Abstand links */ .main-navigation > div > ul { margin: 0 !important; } /* Kursblöcke Tabschrift weiß */ input[type="radio"] + label, input[type="checkbox"] + label { color: #fff!important; } /* Social Icons Footer weiß */ #menu-item-30 a, #menu-item-508 a, #menu-item-18 a, #menu-item-19 a, #menu-item-23 a, #menu-item-24 a, #menu-item-40 a, #menu-item-38 a, #menu-item-60 a, #menu-item-61 a, #menu-item-62 a, #menu-item-2021 a { background: #ffffff!important; } /* resolve issues with background positioning */ .background-fixed .panel-image { background-attachment: unset; } #header-banner { background-attachment: scroll !important; } /* Tool Tip */ .tooltip { position: relative; display: inline-block; border-bottom: 0 dotted black; font-weight: 300; font-size: 1rem; color: #222; } .tooltip .tooltiptext { visibility: hidden; width: 230px; background-color: rgb(1 0 1 / 100%); color: #fff; text-align: left; border-radius: 6px; padding: 5px; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } /* Div nebeneinander responsible */ .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); background: #f2f2f2!important; } .container div { margin-bottom: 1em!important; } .entry-header .entry-title { margin: 1.8em 0 0.3em; } /* Site branding Text mobile */ body:not(.title-tagline-hidden) .site-branding-text { padding: 0 5px!important; margin-bottom: 25%!important;; } .custom-logo-link img { margin-top: 10em; } .iswhitefett { color: #fff; font-size: 1.2em; font-weight: 700; } .wp-block-column { padding-right: .1em; } .wrap { padding-left: 1em!important; padding-right: 1em!important;; } /* resolve issues with background positioning */ .background-fixed .panel-image { background-attachment: unset; } /* Tabs optimiert */ .tab-wrap { transition: 0.3s box-shadow ease; border-radius: 0; max-width: 100%; display: flex; flex-wrap: wrap; position: relative; background-color: #fff; margin: 0 0 20px !important; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); border: none; overflow: hidden; } .tab-wrap:hover { box-shadow: 0 12px 23px rgb(0 0 0 / 23%), 0 10px 10px rgb(0 0 0 / 19%); } /* ------------------------------------------------------------------- Radio-Inputs verstecken ------------------------------------------------------------------- */ .tab { display: none; } /* ------------------------------------------------------------------- Sichtbarer Tab-Inhalt, wenn entsprechender Radio-Button selected ist ------------------------------------------------------------------- */ .tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1), .tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2), .tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3), .tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4), .tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5), .tab:checked:nth-of-type(6) ~ .tab__content:nth-of-type(6) { opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease; position: relative; top: 0; z-index: 100; transform: translateY(0); } /* ------------------------------------------------------------------- Tab-Buttons (Labels) ------------------------------------------------------------------- */ .tab + label { box-shadow: 0 -1px 0 #eee inset; border-radius: 0 !important; /* "none" ist ungültig, 0 verwenden */ cursor: pointer; /* WICHTIGSTE ÄNDERUNG: flex statt block */ display: flex !important; align-items: center; /* Vertikal mittig */ justify-content: center; /* Horizontal mittig */ text-decoration: none; color: #fff; flex-grow: 3; text-align: center; background-color: #004b8d; user-select: none; transition: 0.3s background-color ease, 0.3s box-shadow ease; height: 40px; box-sizing: border-box; padding: 0 10px; /* Ein kleiner Puffer seitlich schadet nie */ margin: 0 0.1px; } /* Hover-Farbe auf Schwarz .tab + label:hover { background-color: #000; Hover auf Schwarz color: #fff !important; box-shadow: 0 1px 0 #f4f4f4 inset; }*/ /* Hover-Zustand ohne Verkleinerung */ .tab + label:hover { background-color: #000 !important; color: #fff !important; /* Wir entfernen den Inset-Schatten, falls dieser optisch quetscht */ box-shadow: none !important; /* Wir erzwingen, dass die Größe gleich bleibt */ transform: none !important; scale: 1 !important; /* Wir stellen sicher, dass das Padding nicht überschrieben wird */ padding: 0 10px !important; } /* Entfernen des Abstands des ersten und letzten Tabs */ .tab:first-of-type + label { margin-left: 0; /* Kein Abstand am linken Rand */ } .tab:last-of-type + label { margin-right: 0; /* Kein Abstand am rechten Rand */ } /* ------------------------------------------------------------------- Aktiver Tab-Button (Rot) ------------------------------------------------------------------- */ .tab:checked + label { background-color: #d32f2f; /* Aktive Farbe: Dunkles Rot */ color: #fff !important; cursor: default; } /* ------------------------------------------------------------------- Tab-Inhalte ------------------------------------------------------------------- */ .tab__content { padding: 10px 25px; background-color: transparent; position: absolute; width: 100%; z-index: -1; opacity: 0; left: 0; transform: translateY(-3px); border-radius: 0; box-sizing: border-box; } .tab__content img { margin-bottom: 2em !important; } /* ------------------------------------------------------------------- Mobile: Bilder ausblenden ------------------------------------------------------------------- */ @media (width <= 768px) { .tab__content img { display: none !important; } } /* ------------------------------------------------------------------- Optional: Button-Hover in Inhalten ------------------------------------------------------------------- */ .panel-content .entry-content a.wpb_button:hover { color: #004b8d; } html { height: 100%; } html.ieedge { overflow: hidden; } body { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; background: #ffffff !important; /* Silbentrennung */ -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* Feinjustierung Silbentrennung (nur für Browser die es unterstützen) */ -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphenate-limit-lines: 4; } /* Change main background color */ .site-content-contain { background-color: #ffffff!important; } #content .wrap { background-color: #ffffff!important; } .bg-blau-color-white { background-color: #3b5998; color: #fff; padding-left: 5px; } .bg-gray { background-color: #c1c1c15e; padding: 10px; } p { margin-bottom: 15px; line-height: 1.6; } .cursive { font-style: italic; } /* Roboto Regular – v50 */ @font-face { font-family: 'Roboto'; src: url('fonts/roboto-v50-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Roboto Bold – v50 */ @font-face { font-family: 'Roboto'; src: url('fonts/roboto-v50-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } body, button, input, select, textarea { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important; font-size: 1.125rem !important; /* = 18px */ font-weight: 400 !important; /* Regular – passt zu roboto-v50-latin-regular.woff2 */ color: #333333 !important; line-height: 1.6; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { border: 0 solid #fff; border-radius: 0; border-radius: 0; } ul { list-style: disc; margin-left: 2em; font-weight: 400 } .entry-content a { color: #005fa3!important; font-weight: 600; text-decoration: underline; box-shadow: none!important; } /* .entry-content .wp-block-columns a { font-weight: 500!important; color: #444!important; } */ .colors-custom .entry-content a { box-shadow: none!important; } .fett { font-weight: 700!important; /* color: #444!important; */ } .fett_white { font-weight: 600!important; color: #fff!important; } b, strong { font-weight: 700!important; /* color: #444!important; */ } .underline { font-weight: 600!important; color: green!important; text-decoration: underline; } /* Unterstrich unter Links entfernen --------------------------------------------- */ .site-footer .widget-area a { box-shadow: none!important; box-shadow: none!important; } .entry-title a, .entry-meta a, .page-links a, .page-links a .page-number, .entry-footer a, .entry-footer .cat-links a, .entry-footer .tags-links a, .edit-link a, .post-navigation a, .logged-in-as a, .comment-navigation a, .comment-metadata a, .comment-metadata a.comment-edit-link, .comment-reply-link, a .nav-title, .pagination a, .comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, .site-footer .widget-area ul li a, .site-footer .widget-area ul li a { box-shadow: none!important; box-shadow: none!important; text-decoration: none!important; } /* .entry-content a, */ .entry-summary a, .widget a, .site-footer .widget-area a, .posts-navigation a, .widget_authors a strong { box-shadow: none!important; box-shadow: none!important; text-decoration: none!important; } .entry-content a:focus, .entry-content a:hover, .entry-summary a:focus, .entry-summary a:hover, .widget a:focus, .widget a:hover, .site-footer .widget-area a:focus, .site-footer .widget-area a:hover, .posts-navigation a:focus, .posts-navigation a:hover, .comment-metadata a:focus, .comment-metadata a:hover, .comment-metadata a.comment-edit-link:focus, .comment-metadata a.comment-edit-link:hover, .comment-reply-link:focus, .comment-reply-link:hover, .widget_authors a:focus strong, .widget_authors a:hover strong, .entry-title a:focus, .entry-title a:hover, .entry-meta a:focus, .entry-meta a:hover, .page-links a:focus .page-number, .page-links a:hover .page-number, .entry-footer a:focus, .entry-footer a:hover, .entry-footer .cat-links a:focus, .entry-footer .cat-links a:hover, .entry-footer .tags-links a:focus, .entry-footer .tags-links a:hover, .post-navigation a:focus, .post-navigation a:hover, .pagination a:not(.prev, .next):focus, .pagination a:not(.prev, .next):hover, .comments-pagination a:not(.prev, .next):focus, .comments-pagination a:not(.prev, .next):hover, .logged-in-as a:focus, .logged-in-as a:hover, a:focus .nav-title, a:hover .nav-title, .edit-link a:focus, .edit-link a:hover, .site-info a:focus, .site-info a:hover, .widget .widget-title a:focus, .widget .widget-title a:hover, .widget ul li a:focus, .widget ul li a:hover { box-shadow: none; box-shadow: none!important; text-decoration: none!important; } /* --- Farben --- */ .isred { color: #004b8d!important; font-weight: 600; } .iswhite { color: #fff!important; } .iswhite_fax { color: #fff!important; font-weight: 500; } .isorange { color: #cc3a04; font-size: 1rem; } .isorange strong { text-decoration: underline; } /* --- hr Separator --- */ .wp-block-separator:not(.is-style-wide, .is-style-dots) { max-width: 50%!important; } .wp-block-separator { margin-left: 0!important; margin-right: 0; } hr { margin-bottom: 1em; height: 2px !important; } .twentyseventeen-front-page article:not(.has-post-thumbnail, :first-child) { border-top: 1px solid #efefef!important; } .panel-content .wrap { padding-bottom: 0!important; padding-top: 1.5em!important; } #content .wrap { max-width: 100%; } /* ----------------------------------- #panel2 .wrap { background-color: #f2f2f2!important; } #panel3 .wrap { background-color: #f2f2f2!important; } #panel4 .wrap { background-color: #f2f2f2!important; } #panel5 .wrap { background-color: #f2f2f2!important; } #panel6 .wrap { background-color: #f2f2f2!important; } #panel7 .wrap { background-color: #f2f2f2!important; } ---------------------------------- */ .wp-block-columns { margin-bottom: 0; } /* --- Abstand Text nach oben --- */ .site-content, .panel-content .wrap { padding-top: 2em; } .panel-content .wrap { padding-bottom: .4em!important; padding-top: .4em!important; } /* Header --------------------------------------------- */ #masthead .wrap { padding: 1em; text-align: center } body:not(.title-tagline-hidden) .site-branding-text { padding: 10px 15px !important; /* Erzeugt den 20px Überstand */ background: rgb(0 0 0 / 0%)!important; /* Transparente Farbe */ } .site-branding-text { padding: 0 10px!important; /* background-color: #00000082!important */ } .site-branding { padding: 0 } .site-branding-text p { margin-bottom: 0 } .site-branding .wrap { background-color: transparent; padding: 0; margin-bottom: 1em; overflow: hidden; } .custom-header .wrap { max-width: max-content; } /* Seitentitle ausblenden */ body.has-header-image .site-description, body.has-header-video .site-description { display: none; } body.has-header-image .site-description, body.has-header-video .site-description { color: #fff!important; font-size: 1rem; letter-spacing: 0; text-shadow: none; font-weight: 400; hyphens: none; hyphens: none; hyphens: none; opacity: 1 } .colors-custom.has-header-image .site-description { color: #fff; font-size: 1rem; letter-spacing: normal; text-shadow: none; font-weight: 400; hyphens: none; hyphens: none; hyphens: none; opacity: 1 } @media only screen and (width <= 600px) { .colors-custom.has-header-image .site-description { font-size: 0.8rem; hyphens: none; hyphens: none; hyphens: none; } } /*** Logo ***/ /* Headerbild anpassen */ @media (width <= 800px){ .custom-logo-link { display: none; } } .custom-logo-link img { max-height: 125px; } .has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding, .site-branding { left: 0; top: 20px; } .custom-logo-link { padding-right: 0; } /* Logo und Title mittig untereinander */ .custom-logo-link { display: block; text-align: center; } .custom-logo-link img { display: inline-block; margin-left: 10px; } .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe { padding-bottom: 0!important; } .site-header .navigation-top .menu-scroll-down { display: none; } .page.page-one-column .entry-header { margin-bottom: 0!important; } /* --- Site BrandingComputer screen --- */ @media screen and (width >= 48em) { .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding, .site-branding { top: 1em!important; } } /* --- Site Branding Mobile screen --- */ @media screen and (width <= 767px) { .custom-header .site-branding { padding-top: 1em!important; } } /* --- Computer screen with logged in user and admin bar showing on front end --- */ @media screen and (width >= 48em) { .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image, .admin-bar.twentyseventeen-front-page.has-header-image.home.blog .custom-header { height: calc(30vh - 32px); } } /* --- Sorgt dafür, dass der IE auf Seiten und Beiträgen den passenden Bildausschnitt zeigt --- */ .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe { max-width: 100%; top: 0; left: 0; transform: none; transform: none; transform: none; transform: none; } /* --- Lösung für Browser, zum Beispiel den Internet Explorer, die kein object-fit verstehen --- */ .has-header-image:not(.twentyseventeen-front-page, .home) .custom-header-media img { bottom: auto; position: absolute; top: 40%; left:0; transform: translate(0, -40%); transform: translate(0, -40%); transform: translate(0, -40%); } /* --- Sorgt dafür, dass der IE das Startseiten-Headerbild nicht verzerrt --- */ .twentyseventeen-front-page.has-header-image .custom-header-media img, .twentyseventeen-front-page.has-header-video .custom-header-media video, .twentyseventeen-front-page.has-header-video .custom-header-media iframe { position: fixed; left: 50%; max-width: 250%; min-height: 100%; min-width: 100%; min-width: 100vw; width: auto; top: 50%; padding-bottom: 1px; transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* ------------ Navigation ------------ */ @media screen and (width >= 48em) { .navigation-top { display: flex; /* Flexbox aktivieren */ justify-content: center; /* Zentrieren der Navigation */ width: 100%; /* Volle Breite */ box-shadow: 0 4px 16px rgba(0,0,0,0.25); /* dunkler Schatten nach unten */ padding: 0 !important; } .main-navigation { display: flex; /* Flexbox aktivieren */ justify-content: center; /* Zentrieren der Links */ width: 100%; /* Volle Breite */ } .main-navigation a { font-size: 1rem; line-height: 1.6; padding: 0 .4em !important; text-decoration: none;; } .main-navigation ul { display: flex; /* Flexbox aktivieren für die Liste */ padding: 0; /* Padding zurücksetzen */ margin: 0; /* Margin zurücksetzen */ list-style: none; /* Aufzählungszeichen entfernen */ } .main-navigation li { margin-right: 0; /* Abstand zwischen den Menüpunkten */ } .main-navigation li:last-child { position: relative; z-index: 20; } } /* Für mobile Geräte */ @media screen and (width <= 47.9em) { .navigation-top { display: block; /* Block-Layout für mobile Ansicht */ } .main-navigation { display: block; /* Block-Layout für mobile Ansicht */ } .main-navigation ul { display: block; /* Block-Layout für die Liste */ padding: 0; /* Padding zurücksetzen */ margin: 0; /* Margin zurücksetzen */ list-style: none; /* Aufzählungszeichen entfernen */ /* box-shadow: 0 0 1px #000; Weicher Schatten */ } .main-navigation li { margin: 0; /* Kein Abstand zwischen den Links */ } } .navigation-top { border-left: 0 solid #eee; border-right: 0 solid #eee; } .main-navigation a { padding: 1.5em 0.5em; } #masthead .wrap { padding: 0!important; } .colors-custom .menu-toggle, .colors-custom .menu-toggle:hover, .colors-custom .menu-toggle:focus, .colors-custom .menu .dropdown-toggle, .colors-custom .menu-scroll-down, .colors-custom .menu-scroll-down:hover, .colors-custom .menu-scroll-down:focus { background-color: #fff!important; color: #000!important; font-weight: 600; } .colors-custom .navigation-top, .colors-custom .main-navigation ul { background: #ffffff!important; } .colors-custom .navigation-top, .navigation-top { padding-top: .5em !important; font-size: 1rem; } /* --- The text in the sub-menu to be aligned directly from the beginning of the B. --- */ .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: 0; } #site-navigation li li>a, #site-navigation li li.current_page_item a { font-size: 1rem; } .navigation-top .current-menu-item > a, .colors-custom .navigation-top .current_page_item > a, .colors-custom .main-navigation a:hover { color: #000000!important; font-weight: 600!important; } li.current-menu-parent > a, .current-menu-item > a { color: #d93c02!important; } .colors-custom .navigation-top, .colors-custom .main-navigation li, .colors-custom .entry-footer, .colors-custom .single-featured-image-header, .colors-custom .site-content .wp-playlist-light .wp-playlist-item, .colors-custom tr { border-bottom-color: #bcc3ce!important; } .main-navigation li { border-bottom: 0 solid #9e9e9e!important; position: relative; } @media screen and (width >= 48em) { .colors-custom .navigation-top, .colors-custom .main-navigation, .navigation-top, .main-navigation ul { background: #ffffff !important; border-color: transparent!important; } .colors-custom .main-navigation ul ul { border-color: #dadada!important; } } /* arrow on top of sub-menu */ .main-navigation ul li.menu-item-has-children::after, .main-navigation ul li.page_item_has_children::after { border-bottom-color: #000!important; } /* arrow on top of sub-menu */ .main-navigation .icon { height: 1.4em!important; } /* --- The sub-menu text to be black but turn red on hovering. --- */ #site-navigation li li > a, #site-navigation li li.current_page_item a { background: #fff!important; } /* --- The sub-menu text hovering. --- */ .main-navigation li li a:hover { color: #B61F29!important; } /* --- Mobil-Menue oben --- */ @media screen and (width <= 767px) { .navigation-top { position: fixed; top: 0; /* 10px Abstand von oben */ right: 0; /* 10px Abstand von rechts */ left: 0; z-index: 99999; } } .admin-bar .navigation-top { padding-top: 0; /*** Padding to allow space for the admin-bar when present ***/ } @media screen and (width <= 48em) { .colors-custom .main-navigation ul { background: #ffffff !important; }} /* --- Hamburger Menue --- */ @media screen and (width <= 38em) { .colors-custom .menu-toggle, button.menu-toogle { font-size: 1rem; font-weight: 600; color: #000!important; padding: 4px 5px 0 6px!important; margin: 0 auto!important; box-shadow: 0 0 1px #000!important; /* Weicher Schatten */ border-radius: 0!important; }} @media screen and (width <= 38em) { .colors-custom .menu-toggle { font-size: 1rem; font-weight: 600; color: #000!important; padding: 4px 5px 0 6px!important; margin: 0 auto!important; box-shadow: 0 0 1px #000!important; /* Weicher Schatten */ border-radius: 0!important; }} .menu-toggle { font-size: 1rem; font-weight: 600; color: #000!important; padding: 4px 5px 0 6px!important; margin: 0 auto!important; box-shadow: 0 0 1px #000!important; /* Weicher Schatten */ border-radius: 0!important; } .menu-toggle .icon { fill: #000; } @media screen and (width <= 48em){ .menu-toggle, .menu-toggle:hover, .menu-toggle:focus, .menu .dropdown-toggle, .menu-scroll-down, .menu-scroll-down:hover, .menu-scroll-down:focus { background-color: #fff!important; color: #000 !important; /* Für besuchte Links */ }} .dropdown-toggle { padding: 0; } .dropdown-toggle.toggled-on .icon { color: #000!important; /* drop down Icon Menu */ padding: 0!important; } .icon { color: #000; /* drop up Icon Menu */ } /* --- .icon-youtube, .icon-twitter, .icon-facebook, .icon-instagram { color: #ffffff!important; } --- */ .colors-custom .social-navigation a:hover, .colors-custom .social-navigation a:focus { background: #fff; } .colors-custom .social-navigation a { color: #000; } /* --- Top Nav Bar Höhe --- */ .main-navigation a { padding-top: 3px!important; padding-bottom: 6px!important; border: none!important; } .navigation-top { padding-top: 2px; } /* --- Scroll-down Icon ausblenden --- */ .menu-scroll-down .icon { display: none; } /* --- Contact-bar --- */ #mobile-contact-bar { width: auto!important; margin-bottom: 8px; } .site-footer h2.widget-title { color: #fff!important; font-size: 1rem!important; font-weight: 700; letter-spacing: 1px; text-transform: none; text-shadow: none!important; hyphens: none; margin-bottom: .4em; text-align: left!important; } .site-footer h2.widget_text a { color: #fff!important; } .site-info a { color: #fff!important; } .site-info p { color: #fff!important; } .ueberschrift { color: #d32f2f !important; /* font-size: calc(12px + 1vw)!important; */ font-size: clamp(19px, 4vw, 18px)!important; font-weight: 700!important; text-align: left!important; margin: 1.8em 0 0.3em; text-transform: none; hyphens: none; letter-spacing: 1px; padding: 0!important; } .ueberschrift_klein { color: #e22831!important; font-size: 1.1rem!important; font-weight: 700!important; text-align: left!important; text-transform: none; hyphens: none; letter-spacing: 1px; padding: 0!important; } /* Überschrift Cover Bilder */ .wp-block-cover__inner-container p { font-weight: 700!important; color: #fff; text-transform:uppercase; font-size: calc( 16px + 1.5vw)!important; text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black; } /* Coverbilder */ .wp-block-cover, .wp-block-cover-image { margin: 1.5em 0 0.5em; } .page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title { color: #444; font-size: clamp(16px, 4vw, 22px)!important; font-weight: 700; text-transform: none; letter-spacing: 0; } .teaser-tile { font-size: clamp(16px, 4vw, 18px); font-weight: 700; color: #444; letter-spacing: 0; text-transform: none; } .page.page-one-column .entry-header { margin-bottom: 0.6em; } body:not(.twentyseventeen-front-page) .entry-header { padding: 1.5em 0; } /* @media screen and (min-width:30em) */ img.alignright { float: right; margin: 0 0 30px 10px; } /* Telefon + Email unter dem Contactformular --------------------------------------------- */ .info-text { background-image: linear-gradient(to top, #313131 0%, #3b5998 100%); color: #fff; font-size: 1.4rem; padding: 20px 0; text-align: center; margin-top: 2em; font-weight: 500; letter-spacing: 0; text-transform: none; } .colors-custom .info-text a { font-size: 1rem!important; text-transform: none; color: #fff!important; font-weight: 400!important; } @media only screen and (width <= 600px) { .info-text { font-size: 1rem; text-transform: none; } .colors-custom .entry-content a { font-size: 1rem; text-transform: none; } } /* --- Tablelle --- */ table { margin: 0 0 1em; width: auto; } td { padding: .2em; } tr { border: none; } /* --- Image --- */ .bild img { width: 40%; height: auto; } @media (width <= 479px) { img { width: 100%; } } /* --- fix for Chrome images --- */ .panel-image { transform: translateY(0); } /* Buttons --------------------------------------------- .wpb_button { text-decoration: none!important; margin: 1em 5px 0 0!important; background: #004b8d!important; color: #ffffff!important; border: none!important; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; border-radius: 10px; padding: 6px 12px!important; } */ /* Button Pfeile .wpb_button::after { content:' >>'; } .wpb_button_border::after { content:' >>'; color: #ffffff; } */ button { background-color: #fff!important; } button:hover { background-color: #004b8d!important; color: #004b8d!important; } .wpb_button { vertical-align: middle; text-decoration: none !important; margin: 3px 10px 3px 0!important; /* Mehr Abstand in alle Richtungen */ background: #004b8d !important; color: #fff !important; border: 1px solid #004b8d!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; border-radius: 10px; padding: 5px 10px !important; /* Größere Buttons für bessere Klickbarkeit */ display: inline-block; /* Stellt sicher, dass sie nebeneinander bleiben */ transition: background 0.3s ease-in-out; } .wpb_button:hover { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } .site-footer .widget-area a.wpb_button_border:hover { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } /* Abstand zur nächsten Zeile */ .wpb_button + br { display: none; /* Falls
verwendet wurde, wird es entfernt */ } .wpb_button-container { display: flex; flex-wrap: wrap; /* Buttons umbrechen, wenn der Bildschirm kleiner wird */ justify-content: center; /* Buttons zentrieren */ margin-bottom: 10px; /* Mehr Abstand zur nächsten Zeile */ } .site-footer .widget-area a.wpb_button_border:hover { color: #004b8d!important; font-weight: 500 !important; border: 1px solid #004b8d !important; } /* Mobile Optimierung */ @media (width <= 600px) { .wpb_button { width: 95%; /* Buttons auf kleinen Screens untereinander anordnen */ text-align: center; margin: 5px 0 !important; /* Mehr Abstand nach oben/unten */ } } .wpb_button_info { background: #fff!important; padding: 3px 7px; border: 1px #444 solid!important; font-size: 1rem; } a.wpb_button { text-decoration: none!important; color: #fff!important; margin: 2em 0 ; } a.wpb_button:hover { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } .wpb_button_border { text-decoration: none!important; padding: 5px 10px; margin: 0; background: #004b8d!important; color: #fff!important; border: 2px #fff solid!important; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; border-radius: 10px; } .site-footer .widget-area .wpb_button_border :hover { background: #fff!important; color: #004b8d!important; } a.wpb_button_border { text-decoration: none!important; color: #fff!important; } a.wpb_button_border:hover { background: #fff!important; color: #004b8d!important; } .entry-content a.wpb_button_border:hover { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } .panel-content .entry-content a.wpb_button_border:hover { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } .colors-custom button.secondary:hover, .colors-custom hr { background: #fff; } button, html [type="button"], [type="reset"], [type="submit"] { appearance: none; } .back-button { float: right; } button, input[type="button"], input[type="submit"] { border-radius: 0; border-radius: 0; color: #fff!important; border: none!important; } input + button, input + input[type="button"], input + input[type="submit"] { padding: 0.5em 1em; background-color: #004b8d !important; vertical-align: middle; } .ssttbutton-background { color: #808080; } /* --- Buchungs Button --- */ .colors-custom button, .colors-custom input[type="button"], .colors-custom input[type="submit"], .colors-custom .entry-footer .edit-link a.post-edit-link { vertical-align: middle; text-decoration: none !important; margin: 2px 4px 0 0!important; /* Mehr Abstand in alle Richtungen */ background: #004b8d !important; color: #fff !important; border: 1px solid #004b8d!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; border-radius: 10px; padding: 5px 10px !important; /* Größere Buttons für bessere Klickbarkeit */ display: inline-block; /* Stellt sicher, dass sie nebeneinander bleiben */ transition: background 0.3s ease-in-out; } .colors-custom button:hover, .colors-custom input[type="button"]:hover, .colors-custom input[type="submit"]:hover, .colors-custom .entry-footer .edit-link a.post-edit-link { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, .entry-footer .edit-link a.post-edit-link { background: #fff!important; color: #004b8d!important; border: none!important; } input+input[type="submit"]:hover { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } .colors-custom button, .colors-custom input[type="button"], .colors-custom input[type="submit"], .colors-custom .entry-footer .edit-link a.post-edit-link { vertical-align: middle; text-decoration: none !important; margin: 2px 4px 0 0!important; /* Mehr Abstand in alle Richtungen */ background: #004b8d !important; color: #fff !important; border: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; border-radius: 10px; padding: 0 10px!important; /* Größere Buttons für bessere Klickbarkeit */ display: inline-block; /* Stellt sicher, dass sie nebeneinander bleiben */ transition: background 0.3s ease-in-out; } .colors-custom button:hover, .colors-custom input[type="button"]:hover, .colors-custom input[type="submit"]:hover { background: #fff!important; color: #004b8d!important; border: none!important; } input+button, input+input[type="button"], input+input[type="submit"]:hover { background-color: #004b8d!important; color: #000!important; } button, input[type="button"], input[type="submit"] { background-color: #004b8d!important; border: none; color: #fff; } /* --- Social Media Button --- */ .social-navigation a { background-color: #fff; } /* --- Instagram Button --- */ .insta-gallery-feed .insta-gallery-actions .insta-gallery-button { color: #fff!important; } /* Links Icon Telefon & Msil --------------------------------------------- */ a[href^="tel:"]::before { margin-right: 0.5em; color: #000; } a[href^="tel:"] { color: #005fa3!important; text-decoration: none!important; } a:hover[href^="tel:"] { color: #000!important; text-decoration: none; } a[href^="mailto:"]::before { margin-right: 0.5em; color: #000; } a[href^="mailto:"] { color: #fff!important; text-decoration: none!important; } a:hover[href^="mailto:"] { color: #fff!important; text-decoration: none; } /* Textfeldrahmen --------------------------------------------- */ .is-rahmen { background: white; color: #000; padding: 1em; margin-bottom: 1em; border: 0 solid #000; } .is-rahmen a{ color: #fff; } .is-rahmen a:hover, a:focus, a:active { color: #fff; } .is-rahmen-blau { background: #fe5e24; color: #fff; padding: 1em; margin-bottom: 1em; border: 0 solid #000; } .is-rahmen-blau a{ color: #fff; } .is-rahmen-blau a:hover, a:focus, a:active { color: #fff; } /* --- Preis Rahmen Grau --- */ .bg-grau { background-color: #fe5e24; padding: 5px 5px 0; color: #fff; margin-bottom: 15px; } div .bg-grau { width: auto; display: inline-block; border-radius: 0; } /* --- FAQ Liste --- */ summary:-webkit-details-marker { display: none; } summary::after { content: ""; float: left; margin-right: 10px; font-weight: 900; font-size: 1.1rem; } details[open] summary::after { content: ""; font-weight: 900; font-size: 1.1rem; } details { margin-bottom: .7em; } summary { padding-left: 0; } details[open] summary { font-weight: 600; color: #008000; margin-bottom: 1em; } @media (width <= 450px) { summary { font-size: 1rem; } } /* --- Leao --- */ .leao-product-list-teaser { color: #000; } .leao-product-list-title { font-family: Roboto,display!important; font-size: 1.4em!important; color: #000!important; text-transform: uppercase; margin-top: 1em; clear: both; line-height: 2em; font-weight: 500; text-align: left; } .leao-product-list-row { clear: both; border-bottom: #ccc solid 1px; margin-bottom: 10px; } .leao-product-list-name { font-weight: bold; float: left; padding: 5px; width: 70%; } .leao-product-list-teaser { font-weight: normal; font-size: 0.8em; color: #000; } @media screen and (width <= 800px) { .leao-product-list-teaser { width: 100%; } } .leao-product-price { float: right; font-size: 1rem; font-weight: 600!important; color: #d93c02; padding-bottom: 0 !important; } .leao-product-price input[type="submit"] { vertical-align: middle; text-decoration: none !important; margin: 0 4px!important; /* Mehr Abstand in alle Richtungen */ background: #004b8d !important; color: #fff !important; border: 1px solid #004b8d!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; font-weight: 500; border-radius: 10px; padding: 5px 10px !important; /* Größere Buttons für bessere Klickbarkeit */ display: inline-block; /* Stellt sicher, dass sie nebeneinander bleiben */ transition: background 0.3s ease-in-out; } .leao-product-price input[type="submit"]:hover { background: #fff!important; color: #004b8d!important; border: 1px solid #004b8d!important; } .leao-product-price-left { float: left; font-size: 1.5em; font-weight: bold; } .leao-btn-book { background-color: #ed5116!important; } .leao-btn { font-size: 1rem; margin-left: 15px; padding: 2px 10px; text-decoration: none; color: #fff !important; border-radius: 0; border: 2px solid #ed5116!important; } .leao-btn:hover { color: #008000!important; border: 2px solid #ed5116!important; border-radius: 0; background-color: #fff!important; } /* --- Preisliste --- */ .product-list { margin-bottom: 50px; clear: both; } /* .product-list-row { clear: both; border-bottom: #d93c02 solid 1px; padding: 10px; } */ .product-list-row { clear: both; border-bottom: #d93c02 solid 1px; padding: 10px; max-width: 60%; /* Begrenze die Breite */ width: 100%; /* Damit es auf kleinen Screens nicht abgeschnitten wird */ box-sizing: border-box; /* Padding bleibt innerhalb der max-width */ } .product-list-row > p { min-width: 210px; } @media (width <= 768px) { .product-list-row { max-width: 100%; } } .product-list-name { color: #000; font-weight: 700; float: left; width: 70%; } .product-list-teaser { color: #363636; font-weight: 400; } .product-price { float: right; font-size: 1rem; font-weight: 500; color: #B61F29; } .clearfix { clear: both; height: 10px; } label { font-weight: 500; font-size: 1rem; } /* --- ContactForm 7 --- */ /* Nur runde Ecken für Felder und Button, keine Höhenänderung */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="date"], .wpcf7-form textarea, .wpcf7-form select { border-radius: 0.5rem; transition: border-color 0.2s, box-shadow 0.2s; } /* Fokus-/Hover-Effekt */ .wpcf7-form input[type="text"]:focus, .wpcf7-form input[type="email"]:focus, .wpcf7-form input[type="tel"]:focus, .wpcf7-form input[type="date"]:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { border-color: #0074d9; box-shadow: 0 0 0 2px #e6f1fa; outline: none; } /* Runde Ecken und dezenter Hover für den Absende-Button */ .wpcf7-form input[type="submit"], .wpcf7-form .wpcf7-submit { border-radius: 0.5rem; transition: background 0.2s, box-shadow 0.2s; } .wpcf7-form input[type="submit"]:hover, .wpcf7-form .wpcf7-submit:hover, .wpcf7-form input[type="submit"]:focus, .wpcf7-form .wpcf7-submit:focus { background: #005fa3; } /* CF7 Button nach Absenden deaktivieren */ .wpcf7-form.sent input[type="submit"], .wpcf7-form.sent button { pointer-events: none; /* Verhindert weitere Klicks */ opacity: 0.5; /* Macht den Button optisch deaktiviert */ cursor: not-allowed; /* Zeigt "gesperrt"-Cursor */ } /* CF7 Quiz */ .colors-custom .random-math-quiz input[type="text"] { width: 4em!important; box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px; } .wpcf7-quiz-label { font-size: 1rem; font-weight: 400; color: black; margin-bottom: 1em; } /* CF7 Get Feld in rot */ .colors-custom .product-1 input[type="text"] { color: #004b8d!important; } /* CF7 Teilnehmer select */ .colors-custom .menu-658 select { height: 2.72em; } @media only screen and (width <= 600px) { .colors-custom .menu-658 select { height: 2.26em; } } /* Zustimmung Text */ .wpcf7-acceptance .wpcf7-list-item-label { font-size: 1rem; font-weight: 200; } .wpcf7 { background-color: #004b8d !important; /* #e6e6e6 */ border-radius: 10px; box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px; } .wpcf7 p{ font-size: 1rem; font-weight: 200; color: #fff !important; } .wpcf7 p a{ color: #fff !important; text-decoration: underline white!important; } .wpcf7-list-item-label { font-size: 1rem; color: #fff; font-weight: 200; } .screen-reader-response { display: none; } .wpcf7-response-output { font-size: 1rem; color: #004b8d; font-weight: 500!important; margin-bottom: .3em; padding: .3em ; } .wpcf7-not-valid-tip { font-size: 1rem; color: #004b8d; font-weight: 500!important; } input[type="select"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { background: #fff; padding: 0.3em; color: #000!important; } .wpcf7-form-control-wrap product-1 { color: #B61F29!important; } .colors-custom input[type="text"] { color: #000!important; margin-bottom: 12px; } .colors-custom input[type="date"] { border-color: #000!important; color: #000!important; } .wpcf7-form-control-wrap menu-104 { background: #fff; padding: 0.3em; } .wpcf7 textarea { height: 60px; width: 300px; margin-top: .45em!important; } div.wpcf7 { font-size: 1rem; width: 95%; background-color: #f2f2f2; /* padding: 1em; */ margin:0 auto; color: #676767; } .wpcf7-tel, .wpcf7-email { margin-bottom: 0!important; } div.wpcf7 span.wpcf7-list-item a { color: #fff !important; } @media (width <= 450px) { div.wpcf7 { width: auto; } } span.wpcf7-list-item { display: block; } .wpcf7 select { width: 400px; text-align: left; font-weight: 500; padding-left: 2px; } .colors-custom .wpcf7 input[type="submit"] { background: #004b8d !important; font-size: 1rem !important; font-weight: 500; border: 1px solid #fff !important; border-radius: 10px; color: #fff !important; padding: 5px 10px !important;; } .wpcf7 input[type="submit"]:hover { background: #fff !important; color: #004b8d !important; border: 1px solid #004b8d !important; } .colors-custom .wpcf7 input[type="button"] { background: #004b8d !important; font-size: 1rem !important; font-weight: 500; border: 1px solid #fff !important; border-radius: 10px; color: #fff !important; padding: 5px 10px !important;; } .colors-custom .wpcf7 input[type="button"]:hover { background: #fff !important; color: #004b8d !important; border: 1px solid #004b8d !important; } input+button, input+input[type="button"], input+input[type="submit"] { padding: 10px 15px; } .product-list-teaser { color: #000; } .colors-custom input[type="text"], .colors-custom input[type="email"], .colors-custom input[type="url"], .colors-custom input[type="password"], .colors-custom input[type="search"], .colors-custom input[type="number"], .colors-custom input[type="tel"], .colors-custom input[type="range"], .colors-custom input[type="date"], .colors-custom input[type="month"], .colors-custom input[type="week"], .colors-custom input[type="time"], .colors-custom input[type="datetime"], .colors-custom input[type="datetime-local"], .colors-custom input[type="color"], .colors-custom textarea, .colors-custom select, .colors-custom fieldset, .colors-custom .widget .tagcloud a:hover, .colors-custom .widget .tagcloud a:focus, .colors-custom .widget.widget_tag_cloud a:hover, .colors-custom .widget.widget_tag_cloud a:focus, .colors-custom .wp_widget_tag_cloud a:hover, .colors-custom .wp_widget_tag_cloud a:focus { border-color: #000!important; /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.29); */ box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px!important; } .colors-custom select { background: #fff!important; border-color: #000!important; border: 0 solid #fff; margin-bottom: 10px!important; } div.wpcf7 label { color: #fff; font-size: 1rem; font-weight: 300 !important; } div.wpcf7 label a{ color: #fff!important; text-decoration: underline white!important; } div.wpcf7 label a:hover { color: #fff!important; } .wpcf7-validates-as-date { font-size: 1.2rem; } .wpcf7 input[type="submit"] { background: #004b8d !important; font-size: 1rem !important; font-weight: 500; border: 1px solid #fff !important; border-radius: 10px; color: #fff !important; padding: 5px 10px !important;; } select { border-radius: 0; border-radius: 0; height: 2.26em; } @media only screen and (width >= 38em) { .wps-form-column { padding:0 }} /* --- ContactForm 7 mehrspaltig --- */ .wps-form { width: 100%; margin: 0; padding:1em; } .wps-form-row { display: flex; flex-direction: column; width: 100%; } .wps-form-row .wpcf7-form-control { width: 100%; } .wps-form-column { flex: 1; padding: 0.3em 0; width: 100%; } .wps-form-column { padding: 0; } /* Notebook / Desktop CF7 mehrspaltig --------------------------------------------- */ @media only screen and ( width >= 38em ) { .wps-form-row { flex-direction: row; } .wps-form-column { padding: 0.3em; } } /* Tarifa Preise --------------------------------------------- */ .horizontale-line { border-bottom:#ccc solid 1px; clear:both; margin-top:2em } .tarifa-product-price { color:#B61F29; float:left; font-size:1rem; font-weight:900; } .tarifa-product-price-white { color:#fff; float:left; font-size:1rem; font-weight:900; } /* --- Footer --- */ .colors-custom .widget ul li { border:none } .widget-title { text-transform: none!important } .site-footer .wrap { padding-bottom:1em } .widget { padding-bottom:1em } .site-footer { /* background-image: linear-gradient(to top, red 0%, #B61F29 100%); */ background-color: #004b8d; } .colors-custom .site-footer { border-top-color:#000!important } .site-footer .widget-area { padding-bottom:0; padding-top:0 } .colors-custom .site-info a:hover { color:#000!important; text-decoration:none!important } .site-footer .widget-area a { color:#004b8d; } .site-footer .widget-area .icon { color:#fff } .site-footer .widget_text { color:#fff !important; } .site-footer .widget_text a { color:#fff !important; } .site-footer .search-form button.search-submit { background: #fff !important; } .site-footer .widget-area .icon { color: #004b8d !important; } /* --- Suchleiste --- */ .search-form .search-submit { border:1px solid #000 } .search-form .search-submit .icon { top:-4px } .search-submit .icon { color:#fff!important } /* Buchungsformular */ .wpcf7-captchac { width: 10%!important; } a[href^="mailto:"] { color: #000 !important; text-decoration: none !important; } /* blaue Infobox-Spalte */ @media (max-width: 1100px) { .wp-block-columns.is-layout-flex { flex-direction: column !important; } /* Nur die Infobox-Spalte schmal halten */ .infobox-spalte { width: 100% !important; max-width: 320px !important; margin-left: 0 !important; margin-right: auto !important; white-space: normal; } /* Optional: Abstand nach oben, damit die Box nicht direkt am Text klebt */ .infobox-spalte { margin-top: 0 !important; } } .wp-block-columns.is-layout-flex { gap: 1em; } /* Aktiven Menüpunkt im Submenu immer rot anzeigen */ #site-navigation li.current-menu-item > a, #site-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a { color: #d93c02 !important; } /* Screenreader-Text */ .screen-reader-text { color: rgb(255, 255, 255); /* Weiß */ background-color: rgb(65, 94, 122); } .skip-link.screen-reader-text { opacity: 1; color: rgb(255, 255, 255) !important; /* Weiß */ background-color: rgb(65, 94, 122) !important; display: block; padding: 10px; position: absolute; top: 10px; left: 10px; z-index: 1000; border-radius: 4px; } .skip-link.screen-reader-text { position: absolute; left: -9999px; background-color: #fff; } .skip-link.screen-reader-text:focus { color: #fff !important; background-color: rgb(65, 94, 122) !important; } .tab__content { color: #000000 !important; /* Black */ background-color: #ffffff !important; /* White */ } .wp-google-rating { color: rgb(251, 142, 40) !important; background-color: #333 !important; opacity: 1; padding: 0.2em 0.5em; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); display: inline-block; font-weight: 600; } /*** Mobil menue oberer balken hinter transparent @media only screen and (max-width: 768px) { .colors-custom .navigation-top, .colors-custom .main-navigation ul { background: #ffffff !important; } } ***/ @media only screen and (max-width: 767px) { .colors-custom .navigation-top, .navigation-top { padding-top: 0.5em !important; font-size: 1rem; background: transparent !important; } } /*** Kontrast optimieren ***/ label[for="adminbar-search"] { background-color: #f8f9fa !important; color: #000000 !important; font-weight: bold; padding: 8px 12px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 1 !important; } label[for="adminbar-search"]:hover { background-color: #e9ecef !important; } /* styles.css */ /* Stil für den Bearbeitungs-Link */ a.post-edit-link { background-color: #f8f9fa !important; /* Hellere Hintergrundfarbe für besseren Kontrast */ color: #000000 !important; /* Schwarzer Text für besseren Kontrast */ font-weight: bold; /* Fettgedruckter Text für bessere Lesbarkeit */ padding: 8px 12px; /* Ausreichend Polsterung für bessere Sichtbarkeit */ border-radius: 4px; /* Abgerundete Ecken für ein moderneres Aussehen */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten für bessere Sichtbarkeit */ opacity: 1 !important; /* Sicherstellen, dass der Link sichtbar ist */ text-decoration: none; /* Entfernt Unterstreichung für bessere Sichtbarkeit */ } /* Optional: Hover-Effekt für bessere Interaktivität */ a.post-edit-link:hover { background-color: #e9ecef !important; /* Hellere Hintergrundfarbe beim Hover */ } /* Stil für den Screenreader-Text */ .screen-reader-text { display: none; /* Versteckt den Text für Screenreader, falls er nicht benötigt wird */ } /* CSS für das Suchfeld oder den Link */ a.post-edit-link { background-color: #f8f9fa; /* Hellere Hintergrundfarbe für besseren Kontrast */ color: #000000; /* Schwarzer Text für besseren Kontrast */ font-weight: bold; /* Fettgedruckter Text für bessere Lesbarkeit */ padding: 8px 12px; /* Ausreichend Polsterung für bessere Sichtbarkeit */ border-radius: 4px; /* Abgerundete Ecken für ein moderneres Aussehen */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten für bessere Sichtbarkeit */ opacity: 1; /* Sicherstellen, dass der Link sichtbar ist */ text-decoration: none; /* Entfernt Unterstreichung für bessere Sichtbarkeit */ display: inline-block; /* Sicherstellen, dass der Link als Block-Element angezeigt wird */ } /* Optional: Hover-Effekt für bessere Interaktivität */ a.post-edit-link:hover { background-color: #e9ecef; /* Hellere Hintergrundfarbe beim Hover */ } /* CSS für den Screenreader-Text */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } /* CSS für das Suchfeld */ #searchform input[type="text"] { background-color: #ffffff; /* Weißer Hintergrund für besseren Kontrast */ color: #000000; /* Schwarzer Text für besseren Kontrast */ border: 1px solid #ccc; /* Rahmen für bessere Sichtbarkeit */ padding: 8px; /* Ausreichend Polsterung für bessere Sichtbarkeit */ border-radius: 4px; /* Abgerundete Ecken für ein moderneres Aussehen */ } /* Optional: Hover-Effekt für das Suchfeld */ #searchform input[type="text"]:hover { border-color: #999; /* Dunklerer Rahmen beim Hover */ } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Kontaktliste – alle Zeilen untereinander */ .contact-details { display: flex; flex-direction: column; } /* Jede Zeile bekommt festen Abstand nach unten */ .contact-row { display: flex; align-items: baseline; gap: 1px; flex-wrap: nowrap; margin-bottom: 1px; /* Gleichmäßiger Abstand */ } /* Label wie "E-Mail:", "Telefon:" */ .contact-label { font-weight: 400; min-width: 70px; color: #fff; white-space: nowrap; } /* Wert wie E-Mail-Adresse oder Telefonnummer */ .contact-value { overflow: hidden; white-space: nowrap; } /* Links ohne Unterstreichung */ .contact-value a { color: inherit; text-decoration: none; } /* Bei Hover: Leichter Effekt */ .contact-value a:hover { text-decoration: underline; } .contact-list a { color: #ffffff !important; /* Weißer Text für besseren Kontrast */ } .contact-item { margin-bottom: 7px; } /*** Steinhuder Meer News ***/ .button-liste { list-style: none; /* Entfernt die Aufzählungspunkte */ margin: 0; padding: 0; display: flex; gap: 4px; /* Abstand zwischen den Links */ flex-wrap: wrap; /* Zeilenumbruch bei kleineren Bildschirmen */ } .button-liste li { margin: 0; padding: 0; } .entry-content a.wpb_button:link, .entry-content a.wpb_button:visited, .entry-content a.wpb_button:focus, .entry-content a.wpb_button:active { color: #fff !important; /* Text wird weiß */ } .entry-content a.wpb_button:hover { background-color: #fff !important; /* Hintergrund wird weiß */ color: #004b8d !important; /* Text wird blau */ text-decoration: none !important; /* Unterstreichung wird entfernt */ } /*** FOOTER AGB,Impressum; Datenschutz Links ***/ .footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; padding-left: 0 !important; /* Entfernt Einrückung */ margin-left: 0 !important; /* Entfernt Einrückung */ display: flex; gap: 0.5em; align-items: baseline; font-size: 1rem; } .footer-links li { margin: 0; padding: 0; list-style: none !important; } .footer-links a { display: inline-block; vertical-align: baseline; line-height: 1.2; text-decoration: none; color: inherit; } /* Container: Tabs nebeneinander, vertikal zentriert */ .tab-wrap { display: flex; flex-wrap: wrap; gap: 0.1em; align-items: center; /* vertikale Mitte */ } /* Tab-Labels: klickbar, Text vertikal zentriert */ .tab-wrap label[role="tab"] { cursor: pointer; padding: 0 0.5em; font-weight: 600; display: flex; /* Flex für vertikale Zentrierung */ align-items: center; /* Text mittig */ height: 2.2em; /* feste Höhe */ line-height: 1; /* Zeilenhöhe anpassen */ } /* Radio-Buttons verstecken */ .tab-wrap input[type="radio"] { display: none; } /* Haupt-Teaser Box */ .gutschein-teaser { background-color: #f0f0f0; /* Helles Grau */ padding: 1.5rem 1rem !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.19), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; margin: 2em auto 2rem !important; text-align: left !important; border: 1px solid #004b8d !important; position: relative !important; max-width: 700px !important; /* Breite auf 700px angepasst */ box-sizing: border-box !important; } /* Hinweis: .gutschein-teaser::before wurde entfernt */ .gutschein-teaser h2 { font-size: 1.5rem !important; line-height: 1.2 !important; margin: 0 0 1rem 0 !important; color: #b71c1c !important; font-weight: bold !important; text-align: center !important; } .gutschein-teaser p { margin: 0 0 1.25rem 0 !important; line-height: 1.5 !important; color: #333 !important; font-size: 1.125rem !important; text-align: center !important; /* Text zentriert für bessere Optik bei 700px */ } /* Grid-Optimierung für 5 Buttons nebeneinander */ .gutscheine-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; grid-auto-rows: 1fr !important; gap: 0.75rem !important; margin: 1.25rem auto !important; } /* Kleine Buttons (Beträge) - Einheitliche Größe */ .gutschein-button, .gutschein-button:link, .gutschein-button:visited { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0.6rem 0.3rem !important; background: #b71c1c !important; color: #ffffff !important; text-decoration: none !important; font-weight: bold !important; border-radius: 8px !important; transition: background 0.2s ease !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; border: none !important; font-size: 0.85rem !important; height: 100% !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; cursor: pointer !important; word-break: break-word !important; } .gutschein-button:hover, .gutschein-button:focus { background: #8e1616 !important; color: #ffffff !important; } /* Großer CTA-Button */ .cta-button, .cta-button:link, .cta-button:visited { display: block !important; margin: 1.5rem auto 0 !important; width: fit-content !important; padding: 0.75rem 1.5rem !important; background: #d32f2f !important; color: #ffffff !important; font-weight: bold !important; text-decoration: none !important; border-radius: 8px !important; font-size: 1.1rem !important; transition: background 0.2s ease !important; box-shadow: 0 2px 6px rgba(211, 47, 47, 0.3) !important; border: none !important; text-align: center !important; } .cta-button:hover, .cta-button:focus { background: #b71c1c !important; color: #ffffff !important; } /* Mobile Optimierung */ @media (max-width: 600px) { .gutscheine-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 400px) { .gutscheine-grid { grid-template-columns: 1fr 1fr !important; } .cta-button { width: 100% !important; } } .visually-hidden { position: absolute !important; /* Element aus dem Layout nehmen */ width: 1px; /* Minimale Breite */ height: 1px; /* Minimale Höhe */ padding: 0; /* Kein Padding */ margin: -1px; /* Aus dem Sichtbereich verschieben */ overflow: hidden; /* Inhalt ausblenden */ clip: rect(0 0 0 0); /* Clip auf 0 setzen (alte Syntax) */ clip-path: inset(50%); /* Moderne Syntax */ border: 0; /* Keine Ränder */ white-space: nowrap; /* Kein Zeilenumbruch */ } .site-info { display: none !important; } .site-footer { background-color: #0D1B2A; } /* Hintergrund VDWS Kite Licence Bildern */ .container { background: #ffffff !important; } .instagram-preview { text-align: center; margin: 0 auto 1.5em auto; max-width: 350px; } .instagram-preview img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 10px rgba(0, 0, 0, 0.15); display: block; /* verhindert ggf. unschöne Baseline-Abstände */ } /* Links im Fließtext zwingen, wie normaler Text auszusehen */ article a, .entry-content a, p a, .top-info-banner a { /* color: inherit !important; Farbe vom Text drumherum erzwingen */ text-decoration: none !important; /* Unterstreichung entfernen */ /* border-bottom: none !important; Falls das Theme Linien nutzt */ } /* Finaler minimalistischer Highlight-Satz für surfers-p.de */ .highlight-satz { display: block; margin: 25px 0; padding: 15px 30px; /* Ausgewogener Abstand nach allen Seiten */ /* Farben & Hintergrund passend zum Webdesign */ background-color: #f5f5f5; /* Ein sauberes, kühles Hellgrau */ color: #000000; /* Akzent-Linien */ border-left: 4px solid #004b87; /* Dein Surfers-Blau als klarer Anker */ border-top: 1px solid #e5e5e5; /* Sehr dezente obere Begrenzung */ /* Typografie: Die gewünschte Stärke zwischen 500 und 600 */ font-size: 1.125rem; line-height: 1.55; font-weight: 500; text-shadow: 0.25px 0 0 currentColor; /* Präzise Feinjustierung der Dicke */ font-style: normal; letter-spacing: -0.01em; /* Verhindert, dass der Block am Rand klebt (besonders mobil wichtig) */ box-sizing: border-box; } /* Optimierung für Mobilgeräte */ @media (max-width: 768px) { .highlight-satz { padding: 20px; font-size: 1.125rem; margin: 25px 0; } } /* 1. Verhindert das Verblassen (Opacity) */ .custom-logo-link:hover, .custom-logo-link:focus, .custom-logo-link:active { opacity: 1 !important; filter: alpha(opacity=100) !important; /* Für ältere Browser */ } /* 2. Verhindert Größenänderung oder Verschiebung des Bildes */ .custom-logo-link img:hover { transform: none !important; scale: 1 !important; } /* 3. Entfernt eventuelle Theme-Standard-Effekte auf Links mit Bildern */ .custom-logo-link { transition: none !important; text-decoration: none !important; } /* Styling für den neuen Copyright-Bereich */ .site-footer { background-color: #222; /* Optional: Dunkler Hintergrund für besseren Kontrast */ } .sp-footer-copyright { padding: 20px 0; width: 100%; } .sp-footer-copyright p, .sp-footer-copyright p a { color: #ffffff !important; /* Erzwingt die weiße Farbe */ font-size: 0.9rem; } .sp-footer-copyright a { text-decoration: underline; } .sp-footer-copyright a:hover { text-decoration: none; opacity: 0.8; } .has-fixed-layout td { padding: 8px 15px !important; vertical-align: top; } .has-fixed-layout tr { background: #f3f3f3; } .has-fixed-layout tr:nth-child(even) { background: #d8ecfb; } /* Flexbox für perfekte vertikale Zentrierung */ a[href*="safetytool"] { display: inline-flex; align-items: center; gap: 8px; /* Abstand zwischen Icon und Text */ } /* Icon kleiner machen */ a[href*="safetytool"] svg.svg-inline--fa.fa-shopping-cart { width: 16px !important; height: 16px !important; flex-shrink: 0; /* Icon verhindert Schrumpfen */ } /* Optional: Icon einfärben */ a[href*="safetytool"] svg.svg-inline--fa path { fill: currentColor; /* Nimmt Textfarbe an */ } /* Safetytool Tabelle */ .has-fixed-layout { font-size: 0.9em; } .vdws-levels { list-style: none; padding: 0; margin: 20px 0; line-height: 1.6; } .vdws-levels li:hover { border-left-color: #e74c3c; /* Rot bei Hover */ } .vdws-levels strong { color: #000; font-weight: 600; margin-right: 8px; } /* =========== Einheitliche Breite für alle Sites =========== */ body.home .site-content, body .content-area, body .entry-content { max-width: 1300px !important; margin: 0 auto !important; } /* H1-Titel auf gleiche Breite begrenzen */ .entry-header, .page-header, h1.entry-title, h1.page-title { max-width: 1300px !important; margin-left: auto !important; margin-right: auto !important; } /* H1 Abstand Unterseite */ body.page:not(.twentyseventeen-front-page) .entry-header .entry-title { margin: 20px 0 10px 0!important; } /* ========================= ABF MESSE TEASER – SURFERS PARADISE DESIGN ========================= */ /* Container Styling */ .abf-teaser-container { -webkit-text-size-adjust: none !important; text-size-adjust: none !important; max-width: 800px; margin: 30px auto !important; /* Abstand oben reduziert */ padding: 0; background-color: #f0f0f0 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); border: 1px solid #004b8d !important; /* alle vier Seiten */ border-bottom-width: 2px !important; /* unten etwas dicker */ border-radius: 4px; overflow: hidden; font-family: sans-serif; box-sizing: border-box !important; } /* Header: Logo + Info */ .abf-header { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 15px; /* Abstand Logo/Text kompakt */ background-color: #ffffff; padding: 10px 20px; /* kompakter Padding oben/unten & seitlich */ border-bottom: 1px solid #ddd; } .abf-logo img { max-width: 120px; height: auto; display: block; margin: 0; /* kein zusätzlicher Abstand über/unter Logo */ } .abf-info h2 { margin: 0; padding: 0; font-size: clamp(20px, 5vw, 26px); line-height: 1.2; font-weight: 700; text-align: left !important; } .abf-date { font-size: 1.2em; margin: 4px 0 0 0; /* kleiner Abstand zum Titel */ color: #004b8d !important; line-height: 1.2; text-align: left !important; } /* Content-Bereich */ .abf-content { padding: 20px 25px; /* kompakt */ } .abf-intro { font-size: 17px; color: #000000; } /* Feature-Liste */ .abf-features { list-style: none; padding: 0; margin: 15px 0; /* kompakter */ } .abf-features li { margin-bottom: 8px; /* kleiner Abstand */ display: flex; align-items: flex-start; gap: 8px; /* Abstand Icon/Text kompakt */ color: #000000; font-size: 16px; } /* Button Styling */ .abf-button-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; /* engerer Abstand Desktop */ margin-top: 15px; } .abf-button-group a { display: inline-block; background-color: #004b8d !important; color: #ffffff !important; text-decoration: none !important; padding: 12px 24px; /* kompakter */ border-radius: 4px; font-weight: 700; transition: background 0.3s ease, transform 0.2s ease; text-align: center; min-width: unset; box-sizing: border-box !important; } .abf-button-group a:hover { background-color: #003566 !important; transform: translateY(-2px); } /* ========================= MOBILE OPTIMIERUNG ========================= */ @media (max-width: 600px) { /* Header kompakt + Logo/Text enger */ .abf-header { justify-content: center; text-align: center; padding: 8px 12px; gap: 10px; } .abf-info h2, .abf-date { text-align: center !important; font-size: clamp(18px, 5vw, 22px); } /* Content kompakt */ .abf-content { padding: 12px 15px; } /* Feature-Liste enger */ .abf-features { margin: 12px 0; } .abf-features li { margin-bottom: 6px; gap: 6px; font-size: 15px; } .abf-button-group { flex-direction: column; gap: 2px; /* minimaler Abstand zwischen Buttons */ margin-top: 10px; align-items: center; } .abf-button-group a { width: 95%; /* fast volle Breite */ padding: 8px 0; /* kompakter */ font-size: 15px; box-sizing: border-box; } } /* ============================================================= SURFERS PARADISE - HEADINGS ONLY Multisite-kompatibel für alle Domains und Subdomains ============================================================= */ /* --- 1. BRANDING-BOX (Slogan oben im Bild) --- */ .site-branding .site-title, .site-branding p.site-title, .site-branding div.site-title { background: rgba(0, 0, 0, 0.5) !important; padding: 5px 10px !important; display: inline-block !important; border-radius: 4px !important; line-height: 1.2 !important; text-align: left !important; margin: 0 !important; border: none !important; } /* Der Text-Link im Branding */ .site-branding .site-title a, .site-branding p.site-title a, .site-branding div.site-title a { color: #ffffff !important; text-transform: uppercase !important; font-weight: 700 !important; font-size: clamp(16px, 4.5vw, 24px) !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important; background: none !important; display: inline !important; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7) !important; /* === KEINE BINDENSTRICH-UMBRÜCHE IN HEADINGS === */ hyphens: none !important; /* Standard */ -webkit-hyphens: none !important; /* Safari / iOS */ -ms-hyphens: none !important; /* IE / Edge alt */ word-break: normal !important; /* Keine Wort-Zerstückelung */ overflow-wrap: normal !important; /* Kein erzwungener Umbruch */ white-space: normal !important; /* Normales Umbrechen nur an Leerzeichen */ } /* Branding Container Positionierung */ .site-branding { text-align: left !important; padding: 3em 10px !important; } /* --- 2. ENTRY HEADER CONTAINER --- */ .entry-header, .panel-content .entry-header { border: none !important; padding: 0 !important; margin-bottom: 5px !important; } /* --- 3. H1 - HAUPT-SEITENTITEL (Entry Title) --- */ h1.entry-title, .site-content h1.entry-title, .panel-content .entry-title, .entry-title { color: #b71c1c !important; font-size: clamp(20px, 4.5vw, 24px) !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: left !important; text-transform: none !important; margin: 10px 0 20px 0 !important; padding: 0 !important; border: none !important; /* === KEINE BINDENSTRICH-UMBRÜCHE IN HEADINGS === */ hyphens: none !important; /* Standard */ -webkit-hyphens: none !important; /* Safari / iOS */ -ms-hyphens: none !important; /* IE / Edge alt */ word-break: normal !important; /* Keine Wort-Zerstückelung */ overflow-wrap: normal !important; /* Kein erzwungener Umbruch */ white-space: normal !important; /* Normales Umbrechen nur an Leerzeichen */ } body.page:not(.twentyseventeen-front-page) .entry-header .entry-title { font-size: clamp(20px, 4vw, 22px) !important; /* === KEINE BINDENSTRICH-UMBRÜCHE IN HEADINGS === */ hyphens: none !important; /* Standard */ -webkit-hyphens: none !important; /* Safari / iOS */ -ms-hyphens: none !important; /* IE / Edge alt */ word-break: normal !important; /* Keine Wort-Zerstückelung */ overflow-wrap: normal !important; /* Kein erzwungener Umbruch */ white-space: normal !important; /* Normales Umbrechen nur an Leerzeichen */ } /* --- 4. H2 ÜBERSCHRIFTEN (inkl. erste H2 auf Startseite) --- */ body h2, body.home h2, .site-content h2, .entry-content h2, .panel-content h2, .page-content h2, body.home .site-content h2:first-of-type, body.home .entry-content h2:first-of-type, .panel-content .entry-header h2 { color: #b71c1c !important; font-size: clamp(20px, 4.5vw, 24px) !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: left !important; text-transform: none !important; margin: 30px 0 15px 0 !important; padding: 0 !important; border: none !important; /* === KEINE BINDENSTRICH-UMBRÜCHE IN HEADINGS === */ hyphens: none !important; /* Standard */ -webkit-hyphens: none !important; /* Safari / iOS */ -ms-hyphens: none !important; /* IE / Edge alt */ word-break: normal !important; /* Keine Wort-Zerstückelung */ overflow-wrap: normal !important; /* Kein erzwungener Umbruch */ white-space: normal !important; /* Normales Umbrechen nur an Leerzeichen */ } /* --- 5. H3 ÜBERSCHRIFTEN --- */ h3 { color: #b71c1c !important; font-size: clamp(20px, 4.5vw, 24px) !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: left !important; text-transform: none !important; margin: 25px 0 12px 0 !important; padding: 0 !important; border: none !important; } /* --- 6. H4-H6 ÜBERSCHRIFTEN --- */ h4, h5, h6 { color: #b71c1c !important; font-size: clamp(20px, 4.5vw, 24px) !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: left !important; text-transform: none !important; margin: 20px 0 10px 0 !important; padding: 0 !important; border: none !important; } /* --- 7. OBEREN ABSTAND NUR AUF UNTERSEITEN REDUZIEREN --- */ body:not(.home) .entry-header { margin-top: 0 !important; padding-top: 20px !important; } body:not(.home) h1.entry-title { margin-top: 0 !important; } /* --- 8. MOBILE (max-width: 768px) --- */ @media (max-width: 768px) { /* Branding mobil */ .site-branding { padding: 1.5em 0 !important; } .site-branding .site-title, .site-branding p.site-title { display: inline-block !important; max-width: 100%; margin: 0 !important; /* Zentrieren mit margin auto */ text-align: left !important; /* Text im Block zentrieren */ } /* H1 Mobile */ h1.entry-title, .site-content h1.entry-title, .entry-title { font-size: clamp(20px, 4.5vw, 24px) !important; } /* H2 Mobile */ h2 { font-size: clamp(20px, 4.5vw, 24px) !important; } /* H3 Mobile */ h3 { font-size: clamp(20px, 4.5vw, 24px) !important; } /* H4-H6 Mobile */ h4, h5, h6 { font-size: clamp(20px, 4.5vw, 24px) !important; } /* Linksbündig erzwingen */ h1, h2, h3, h4, h5, h6, .entry-title, .site-title { text-align: left !important; } } /* --- 9. TABLET (769px - 1024px) --- */ @media (min-width: 769px) and (max-width: 1024px) { h1.entry-title, .entry-title { font-size: clamp(18px, 4.5vw, 24px) !important; } h2 { font-size: clamp(18px, 4.5vw, 24px) !important; } h3 { font-size: clamp(18px, 4.5vw, 24px) !important; } } /* Saison-Eröffnung Steinhider meer 2026 */ .sp-promo-2026 { font-family: Arial, sans-serif; box-sizing: border-box; box-shadow: rgba(0, 115, 170, 0.1) 0px 15px 35px; background: rgb(231, 235, 239); padding: 10px 1em; /* Links/Rechts 1em Padding für Inhalt */ margin: 0 0 30px -1em; /* Nur negativer Margin links */ border: 1px solid rgb(225, 232, 237); border-radius: 0; width: calc(100% + 1em); /* Nur 1em hinzufügen (für rechte Seite) */ max-width: calc(100% + 1em); } /* === MOBILE: Angepasste Padding-Werte === */ @media (max-width: 768px) { .sp-promo-2026 { padding: 15px 1em; margin-left: -1em; margin-right: -1em; width: calc(100% + 2em); /* Mobile: 2em für beide Seiten */ max-width: calc(100% + 2em); box-shadow: rgba(0, 115, 170, 0.1) 0px 10px 25px; } } .sp-promo-2026 h2 { color: #0a2635; font-size: 32px; font-weight: bold; margin-bottom: 20px; text-align: center !important; } .sp-promo-2026 h2 span { color: #0073aa; } .sp-promo-intro { font-size: 18px; line-height: 1.6; color: #333; margin-bottom: 30px; } .sp-promo-grid { display: flex; flex-wrap: wrap; gap: 15px; margin: 30px 0; } .sp-sport-item { background: #004b8d; color: #ffffff !important; padding: 10px 15px; border-radius: 10px; border: none; transition: 0.3s; box-sizing: border-box; flex: 1 1 calc(25% - 15px); max-width: calc(25% - 15px); } .sp-sport-item:nth-child(n+5) { flex: 1 1 calc(33.333% - 15px); max-width: calc(33.333% - 15px); } .sp-sport-item:hover { background: #0a2635; transform: translateY(-5px); } .sp-sport-item h3 { font-size: 20px !important; margin: 0 0 5px 0 !important; color: #ffffff !important; font-weight: bold; text-align: center !important; } .sp-sport-item p { font-size: 14px; color: #ffffff !important; opacity: 0.9; margin: 0; text-align: center !important; } .sp-btn-main { background: #0073aa; color: #ffffff !important; padding: 15px 30px; border-radius: 10px; text-decoration: none; font-weight: bold; display: inline-block; margin-top: 20px; } /* Damit es auf dem Handy nicht zu gequetscht aussieht */ @media (max-width: 768px) { .sp-sport-item { flex: 1 1 calc(100% - 5px) !important; max-width: calc(100% - 5px) !important; } } @media (max-width: 480px) { .sp-sport-item { flex: 0 0 calc(100% - 5px) !important; max-width: calc(100% - 5px) !important; } }