/* * multidim.optimized.noimport.css * Hinweis: @import wurde entfernt (Performance + keine DevTools-Warnung). * Wenn du die Typekit/Adobe-Fonts weiterhin brauchst, binde sie stattdessen im ein: * */ /*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } .courses-gallery .swiper-slide img { display: block; margin: 0 auto; border-radius: 10px; max-width: 100%; height: auto; } .courses-gallery .info { margin-top: 10px; text-align: center; } .courses-gallery .info .subtitle { font-weight: bold; display: block; margin-bottom: 4px; } .courses-gallery .info .location, .courses-gallery .info .price { display: block; margin-bottom: 2px; } .courses-gallery .info .rating { margin-top: 8px; /* vorher z.�B. 4px */ margin-bottom: 4px; } /* Für die größere Darstellung der Bilder */ .swiper-wrapper .swiper-slide img { width: 66%; /* Maximale Breite der Bilder innerhalb des Swipers */ height: auto; /* Verhindert Verzerrung der Bilder */ border-radius: 12px; /* Optional: Abgerundete Ecken der Bilder */ } /* Für den Abstand zwischen den Bildern und den Punkten (Pagination) */ .swiper-pagination { position: absolute; left: 50%; transform: translateX(-50%); margin-top: 20px; /* Abstand zwischen den Bildern und den Punkten */ } /* Optional: Anpassung der Pagination-Punkte */ .swiper-pagination-bullet { background-color: #fff; /* Weiße Punkte */ width: 12px; /* Größe der Punkte */ height: 12px; /* Höhe der Punkte */ border-radius: 50%; /* Runde Form */ } /* Wenn die Punkte aktiv sind (beim Swipen) */ .swiper-pagination-bullet-active { background-color: #000; /* Aktive Punkte in schwarzer Farbe */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { text-align: center; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; display: block; margin: 0 auto; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } .button { background: #fff; border: 1px solid #00505f; } .button.danger { background: #fff; border: 1px solid #00505f; } .button.danger:hover { background-color: #d9534f; color: white; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* @font-face { font-family: 'FertigoPro-Regular'; src: url("../webfonts/39AE0E_0_0.eot"); src: url("../webfonts/39AE0E_0_0.eot?#iefix") format("embedded-opentype"), url("../webfonts/39AE0E_0_0.woff2") format("woff2"), url("../webfonts/39AE0E_0_0.woff") format("woff"), url("../webfonts/39AE0E_0_0.ttf") format("truetype"); } * { font-family: 'Galdeano', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; } */ /*new font added*/ @font-face { font-family:"fertigo-script"; src:url("https://use.typekit.net/af/678851/00000000000000000000d94d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/678851/00000000000000000000d94d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/678851/00000000000000000000d94d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:400; } @font-face { font-family:"skolar-sans-latin"; src:url("https://use.typekit.net/af/1bb271/00000000000000003b9af235/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/1bb271/00000000000000003b9af235/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/1bb271/00000000000000003b9af235/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:400; } @font-face { font-family:"skolar-sans-latin"; src:url("https://use.typekit.net/af/4d301f/00000000000000003b9af23c/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/4d301f/00000000000000003b9af23c/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/4d301f/00000000000000003b9af23c/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:700; } @font-face { font-family:"skolar-sans-latin"; src:url("https://use.typekit.net/af/10900c/00000000000000003b9af237/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/10900c/00000000000000003b9af237/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/10900c/00000000000000003b9af237/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:500; } @font-face { font-family:"skolar-sans-latin-condensed"; src:url("https://use.typekit.net/af/88fbe7/00000000000000003b9af259/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/88fbe7/00000000000000003b9af259/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/88fbe7/00000000000000003b9af259/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:400; } @font-face { font-family:"skolar-sans-latin-extended"; src:url("https://use.typekit.net/af/9a122c/00000000000000003b9af274/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),url("https://use.typekit.net/af/9a122c/00000000000000003b9af274/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),url("https://use.typekit.net/af/9a122c/00000000000000003b9af274/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:800; } @font-face { font-family:"skolar-sans-latin-extended"; src:url("https://use.typekit.net/af/729918/00000000000000003b9af270/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/729918/00000000000000003b9af270/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/729918/00000000000000003b9af270/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:600; } @font-face { font-family:"skolar-sans-latin-extended"; src:url("https://use.typekit.net/af/fd9af4/00000000000000003b9af26e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/fd9af4/00000000000000003b9af26e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/fd9af4/00000000000000003b9af26e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:500; } @font-face { font-family:"skolar-sans-latin-extended"; src:url("https://use.typekit.net/af/3cdef1/00000000000000003b9af26b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/3cdef1/00000000000000003b9af26b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/3cdef1/00000000000000003b9af26b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:400; } @font-face { font-family:"skolar-sans-latin-extended"; src:url("https://use.typekit.net/af/8ed853/00000000000000003b9af26c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/8ed853/00000000000000003b9af26c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/8ed853/00000000000000003b9af26c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:400; } @font-face { font-family:"skolar-sans-latin-extended"; src:url("https://use.typekit.net/af/48bdfe/00000000000000003b9af272/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/48bdfe/00000000000000003b9af272/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/48bdfe/00000000000000003b9af272/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:700; } /*new font added*/ * { box-sizing: border-box; } .container-big { width: auto; max-width: 1800px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; padding: 0 10px; } .container-big::after { content: ''; display: table; clear: both; } .container { width: auto; max-width: 1280px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .container::after { content: ''; display: table; clear: both; } .button { background: transparent; display: inline-block; border-radius: 12px; color: #000; border: 1px solid transparent; text-decoration: none; font-size: 22px; } .button.hollow { border-color: #00505f; color: #fff; background: #00505f; } .button.blue { background: #00505f; color: #fff; } .button.orange { background: #00505f; color: #fff; align-items: center; } header .main { display: block; float: left; width: 100%; align-items: center; padding: 19px 0; } header .main .logo { float: left; clear: none; text-align: inherit; width: 15.56641%; margin-left: 0%; margin-right: 2.34375%; margin-top: 12px; } header .main .logo::after { content: ''; display: table; clear: both; } header .main .logo:last-child { margin-right: 0%; } header .main .logo img { width: auto; max-width: 100%; } header .main .search { float: left; clear: none; text-align: inherit; width: 40.29948%; margin-left: 0%; margin-right: 2.34375%; padding-left: 5.15625%; } header .main .search::after { content: ''; display: table; clear: both; } header .main .search:last-child { margin-right: 0%; } header .main .search .mobile-handle { display: none; } header .main .search input[type="text"] { border: 1px solid #00505f; border-radius: 5px 0 0 5px; outline: none; padding: 1px 23px 4px; font-size: 22px; width: 70%; max-width: 100%; color: #b93600; box-sizing: border-box; top: 0px; position: relative; height: 31px; } header .main .search form { float: right; text-align: right; } header .main .search input[type="text"]::placeholder { color: #00505f; font-size: 16px; } header .main .search input[type="submit"] { border: 0px; border-radius: 0 5px 5px 0; background: #00505f; color: #fff; padding: 0px; margin-left: -5px; width: 29.12621%; outline: none; font-weight: normal; text-shadow: none; box-shadow: none; height: 31px; padding: 0px 0px 3px; font-size: 22px; } header .main .links.loggedin { float: left; clear: none; text-align: inherit; width: 32%; margin-left: 0%; margin-right: 2.34375%; align-items: center; padding: 2% 0px 0px 0px; } header .main .links { float: right; clear: none; text-align: inherit; width: 24%; margin-left: 0%; margin-right: 2.34375%; align-items: center; padding: 1.5% 0px 0px 0px; } header .main .links::after { content: ''; display: table; clear: both; } header .main .links:last-child { margin-right: 0%; } header .main .links .mobile-handle { display: none; } header .main .links a { font-size: 22px; color: #00505f; /* text-decoration: none; */ flex-grow: 1; float: right; padding: 0.7rem; font-weight: 600; } header .main .action-holder { float: left; clear: none; text-align: inherit; width: 12.27679%; margin-left: 0%; margin-right: 2.34375%; text-align: left; } header .main .action-holder::after { content: ''; display: table; clear: both; } header .main .action-holder:last-child { margin-right: 0%; float: right; padding: 1.5% 0px 0px 0px; z-index: 9999; } header .menu { padding: 7px 0 10px; background: #00505f; } header .menu .mobile-handle { display: none; } header .menu ul { display: flex; flex-direction: row; justify-content: center; padding: 0; margin: 0; list-style-type: none; } header .menu ul li { flex-grow: 1; text-align: center; } header .menu ul li a { font-size: 22px; color: #fff; } .container-small { width: auto; max-width: 1062px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .container-small::after { content: ''; display: table; clear: both; } .hero { position: relative; height: 800px; overflow: hidden; } .hero .background { height: 380px; display: block; object-fit: cover; max-width: 100%; width: 100%; } .hero .overlay .title { color: #fff; font-size: 30px; line-height: 50px; text-align: center; margin-bottom: 25px; } .hero .overlay .row::after { content: ''; display: table; clear: both; } .hero .overlay .row .logo { float: left; clear: none; text-align: inherit; width: 23.24219%; margin-left: 0%; margin-right: 2.34375%; } .hero .overlay .row .logo::after { content: ''; display: table; clear: both; } .hero .overlay .row .logo:last-child { margin-right: 0%; } .hero .overlay .row .logo img { width: auto; max-width: 100%; } .hero .overlay .row .input { clear: none; text-align: inherit; margin-left: 0%; margin-right: 2.34375%; } .hero .overlay .row .input::after { content: ''; display: table; clear: both; } .hero .overlay .row .input:last-child { margin: 120px; } .hero .overlay .row .input .input-container:first-child input::placeholder { color: #000; } .hero .overlay .row .input .input-container { width: 32%; margin: 10px auto; display: block; } .hero .overlay .row .input .input-container input { width: 100%; box-sizing: border-box; border-radius: 12px; font-size: 22px; border: none; color: #000; padding: 9px 14px; outline: none; border-bottom: 20px; border-top: 20px; } .hero .overlay .row .input .input-container input::placeholder { color: #9a9a9a; } .hero .overlay .row .input .input-container input[type="submit"] { background: #00505f; color: #fff; } .hero .overlay .row .input .input-container .select2 { width: 100% !important; } .hero .overlay .row .input .input-container .select2.select2-container--open.select2-container--default .select2-selection { border-radius: 15px 15px 0 0; } .hero .overlay .row .input .input-container .select2.select2-container--focus.select2-container--default .select2-selection .select2-selection__rendered { color: #00505f; } .hero .overlay .row .input .input-container .select2.select2-container--focus.select2-container--default .select2-selection .select2-selection__arrow b { border-color: #00505f transparent transparent; } .hero .overlay .row .input .input-container .select2.select2-container--default { border-radius: 15px; } .hero .overlay .row .input .input-container .select2.select2-container--default .select2-selection { border-radius: 15px; outline: none; font-size: 18px; padding: 9px 14px; height: auto; } .hero .overlay .row .input .input-container .select2.select2-container--default .select2-selection .select2-selection__rendered { line-height: initial; } .hero .overlay .row .input .input-container .select2.select2-container--default .select2-selection .select2-selection__arrow { transform: translate(0, -50%); top: 50%; } .hero .overlay .row .input .row { width: 78.7234%; margin: 0 auto; } .hero .overlay .row .input .row::after { content: ''; display: table; clear: both; } .hero .overlay .row .input .row .input-container { float: left; clear: none; text-align: inherit; width: 48.82812%; margin-left: 0%; margin-right: 2.34375%; box-sizing: border-box; position: relative; } .hero .overlay .row .input .row .input-container::after { content: ''; display: table; clear: both; } .hero .overlay .row .input .row .input-container:last-child { margin-right: 0%; } .hero .overlay .row .input .row .input-container input::placeholder { color: #9a9a9a; } .hero .overlay .row .gallery { float: left; clear: none; text-align: inherit; width: 31.77083%; margin-left: 0%; margin-right: 2.34375%; } .hero .overlay .row .gallery::after { content: ''; display: table; clear: both; } .hero .overlay .row .gallery:last-child { margin-right: 0%; } .hero .overlay .row .gallery .slider { margin-bottom: 33px; } .hero .overlay .row .gallery .slider .slide { padding: 0px; } .hero .overlay .row .gallery .slider img { width: auto; max-width: 100%; display: block; margin: 0 auto; border-radius: 15px; } .hero .overlay .row .gallery .slider .owl-dots { text-align: center; margin-top: 11px; } .hero .overlay .row .gallery .slider .owl-dots .owl-dot { background: rgba(255, 255, 255, 0.5); width: 10px; height: 10px; border-radius: 100%; outline: none; margin-right: 10px; } .hero .overlay .row .gallery .slider .owl-dots .owl-dot:last-child { margin-right: 0; } .hero .overlay .row .gallery .slider .owl-dots .owl-dot.active { background: #fff; } .hero .overlay .row .gallery .item-list { background: rgba(0, 80, 95, 0.5); padding: 14px 0; border-radius: 15px; } .hero .overlay .row .gallery .item-list ul { width: 83.04668%; display: block; margin: 0 auto; font-size: 18px; color: #fff; } .hero .overlay .row .gallery .item-list ul li { margin-bottom: 7px; } .hero .overlay .row .gallery .item-list ul li:last-child { margin-bottom: 0; } .article-title { font-size: 40px; color: #000000; margin-top: 60px; line-height: 80px; text-align: center; position: relative; margin-bottom: 40px; } .article-title2 { font-size: 40px; color: #000000; margin-top: 0px; line-height: 40px; text-align: center; position: relative; margin-bottom: 40px; } .article-title:after { content: ''; position: absolute; left: 50%; bottom: 0; height: 1px; width: 200px; transform: translate(-50%, 0); background: #000000; } .courses-gallery { padding-top: 0px; margin-bottom: 30px; } .courses-gallery .courses-slider { padding: 0 45px; } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-prev { outline: none; position: absolute; top: 50%; left: 0px; transform: translate(0, -50%); } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-prev span { display: none; } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-prev:after { content: '\f0d9'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-next { outline: none; position: absolute; top: 50%; right: 0px; transform: translate(0, -50%); } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-next span { display: none; } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-next:after { content: '\f0da'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .courses-gallery .courses-slider.owl-carousel .owl-nav.disabled { display: block; } .courses-gallery .courses-slider .slide { padding-bottom: 2px; padding-left: 2px; padding-right: 2px; } .courses-gallery .courses-slider .slide a{ color: #000; text-decoration: none; } .courses-gallery .courses-slider .slide .title { display: block; text-align: center; font-weight: bold; margin-bottom: 15px; height: 48px; } .courses-gallery .courses-slider .slide img { width: 100%; display: block; border-radius: 10px 10px 0 0; } .courses-gallery .courses-slider .slide .info { box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.1); padding: 14px 10px; display: flex; flex-direction: column; min-height: 100px; } #suche_page .favourites-box.search-content { border: none; } .courses-gallery .courses-slider .slide .info span { display: block; margin-bottom: 5px; text-align: center; } .courses-gallery .courses-slider .slide .info span.location { margin-bottom: 15px; font-size: 14px; min-height: 40px; } .courses-gallery .courses-slider .slide .info span.price { font-size: 18px; font-weight: bold; margin: 0; } .courses-gallery .courses-slider .slide .info span.price a { float: right; font-size: 30px; text-decoration: none; color: #ffffff; position: relative; top: -5px; } .courses-gallery .partners-slider { padding: 0 45px; } .courses-gallery .partners-slider.owl-carousel .owl-nav .owl-prev { outline: none; position: absolute; top: 50%; left: 0px; transform: translate(0, -50%); } .courses-gallery .partners-slider.owl-carousel .owl-nav .owl-prev span { display: none; } .courses-gallery .partners-slider.owl-carousel .owl-nav .owl-prev:after { content: '\f0d9'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .courses-gallery .partners-slider.owl-carousel .owl-nav .owl-next { outline: none; position: absolute; top: 50%; right: 0px; transform: translate(0, -50%); } .courses-gallery .partners-slider.owl-carousel .owl-nav .owl-next span { display: none; } .courses-gallery .partners-slider.owl-carousel .owl-nav .owl-next:after { content: '\f0da'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .courses-gallery .partners-slider.owl-carousel .owl-nav.disabled { display: block; } .courses-gallery .partners-slider .slide { padding-bottom: 2px; padding-left: 2px; padding-right: 2px; } .courses-gallery .partners-slider .slide a { text-decoration: none; color: #000; } .courses-gallery .partners-slider .slide .title { display: block; text-align: center; font-weight: bold; margin-bottom: 15px; font-size: 18px; height: 31px; } .courses-gallery .partners-slider .slide img { width: 100%; display: block; border-radius: 10px 10px 10px 10px; border: 1px solid #ebebeb; } .courses-gallery .partners-slider .slide .info { padding: 14px 10px; display: flex; flex-direction: column; } .courses-gallery .partners-slider .slide .info span { display: block; margin-bottom: 15px; } .courses-gallery .partners-slider .slide .info span.location { margin-bottom: 30px; font-size: 14px; } .courses-gallery .partners-slider .slide .info span.price { font-size: 18px; font-weight: bold; margin: 0; } .courses-gallery .partners-slider .slide .info span.price a { float: right; font-size: 30px; text-decoration: none; color: #7f7f80; } .about { max-height: 320px; position: relative; margin-bottom: 59px; } .about .about-bg { max-height: 320px; display: block; object-fit: cover; width: 100%; } .about .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .about .overlay .container { display: flex; flex-direction: row; height: 320px; } .about .overlay .container .col h2 { margin: 0; color: #fff; font-size: 30px; font-weight: bold; } .about .overlay .container .col p { font-size: 18px; color: #fff; } .about .overlay .container .col a { display: block; color: #fff; margin-bottom: 10px; } .about .overlay .container .col a:last-child { margin-bottom: 0; } .layout_form.cr_form.cr_font { width: 340px; float: right; } .editable_content input[type="text"] { background: rgba(255, 255, 255, 0.5); border: none; border-radius: 15px 0 0 15px; outline: none; font-size: 16px; color: #fff; padding: 19px 23px; width: 230px; } #recaptcha_v2_widget, .g-recaptcha { float: right; margin-top: 10px; max-width: 392px; width: 100%; } .editable_content input[type="text"]::placeholder { color: #fff; } .editable_content label{ display: none; } .cr_ipe_item.ui-sortable.musthave { float: left; width: auto; } .cr_ipe_item.ui-sortable.musthave[rel="recaptcha"] { float: right; width: 100%; } .editable_content .cr_button { font-size: 16px; color: #fff; background: rgba(0, 80, 95, 0.8); padding: 19px 23px; margin-left: -7px; border: none; outline: none; border-radius: 0 15px 15px 0; width: 110px; } .about .overlay .container .col:first-child { width: 26.5625%; } .about .overlay .container .col:first-child img { width: 100%; } .about .overlay .container .col:nth-child(2) { width: 47.8125%; margin-top: 33px; } .about .overlay .container .col:last-child { flex-grow: 1; text-align: right; font-size: 30px; padding-top: 46px; } .about .overlay .container .col.follow-us:first-child { width: 63.28125%; align-self: center; } .about .overlay .container .col.follow-us:first-child a { display: inline; margin-right: 32px; font-size: 30px; } .about .overlay .container .col.follow-us:last-child { align-self: center; margin: 0; padding: 0; } .advantages { margin-bottom: 60px; } .advantages .row::after { content: ''; display: table; clear: both; } .advantages .row .col { float: left; clear: none; text-align: inherit; width: 18.125%; margin-left: 0%; margin-right: 2.34375%; text-align: center; font-size: 20px; font-weight: bold; color: #00505f; } .advantages .row .col::after { content: ''; display: table; clear: both; } .advantages .row .col:last-child { margin-right: 0%; } .advantages .row .col img { width: auto; max-width: 100%; display: block; margin: 0 auto; margin-bottom: 33px; } .text { text-align: center; font-size: 18px; margin-bottom: 60px; } .blog { margin-bottom: 60px; } .blog .row::after { content: ''; display: table; clear: both; } .blog .row .col { float: left; clear: none; text-align: inherit; width: 48.82812%; margin-left: 0%; margin-right: 2.34375%; } .blog .row .col::after { content: ''; display: table; clear: both; } .blog .row .col:last-child { margin-right: 0%; } .blog .row .col span { display: block; text-align: center; margin-bottom: 34px; color: #00505f; font-weight: bold; } .blog .row .col img { display: block; width: 100%; border-radius: 10px; margin-bottom: 30px; } .blog .row .col p { font-size: 18px; margin: 0; } .video { margin-bottom: 60px; } .video .video-soruce { display: block; margin: 0 auto; width: 57.57812%; min-height: 458px; border: 4px solid #7f7f80; border-radius: 10px; } /* =============================== LOGIN / REGISTER – clean modern ================================ */ /* Wrapper – Abstand nach oben + zentriert */ .layout-content.custom_login_page, .layout-content.custom_register_page { display: flex; justify-content: center; padding: 80px 20px 60px; /* Luft oben */ box-sizing: border-box; border-top: 20px; } /* Form als Card */ #user-login-form, #user-register-form { width: 100%; max-width: 420px; background: #ffffff; border-radius: 14px; padding: 28px 24px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); margin: 0 auto; text-align: left; margin-top: 44px; } /* Title */ #user-login-form #block-lucamatej-page-title h1, #user-register-form #block-lucamatej-page-title h1 { font-size: 26px; font-weight: 600; color: #00505f; margin: 0 0 18px; text-align: center; } /* Form items */ #user-login-form .form-item, #user-register-form .form-item { margin: 0 0 16px; overflow: visible; margin-top:20; } /* Labels optional ausblenden (clean look) */ /* Falls du sie behalten willst, diese Zeile entfernen */ #user-login-form label, #user-register-form label { display: none; } /* Inputs */ #user-login-form input[type="text"], #user-login-form input[type="password"], #user-register-form input[type="text"], #user-register-form input[type="email"], #user-register-form input[type="password"] { width: 100%; height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(0, 80, 95, 0.25); outline: none; background: #fff; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #user-login-form input:focus, #user-register-form input:focus { border-color: #00505f; box-shadow: 0 0 0 4px rgba(0, 80, 95, 0.12); } /* Submit Button */ #user-login-form input[type="submit"], #user-register-form input[type="submit"] { width: 100%; height: 48px; background: #00505f; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 80, 95, 0.18); transition: transform 0.08s ease, filter 0.15s ease; margin-top: 8px; margin-bottom: 44px; } #user-login-form input[type="submit"]:hover, #user-register-form input[type="submit"]:hover { filter: brightness(1.05); } #user-login-form input[type="submit"]:active, #user-register-form input[type="submit"]:active { transform: translateY(1px); } /* Passwort vergessen */ p.forgot-password { margin-top: 14px; text-align: center; } p.forgot-password a { font-size: 14px; font-weight: 600; color: #00505f; text-decoration: none; } p.forgot-password a:hover { text-decoration: underline; } /* Register Checkboxen sauber */ #user-register-form .js-form-type-checkbox { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; } #user-register-form .js-form-type-checkbox input { margin-top: 4px; } #user-register-form .js-form-type-checkbox label { display: block; font-size: 13px; font-weight: 500; color: rgba(0,0,0,0.75); } /* Mobile */ @media (max-width: 480px) { .layout-content.custom_login_page, .layout-content.custom_register_page { padding-top: 60px; } #user-login-form, #user-register-form { padding: 22px 18px 18px; } } footer { background: #00505f; color: #fff; float: left; width: 100%; } footer a { color: #fff; text-decoration: none; } footer ul { margin: 0; padding: 0; list-style-type: none; } footer ul li { margin-bottom: 14px; } footer ul li a { font-size: 14px; } footer ul li:last-child { margin: 0; } footer .title { margin-bottom: 30px; font-size: 18px; font-weight: bold; } footer .main { padding: 60px 0; border-bottom: 1px solid #407c87; } footer .main::after { content: ''; display: table; clear: both; } footer .main .col { float: left; clear: none; text-align: inherit; width: 23.24219%; margin-left: 0%; margin-right: 2.34375%; } footer .main .col::after { content: ''; display: table; clear: both; } footer .main .col:last-child { margin-right: 0%; } footer .social { font-size: 22px; } footer .social a { margin-right: 26px; } footer .social a:last-child { margin: 0; } footer .secondary { padding: 31px 0; } footer .clearfix::after { display: block; clear: none; content: ""; } .secondary-nav { background: #edf3f4; margin-bottom: 60px; } .secondary-nav .cover { width: auto; max-width: 1062px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; text-align: center; display: flex; flex-direction: row; padding: 5px 0; } .secondary-nav .cover::after { content: ''; display: table; clear: both; } .secondary-nav .cover .menu-item { background: #fff; color: #000; text-decoration: none; width: 12%; margin-right: 5px; font-size: 14px; padding: 5px 0 8px; border-radius: 5px; transition: background 0.1s ease; } .secondary-nav .cover .menu-item:last-child { margin-right: 0; } .secondary-nav .cover .menu-item.active { background: #303030; color: #fff; } .secondary-nav .cover .menu-item:hover { background: #303030; color: #fff; } /*profile design*/ .profile-box h2 { text-align: center; font-size: 30px; font-weight: bold; margin-bottom: 60px; margin-top: 0; color: #303030; } .profile-box .subtitle { text-align: center; display: block; margin-bottom: 32px; font-size: 20px; font-weight: normal; } .profile-box .form-container { width: auto; max-width: 626px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .profile-box .form-container::after { content: ''; display: table; clear: both; } .profile-box .form-container.partner { width: auto; max-width: 800px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .profile-box .form-container.partner::after { content: ''; display: table; clear: both; } .profile-box .form-container .input-container { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 20px; } .profile-box .form-container .input-container:nth-last-child(2) { margin-bottom: 30px; } .profile-box .form-container .input-container.textarea { align-items: flex-start; } .profile-box .form-container .input-container.textarea .label { margin-top: 10px; } .profile-box .form-container .input-container .label { flex-grow: 1; text-align: right; padding-right: 21px; margin-top: 15px; } .profile-box .form-container .input-container .label label { font-size: 16px; letter-spacing: 0.05em; color: #9a9a9a; } .profile-box .form-container .input-container .input { width: 64.05751%; } .profile-box .form-container .input-container .input.is-datepicker { position: relative; } .profile-box .form-container .input-container .input.is-datepicker .ui-datepicker-trigger { width: 15px; position: absolute; top: 50%; transform: translateY(-50%); right: 16px; z-index: 0; } .overlay .ui-datepicker-trigger { position: absolute; width: 15px; top: 15px; right: 10px; } .profile-box .form-container .input-container .input input { width: 100%; border: 1px solid #ccc; outline: none; padding: 10px 28px; } .profile-box .form-container .input-container .input textarea { width: 100%; border: 1px solid #ccc; outline: none; padding: 10px 28px; resize: none; min-height: 140px; } .profile-box .form-container .input-container .input .select2 { width: 100% !important; height: initial; } .profile-box .form-container .input-container .input .select2.select2-container--default .select2-selection--single { height: auto; border: 1px solid #ccc; border-radius: 0; outline: none; } .profile-box .form-container .input-container .input .select2.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 17px 28px; line-height: initial; color: #000; } .profile-box .form-container .input-container .input .select2.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translate(0, -50%); right: 5px; } .profile-box .form-container .input-container .input.is-file { display: block; } .profile-box .form-container .input-container .input.is-file input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .profile-box .form-container .input-container .input.is-file label { border: 1px solid #00505f; border-radius: 5px; padding: 12px 22px; text-align: center; color: #00505f; margin-right: 4%; cursor: pointer; float: left; width: 200px; background: #fff; } #block-homepage-section-two { background: #00505f; } #block-homepage-section-two h2{ padding-top: 20px; } #block-homepage-section-two h2, #block-homepage-section-two div.col{ color: #fff; margin-top: 0px; } #block-homepage-section-two img{ max-width: 80px; } .profile-box .form-container .input-container .input.is-file img { width: 70px; height: 50px; margin-right: 0px; } .profile-box .form-container .input-container .input.is-file img:last-child { margin-right: 0; } .profile-box .form-action { text-align: center; } .profile-box .form-action input { background: #00505f; border-radius: 5px; padding: 12px 47px; text-align: center; color: #fff; outline: none; border: 1px solid rgba(0, 80, 95, 0.5); } /* profile deisgn*/ /*my courses*/ .booking-box { width: auto; max-width: 904px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; border: 2px solid #00505f; border-radius: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 20px; background: #fff; } .booking-box::after { content: ''; display: table; clear: both; } .booking-box .content { display: flex; flex-direction: row; width: 64.60177%; padding: 20px 36px; } .booking-box .content .img-holder { margin-right: 3.73726%; font-size: 16px; min-width: 106px; text-align: center; } .booking-box .content .img-holder img { width: 100%; max-width: 100px; display: block; margin: 0 auto; margin-bottom: 9px; } .booking-box .content .img-holder .rating { margin-top: 11px; font-size: 12px; } .booking-box .content .img-holder .rating .star { font-size: 12px; color: #b93600; vertical-align: middle; transition: 0.2s ease; } .booking-box .content .img-holder .rating .star:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 400; } .booking-box .content .img-holder .rating .star.checked:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 900; } .booking-box .content .img-holder .rating .rating-text { font-size: 16px; font-weight: normal; vertical-align: middle; } .booking-box .content .description { font-size: 16px; letter-spacing: 0.05em; padding: 20px; background-color: #f9f9f9; border-radius: 10px; line-height: 1.6; } .description-box { padding: 20px; background-color: #f9f9f9; border-radius: 10px; line-height: 1.6; } .booking-box .action { padding: 21px 30px; flex-grow: 1; border-radius: 0px 10px 10px 0px; background: #CCDCDF; } .booking-box .action .buttons { display: flex; flex-direction: column; align-items: center; } .booking-box .action .buttons .button { width: 80.97166%; text-align: center; margin-bottom: 20px; padding: 11px 0; } .booking-box .action .buttons .button:last-child { margin-bottom: 0; } .page-action { width: auto; max-width: 904px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; border-radius: 10px; padding-top: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .page-action::after { content: ''; display: table; clear: both; } .page-action .text { margin: 0; width: 64.60177%; } .page-action .action { flex-grow: 1; text-align: center; } .page-action .action .button { width: 62.5%; text-align: center; padding: 11px 0; } /*my courses*/ /*chat*/ .chat-page .chat-content { width: auto; max-width: 950px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; margin-bottom: 40px; } .chat-page .chat-content::after { content: ''; display: table; clear: both; } .chat-page .chat-content::after { content: ''; display: table; clear: both; } .chat-page .chat-content .new-message { background: #f5f8f3; padding: 40px; box-sizing: border-box; margin-bottom: 31px; } .chat-page .chat-content .new-message h2 { font-size: 24px; text-align: left; margin-top: 0; } .chat-page .chat-content .new-message .form-container::after { content: ''; display: table; clear: both; } .chat-page .chat-content .new-message .form-container .input-container { float: left; clear: none; text-align: inherit; width: 59.0625%; margin-left: 0%; margin-right: 2.34375%; } .chat-page .chat-content .new-message .form-container .input-container::after { content: ''; display: table; clear: both; } .chat-page .chat-content .new-message .form-container .input-container:last-child { margin-right: 0%; } .chat-page .chat-content .new-message .form-container .input-container.input-small { float: left; clear: none; text-align: inherit; width: 38.59375%; margin-left: 0%; margin-right: 2.34375%; } .chat-page .chat-content .new-message .form-container .input-container.input-small::after { content: ''; display: table; clear: both; } .chat-page .chat-content .new-message .form-container .input-container.input-small:last-child { margin-right: 0%; } .chat-page .chat-content .new-message .form-container .input-container.input-small .button { padding: 14px 20px; } .chat-page .chat-content .new-message .form-container .input-container input { width: 100%; } .chat-page .message-container { float: left; clear: none; text-align: inherit; width: 61.33681%; margin-left: 0%; margin-right: 2.34375%; border: 1px solid #ebebeb; background: #fff; } .chat-page .message-container::after { content: ''; display: table; clear: both; } .chat-page .message-container:last-child { margin-right: 0%; } .chat-page .message-container .message-action { width: 100%; padding: 30px; box-sizing: border-box; display: block; } .chat-page .message-container .message-action textarea, .chat-page .message-container .message-action input { outline: none; padding: 5px 20px; border: 1px solid #ebebeb; box-sizing: border-box; margin-right: 2.66002%; resize: none; height: 40px; width: 71.23916%; } .chat-page .message-container .message-action button { outline: none; border-radius: 5px; width: 19.5068%; padding: 5px 0; text-align: center; float: right; } .chat-page .message-container .message-action button svg { fill: #fff; width: 24px; height: 28px; display: inline-block; vertical-align: -7px; } .chat-page .message-container .message-action span { outline: none; border-radius: 5px; width: 19.5068%; padding: 5px 0; flex-grow: 1; cursor: pointer; } .chat-page .message-container .message-action span svg { fill: #fff; width: 24px; height: 28px; margin: 0 auto; display: block; vertical-align: -7px; } .chat-page .message-box { min-height: 518px; padding: 13px; box-sizing: border-box; border-bottom: 1px solid #ebebeb; max-height: 518px; overflow-y: scroll; } .chat-page .message-box .date { margin-top: 20px; margin-bottom: 20px; text-align: center; } .chat-page .message-box .sent-message { margin-bottom: 10px; display: flex; flex-direction: row; } .chat-page .message-box .sent-message::after { content: ''; display: table; clear: both; } .chat-page .message-box .sent-message .user-icon { float: left; width: 35px; box-sizing: content-box; padding-right: 10px; } .chat-page .message-box .sent-message .user-icon .circle { width: 35px; height: 35px; border-radius: 99999999999px; font-size: 26px; font-weight: bold; background: #00505f; border: 2px solid #00505f; position: relative; overflow: hidden; box-sizing: border-box; margin-top: 12px; } .chat-page .message-box .sent-message .user-icon .circle .circle-content { position: absolute; transform-style: preserve-3d; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .chat-page .message-box .sent-message .user-icon .circle .circle-content img { display: block; max-width: 60px; max-height: 60px; } .chat-page .message-box .sent-message .message-body-container { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; } .chat-page .message-box .sent-message .message-body { padding: 15px; background: #edf3f4; border: 1px solid #edf3f4; max-width: 80%; margin-bottom: 10px; color: #000; } .chat-page .message-box .received-message { margin-bottom: 10px; display: flex; flex-direction: row-reverse; } .chat-page .message-box .received-message::after { content: ''; display: table; clear: both; } .chat-page .message-box .received-message .message-body-container { display: flex; flex-direction: column; align-items: flex-end; flex-grow: 1; } .chat-page .message-box .received-message .message-body { padding: 15px; background: #fff; border: 1px solid #ebebeb; max-width: 80%; color: #000; } .chat-page .message-box .received-message .user-icon { float: right; width: 35px; box-sizing: content-box; padding-left: 10px; } .chat-page .message-box .received-message .user-icon .circle { width: 35px; height: 35px; border-radius: 99999999999px; border: 2px solid #00505f; box-sizing: border-box; background: transparent; position: relative; overflow: hidden; margin-top: 12px; } .chat-page .message-box .received-message .user-icon .circle .circle-content { position: absolute; transform-style: preserve-3d; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .chat-page .message-box .received-message .user-icon .circle .circle-content img { display: block; max-width: 60px; max-height: 60px; } .chat-page .contact-list { float: right; clear: none; text-align: inherit; width: 36.31944%; margin-left: 0%; margin-right: 2.34375%; } .chat-page .contact-list::after { content: ''; display: table; clear: both; } .chat-page .contact-list:last-child { margin-right: 0%; } .chat-page .contact-list .custom-select { margin-bottom: 20px; } .chat-page .contact-list .custom-select select { outline: none; } .chat-page .contact-list .custom-select .select2 { width: 100% !important; outline: none; } .chat-page .contact-list .custom-select .select2.select2-container--focus { border: none; } .chat-page .contact-list .custom-select .select2 .select2-selection { outline: none; } .chat-page .contact-list .custom-select .select2 .select2-selection--single { height: auto; width: 100%; border-radius: 0; border: 1px solid #ebebeb; } .chat-page .contact-list .custom-select .select2 .select2-selection--single .select2-selection__rendered { font-size: 16px; padding: 10px 24px; padding-right: 55px; color: #00505f; } .chat-page .contact-list .custom-select .select2 .select2-selection--single .select2-selection__arrow { top: 50%; right: 20px; width: 20px; transform: translate(0, -50%); } .chat-page .contact-list .message-history { background: #fff; border: 1px solid #ebebeb; height: 550px; overflow-y: scroll; } .chat-page .contact-list .message-box-system { background: #fff; display: flex; flex-direction: row; padding: 20px 0; border-bottom: 1px solid #ebebeb; cursor: pointer; height: 110px; } .chat-page .contact-list .message-box-system.unread { background: #fff; } .chat-page .contact-list .message-box-system.selected { background: #CCDCDF; } .chat-page .contact-list .message-box-system.unread .body .name { color: #000; } .chat-page .contact-list .message-box-system.unread .body .message { color: #000; } .chat-page .contact-list .message-box-system:last-child { border: 0; } .chat-page .contact-list .message-box-system .image { padding-left: 14px; box-sizing: border-box; margin-right: 3%; margin-top: 5px; } .chat-page .contact-list .message-box-system .image .image-container { width: 60px; height: 60px; border-radius: 9999999px; border: 2px solid #00505f; position: relative; background: #fff; box-sizing: border-box; } .chat-page .contact-list .message-box-system .image .image-container .image-overflow { overflow: hidden; width: 100%; height: 100%; display: block; border-radius: 100%; position: relative; box-sizing: border-box; } .chat-page .contact-list .message-box-system .image .image-container .image-overflow img { position: absolute; transform-style: preserve-3d; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; } .chat-page .contact-list .message-box-system .image .image-container .unread-bubble { position: absolute; background: #fff; z-index: 4; border: 1px solid #00505f; border-radius: 9999px; width: 16px; height: 16px; font-size: 10px; text-align: center; line-height: 15.5px; top: 0px; left: 0px; } .chat-page .contact-list .message-box-system .body { padding-top: 0px; padding-right: 20px; box-sizing: border-box; overflow: hidden; } .chat-page .contact-list .message-box-system .body .name { font-size: 16px; font-weight: bold; color: #000; margin-bottom: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 20px; } .chat-page .contact-list .message-box-system .body .message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*chat*/ /*reviews*/ .profile-box .booking-box.review-box .content { border: 0; padding: 16px; width: 100%; } .profile-box .booking-box.review-box .content .date { display: block; margin-bottom: 12px; } .profile-box .booking-box.review-box .content .img-holder { font-weight: bold; } .profile-box .booking-box.review-box .content .image-container { width: 89px; height: 89px; border-radius: 9999999px; border: 2px solid #00505f; position: relative; margin: 0 auto; background: #fff; box-sizing: border-box; margin-bottom: 12px; } .profile-box .booking-box.review-box .content .image-container .image-overflow { overflow: hidden; width: 100%; height: 100%; display: block; border-radius: 100%; position: relative; box-sizing: border-box; } .profile-box .booking-box.review-box .content .image-container .image-overflow img { position: absolute; transform-style: preserve-3d; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; height: 100%; object-fit: cover; } .profile-box .booking-box.review-box .content .image-container .unread-bubble { position: absolute; background: #fff; z-index: 4; border: 1px solid #00505f; border-radius: 9999px; width: 16px; height: 16px; font-size: 10px; text-align: center; line-height: 15.5px; top: 0px; left: 0px; } .profile-box .booking-box.review-box .rating { font-size: 12px; margin-bottom: 9px; } .profile-box .booking-box.review-box .rating .star { font-size: 12px; color: #b93600; vertical-align: middle; transition: 0.2s ease; } .profile-box .booking-box.review-box .rating .star:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 400; } .profile-box .booking-box.review-box .rating .star.checked:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 900; } .profile-box .booking-box.review-box .rating .rating-text { font-size: 16px; font-weight: normal; vertical-align: middle; } /*reviews*/ /*favorite*/ .favourites-box { width: auto; max-width: 849px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; display: flex; flex-direction: row; flex-wrap: wrap; } .favourites-box::after { content: ''; display: table; clear: both; } .favourites-box .slide { width: 29.56419%; margin-right: 5.65371%; position: relative; margin-bottom: 40px; border-radius: 10px 10px 0px 0px; background: #fff; } .favourites-box .slide img { width: 100%; display: block; border-radius: 10px 10px 0px 0px; max-height: 230px; } .favourites-box .slide .favourite { position: absolute; right: 10px; top: 10px; color: #fff; font-size: 14px; } .favourites-box .slide .info { box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.1); padding: 15px 10px; float: left; width: 100%; } .favourites-box .slide .info a{ color: #000; text-decoration: none; } .favourites-box .slide .info .title { font-size: 16p; font-weight: bold; display: block; text-align: center; text-transform: uppercase; margin-bottom: 16px; } .favourites-box .slide .info .subtitle { font-size: 14px; display: block; text-align: center; margin-bottom: 10px; } .favourites-box .slide .info .location { font-size: 14px; display: block; text-align: center; margin-bottom: 5px; min-height: 35px; float: left; width: 100%; } .favourites-box .slide .info .rating { font-size: 12px; margin-bottom: 16px; text-align: center; } .favourites-box .slide .info .rating .star { font-size: 12px; color: #b93600; vertical-align: middle; transition: 0.2s ease; } .favourites-box .slide .info .rating .star:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 400; } .favourites-box .slide .info .rating .star.checked:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 900; } .favourites-box .slide .info .rating .rating-text { font-size: 16px; font-weight: normal; vertical-align: middle; } .favourites-box .slide .info .price { display: block; font-size: 16px; font-weight: bold; text-align: center; } /*favorite*/ /* ========================================= PASSWORT ZURÜCKSETZEN – gleiche Card ========================================= */ /* Zentrierung */ .path-user-password .layout-content, .path-user-pass .layout-content, .path-user-password .custom_resetpassword_page { display: flex; justify-content: center; padding-top: 140px; padding-bottom: 100px; } /* Card */ #user-pass, #user-pass-reset { width: 100%; max-width: 420px; background: #ffffff; border-radius: 14px; padding: 28px 24px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); margin: 0 auto; text-align: left; margin-bottom: 20px; margin-top: 20px; } /* Überschrift */ .custom_resetpassword_page h2 { text-align: center; font-size: 26px; font-weight: 600; color: #00505f; margin-bottom: 20px; } /* Input */ #user-pass input[type="text"], #user-pass input[type="email"] { width: 100%; height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(0, 80, 95, 0.25); outline: none; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #user-pass input:focus { border-color: #00505f; box-shadow: 0 0 0 4px rgba(0, 80, 95, 0.12); } /* Button */ #user-pass input[type="submit"] { width: 100%; height: 48px; background: #00505f; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 16px; box-shadow: 0 10px 20px rgba(0, 80, 95, 0.18); } /*datepicker*/ .datepicker_wrapper .ui-widget { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.1s cubic-bezier(0.2, 0.5, 0.25, 1); width: 300px; } .datepicker_wrapper .ui-widget.ui-widget-content { border: 1px solid #ebebeb; border-radius: 0; background: #fff; padding: 14px 16px; z-index: 999 !important; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header { display: block; padding: 9px 0; border: 0px; margin-bottom: 8px; background: none; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header::after { content: ''; display: table; clear: both; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-next { float: right; width: 13.33333%; text-align: right; cursor: pointer; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-next span { display: none; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-next:before { content: '\f054'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; color: #00505f; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-prev { float: left; width: 13.33333%; cursor: pointer; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-prev:hover, .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-next:hover{ background: none; border:none; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-prev span { display: none; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-prev:before { content: '\f053'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; color: #00505f; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-title { float: left; width: 73.33333%; text-align: center; font-size: 18px; color: #00505f; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar { width: 100%; border-collapse: separate; border-spacing: 0 0.3em; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar thead { font-size: 18px; font-weight: bold; color: #00505f; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody { text-align: center; transition: all 0.1s ease; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td { text-align: center; margin-bottom: 10px; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td:hover { background: #b93600; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td:hover a { color: #fff !important; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td.ui-state-disabled:hover { background: #fff; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td a { text-decoration: none; font-size: 18px; color: #484848; background: none; border: none; height: 25px; float: left; width: 100%; line-height: 20px; } #bookingcourse .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td .ui-state-default.ui-state-active , #coursedetails_page .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td .ui-state-default.ui-state-active { background: #b93600 !important; color: #fff !important; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td.ui-datepicker-today a { color: #b93600; } /*datepicker*/ /*partner register*/ .register { padding-top: 60px; } #coursedetails_page .profile-box .subtitle{ font-size: 16px; text-align: left; } .register.login .form-container .input-container:nth-last-child(2) { margin-bottom: 60px; } .register.login .form-container .input-container.action-form .button { max-width: 100%; } .register.login .form-container .input-container.action-form a { color: #000; } .register h2 { font-size: 30px; font-weight: normal; color: #00505f; margin: 0; margin-bottom: 60px; text-align: center; } .register .form-container { margin-bottom: 60px; width: auto; max-width: 338px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .register .form-container::after { content: ''; display: table; clear: both; } .register .form-container .input-container { margin-bottom: 20px; display: block; flex-direction: row; } .register .form-container .input-container textarea { border: 1px solid #ebebeb; outline: none; padding: 18px 25px; width: 100%; min-height: 144px; resize: none; } .parsley-errors-list{ float: left; width: 100%; } .register .form-container .input-container input { border: 1px solid #ebebeb; outline: none; padding: 18px 25px; width: 100%; } .register .form-container .input-container input::placeholder { /* color: #9a9a9a; */ } #user-register-form input.parsley-error,#user-register-form select.parsley-error,#user-register-form textarea.parsley-error { color: #B94A48; background-color: #F2DEDE !important; border: 1px solid #EED3D7 !important; } .register .form-container .input-container input[type="checkbox"] { width: auto; margin-right: 10px; margin-top: 4px; float: left; } .register .form-container .input-container label { font-size: 12px; letter-spacing: 0.025em; text-align: justify; font-style: italic; float: left; width: 90%; } .register .form-container .input-container label a { text-decoration: none; color: #00505f; } #partner_register .input-container{ float: left; width: 100%; } .register .form-container .input-container.action-form { flex-direction: column; align-items: center; } .register .form-container .input-container.action-form > label.partnerregister{ font-weight: bold; } .register .form-container .input-container.action-form .button { max-width: 200px; margin-bottom: 17px; font-size: 18px; padding: 10px 26px; border-radius: 5px; margin: 0 auto; display: block; } .register .form-container .input-container.action-form label { text-align: center; float: left; width: 100%; margin-top: 20px; } /*partner register*/ /*search*/ .search { padding: 20px 0; padding-bottom: 20px; } .search .filter h2 { font-size: 25px; font-weight: bold; text-align: left; color: #303030; margin: 0; margin-bottom: 60px; } .search .filter .center { width: auto; max-width: 844px; float: none; display: block; padding-left: 0; padding-right: 0; } .search .filter .center::after { content: ''; display: table; clear: both; } .search .filter .center .row { display: flex; margin-bottom: 15px; } .search .filter .center .row .input-container { width: 35%; margin-right: 28px; } .search .filter .center .row .input-container:last-child { margin-right: 0; } .search .filter .center .row .input-container input { width: 100%; border: 1px solid #ededed; outline: none; font-size: 18px; padding: 5px 13px 8px; border-radius: 5px; height: 35px; } .search .filter .center .row .input-container input::placeholder { color: #9a9a9a; } .search .filter .center .row .input-container.inputsx2 { display: flex; flex-direction: row; } .search .filter .center .row .input-container.inputsx2 input { width: 48.15725%; margin-right: 18px; } .search .filter .center .row .input-container.inputsx2 input:last-child { margin-right: 0; } .search .filter .center .row .input-container.special input::placeholder { color: #000; } .select2-container--default .select2-search--inline .select2-search__field::placeholder { opacity: 1; color: #000; } .search .filter .center .row .input-container .select2 { width: 100% !important; } .search .filter .center .row .input-container .select2 .select2-selection { font-size: 18px; outline: none; border: 1px solid #ededed; border-radius: 20px; height: auto; } .search .filter .center .row .input-container .select2 .select2-selection .select2-selection__rendered { padding: 8px 13px; padding-right: 30px; line-height: normal; } .search .filter .center .row .input-container .select2 .select2-selection .select2-selection__arrow { top: 50%; transform: translate(0, -50%); right: 11px; } .search .filter .center .row .input-container .select2.select2-container--open .select2-selection { border-radius: 20px 20px 0 0; } .search .page-filter { display: flex; flex-direction: row; justify-content: flex-end; padding-bottom: 17px; border-bottom: 1px solid #ebebeb; margin-bottom: 60px; } .search .page-filter .input-container { margin-right: 19px; width: 15.23438%; } .search .page-filter .input-container:last-child { margin-right: 0; } .search .page-filter .input-container .select2 { width: 100% !important; } .search .page-filter .input-container .select2 .select2-selection { font-size: 18px; outline: none; border: 1px solid #ccc; border-radius: 5px; height: auto; } .search .page-filter .input-container .select2 .select2-selection .select2-selection__rendered { padding: 10px 13px; padding-right: 30px; line-height: normal; } .search .page-filter .input-container .select2 .select2-selection .select2-selection__arrow { top: 50%; transform: translate(0, -50%); right: 11px; } .search .page-filter .input-container .select2.select2-container--open .select2-selection { border-radius: 20px 20px 0 0; } .favourites-box.search-content { width: auto; max-width: 1280px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; display: flex; } .favourites-box.search-content::after { content: ''; display: table; clear: both; } .favourites-box.search-content .slide { float: left; clear: none; text-align: inherit; width: 31.77083%; margin-left: 0%; margin-right: 2.34375%; } .favourites-box.search-content .slide::after { content: ''; display: table; clear: both; } .favourites-box.search-content .slide:last-child { margin-right: 0%; } .favourites-box.search-content .slide:last-child { margin-right: 0; } .favourites-box.search-content .slide:nth-child(3n) { margin-right: 0; } /*search*/ /*blog page*/ .blog-page { padding: 60px 0; } .blog-page.blog-post h1 { float: left; clear: none; text-align: inherit; width: 65.88542%; margin-left: 0%; margin-right: 2.34375%; text-align: center; } .blog-page.blog-post h1::after { content: ''; display: table; clear: both; } .blog-page.blog-post h1:last-child { margin-right: 0%; } .blog-page h1 { font-size: 30px; font-weight: bold; color: #00505f; margin: 0; margin-bottom: 60px; } .blog-page .main::after { content: ''; display: table; clear: both; } .blog-page .main .content { float: left; clear: none; text-align: inherit; width: 65.88542%; margin-left: 0%; margin-right: 2.34375%; } .blog-page .main .content::after { content: ''; display: table; clear: both; } .blog-page .main .content:last-child { margin-right: 0%; } .blog-page .main .content .article { display: flex; flex-direction: row; align-items: flex-start; border-bottom: 1px solid #ebebeb; padding-bottom: 30px; margin-bottom: 30px; } .blog-page .main .content .article a { display: block; margin-right: 10.18957%; width: 100%; max-width: 351px; border-radius: 10px; } .blog-page .main .content .article img { display: block; width: 100%; border-radius: 10px; } .blog-page .main .content .article .content { color: #4a4a4a; display: flex; flex-direction: column; flex-wrap: nowrap; } .blog-page .main .content .article .content .title { font-size: 22px; font-weight: bold; display: block; margin-bottom: 25px; } .blog-page .main .content .article .content .date { font-size: 14px; display: block; margin-bottom: 20px; } .blog-page .main .content .article .content .text { font-size: 18px; flex: 1 1 auto; display: block; text-align: left; } .blog-page .main .content .article .content .read-more { display: block; color: #4a4a4a; text-decoration: none; font-size: 14px; } .blog-page .main .content .blog-single section img { width: 100%; margin-bottom: 60px; margin-top: 10px; } .blog-page .main .content .blog-single section p { font-size: 18px; font-weight: bold; color: #a3a3a3; display: block; margin: 0; margin-bottom: 25px; } .blog-page .main .content .blog-single section p:nth-child(1)::first-letter { font-size: 100px; float: left; line-height: 75px; } .blog-page .main aside { float: left; clear: none; text-align: inherit; width: 23.24219%; margin-left: 8.52865%; margin-right: 2.34375%; } .blog-page .main aside::after { content: ''; display: table; clear: both; } .blog-page .main aside:last-child { margin-right: 0%; } .blog-page .main aside .category { margin-bottom: 60px; } .blog-page .main aside .category .title { margin-bottom: 30px; border-bottom: 1px solid #ebebeb; padding-bottom: 5px; font-size: 22px; font-weight: bold; } .blog-page .main aside .category .button { display: block; margin-bottom: 15px; font-size: 14px; padding: 12px 15px; text-align: center; } .blog-page .main aside .history .title { margin-bottom: 30px; border-bottom: 1px solid #ebebeb; padding-bottom: 5px; font-size: 22px; font-weight: bold; } .blog-page .main aside .history .mini-article { margin-bottom: 15px; } .blog-page .main aside .history .mini-article a { display: flex; flex-direction: row; align-items: center; font-size: 14px; text-decoration: none; color: #4a4a4a; } .blog-page .main aside .history .mini-article a img { width: 100%; max-width: 120px; border-radius: 10px; display: block; margin-right: 10px; } /*blog page*/ .courses-gallery .info .rating { margin-top: 2px; font-size: 20px; text-align: center; margin-bottom: 2px; } .courses-gallery .info .rating span.star { font-size: 14px; color: #b93600; vertical-align: middle; display: inline-block; /* bessere Kontrolle als "inline" */ margin-right: 2px; } .courses-gallery .info .rating .star:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 400; } .courses-gallery .info .rating .star.checked:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 900; } .course-detail .rating { margin-top: 11px; font-size: 20px; text-align: center; margin-top: -30px; margin-bottom: 60px; } .course-detail .rating .star { font-size: 20px; color: #b93600; vertical-align: middle; transition: 0.2s ease; } .course-detail .rating .star:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 400; } .course-detail .rating .star.checked:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 900; } .course-detail .rating .rating-text { font-size: 16px; font-weight: normal; vertical-align: middle; } .course-detail .col { padding: 30px 60px; border: 1px solid #00505f; border-radius: 10px; box-sizing: border-box; } .course-detail .row { display: flex; flex-direction: row; margin-bottom: 60px; } .course-detail .row .col { display: flex; flex-direction: column; width: 50%; } .course-detail .row .col:first-child { margin-right: 30px; } .course-detail .row .col .datepicker_wrapper .multi-datepicker .ui-widget { box-shadow: none; width: 100%; max-width: 400px; margin: 0 auto; } .course-detail .row .col .legend { display: flex; flex-direction: row; padding: 7px 17px; max-width: 400px; margin: 0 auto; margin-bottom: 25px; } .course-detail .row .col .legend .wihtebox { margin-right: 50px; } .course-detail .row .col .legend .wihtebox .white-box { display: inline-block; background: #fff; border: 1px solid #ebebeb; width: 15px; height: 15px; vertical-align: middle; margin-right: 14px; } .course-detail .row .col .legend .reserved .cream-box { display: inline-block; background: #faf0e1; border: 1px solid #ebebeb; width: 15px; height: 15px; vertical-align: middle; margin-right: 14px; } .course-detail .row .col .line { display: flex; flex-direction: row; flex-grow: 1; } .course-detail .row .col .line span { flex-grow: 1; width: 50%; font-size: 18px; } .course-detail .row .col .line span.title { font-weight: bold; } .course-detail .row .col .action { text-align: center; } .course-detail .row .col .action .button { min-width: 200px; margin-top: 15px; } .course-detail .tabs { margin-bottom: 45px; } .course-detail .tabs .tab-handles { display: flex; flex-direction: row; margin-bottom: 60px; } .course-detail .tabs .tab-handles a { margin-right: 18px; min-width: 15.625%; text-align: center; padding: 0px 10px 3px; } .course-detail .tabs .tab-handles a:last-child { margin-right: 0; } .course-detail .tabs .tab-content p { margin: 0; margin-bottom: 30px; } .course-detail .tabs .tab-content p:last-child { margin: 0; } .course-detail .tab-container { margin-bottom: 80px; } .course-detail .tab-container .tab { font-size: 18px; } .course-detail .tab-container .tab .tab-handle { margin-bottom: 29px; display: block; position: relative; padding-left: 40px; } .course-detail .tab-container .tab .tab-handle::before { margin-right: 30px; vertical-align: middle; font-size: 20px; position: absolute; left: 0; content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #00505f; display: inline-block; transition: 0.3s ease; } .course-detail .tab-container .tab .tab-handle.active::before { transform: rotate(90deg); } .course-detail .tab-container .tab .content { padding-left: 0px; } /*course details page*/ /*course create page*/ .setad { padding: 60px 0 0; } .setad .form-container { width: auto; max-width: 830px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .setad .form-container::after { content: ''; display: table; clear: both; } .setad .form-container .row { display: flex; flex-direction: row; } .setad .form-container .row .input-container { width: 48%; margin-bottom: 16px; } .setad .form-container .row .input-container:first-child { margin-right: 31px; } .setad .form-container .input-container { flex-direction: column; align-items: flex-start; text-align: left; margin-bottom: 16px; } .setad .form-container .input-container input { width: 100%; border: 1px solid #ccc; outline: none; padding: 17px 28px; } .setad .form-container .input-container textarea { width: 100%; border: 1px solid #ccc; outline: none; padding: 17px 28px; resize: none; height: 130px; } .setad .form-container .input-container label { display: block; color: #9a9a9a; font-size: 16px; letter-spacing: 0.05em; margin-bottom: 13px; } .setad .form-container .input-container .select2 { width: 100% !important; height: initial; } .setad .form-container .input-container .select2.select2-container--default .select2-selection--single { height: auto; border: 1px solid #ccc; border-radius: 0; outline: none; } .setad .form-container .input-container .select2.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 17px 28px; line-height: initial; color: #000; } .setad .form-container .input-container .select2.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translate(0, -50%); right: 5px; } .setad .form-container .input-container .datepicker_wrapper .multi-datepicker .ui-widget { box-shadow: none; width: 100%; } .setad .form-container .input-container .legend { display: flex; flex-direction: row; padding: 7px 17px; } .setad .form-container .input-container .legend .wihtebox { margin-right: 50px; } .setad .form-container .input-container .legend .wihtebox .white-box { display: inline-block; background: #fff; border: 1px solid #ebebeb; width: 15px; height: 15px; vertical-align: middle; margin-right: 14px; } .setad .form-container .input-container .legend .reserved .cream-box { display: inline-block; background: #faf0e1; border: 1px solid #ebebeb; width: 15px; height: 15px; vertical-align: middle; margin-right: 14px; } .setad .form-container .input-container .table { border: 1px solid #ccc; padding: 17px 28px; font-size: 14px; width: 100%; } .setad .form-container .input-container .table .row { display: flex; flex-direction: row; color: #9a9a9a; align-items: center; } .setad .form-container .input-container .table .row .td { flex-grow: 1; max-width: 20%; text-align: center; } .setad .form-container .input-container .table .row .td input { padding: 7px 0; text-align: center; } .setad .form-container .input-container .table .row .spacer { flex-grow: 1; max-width: 20%; text-align: center; } .setad .form-container .input-container .table .row.header { margin-bottom: 29px; } .setad .form-container .input-container .table .row.header .spacer { max-width: 4%; } .setad .form-container .input-container .table .row.header .td { max-width: 32%; color: #000; } .setad .form-container .input-container .table .row.header .td:first-child { text-align: left; } .setad .form-container .input-container .table .row.header .td:last-child { text-align: right; } .setad .form-container .input-container .input.is-file { flex-direction: column; } .setad .form-container .input-container .input.is-file label { max-width: 39.54802%; } .setad .form-container .input-container .inprint { font-size: 14px; display: block; color: #9a9a9a; float: left; width: 100%; } .setad .form-container .input-container .inprint a { text-decoration: none; color: #00505f; } .setad .form-container .action { text-align: center; } .setad .form-container .action .button { min-width: 22.58065%; padding: 12px 47px; } #coursecreate_page .datepicker_wrapper, #editcourse_page .datepicker_wrapper, #coursedetails_page .datepicker_wrapper{ float: left; width: 100%; position: relative; } .datepicker_wrapper .overlay{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 99; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td.ui-datepicker-unselectable .ui-state-default { background: #faf0e1; display: block; height: 100%; padding-top: 3.5px; border: none; height: 25px; line-height: 20px; } /*course create page*/ /*impressum*/ .imprint { padding: 60px 0; } .imprint h2 { font-size: 30px; font-weight: bold; color: #00505f; margin: 0; margin-bottom: 60px; } .imprint .street-details { margin-bottom: 30px; } .imprint .street-details:nth-child(4) { margin-bottom: 60px; } .imprint .street-details span { letter-spacing: 0.02em; display: block; font-size: 18px; font-weight: normal; color: #000; line-height: 21px; } .imprint .street-details span a { text-decoration: none; color: #000; } .imprint p { font-size: 18px; color: #000; line-height: 21px; letter-spacing: 0.02em; } /*impressum*/ /*services*/ .services { padding: 60px 0; } .services img { display: block; width: 100%; margin-bottom: 60px; } .services h2 { font-size: 30px; font-weight: bold; color: #00505f; margin: 0; margin-bottom: 60px; } .services p { font-size: 18px; color: #000; line-height: 21px; letter-spacing: 0.02em; margin: 0; margin-bottom: 60px; } .services .action { text-align: center; } .services .action .button { width: 31.79688%; } /*services*/ /*about us*/ .about-us .title { font-size: 30px; font-weight: bold; margin-bottom: 30px; } .about-us .hero { width: 100%; display: block; height: auto; } .about-us .blue-bg { background: #edf3f4; padding: 60px 0; text-align: center; margin-bottom: 60px; } .about-us .blue-bg h1 { color: #00505f; text-align: center; font-size: 30px; font-weight: bold; margin: 0; margin-bottom: 60px; } .about-us .blue-bg p { width: auto; max-width: 1060px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; font-size: 18px; margin: 0 auto; } .about-us .blue-bg p::after { content: ''; display: table; clear: both; } .about-us .values { margin-bottom: 60px; } .about-us .values h2 { color: #00505f; text-align: center; font-size: 30px; font-weight: bold; margin: 0; margin-bottom: 60px; } .about-us .values .row::after { content: ''; display: table; clear: both; } .about-us .values .row .col { float: left; clear: none; text-align: inherit; width: 31.77083%; margin-left: 0%; margin-right: 2.34375%; text-align: center; font-size: 18px; } .about-us .values .row .col::after { content: ''; display: table; clear: both; } .about-us .values .row .col:last-child { margin-right: 0%; } .about-us .values .row .col img { display: block; margin: 0 auto; margin-bottom: 60px; width: auto; max-width: 100%; } .about-us .baseprofile { font-size: 18px; margin-bottom: 60px; } .about-us .presentation { margin-bottom: 60px; } .about-us .presentation .row::after { content: ''; display: table; clear: both; } .about-us .presentation .row:first-child { margin-bottom: 60px; } .about-us .presentation .row .col { float: left; clear: none; text-align: inherit; width: 48.82812%; margin-left: 0%; margin-right: 2.34375%; } .about-us .presentation .row .col::after { content: ''; display: table; clear: both; } .about-us .presentation .row .col:last-child { margin-right: 0%; } .about-us .presentation .row .col ul { list-style-type: none; padding: 0; margin: 0; } .about-us .presentation .row .col ul li { font-size: 14px; color: #4a4a4a; margin-bottom: 30px; padding-left: 30px; position: relative; } .about-us .presentation .row .col ul li::before { content: '\f00c'; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #00505f; position: absolute; left: 0; margin-right: 15px; } .about-us .presentation .row .col .button { text-align: center; width: 65.12%; padding: 11px; } .about-us .presentation .row .col img { width: auto; display: block; margin: 0 auto; max-width: 100%; } /*about us*/ #block-lucamatej-page-title{ display: none; } .custom_login_page #block-lucamatej-page-title, .custom_register_page #block-lucamatej-page-title{ display: block; } #overlay_display img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } #overlay_display { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(255, 255, 255,0.6); display: none; } .login-view{ position: relative; float: right; } .login-text { width: 55px; height: 55px; line-height: 55px; /* vertikale Zentrierung */ text-align: center; /* horizontale Zentrierung */ border: 2px solid #00505f; border-radius: 50%; /* echter Kreis */ background: #fff; color: #000; font-weight: normal; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; display: inline-block; } .ui-state-highlight a { color: #fff !important; } .ui-state-highlight { background: #b93600; } div[role="contentinfo"] { width: 100%; text-align: center; background: #fff; font-size: 20px; padding: 10px 0px; } /*modal design*/ .modal-overlay { position: fixed; display: none; z-index: 99; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; right: 0; bottom: 0; } .submenu_hover { display: none; position: absolute; top: 56px; list-style: none; right: 0px; padding: 0px; width: 400px; background: #fff; z-index: 999; border: 1px solid rgba(0, 80, 95, 0.3); border-top-color: rgba(0, 80, 95, 0.3); border-top-style: solid; border-top-width: 1px; border-bottom-color: rgba(0, 80, 95, 0.3); border-bottom-style: solid; border-bottom-width: 1px; border-bottom: 1px solid rgba(0, 80, 95, 0.5); border-top: 0; box-shadow: 0 4px 23px -4px rgba(0, 80, 95, 0.5); border-radius: 10px; } .submenu_hover li:nth-child(1) { border-radius: 10px 10px 0px 0px; } .submenu_hover li:last-child { border-radius: 0px 0px 10px 10px; } .submenu_hover li a{ text-decoration: none; color: #00505f; float: left; width: 100%; } .submenu_hover li { list-style: none; text-align: center; padding: 7px; color: #00505f; float: left; width: 100%; } .submenu_hover li:hover a{ color: #fff; } .submenu_hover li:hover { list-style: none; text-align: center; padding: 7px; background: #00505f; color: #fff; } .modal-overlay .modal-box { position: absolute; top: 20%; left: 50%; transform: translate(-50%, 0); width: 100%; max-width: 700px; background: #fff; padding: 15px; border-radius: 10px; } .modal-overlay .modal-box::after { content: ''; display: table; clear: both; } .modal-overlay .modal-box .content { width: auto; max-width: 500px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .modal-overlay .modal-box .content::after { content: ''; display: table; clear: both; } .modal-overlay .modal-box .close-container { text-align: right; } .modal-overlay .modal-box .close-container .closepub , .modal-overlay .modal-box .close-container .closepvt , .modal-overlay .modal-box .close-container .close { color: #000; font-size: 20px; text-decoration: none; } .modal-overlay .modal-box .title { text-align: center; font-size: 30px; line-height: 40px; color: #00505f; margin-bottom: 30px; } .modal-overlay .modal-box p { text-align: center; margin: 0; margin-bottom: 12px; } .modal-overlay .modal-box .rating { text-align: center; margin-bottom: 5px; } .modal-overlay .modal-box .rating .star { font-size: 20px; color: #b93600; vertical-align: middle; transition: 0.2s ease; } .modal-overlay .modal-box .rating .star:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 400; } .modal-overlay .modal-box .rating .star.checked:after { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 900; } .modal-overlay .modal-box .rating .rating-text { font-size: 16px; font-weight: normal; vertical-align: middle; } .modal-overlay .modal-box textarea { resize: none; width: 100%; border: 1px solid #9a9a9a; outline: none; padding: 10px; box-sizing: border-box; margin-bottom: 0px; min-height: 100px; margin-top: 15px; margin-bottom: 15px; } .hp_under_title { max-width: 880px; width: 100%; display: block; color: #fff; margin: 40px auto 20px; font-size: 20px; font-weight: bold; } .modal-overlay .modal-box textarea::placeholder { font-size: 16px; color: #9a9a9a; } .modal-overlay .modal-box .form-text { display: block; text-align: center; font-size: 12px; letter-spacing: 0.05em; margin-bottom: 30px; margin-top: 30px; } .modal-overlay .modal-box .form-text a { color: #00505f; } .modal-overlay .modal-box .form-action { text-align: center; margin-bottom: 45px; } .modal-overlay .modal-box .form-action .button { font-size: 18px; padding: 11px 26px; outline: none; } /*modal design*/ .modal-overlay .rating .star{ cursor: pointer; } .message-container{ display: none; } .message-container.active{ display: block; } .courses-gallery .courses-slider, .courses-gallery .courses-slider2 { padding: 0 45px; } .courses-gallery .courses-slider .slide, .courses-gallery .courses-slider2 .slide { padding-bottom: 2px; padding-left: 2px; padding-right: 2px; } .courses-gallery .courses-slider .slide img, .courses-gallery .courses-slider2 .slide img { width: 100%; display: block; border-radius: 10px 10px; } .courses-gallery .courses-slider.owl-carousel .owl-nav.disabled, .courses-gallery .courses-slider2.owl-carousel .owl-nav.disabled { display: block; } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-prev, .courses-gallery .courses-slider2.owl-carousel .owl-nav .owl-prev { outline: none; position: absolute; top: 50%; left: 0px; transform: translate(0, -50%); } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-prev::after, .courses-gallery .courses-slider2.owl-carousel .owl-nav .owl-prev::after { content: '\f0d9'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-next, .courses-gallery .courses-slider2.owl-carousel .owl-nav .owl-next { outline: none; position: absolute; top: 50%; right: 0px; transform: translate(0, -50%); } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-next::after, .courses-gallery .courses-slider2.owl-carousel .owl-nav .owl-next::after { content: '\f0da'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-next span, .courses-gallery .courses-slider2.owl-carousel .owl-nav .owl-next span , .courses-gallery .courses-slider.owl-carousel .owl-nav .owl-prev span, .courses-gallery .courses-slider2.owl-carousel .owl-nav .owl-prev span { display: none; } .owl-theme .owl-nav [class*="owl-"]:hover{ background: none; } .input-container-action { text-align: center; } .input-container-action input { background: #00505f; color: #fff; width: 100%; box-sizing: border-box; border-radius: 5px; font-size: 22px; border: none; padding: 1px 40px 4px; outline: none; max-width: 300px; } #suche_page .input-container.inputsx2 .holder_inputs:nth-child(2) input{ margin-right: 0px; float: right; } #suche_page .input-container.inputsx2 .holder_inputs input{ width: 100%; } #suche_page .input-container.inputsx2 .holder_inputs { position: relative; float: right; display: block; width: 100%; } #suche_page .input-container.inputsx2 img { width: 15px; position: absolute; top: 14px; right: 15px; } .pagination { display: block; padding-left: 0; } .pagination { margin-bottom: 40px; } .pagination li { display: inline-block; padding: 2px 10px; border-radius: 3px; border: 2px solid #dedede; margin: 0px 5px; cursor: pointer; } .pagination li.active { /* background: #00505f; */ border: 2px solid #00505f; } .pagination li.active a { color: #00505f; } .pagination a { line-height: 24px; color: #dedede; text-decoration: none; } .pagination li.prev , .pagination li.next { border: 2px solid #00505f; color: #00505f; } .pagination li.prev.disabled, .pagination li.next.disabled{ border: 2px solid #dedede; } .pagination .prev.disabled a, .pagination .next.disabled a{ color: #dedede; } .pagination .prev a, .pagination .next a{ color: #00505f; } .booking-steps .profile-box { width: auto; max-width: 850px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; margin-bottom: 60px; } .booking-steps .step4 { padding-top: 60px; } .booking-steps .step4 h1 { display: block; text-align: center; font-size: 30px; color: #00505f; margin: 0; margin-bottom: 60px; } .booking-steps .step4 .text { width: auto; max-width: 499px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; font-size: 18px; margin-bottom: 60px; } .booking-steps .step4 .text::after { content: ''; display: table; clear: both; } .booking-steps .step4 .action { text-align: center; width: auto; max-width: 407px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; margin-bottom: 30px; } .booking-steps .step4 .action::after { content: ''; display: table; clear: both; } .booking-steps .step4 .action span { display: block; font-size: 18px; margin-bottom: 30px; } .booking-steps .step4 .action .button { width: 100%; padding: 11px; } .booking-steps .step4 .ending { width: auto; max-width: 499px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; font-size: 18px; font-weight: bold; text-align: center; } .booking-steps .step4 .ending::after { content: ''; display: table; clear: both; } footer a i { color: transparent; } footer a i:before{ color: #fff; } .no-display{ display: none; } .tabs a:focus, .tabs a:hover { background-color: #00505f; color: #fff; } .booking-steps .step-header { width: auto; max-width: 686px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; text-align: center; margin-bottom: 60px; padding-top: 60px; } .booking-steps .step-header::after { content: ''; display: table; clear: both; } .booking-steps .step-header .progress-bar { height: 5px; background: #edf3f4; margin-bottom: 40px; width: auto; max-width: 600px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .booking-steps .step-header .progress-bar::after { content: ''; display: table; clear: both; } .booking-steps .step-header .progress-bar .progress { height: 5px; width: 33.3%; background: #00505f; } .booking-steps .step-header .progress-bar .progress.step-2 { width: 66.6%; } .booking-steps .step-header .progress-bar .progress.step-3 { width: 100%; } .booking-steps .step-header .progress-bar .progress.step-4 { width: 100%; } .booking-steps .step-header .title { display: block; text-align: center; font-size: 30px; color: #00505f; } .booking-steps .step-header .subtitle { display: block; text-align: center; font-size: 18px; color: #9a9a9a; } .booking-steps .profile-box { width: auto; max-width: 850px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; margin-bottom: 60px; } .booking-steps .profile-box::after { content: ''; display: table; clear: both; } .booking-steps .profile-box .datepicker_wrapper { width: auto; max-width: 400px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; margin-bottom: 30px; } .booking-steps .profile-box .datepicker_wrapper::after { content: ''; display: table; clear: both; } .booking-steps .profile-box .datepicker_wrapper .ui-widget { width: 100%; box-shadow: none; } .booking-steps .profile-box .input-container { width: auto; max-width: 625px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; } .booking-steps .profile-box .input-container::after { content: ''; display: table; clear: both; } .booking-steps .profile-box .input-container textarea { width: 1px; border: 1px solid #ccc; outline: none; padding: 17px 28px; resize: none; height: 1px; visibility: hidden; } .booking-steps .profile-box .input-container textarea#user_comment_buyer { width: 100%; border: 1px solid #ccc; outline: none; padding: 17px 28px; resize: none; height: auto; visibility: visible; } .list_options_selected { list-style: none; margin: 0px; } .booking-steps .step-action { width: auto; max-width: 850px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; margin-bottom: 60px; } .booking-steps .step-action::after { content: ''; display: table; clear: both; } .booking-steps .step-action .button { width: 200px; text-align: center; padding: 11px; } .booking-steps .step-action .hollow { float: left; } .booking-steps .step-action .blue { float: right; margin: 0px; } .booking-steps .booking-table { margin-bottom: 60px; } #custom_design-message-block { position: absolute; width: 100%; padding: 8px; box-sizing: border-box; background: #fff; border: 2px solid; z-index: 9999; } ul.list_options_selected li { word-break: break-all; } .booking-steps .booking-table .row { display: flex; flex-direction: row; } .booking-steps .booking-table .row .th { display: flex; height: 48px; border: 1px solid #00505f; flex-grow: 1; border-radius: 10px 10px 0 0; text-align: center; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; } .booking-steps .booking-table .row .td { padding: 0 28px; height: 48px; border: 1px solid #00505f; border-top: none; flex-grow: 1; display: flex; align-items: center; justify-content: center; color: #4a4c4b; font-size: 16px; } .booking-steps .booking-table .row .td:first-child { border-right: none; justify-content: flex-start; width: 85%; } .booking-steps .booking-table.second-table .td { flex-direction: column; justify-content: flex-start; align-items: flex-start; height: auto; padding: 18px 28px; } .booking-steps .booking-table.second-table .td:first-child { width: 50%; align-items: flex-end; color: #000; } .booking-steps .booking-table.second-table .td:last-child { width: 50%; text-transform: uppercase; } #edit-field-uset-terms-and-condition-wrapper label , #edit-field-user-newsletter-wrapper label, .back-to-login a { font-size: 12px; letter-spacing: 0.025em; font-style: italic; } #edit-field-uset-terms-and-condition-wrapper label a, .back-to-login a{ text-decoration: none; color: #00505f; } #block-lucamatej-page-title h1 { font-weight: normal; font-size: 30px; margin: 60px 0px; color: #00505f; } /*cart*/ #uc-cart-view-form table { width: 100%; max-width: 1280px; display: block; margin: 0 auto; padding: 50px 0px; } #uc-cart-view-form .form-actions{ width: 100%; max-width: 1280px; display: block; margin: 0 auto; float: none; margin-bottom: 50px; } #uc-cart-view-form table th{ height: 48px; border: 1px solid #00505f; padding: 15px; box-sizing: border-box; } #uc-cart-view-form table td{ height: 48px; border: 1px solid #00505f; padding: 15px; box-sizing: border-box; } .cart_before_checkout #edit-continue-shopping,.cart_before_checkout #edit-update,.cart_before_checkout #edit-checkout--2{ background: transparent; display: inline-block; border-radius: 15px; padding: 6px 25px; color: #000; border: 1px solid transparent; text-decoration: none; background: #00505f; color: #fff; margin: 0px !important; } /*cart*/ /*cart cehckout*/ #uc-cart-checkout-form{ width: 100%; max-width: 850px; display: block; margin: 0 auto; } #uc-cart-checkout-form #edit-cancel { float: left; background: transparent; display: inline-block; border-radius: 20px; padding: 6px 25px; color: #000; border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; text-decoration: none; border-color: #00505f; color: #484848; } #uc-cart-checkout-form #edit-continue{ background: transparent; display: inline-block; border-radius: 15px; padding: 6px 25px; color: #000; border: 1px solid transparent; text-decoration: none; background: #00505f; color: #fff; margin: 0px; } #uc-cart-checkout-form summary{ display: none; } #uc-cart-checkout-form details{ border: none; } #uc-cart-checkout-form table th{ height: 48px; border: 1px solid #00505f; padding: 15px; box-sizing: border-box; font-size: 20px; font-weight: bold; } #uc-cart-checkout-form table td{ height: 48px; border: 1px solid #00505f; padding: 15px; box-sizing: border-box; text-align: left; } #customer-pane { display: none; } #billing-pane { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 20px; border: 1px solid #00505f !important; border-radius: 10px 10px 0px 0px; padding: 10px 0px; } #edit-panes-billing { text-align: left; font-size: 16px; font-weight: normal; border-top: 1px solid #00505f; margin-top: 7px; } .uc-store-address-field .form-item label{ padding: 0px 10px; text-align: left; } .js-form-item.form-item.js-form-type-checkbox.form-item-panes-billing-0.js-form-item-panes-billing-0 { font-size: 16px; text-align: left; margin-left: 10px; } .uc-store-address-field .form-item input, .uc-store-address-field .form-item select { width: 100%; max-width: 320px; float: none; display: block; border-radius: 5px; box-shadow: none; border: 1px solid #aaa; height: 30px; padding: 0px 10px; } .image_holder-puser img{ cursor: pointer; } .image_holder-puser{ position: relative; } .image_holder-puser::after { cursor: pointer; position: absolute; content: "X"; top: -37px; left: 83%; color: red; font-weight: bold; z-index: 999; } .item_doc{ position: relative; float: left; } /* .item_doc:after{ cursor: pointer; position: absolute; content: "X"; top: 0px; left: 77%; color: red; font-weight: bold; z-index: 999; } */ #profileindex_page .item_doc i { text-align: center; width: 100%; font-size: 25px; position: relative; top: -8px; left: 5px; } #profileindex_page .item_doc > a:nth-child(1) { text-align: center; float: right; text-decoration: none; color: red; font-weight: bold; position: relative; top: -3px; right: -5px; } #profileindex_page .item_doc > a:nth-child(2) { float: left; width: 100%; } #uc-address-panes-billing-zone-wrapper .select2-container { box-sizing: border-box; display: inline-block; position: relative; vertical-align: middle; margin: 0 auto; float: none; } /*cart cehckout*/ .custom_register_page #edit-name{ display: none; } /*checkout review*/ .order-review-table { border: solid 1px #999; font-size: .9em; line-height: 1.4em; margin: auto; width: 100%; max-width: 1280px; margin: 20px auto 60px; } .order-review-table #edit-back,.order-review-table #edit-submit{ background: transparent; display: inline-block; border-radius: 15px; padding: 6px 25px; color: #000; border: 1px solid transparent; text-decoration: none; background: #00505f; color: #fff; margin: 0px 10px; } .order-review-table .pane-title-row td{ padding: 5px; font-weight: normal; font-size: 16px; } .order-review-table .title-col,.order-review-table .data-col{ width: 50%; padding: 10px; font-size: 15px; } .order-review-table .cart-review td{ padding: 10px; } .checkout_reviewpage h2{ text-align: center; font-size: 30px; font-weight: bold; margin-bottom: 60px; margin-top: 60px; color: #00505f; float: left; width: 100%; } /*checkout review*/ .stripe-block { text-align: center; margin-top: 30px; } .disabled-partner{ border: 1px solid red !important; } .item_doc { padding: 0px 10px 3px 0px; width: 70px; height: 50px; border: 1px solid #00505f; margin-right: 5px; border-radius: 5px; } .item_doc a{ text-align: center; } .item_doc a i { font-size: 34px; color: #000; margin: 0 auto; display: block; } .holder_documents { float: left; } #sendmessage_forchat .parsley-errors-list { float: left; width: 100%; position: absolute; } #rating_selected,#selected_dates{ height: 0px; width: 0px; visibility: hidden; border: 0px; padding: 0px; margin: 0px; } #rating_selected{ padding: 0px; } header .main .links a:nth-child(2) { margin-left: 20px; } #block-lucamatej-content { /*max-width: 1170px;*/ width: 100%; margin: 0px auto; display: block; } div[role="contentinfo"] ul { list-style: none; } #removefromfavorite i, #addtofavorite i{ position: relative; top: 3px; margin-left: 20px; cursor: pointer; color: #b93600; font-size: 20px; } .uc-payment-totals,.js-form-item.form-item.js-form-type-select.form-item-panes-billing-select-address.js-form-item-panes-billing-select-address, .uc-credit-form .field-suffix { display: none; } #edit-panes-payment-details-cc-number,#edit-panes-payment-details-cc-cvv{ float: none; display: block; border-radius: 5px; box-shadow: none; border: 1px solid #aaa; height: 30px; } .js-form-item.form-item.js-form-type-textfield.form-item-panes-payment-details-cc-cvv.js-form-item-panes-payment-details-cc-cvv { float: left; width: 100%; } #edit-panes-payment-details-cc-exp-month,#edit-panes-payment-details-cc-exp-year{ height: 30px; border: 1px solid #aaa; border-radius: 5px; } #resendvalidation h3 , #logoutcustom h3 { font-size: 30px; font-weight: normal; color: #00505f; margin: 0; margin-bottom: 60px; text-align: center; } #resendvalidation .container-small, #logoutcustom .container-small{ margin-bottom: 60px; text-align: center; } #resendvalidation .container-small a, #logoutcustom .container-small a{ font-weight: bold; text-decoration: underline; color: #00505f; } #resendvalidation .container-small input{ border: 1px solid #ebebeb; outline: none; padding: 18px 25px; width: 100%; background: none; text-indent: 0px; max-width: 320px; } #resendvalidation .container-small input[type="submit"]{ background: #00505f; color: #fff; width: 100%; max-width: 320px; box-shadow: none; border: none; border-radius: 50px; text-shadow: none; font-size: 18px; padding: 10px 26px; height: auto; margin-top: 20px; } p.forgot-password{ display: none; } #user-login-form .form-item, #user-pass .form-item{ padding: 0px; } .layout-content.custom_login_page { min-height: 373px; position: relative; float: left; width: 100%; } .layout-content.custom_login_page #custom_design-message-block{ top: 0px; } #coursecreate_page .setad { padding: 0px; } #coursecreate_page .input_file { float: left; max-width: 100%; width: 100%; margin: 0px 10px 0px 0px; } #coursecreate_page .input.is-file label{ width: 100%; max-width: 215px; } .uc-cart-empty { max-width: 1280px; text-align: center; margin: 0 auto; width: 100%; padding: 60px 0px; } .blog-page .main .content .article a{ text-decoration: none; color: #000; } .hpblogsection a{ text-decoration: none; } .linkcheckout{ color: #000; font-style: italic; } .custom_reset_password h2 { font-weight: normal; font-size: 30px; margin: 60px 0px; color: #00505f; text-align: center; } #editcourse_page input[type="file"] , #coursecreate_page input[type="file"] { display: block; } #editcourse_page .imageThumb , #profileindex_page .imageThumb , #userindex_page .imageThumb , #coursecreate_page .imageThumb { max-height: 75px; border: 2px solid; padding: 1px; cursor: pointer; } #editcourse_page .pip , #profileindex_page .pip , #userindex_page .pip , #coursecreate_page .pip { display: inline-block; margin: 0px 10px 10px 0; } #editcourse_page .remove , #profileindex_page .remove , #userindex_page .remove , #coursecreate_page .remove { display: block; background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; } #editcourse_page .remove:hover , #profileindex_page .remove:hover , #userindex_page .remove:hover , #coursecreate_page .remove:hover { background: white; color: black; } #coursecreate_page .profile-box .form-container .input-container .input.is-file. #editcourse_page .profile-box .form-container .input-container .input.is-file{ width: 100%; } /* #editcourse_page .image_preview { clear: both; float: left; } */ #editcourse_page .imageThumb_ex { max-height: 75px; border: 2px solid; padding: 1px; cursor: pointer; } #editcourse_page .pip_ex { display: inline-block; margin: 0px 10px 10px 0; } #editcourse_page .remove_ex { display: block; background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; } #editcourse_page .remove_ex:hover { background: white; color: black; } .ui-datepicker-today { color: #b93600; } .cd-checkboxes input{ float: left; margin-right: 5px; } .cd-checkboxes label{ float: left; width: 90%; } .cd-checkboxes{ float: left; } .order-review-table .cart-review { float: left; width: 100%; } .order-review-table .cart-review tbody td:nth-child(2) { text-align: left; } .order-review-table .cart-review thead th { float: left; padding: 10px; text-align: right; font-size: 15px; } .order-review-table .cart-review tbody td { font-size: 15px; float: left; width: 50% !important; display: table-row; } .order-review-table #edit-actions{ text-align: center; } .layout-container.custom_reset_password { float: left; width: 100%; position: relative; } .layout-container.custom_reset_password #custom_design-message-block{ top: 0px; } .layout-content.checkoutcompletepage { text-align: center; padding: 30px 0px; min-height: 400px; font-size: 18px; } #profileindex_page .pip i { font-size: 34px; text-align: center; margin: 0 auto; display: block; height: 20px; } #coursecreate_page .profile-box .form-container .input-container .input.is-file , #editcourse_page .profile-box .form-container .input-container .input.is-file { display: block; width: 100%; } .order-review-table .pane-title-row,.order-review-table .review-button-row { background-color: #fff; } .order-review-table .pane-title-row td{ height: 48px; border: 1px solid #00505f; padding: 15px; box-sizing: border-box; font-size: 20px; font-weight: bold; } .order-review-table,.order-review-table .review-button-row,.order-review-table .row-border-top{ border: 1px solid #00505f; } .order-review-table .cart-review tbody , .order-review-table .cart-review thead { float: left; width: 50%; text-align: right; } .order-review-table .cart-review tbody tr, .order-review-table .cart-review thead tr{ width: 100%; float: left; } .order-review-table .cart-review tbody tr, .order-review-table .cart-review thead tr{ width: 100%; float: left; } .order-review-table .cart-review tbody td:nth-child(2), .order-review-table .cart-review thead th:nth-child(2){ display: none; } .order-review-table .cart-review tbody td, .order-review-table .cart-review thead th{ width: 100% !important; } .order-review-table .cart-review tbody td:nth-child(1) { text-align: left; } .order-review-table #edit-back{ float: left; background: transparent; display: inline-block; border-radius: 20px; padding: 6px 25px; color: #000; border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; text-decoration: none; border-color: #00505f; color: #484848; } .order-review-table #edit-submit{ float: right; } #user-pass-reset #edit-actions #edit-submit { background: #00505f; border-radius: 20px; padding: 12px 47px; outline: none; border: 1px solid rgba(0, 80, 95, 0.5); color: #fff; margin-bottom: 20px; } #user-pass-reset { width: 100%; max-width: 1280px; margin: 60px auto; display: block; } .booking-box .content .description p { padding: 20px; background-color: #ffffff; border-radius: 10px; line-height: 1.6; } #coursedetails_page .row .col .datepicker_wrapper .multi-datepicker .ui-widget{ position: relative; } #coursedetails_page .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-header { position: relative; width: 100%; height: auto; background: none; box-sizing: border-box; } #coursedetails_page .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar { margin-top: 44px; } .cart-review tr:nth-child(1) td.subtotal-title { font-weight: normal; } .custom-message-validation{ position: relative; } .custom-message-validation .parsley-errors-list.filled { position: absolute; top: 53px; } .uc-credit-form label:after { content:"*"; color: red; font-weight: bold; margin-left: 5px; } .uc-credit-form label.form-required::after{ background: none; } #coursedetails_page .single.images { text-align: center; margin-bottom: 20px; } .hero .overlay .row .input .input-container input::placeholder, .hero .overlay .row .input .row .input-container input::placeholder, .select2-container--default .select2-selection--single .select2-selection__rendered, .search .filter .center .row .input-container input::placeholder, .search .filter .center .row .input-container input::placeholder { color:#000; opacity: 1; } .hero .overlay .row .input .input-container .select2.select2-container--focus.select2-container--default .select2-selection .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__rendered{ opacity: 1; color: #8e8e8e; } .favorite_icon { position: absolute; top: 5px; right: 10px; font-size: 20px; z-index: 999; } .favorite_icon i{ /* background: rgba(255,255,255,0.7);*/ padding: 3px; border-radius: 5px; color: #b93600; } #user-login-form .js-form-item.form-item.js-form-type-checkbox.form-item-persistent-login.js-form-item-persistent-login input { position: absolute; top: 8px; } #user-login-form .js-form-item.form-item.js-form-type-checkbox.form-item-persistent-login.js-form-item-persistent-login label { display: inline; font-size: 16px; margin-left: 16px; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: 1px solid #ccc; outline: 0; } /*dropjs*/ @-webkit-keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); } } @-moz-keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); } } @keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @-moz-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } #my-awesome-dropzone, #my-awesome-dropzone * { box-sizing: border-box; } #my-awesome-dropzone { min-height: 150px; border: 2px solid rgba(0, 0, 0, 0.3); background: white; padding: 20px 20px; } #my-awesome-dropzone.dz-clickable { cursor: pointer; } #my-awesome-dropzone.dz-clickable * { cursor: default; } #my-awesome-dropzone.dz-clickable .dz-message, #my-awesome-dropzone.dz-clickable .dz-message * { cursor: pointer; } #my-awesome-dropzone.dz-started .dz-message { display: none; } #my-awesome-dropzone.dz-drag-hover { border-style: solid; } #my-awesome-dropzone.dz-drag-hover .dz-message { opacity: 0.5; } #my-awesome-dropzone .dz-message { text-align: center; margin: 3em 0; } #my-awesome-dropzone .dz-preview { position: relative; display: inline-block; vertical-align: top; margin: 16px; min-height: 100px; } #my-awesome-dropzone .dz-preview:hover { z-index: 1000; } #my-awesome-dropzone .dz-preview:hover .dz-details { opacity: 1; } #my-awesome-dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 20px; background: #999; background: linear-gradient(to bottom, #eee, #ddd); } #my-awesome-dropzone .dz-preview.dz-file-preview .dz-details { opacity: 1; } #my-awesome-dropzone .dz-preview.dz-image-preview { background: white; } #my-awesome-dropzone .dz-preview.dz-image-preview .dz-details { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } #my-awesome-dropzone .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } #my-awesome-dropzone .dz-preview .dz-remove:hover { text-decoration: underline; } #my-awesome-dropzone .dz-preview:hover .dz-details { opacity: 1; } #my-awesome-dropzone .dz-preview .dz-details { z-index: 20; position: absolute; top: 0; left: 0; opacity: 0; font-size: 13px; min-width: 100%; max-width: 100%; padding: 2em 1em; text-align: center; color: rgba(0, 0, 0, 0.9); line-height: 150%; } #my-awesome-dropzone .dz-preview .dz-details .dz-size { margin-bottom: 1em; font-size: 16px; } #my-awesome-dropzone .dz-preview .dz-details .dz-filename { white-space: nowrap; } #my-awesome-dropzone .dz-preview .dz-details .dz-filename:hover span { border: 1px solid rgba(200, 200, 200, 0.8); background-color: rgba(255, 255, 255, 0.8); } #my-awesome-dropzone .dz-preview .dz-details .dz-filename:not(:hover) { overflow: hidden; text-overflow: ellipsis; } #my-awesome-dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { border: 1px solid transparent; } #my-awesome-dropzone .dz-preview .dz-details .dz-filename span, #my-awesome-dropzone .dz-preview .dz-details .dz-size span { background-color: rgba(255, 255, 255, 0.4); padding: 0 0.4em; border-radius: 3px; } #my-awesome-dropzone .dz-preview:hover .dz-image img { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); -webkit-filter: blur(8px); filter: blur(8px); } #my-awesome-dropzone .dz-preview .dz-image { border-radius: 20px; overflow: hidden; width: 120px; height: 120px; position: relative; display: block; z-index: 10; } #my-awesome-dropzone .dz-preview .dz-image img { display: block; } #my-awesome-dropzone .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } #my-awesome-dropzone .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } #my-awesome-dropzone .dz-preview .dz-success-mark, #my-awesome-dropzone .dz-preview .dz-error-mark { pointer-events: none; opacity: 0; z-index: 500; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; margin-top: -27px; } #my-awesome-dropzone .dz-preview .dz-success-mark svg, #my-awesome-dropzone .dz-preview .dz-error-mark svg { display: block; width: 54px; height: 54px; } #my-awesome-dropzone .dz-preview.dz-processing .dz-progress { opacity: 1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } #my-awesome-dropzone .dz-preview.dz-complete .dz-progress { opacity: 0; -webkit-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; -ms-transition: opacity 0.4s ease-in; -o-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } #my-awesome-dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; -moz-animation: pulse 6s ease infinite; -ms-animation: pulse 6s ease infinite; -o-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } #my-awesome-dropzone .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; height: 16px; left: 50%; top: 50%; margin-top: -8px; width: 80px; margin-left: -40px; background: rgba(255, 255, 255, 0.9); -webkit-transform: scale(1); border-radius: 8px; overflow: hidden; } #my-awesome-dropzone .dz-preview .dz-progress .dz-upload { background: #333; background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; -webkit-transition: width 300ms ease-in-out; -moz-transition: width 300ms ease-in-out; -ms-transition: width 300ms ease-in-out; -o-transition: width 300ms ease-in-out; transition: width 300ms ease-in-out; } #my-awesome-dropzone .dz-preview.dz-error .dz-error-message { display: block; } #my-awesome-dropzone .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } #my-awesome-dropzone .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; position: absolute; display: block; display: none; opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; border-radius: 8px; font-size: 13px; top: 130px; left: -10px; width: 140px; background: #be2626; background: linear-gradient(to bottom, #be2626, #a92222); padding: 0.5em 1.2em; color: white; } #my-awesome-dropzone .dz-preview .dz-error-message:after { content: ''; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } #my-awesome-dropzone { margin-bottom: 30px; font-size: 14px; color: #9a9a9a; border: 1px solid #ccc; } box-sizing: border-box; } #my-awesome-dropzone-edit { min-height: 150px; border: 2px solid rgba(0, 0, 0, 0.3); background: white; padding: 20px 20px; } #my-awesome-dropzone-edit.dz-clickable { cursor: pointer; } #my-awesome-dropzone-edit.dz-clickable * { cursor: default; } #my-awesome-dropzone-edit.dz-clickable .dz-message, #my-awesome-dropzone-edit.dz-clickable .dz-message * { cursor: pointer; } #my-awesome-dropzone-edit.dz-started .dz-message { display: none; } #my-awesome-dropzone-edit.dz-drag-hover { border-style: solid; } #my-awesome-dropzone-edit.dz-drag-hover .dz-message { opacity: 0.5; } #my-awesome-dropzone-edit .dz-message { text-align: center; margin: 3em 0; } #my-awesome-dropzone-edit .dz-preview { position: relative; display: inline-block; vertical-align: top; margin: 16px; min-height: 100px; } #my-awesome-dropzone-edit .dz-preview:hover { z-index: 1000; } #my-awesome-dropzone-edit .dz-preview:hover .dz-details { opacity: 1; } #my-awesome-dropzone-edit .dz-preview.dz-file-preview .dz-image { border-radius: 20px; background: #999; background: linear-gradient(to bottom, #eee, #ddd); } #my-awesome-dropzone-edit .dz-preview.dz-file-preview .dz-details { opacity: 1; } #my-awesome-dropzone-edit .dz-preview.dz-image-preview { background: white; } #my-awesome-dropzone-edit .dz-preview.dz-image-preview .dz-details { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } #my-awesome-dropzone-edit .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } #my-awesome-dropzone-edit .dz-preview .dz-remove:hover { text-decoration: underline; } #my-awesome-dropzone-edit .dz-preview:hover .dz-details { opacity: 1; } #my-awesome-dropzone-edit .dz-preview .dz-details { z-index: 20; position: absolute; top: 0; left: 0; opacity: 0; font-size: 13px; min-width: 100%; max-width: 100%; padding: 2em 1em; text-align: center; color: rgba(0, 0, 0, 0.9); line-height: 150%; } #my-awesome-dropzone-edit .dz-preview .dz-details .dz-size { margin-bottom: 1em; font-size: 16px; } #my-awesome-dropzone-edit .dz-preview .dz-details .dz-filename { white-space: nowrap; } #my-awesome-dropzone-edit .dz-preview .dz-details .dz-filename:hover span { border: 1px solid rgba(200, 200, 200, 0.8); background-color: rgba(255, 255, 255, 0.8); } #my-awesome-dropzone-edit .dz-preview .dz-details .dz-filename:not(:hover) { overflow: hidden; text-overflow: ellipsis; } #my-awesome-dropzone-edit .dz-preview .dz-details .dz-filename:not(:hover) span { border: 1px solid transparent; } #my-awesome-dropzone-edit .dz-preview .dz-details .dz-filename span, #my-awesome-dropzone-edit .dz-preview .dz-details .dz-size span { background-color: rgba(255, 255, 255, 0.4); padding: 0 0.4em; border-radius: 3px; } #my-awesome-dropzone-edit .dz-preview:hover .dz-image img { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); -webkit-filter: blur(8px); filter: blur(8px); } #my-awesome-dropzone-edit .dz-preview .dz-image { border-radius: 20px; overflow: hidden; width: 120px; height: 120px; position: relative; display: block; z-index: 10; } #my-awesome-dropzone-edit .dz-preview .dz-image img { display: block; } #my-awesome-dropzone-edit .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } #my-awesome-dropzone-edit .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } #my-awesome-dropzone-edit .dz-preview .dz-success-mark, #my-awesome-dropzone-edit .dz-preview .dz-error-mark { pointer-events: none; opacity: 0; z-index: 500; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; margin-top: -27px; } #my-awesome-dropzone-edit .dz-preview .dz-success-mark svg, #my-awesome-dropzone-edit .dz-preview .dz-error-mark svg { display: block; width: 54px; height: 54px; } #my-awesome-dropzone-edit .dz-preview.dz-processing .dz-progress { opacity: 1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } #my-awesome-dropzone-edit .dz-preview.dz-complete .dz-progress { opacity: 0; -webkit-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; -ms-transition: opacity 0.4s ease-in; -o-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } #my-awesome-dropzone-edit .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; -moz-animation: pulse 6s ease infinite; -ms-animation: pulse 6s ease infinite; -o-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } #my-awesome-dropzone-edit .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; height: 16px; left: 50%; top: 50%; margin-top: -8px; width: 80px; margin-left: -40px; background: rgba(255, 255, 255, 0.9); -webkit-transform: scale(1); border-radius: 8px; overflow: hidden; } #my-awesome-dropzone-edit .dz-preview .dz-progress .dz-upload { background: #333; background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; -webkit-transition: width 300ms ease-in-out; -moz-transition: width 300ms ease-in-out; -ms-transition: width 300ms ease-in-out; -o-transition: width 300ms ease-in-out; transition: width 300ms ease-in-out; } #my-awesome-dropzone-edit .dz-preview.dz-error .dz-error-message { display: block; } #my-awesome-dropzone-edit .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } #my-awesome-dropzone-edit .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; position: absolute; display: block; display: none; opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; border-radius: 8px; font-size: 13px; top: 130px; left: -10px; width: 140px; background: #be2626; background: linear-gradient(to bottom, #be2626, #a92222); padding: 0.5em 1.2em; color: white; } #my-awesome-dropzone-edit .dz-preview .dz-error-message:after { content: ''; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } #my-awesome-dropzone-edit { margin-bottom: 30px; font-size: 14px; color: #9a9a9a; border: 1px solid #ccc; } .ui-widget-content .ui-state-highlight { background: #b93600; } .hero p { margin: 0px; } .datepicker_wrapper .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td { border: 1px solid #fff; } #my-awesome-dropzone .dz-preview .dz-remove, #my-awesome-dropzone .dz-preview .dz-remove:hover, #my-awesome-dropzone-edit .dz-preview .dz-remove, #my-awesome-dropzone-edit .dz-preview .dz-remove:hover { margin-top: 3px; text-decoration: none; color: #b93600; font-weight: 600; } .setad .form-container .input-container .select2-selection--multiple input.select2-search__field { border: 0; padding-top:0; padding-bottom: 0; padding-left: 1px; padding-right: 1px; margin-left: -5px; } .select2-container .select2-search--inline { float: none; } .select2-container--default .select2-selection--multiple { border-radius: 0; padding: 0; } #coursecreate_page .select2-container--default .select2-selection--multiple, #editcourse_page .select2-container--default .select2-selection--multiple { min-height: 55px; } .course-detail .tabs .tab-handles a { margin-right: 0px; min-width: 16.666%; text-align: center; margin-left: 10px; } .course-detail .tab-content.bewertungen.profile-box .rating{ margin-top: 0px; } .js-form-item.form-item.js-form-type-checkbox.form-item-persistent-login.js-form-item-persistent-login { max-width: 375px; margin: 1em auto; text-align: left; position: relative; } #coursedetails_page .tab-content.bewertungen.profile-box { border: none; padding: 10px; } .custom-system-404 #block-lucamatej-content { max-width: 1170px; margin: 0 auto; padding: 40px 0px; } #block-hpbackgroundimageforsearch{ float: left; width: 100%; height: 100%; position: absolute; border-radius: 0 !important; } #block-hpbackgroundimageforsearch img { float: left; width: 100%; height: 100%; position: static; border-radius: 0 !important; } #block-hpbackgroundimageforsearch, #block-hpbackgroundimageforsearch * { border-radius: 0 !important; clip-path: none !important; overflow: visible !important; mask-image: none !important; -webkit-mask-image: none !important; } .uc-credit-form label{ width: 175px; padding-top: 0px; } #edit-panes-payment-details-cc-number, #edit-panes-payment-details-cc-cvv{ float: left; } .js-form-item.form-item.js-form-type-textfield.form-item-panes-payment-details-cc-number.js-form-item-panes-payment-details-cc-number { float: left; width: 100%; } .section_data_select { float: left; width: 100%; margin-top: 10px; } .section_data_select .input.is-datepicker { float: left; width: 35% !important; } .section_data_select span { float: left; width: 20% !important; } .section_data_select span { float: right; width: 20% !important; padding: 11px 0px; box-sizing: border-box; border: 1px solid #000; text-align: center; border-radius: 10px; cursor: pointer; } .klarna-frame-payment{ float: left; width:100%; padding: 40px 0px; } .klarna-frame-payment .holder-block{ max-width: 500px; width: 100%; border: 1px solid #dedede; border-radius: 5px; margin: 0px auto; padding: 20px; height: 175px; } .klarna-frame-payment .holder-block a { display: inline; width: 33.3333%; float: left; text-align: center; text-decoration: none; } .klarna-frame-payment .holder-block a span { background: #000; color: #fff; padding: 0px 10px 3px; border-radius: 4px; } .klarna-frame-payment .holder-block a span:hover{ background: #dedede; color:#000; } .klarna-frame-payment .holder-block img { max-width: 200px; width: 100%; margin: 0 auto; display: block; } .klarna-frame-payment .holder-block .button-holder{ float: left; width: 100%; margin-top: 30px; } .klarna-frame-payment.giropay .holder-block a{ float: none; width: 100%; margin: 0 auto; display: block; } .klarna-frame-payment.giropay .holder-block{ height: 195px; } #validation_bilder_uploadfiles { visibility: hidden; height: 1px; padding: 0px; } .custom-section-one-page, .custom-section-two-page, .custom-section-three-page, .custom-section-four-page, .custom-section-five-page, .custom-section-six-page, .custom-section-seven-page, .custom-section-eight-page{ position: relative; } .custom-section-one-page .article-title, .custom-section-two-page .article-title, .custom-section-three-page .article-title, .custom-section-four-page .article-title, .custom-section-five-page .article-title, .custom-section-six-page .article-title, .custom-section-seven-page .article-title, .custom-section-eight-page .article-title{ margin-bottom: 30px; margin-top: 20px; } .custom-section-one-page .imagesection-holder,.custom-section-four-page .section-text-holder { float: left; width: 100%; margin-top: 30px; margin-bottom: 30px; } .item-class-image,.item-text-holder { display: block; width: 33.3333%; float: left; text-align: center; } .item-text-holder{ padding: 30px; } .item-class-image img { width: auto; float: none; margin: 0 auto; } .item-class-image:nth-child(2) img{ float: left; width: 100%; } .text-holder { border: 1px solid #00505f; border-radius: 10px; padding: 15px; text-align: left; float: left; width: 100%; min-height: 220px; } .item-text-holder .title { font-size: 24px; color: #00505f; margin-bottom: 10px; float: left; width: 100%; height: 70px; } .custom-section-five-page .partners-slider .slide .title { display: block; text-align: center; font-weight: bold; margin-bottom: 15px; font-size: 18px; height: 31px; } .custom-section-five-page .partners-slider .slide a { color: #000; text-decoration: none; } .custom-section-five-page .partners-slider.owl-carousel .owl-nav .owl-prev::after { content: '\f0d9'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .custom-section-five-page .partners-slider.owl-carousel .owl-nav .owl-prev { outline: none; position: absolute; top: 50%; left: 0px; transform: translate(0, -50%); } .custom-section-five-page .partners-slider.owl-carousel .owl-nav .owl-next::after { content: '\f0da'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color: #85adb2; } .custom-section-five-page .partners-slider.owl-carousel .owl-nav .owl-next { outline: none; position: absolute; top: 50%; right: 0px; transform: translate(0, -50%); } .custom-section-five-page .partners-slider.owl-carousel .owl-nav.disabled { display: block; } .custom-section-five-page .partners-slider.owl-carousel .owl-nav .owl-next span , .custom-section-five-page .partners-slider.owl-carousel .owl-nav .owl-prev span { display: none; } .custom-section-five-page .partners-slider .slide { padding-bottom: 2px; padding-left: 2px; padding-right: 2px; } .custom-section-five-page .partners-slider .slide a { text-decoration: none; color: #000; } .custom-section-five-page .partners-slider .slide img { width: 100%; display: block; border-radius: 10px 10px 10px 10px; border: 1px solid #ebebeb; } .custom-section-five-page .partners-slider .slide a { text-decoration: none; color: #000; } .custom-section-five-page .partners-slider { padding: 0 45px; } .custom-section-six-page .container-deescription-text { text-align: center; } .custom-section-seven-page .item-text-holder-fullwidth { padding: 0px 30px; } .custom-section-seven-page .item-text-holder-fullwidth .text-holder{ min-height: auto; } .custom-section-seven-page .item-text-holder .text-holder{ min-height: 400px; } .custom-section-seven-page .item-text-holder .title{ height: auto; } .about .container{ position: relative; } .about { max-height: 320px; position: relative; margin-bottom: 59px; } .about .about-bg { max-height: 320px; display: block; object-fit: cover; width: 100%; } .about .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .about .overlay .container { display: flex; flex-direction: row; height: 320px; } .about .overlay .container .col h2 { margin: 0; color: #fff; font-size: 30px; font-weight: bold; } .about .overlay .container .col p { font-size: 18px; color: #fff; } .about .overlay .container .col a { display: block; color: #fff; margin-bottom: 32px; } .about .overlay .container .col a:last-child { margin-bottom: 0; } .about .overlay .container .col .input input[type="text"] { background: rgba(255, 255, 255, 0.5); border: none; border-radius: 15px 0 0 15px; outline: none; font-size: 16px; color: #fff; padding: 19px 23px; width: 49.27273%; } .about .overlay .container .col .input input[type="text"]::placeholder { color: #fff; } .about .overlay .container .col .input input[type="submit"] { font-size: 16px; color: #fff; background: rgba(0, 80, 95, 0.8); padding: 19px 23px; margin-left: -7px; border: none; outline: none; border-radius: 0 15px 15px 0; width: 27.45455%; } .about .overlay .container .col:first-child { width: 26.5625%; } .about .overlay .container .col:first-child img { width: 100%; } .about .overlay .container .col:nth-child(2) { width: 47.8125%; margin-top: 33px; } .about .overlay .container .col:last-child { flex-grow: 1; text-align: right; font-size: 30px; padding-top: 46px; } .about .overlay .container .col.follow-us:first-child { width: 63.28125%; align-self: center; } .about .overlay .container .col.follow-us:first-child a { display: inline; margin-right: 32px; font-size: 30px; } .about .overlay .container .col.follow-us:last-child { align-self: center; margin: 0; padding: 0; } .about.page-content .col1 { float: left; clear: none; text-align: inherit; width: 74.41406%; margin-left: 0%; margin-right: 2.34375%; } .about.page-content .col1::after { content: ''; display: table; clear: both; } .about.page-content .col1:last-child { margin-right: 0%; } .about.page-content .col1 h2 { margin-top: 30px; text-align: center; color: #fff; margin-bottom: 44px; font-weight: normal; font-size: 30px; } .about.page-content .col1 .row { display: flex; flex-direction: row; flex-wrap: wrap; } .about.page-content .col1 .row .item { text-align: center; flex-grow: 1; color: #fff; } .about.page-content .col1 .row .item img { display: block; max-width: 100%; width: auto; margin: 0 auto; margin-bottom: 0px; max-height: 108px; } .about.page-content .col2 { float: left; clear: none; text-align: inherit; width: 23.24219%; margin-left: 0%; margin-right: 2.34375%; } .about.page-content .col2::after { content: ''; display: table; clear: both; } .about.page-content .col2:last-child { margin-right: 0%; } .about.page-content .col2 img { max-width: 100%; width: auto; } .about.page-content2 { min-height: 600px; } .about.page-content2 .about-bg { min-height: 600px; width: 100%; object-fit: cover; } .about.page-content2 .col1::after { content: ''; display: table; clear: both; } .about.page-content2 .col1 { float: left; clear: none; text-align: inherit; width: 65.88542%; margin-left: 0%; margin-right: 2.34375%; } .about.page-content2 .col1 .row { margin-top: 25px; display: flex; flex-direction: row; } .about.page-content2 .col1 .row .item { margin-right: 25px; display: flex; flex-direction: column; } .about.page-content2 .col1 .row .item .border { border: 5px solid #b93600; border-radius: 15px; padding: 16px 9px; color: #fff; flex-grow: 1; display: flex; flex-direction: column; } .about.page-content2 .col1 .row .item .border .title { text-align: center; font-size: 30px; } .about.page-content2 .col1 .row .item .border .subtitle1 { display: block; text-align: center; margin-bottom: 0px; } .about.page-content2 .col1 .row .item .border { color: #fff; } .about.page-content2 .col2::after { content: ''; display: table; clear: both; } .about.page-content2 .col2:last-child { margin-right: 0%; } .about.page-content2 .col2 { float: left; clear: none; text-align: inherit; width: 31.77083%; margin-left: 0%; margin-right: 2.34375%; align-self: flex-end; } .about.page-content2 .col2 img { max-width: 100%; width: auto; } .page-inner { color: #fff; } .about.page-content2 .col1 .row .item .border ul li { line-height: 18px !important; } .about.page-content2 .container { display: flex; flex-direction: row; flex-wrap: wrap; } .about.page-content2.page-content-image-preserve { min-height: 600px; } .about.page-content2.page-content-image-preserve .about-bg { min-height: 600px; } .about.page-content2 .about-bg { min-height: 500px; width: 100%; object-fit: cover; } .about.page-content2.page-content-image-preserve .container { height: auto; } .about.page-content2 .col-single::after { content: ''; display: table; clear: both; } .about.page-content2 .col-single { float: left; clear: none; text-align: inherit; width: 40.29948%; margin-left: 0%; margin-right: 2.34375%; margin-left: auto; } .about.page-content2 .col-single:last-child { margin-right: 0%; } .about.page-content2 .col-single .triangle { background: url("../images/triangle.png") no-repeat center center; background-size: auto; box-sizing: border-box; background-size: contain; min-height: 145px; text-align: center; padding-top: 50px; color: #fff; margin-top: 38px; margin-bottom: 25px; } .about.page-content2 .col-single .row { margin-top: 25px; display: flex; flex-direction: row; margin-bottom: 25px; } .about.page-content2 .col-single .row .item { margin-right: 25px; display: flex; flex-direction: column; flex-grow: 1; } .about.page-content2 .col-single .row .item .border { border: 5px solid #b93600; border-radius: 15px; padding: 27px 9px; color: #fff; flex-grow: 1; display: flex; flex-direction: column; } .about.page-content2 .col-single .row .item .border .title { text-align: center; font-size: 30px; } .about.page-content2 .col-single .box-single { border: 5px solid #b93600; border-radius: 15px; padding: 27px 9px; color: #fff; } .about.page-content2 .col-single .row .item .border .subtitle { display: block; text-align: center; flex-grow: 1; } .about.page-content2 .col-single .row .item:last-child { margin-right: 0; } .about.page-content2 .col-single .row .item .border ul li{ font-size: 14px; } .about.page-content2.page-content-image-preserve { min-height: 600px; margin-top: 30px; margin-bottom: 0px; overflow: hidden; max-width: 1920px; margin: 30px auto 0px; } .custom-section-two-page.page-content, .about.page-content2{ overflow: hidden; } .about.page-content .about-bg { height: 300px; } .about.page-content > img, .about.page-content2 > img, .about.page-content2.page-content-image-preserve > img { width: 100%; } .about.page-content2 > img { height: 600px; width: 100%; } .about.page-content,.about.page-content2 { max-width: 1920px; margin: 0 auto 30px; } .register .form-container .input-container.action-form .patner-register-btn.button.blue { max-width: 240px; margin-top: 20px; } /*calendar design*/ .header_data th, .content_appoiments td { border: 1px solid black; padding: 10px 20px; } .content_appoiments td{ } #customtable_kalendar { background: #fff; padding: 10px; float: left; } #custom_calendar_load .monthdata span, #custom_calendar_load .weekdata span{ width: 33.3333%; text-align: center; float: left; } #custom_calendar_load .currentmonth { color: #b93600; } /*calendar design*/ .modal-appointment-calendar input{ width: 100%; border-radius: 5px; float: left; border: 1px solid #d9d9d9; height: 31px; margin: 5px 0px; padding: 0px 5px; font-size: 16px; } .modal-appointment-calendar textarea{ width: 100%; border-radius: 5px; float: left; border: 1px solid #d9d9d9; margin: 5px 0px; padding: 0px 5px; font-size: 16px; } .modal-appointment-calendar { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; width: 100%; max-width: 530px; padding: 20px 40px; z-index: 9999; border-radius: 7px; } .modal-appointment-calendar input::placeholder , .modal-appointment-calendar textarea::placeholder { color: #00505f; font-size: 16px; } .modal-appointment-calendar .closepvt , .modal-appointment-calendar .closepub , .modal-appointment-calendar .close { float: right; font-weight: bold; border-radius: 50%; padding: 0px 6px; line-height: 19px; cursor: pointer; } .content_appoiments td.appointment.private{ background: #C4BD04; color: #fff; cursor:pointer; } .content_appoiments td.appointment.public{ background: #00505f; color: #fff; cursor:pointer; } .button.empty { background: #00505f; border: 1px solid #00505f; } .content_appoiments td.free.selected { background: #fd8c8c; } .button.hollow{ color: #00505f; } #mycalendar_page .container { margin: 20px auto 50px; width: 100%; text-align: center; display: block; } /*calendar coursedetails*/ .content_appoiments td p { padding: 0px; margin: 0px; } .content_appoiments td p { padding: 0px; margin: 0px; max-height: 30px; overflow: hidden; } .header_data th, .content_appoiments td{ max-width: 70px; width: 70px ; font-size: 12px; overflow: hidden; padding: 0px; text-align: center; height: 40px; max-height: 40px; border:none; font-weight: normal; border-radius: 5px; } .header_data th .design_cell_header { border: 1px solid #00505f; float: left; width: 100%; height: 100%; } .header_data th{ border-radius: 0px; } .design_cell { float: left; width: 100%; height: 100%; display: block; border-radius: 5px; border: 1px solid #00505f; box-sizing: border-box; } .header_data th .design_cell_header { border-top: 1px solid #00505f; border-bottom: 1px solid #00505f; border-left: 0px; border-right: 0px; } .header_data th:nth-child(1) .design_cell_header { border:none; color: transparent; } .header_data th:nth-child(2) .design_cell_header { border-left: 1px solid #00505f; border-radius: 5px 0px 0px 5px; } .header_data th:nth-child(8) .design_cell_header { border-right: 1px solid #00505f; border-radius: 0px 5px 5px 0px; } .content_appoiments td:nth-child(1) .design_cell{ border:none; } /*calendar coursedetails*/ /*calendar createcourse*/ /*calendar createcourse*/ /*calendar mycalendar*/ #mycalendar_page .header_data th, #mycalendar_page .content_appoiments td{ max-width: 100px; width: 100px; } #mycalendar_page #custom_calendar_load{ float: right; max-width: 100%; width: 100%; } .kalendar_sections { float: left; width: 100%; } .kalendar_sections .left{ max-width: 33%; width: 100%; float: left; text-align: left; } .kalendar_sections .left .button{ margin: 10px 0px 0px 0px; cursor: pointer; } .kalendar_sections .right{ max-width: 65%; width: 100%; float: right; } .kalendar_sections .number_of_the_week{ width: 100%; max-width: 200px; } /*calendar mycalendar*/ .title_kalendar { padding: 20px 0px 5px; float: left; width: 100%; color: #b93600; } .kalendar_sections .select2.select2-container--focus.select2-container--default .select2-selection .select2-selection__rendered, .kalendar_sections .select2-container--default .select2-selection--single .select2-selection__rendered{ color: #000; text-align: center; } .elements.private i{ color:#C4BD04; } .elements.public i{ color:#00505f; } .monthdata span i, .weekdata span i{ cursor: pointer; } .favourites-box { background: #fff; border: 2px solid #00505f; border-radius: 10px; max-width: 960px; padding: 5px 20px; } .favourites-box .subtitle{ float: left; width: 100%; } .favourites-box .slide{ width: 30%; margin: 0px 10px 15px; } .overlay_image_hp_search { float: left; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; z-index: 9; } .hero .overlay { position: absolute; height: 600px; top: 0; width: 100%; padding-top: 56px; z-index: 99; } input[type="submit"]{ -webkit-box-sizing: revert; -moz-box-sizing: revert; box-sizing: revert; } #coursedetails_page .profile-box { background: #fff; } .button.empty.blue { background: #00505f; color: #fff; } #mycalendar_page #custom_calendar_load { float: right; max-width: 100%; width: 100%; height: 492px; overflow-y: scroll; } #coursedetails_page #custom_calendar_load { height: 492px; overflow-y: scroll; } .modal-appointment-calendar input, .modal-appointment-calendar textarea{ color: #000; } .modal-appointment-calendar{ text-align: left; color: #868686; } .modal-appointment-calendar form input[type="submit"]{ margin: 0 auto; float: none; width: 100%; max-width: 200px; display: block; } .modal-appointment-calendar form { float: left; width: 100%; } .overlay-appointmentbubblepub, .overlay-appointmentbubblepvt, .overlay-appointmentbubble { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(0,0,0,0.4); display: none; z-index: 9; } #custom_previewappointmentpub .title , #custom_previewappointmentpvt .title , #custom_calendar_appointment .title { float: left; width: 100%; text-align: center; color: #000; } #coursesbooked_page .booking-box .action { padding: 51px 30px; } #coursecreate_page #custom_calendar_load .monthdata, #coursecreate_page #custom_calendar_load .weekdata { float: right; width: 88%; } #coursecreate_page #custom_calendar_load { overflow-y: scroll; max-height: 572px; } #coursecreate_page #customtable_kalendar{ width: 100%; } #custom_calendar_load .monthdata, #custom_calendar_load .weekdata { float: right; width: 88%; } .mobilelinkdisplay{ display: none; } /* #editcourse_page .holder-image.single-image .pip{ float: left; clear: both; } */ .hero-wrapper { position: relative; display: inline-block; width: 100%; } .hero { width: 100%; border-radius: 0px; display: block; } .partner_owner-overlay { position: absolute; bottom: 15px; left: 15px; width: 80px; height: 80px; object-fit: cover; border-radius: 50%; border: 3px solid white; background-color: white; box-shadow: 0 0 8px rgba(0,0,0,0.2); } .course-info-box { border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; text-align: center; margin: 30px 0; background: #f9f9f9; box-shadow: 0 0 10px rgba(0,0,0,0.05); } .course-info-box .line { margin-bottom: 12px; } .course-info-box .title { display: block; font-weight: bold; color: #333; } .course-info-box .content { display: block; color: #555; } .course-info-box-white { border: 2px solid black; border-radius: 12px; padding: 25px; margin: 40px 0; background: white; } .course-info-box-white .line { margin-bottom: 15px; font-size: 1.2rem; } .course-info-box-white .title { font-weight: 600; display: block; color: #000; margin-bottom: 4px; } .course-info-box-white .content { font-weight: 400; color: #000000; } .description-plain { padding: 10px 5px; font-size: 1.2rem; line-height: 1.6; color: #000000; } .rating-wrapper-centered { display: flex; justify-content: center; margin: 15px 0; } .stars-heart-group { display: flex; align-items: center; gap: 10px; } .stars { font-size: 1.2rem; color: #f5b301; /* Goldgelb */ } .favorite i { font-size: 1.5rem; color: #e14d4d; /* Herzfarbe */ cursor: pointer; transition: transform 0.2s ease; } .favorite i:hover { transform: scale(1.2); } .cta-button-container { margin-top: 40px; text-align: center; } .cta-button { background-color: #007acc; color: white; font-size: 1.4rem; padding: 20px 40px; border-radius: 12px; font-weight: bold; display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; box-shadow: 0 6px 12px rgba(0,0,0,0.1); } .cta-button:hover { background-color: #005fa3; transform: translateY(-2px); } .cta-button-container { margin-top: 50px; text-align: center; } .cta-button { background-color: #007acc; color: white; font-size: 1.4rem; padding: 20px 40px; border-radius: 12px; font-weight: bold; display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; box-shadow: 0 6px 12px rgba(0,0,0,0.1); } .cta-button:hover { background-color: #005fa3; transform: translateY(-2px); } .video-wrapper { display: flex; justify-content: center; padding: 0 15px; /* etwas Abstand links/rechts auf Mobilgeräten */ margin-bottom: 20px; } .responsive-video { position: relative; width: 100%; max-width: 800px; /* maximale Breite auf Desktop */ aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .responsive-video iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0; } .image_holders_horizontal { display: flex; flex-direction: row; gap: 0; border-radius: 10px; overflow: hidden; margin-bottom: 20px; border: 2px solid black; } .logo-left { width: 30%; object-fit: cover; background: white; } .hero-right { width: 100%; object-fit: cover; } @media (max-width: 768px) { .image_holders_horizontal { flex-wrap: nowrap; /* verhindert Zeilenumbruch */ } .logo-left { width: 40%; max-width: 120px; height: auto; } .hero-right { max-height: 300px; height: auto; } } /* Basis-Layout */ #kalendra-calendar { max-width: 900px; margin: 40px auto; background: #f7fdfb; border-radius: 12px; box-shadow: 0 0 20px rgba(34, 94, 78, 0.2); padding: 20px; font-family: 'Segoe UI', sans-serif; } /* FullCalendar Header */ .fc .fc-toolbar-title { color: #225e4e; font-size: 24px; font-weight: bold; } .fc .fc-button { background-color: #82b29a; border: none; border-radius: 6px; padding: 8px 14px; color: white; transition: background-color 0.3s ease; } .fc .fc-button:hover { background-color: #6da98a; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background-color: #5a9b79; } .fc .fc-daygrid-day-number { color: #2f4f4f; font-weight: bold; } /* Pflanzenakzente */ #kalendra-calendar::before { content: ""; position: absolute; top: -30px; left: -40px; width: 100px; height: 100px; background-image: url('/themes/lara/images/leaf-left.png'); background-size: contain; background-repeat: no-repeat; opacity: 0.2; } #kalendra-calendar::after { content: ""; position: absolute; bottom: -30px; right: -40px; width: 100px; height: 100px; background-image: url('/themes/lara/images/leaf-right.png'); background-size: contain; background-repeat: no-repeat; opacity: 0.2; } /* Zellen und Events */ .fc-daygrid-day { background-color: #ffffff; border-radius: 6px; padding: 5px; } .fc-event { background-color: #a5d6c0; border: none; color: #1a3c34; padding: 2px 6px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .kalendra-calendar-wrapper { max-width: 1100px; margin: 0 auto; padding: 40px 20px; background: url('/themes/kalendra/images/leaves-bg.svg') no-repeat center top; background-size: cover; border-radius: 16px; box-shadow: 0 0 20px rgba(0,0,0,0.1); color: #2d3a28; font-family: 'Segoe UI', sans-serif; } #kalendra-calendar { background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 20px; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); } .fc .fc-toolbar-title { font-size: 1.5rem; color: #3b5229; font-weight: bold; } .fc .fc-button { background-color: #a2c379; border-color: #8cb96b; color: #fff; border-radius: 6px; padding: 6px 12px; } .fc .fc-button:hover { background-color: #8cb96b; } .fc .fc-daygrid-event, .fc .fc-timegrid-event { background-color: #bfdcaa; border: 1px solid #8cb96b; color: #2d3a28; border-radius: 4px; font-size: 0.9rem; } .fc .fc-col-header-cell-cushion { color: #3b5229; font-weight: 600; } .kalendra-wrapper { max-width: 1000px; margin: 0 auto; padding: 30px 20px; background: linear-gradient(to bottom right, #edf6f3, #f9f7f1); border-radius: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.1); font-family: 'Helvetica Neue', sans-serif; } .kalendra-heading { font-size: 28px; margin-bottom: 25px; color: #355e3b; text-align: center; font-weight: 600; } .kalendra-calendar-container { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 10px; } .kalendra-no-calendar { text-align: center; padding: 20px; background: #fffaf2; border: 2px dashed #d1cfc9; border-radius: 12px; } .kalendra-button { display: inline-block; margin-top: 15px; padding: 10px 20px; background: #7bb274; color: white; text-decoration: none; border-radius: 8px; font-weight: bold; transition: background 0.3s ease; } .kalendra-button:hover { background: #659f61; } .kalendra-verkaufsartikel { max-width: 800px; margin: 4rem auto; background: #faf9f7; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 16px rgba(0,0,0,0.08); font-family: 'Segoe UI', sans-serif; color: #333; } .verkaufsartikel-rahmen { display: flex; flex-direction: column; gap: 2rem; } .bildbereich img { max-width: 100%; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .infobereich { text-align: left; } .artikel-titel { font-size: 2rem; margin-bottom: 1rem; color: #222; } .artikel-beschreibung { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1rem; } .artikel-preis { font-size: 1.4rem; font-weight: bold; color: #00796b; margin-bottom: 0.5rem; } .artikel-kontakt { font-size: 1rem; background: #efefef; padding: 0.75rem; border-radius: 6px; } .verkaufsartikel-start { text-align: center; padding: 40px; } .upload-field { display: block; margin: 20px auto; } .cta-button { background: linear-gradient(to right, #f97316, #facc15); border: none; padding: 15px 30px; font-size: 18px; color: white; border-radius: 12px; cursor: pointer; } .cta-button { display: inline-block; background-color: #f08c00; color: #fff; padding: 14px 30px; font-size: 18px; font-weight: 600; border-radius: 10px; text-align: center; transition: background-color 0.3s ease; text-decoration: none; } .cta-button:hover { background-color: #d97706; } .upload-label { font-weight: bold; margin-bottom: 10px; display: block; font-size: 1.1em; } .kalendra-sell-view .product-card { max-width: 700px; margin: 40px auto; padding: 30px; background: #fff; border-radius: 2xl; box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); font-family: "Open Sans", sans-serif; } .product-title { font-size: 1.8em; margin-bottom: 20px; text-align: center; } .product-image img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 16px; margin-bottom: 20px; } .product-description { font-size: 1.1em; color: #444; margin-bottom: 20px; } .product-price { font-size: 1.2em; font-weight: bold; margin-bottom: 30px; } .cta-button-container { text-align: center; } .cta-button { display: block; /* für zentrierte Ausrichtung */ margin: 30px auto; /* größerer Abstand */ padding: 16px 36px; /* mehr Platz innen */ font-size: 1.2rem; /* etwas größere Schrift */ font-weight: 600; /* kräftiger, wirkt edler */ font-family: 'Quicksand', sans-serif; /* deine Schrift */ background: #00505b; color: #fff; border-radius: 30px; /* etwas runder */ text-decoration: none; text-align: center; transition: all 0.3s ease; } /* Hover-Effekt */ .cta-button:hover { background: #00695c; transform: scale(1.05); /* leichtes Vergrößern beim Hover */ } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; margin-top: 2rem; } .card { background: white; border-radius: 1rem; overflow: hidden; transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .card-image-wrapper { height: 200px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-image { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 1rem; } .card-title { font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem; } .card-price { font-size: 1rem; color: #333; margin-bottom: 0.3rem; } .card-location { color: #000; margin-bottom: 1rem; } .card-action .button { text-decoration: none; } .upload-label { font-weight: 600; color: #065f46; margin-bottom: 0.5rem; display: block; } .hint-text { font-size: 0.9em; color: #4b5563; margin: 1rem 0; font-style: italic; } .kalendra-button { background: linear-gradient(to right, #34d399, #10b981); color: #fff; padding: 0.9rem 1.5rem; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 1rem; cursor: pointer; width: 100%; transition: all 0.3s ease; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3); } .kalendra-button:hover { background: linear-gradient(to right, #059669, #065f46); box-shadow: 0 6px 18px rgba(5, 150, 105, 0.4); } /* === Kalendra Card-Fix: Produkte, Dienstleistungen, Suche === */ #productlist_page .card, #dienstleistungen_page .card{ background: #fff !important; border: 2px solid #000 !important; border-radius: 12px !important; box-shadow: none !important; /* überschreibt evtl. globale Schatten */ overflow: hidden; /* saubere Rundung oben/unten */ } /* Bildbereich konsistent halten */ #productlist_page .card-image-wrapper, #dienstleistungen_page .card-image-wrapper, #suche_page .card-image-wrapper { width: 100% !important; height: 200px !important; /* bei Dienstleistungen ggf. 200–240px */ overflow: hidden !important; } /* Bilder: volle Breite, kein zentrierendes margin aus multidim.css */ #productlist_page .card-image, #dienstleistungen_page .card-image, #suche_page .card-image { width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; /* überschreibt img { margin: 0 auto; } */ display: block !important; border: 0 !important; } /* Body-Padding und Titel */ #productlist_page .card-body, #dienstleistungen_page .card-body, #suche_page .card-body { padding: 1rem !important; } #productlist_page .card-title, #dienstleistungen_page .card-title, #suche_page .card-title { margin: 0 0 .5rem !important; font-size: 1.25rem !important; color: #000 !important; } /* Preis/Location optisch konsistent */ #productlist_page .price, #dienstleistungen_page .price, #suche_page .price { display: block !important; font-weight: 500 !important; margin-bottom: .5rem !important; color: #000f !important; } #productlist_page .card-location, #dienstleistungen_page .card-location, #suche_page .card-location { color: #000 !important; } /* Buttons – falls multidim überschreibt */ #productlist_page .button.blue, #dienstleistungen_page .button.blue, #suche_page .button.blue { background: #00505f !important; color: #fff !important; border: 1px solid #00505f !important; border-radius: 6px !important; text-decoration: none !important; font-weight: 700 !important; padding: .5rem 1rem !important; } #productlist_page .button.blue:hover, #dienstleistungen_page .button.blue:hover, #suche_page .button.blue:hover { opacity: .9 !important; } #productlist_page { max-width: 1400px; /* Begrenzung für Desktop */ margin: 0 auto; /* zentrieren */ padding: 0 2rem; /* Abstand zum Rand */ } .card-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } :root{ --brand:#00505f; --brand-2:#007a86; --text-on:#fff; --ring: rgba(0, 122, 134, .45); } .login-view{ position: relative; float: right; } /* Kreis-Button minimalistisch */ .login-text{ width: 77px; height: 77px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--brand)); color: var(--text-on); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: transform .18s ease, filter .18s ease; outline: none; font-weight: 600; text-transform: uppercase; } /* Leichter Glanz oben links */ .login-text::before{ content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.18), transparent 45%); pointer-events:none; } /* Hover: nur Scale + leicht satter */ .login-text:hover{ transform: scale(1.05); filter: saturate(1.1); } /* Fokus: deutlicher Ring */ .login-text:focus-visible{ box-shadow: 0 0 0 3px var(--ring); } /* Icon oder Text */ .menu-icon{ width: 24px; height: 24px; } /* Produktdetail: Bild & Map ungerahmt */ #productdetails_page .image_holders_horizontal img.hero-right, #productdetails_page .image_holders_horizontal img, #productdetails_page .map-container iframe { border: none; box-shadow: none; border-radius: 0; } /* Falls ein Wrapper doch noch Styles erzwingt */ #productdetails_page .map-container { border: none; box-shadow: none; border-radius: 0; margin-bottom: 30px; /* darf bleiben, reine Abstände */ } #productlist_page .card { margin-bottom: 20px; /* oder 1.5rem */ } /* Kalendra Farben */ :root{ --kal-green: #00897b; /* Hauptgrün */ --kal-leaf: #36b37e; /* Blattgrün */ --kal-moss: #0f766e; /* Moosgrün (dunkler Akzent) */ } /* Grundkarte */ .card { position: relative; border: 1px solid #000; /* deine aktuelle Border */ border-radius: 16px; background: #fff; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; } /* Link um die Karte */ .card-link { display: block; text-decoration: none; color: inherit; } /* Leaf-Glow beim Hover – ohne Schatten */ .card-link:hover .card, .card-link:focus-visible .card { transform: translateY(-2px); border-color: var(--kal-leaf); background: linear-gradient(135deg, rgba(0,137,123,.06), rgba(54,179,126,.06)); /* zarter pflanzlicher Schimmer */ } /* Aura-Overlay (kein shadow, nur Verlauf) */ .card::before { content: ""; position: absolute; inset: -2px; /* leicht größer als die Karte */ border-radius: inherit; pointer-events: none; opacity: 0; background: conic-gradient(from 180deg at 50% 50%, rgba(54,179,126,0) 0%, rgba(54,179,126,.35) 85%, rgba(54,179,126,0) 100%); transition: opacity .2s ease; } .card-link:hover .card::before, .card-link:focus-visible .card::before { opacity: 1; /* sanftes „Leuchten“ an der Kante */ } /* Optional: Titel/Farbe leicht akzentuieren */ .card-link:hover .card-title, .card-link:focus-visible .card-title { color: var(--kal-moss); } /* Barrierefreiheit: klare Tastaturfokussierung ohne Shadow */ .card-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--kal-leaf) 60%, transparent); outline-offset: 4px; } /* Weniger Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { .card, .card::before { transition: none; } } :root { --kalendra-green: #2e7d32; /* sattes Blattgrün */ --kalendra-lime: #a5d6a7; /* helles Blattgrün */ --kalendra-mint: #e8f5e9; /* sehr helles Grün */ } /* Basis-Karte */ .card { border: 1px solid #0f2f28; border-radius: 16px; background: #fff; transition: transform .25s ease, outline-color .25s ease, background .25s ease, filter .25s ease, border-color .25s ease; } /* Link um die Karte */ .card-link { text-decoration: none; color: inherit; display: block; } /* Hover-Glow im Pflanzenstil */ .card-link:hover .card, .card-link:focus-visible .card { outline: 3px solid var(--kalendra-lime); outline-offset: 4px; border-color: var(--kalendra-green); background: radial-gradient(120% 80% at 10% 100%, rgba(165,214,167,0.18), transparent 60%), radial-gradient(120% 80% at 90% 0%, rgba(165,214,167,0.14), transparent 55%), #fff; filter: saturate(1.06); transform: scale(1.01); } /* Tastatur-Zugänglichkeit */ .card-link:focus-visible { outline: none; /* wir nutzen die Outline auf .card */ } /* Motion-Respect */ @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card-link:hover .card, .card-link:focus-visible .card { transform: none; } } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; align-items: stretch; /* alle Cards gleich hoch ziehen */ } .card.card-clean { background: #fff; border: 1px solid #000; border-radius: 12px; display: flex; flex-direction: column; height: 100%; /* gleiche Höhe im Grid */ } /* Bildbereich fixieren */ .card-image-wrapper { position: relative; width: 100%; height: 200px; /* alle gleich hoch */ overflow: hidden; flex-shrink: 0; } .card-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* Body füllt Rest */ .card-body { padding: 1rem; flex: 1; /* gleicher Platz für Text */ display: flex; flex-direction: column; justify-content: flex-start; } /* Preis und Location schön unten verankern */ .card-body .price, .card-body .card-location, .card-body .card-distance { margin-bottom: .5rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; /* wichtig: alle Elemente in einer Zeile gleich hoch */ align-items: stretch; } .card.card-clean { background: #fff; border: 1px solid #000; border-radius: 12px; /* sorgt für volle Höhe */ height: 100%; /* Inhalt in Spaltenaufteilung */ display: flex; flex-direction: column; } .card-image-wrapper { position: relative; width: 100%; height: 200px; /* feste Bildhöhe */ overflow: hidden; flex-shrink: 0; } .card-image { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: 1rem; /* nimmt den restlichen Platz ein */ flex: 1; /* macht den Inhalt von oben nach unten gleichmäßig */ display: flex; flex-direction: column; justify-content: space-between; } /* Grid: Items in jeder Reihe gleich hoch ziehen */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; align-items: stretch; margin-bottom: 20px; /* wichtig */ } /* Karte füllt die Zelle vollständig */ .card-link { display: block; height: 100%; } .card { height: 100%; display: flex; flex-direction: column; border-radius: 12px; } /* Fixe Bildhöhe */ .card-image-wrapper { height: 200px; /* gleiche Bildhöhe */ flex-shrink: 0; overflow: hidden; } .card-image { width: 100%; height: 100%; object-fit: cover; } /* Body strukturiert, reserviert Platz */ .card-body { grid-template-rows: auto auto auto 1fr; /* Titel, Ort, Preis, flex-Spacer */ gap: .5rem; padding: 1rem; } /* Titel auf max. 2 Zeilen */ .card-title { font-size: 1.1rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Ort auf 1 Zeile kürzen */ .card-location { color: #666; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Preis: fixe Höhe von 1 Zeile (auch wenn mal leer) */ .price { font-weight: 700; color: #00505f; min-height: 1.25rem; /* reserviert Platz */ } /* Der flexible Spacer (letzte Zeile der Grid-Definition) hält Unterkanten bündig */ /* Basis: hübsch, aber nicht übergroß */ .custom_login_page .kalendra-login-form .kalendra-input { font-size: 16px; padding: 10px 12px; box-sizing: border-box; } .custom_login_page .kalendra-login-form .kalendra-submit { font-size: 16px; padding: 10px 20px; margin-top: 12px; } /* Enger auf sehr kleinen Screens */ @media (max-width: 480px) { .custom_login_page .kalendra-login-form .kalendra-input { padding: 9px 10px; } .custom_login_page .kalendra-login-form .kalendra-submit { padding: 10px 16px; } } /* Quicksand konsistent */ .custom_login_page .kalendra-login-form input { font-family: 'Quicksand', sans-serif; } /* Kalendra-Variablen */ :root{ --kal-bg: #0f172a; --kal-bg-soft: #111827; --kal-text: #e5e7eb; --kal-muted: #9ca3af; --kal-primary: #10b981; --kal-primary-contrast: #0b1f17; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.25); } /* Modern: präzises Clipping ohne Scrollbars */ @supports (overflow: clip) { img, video, canvas { overflow: clip; } } /* Medien selbst dürfen kein sichtbares Overflow haben */ img, video, canvas { overflow: clip; /* modernere, sichere Variante zu hidden */ /* fallback falls clip nicht supportet: */ overflow: hidden; display: block; /* verhindert „Zeilenlücken“ bei inline images */ } /* Wenn du Effekte außerhalb brauchst, gib das Overflow der Hülle, nicht dem Medien-Element */ .media-frame { overflow: visible; /* hier darfst du „sichtbar“ sein */ } .media-frame > img, .media-frame > video, .media-frame > canvas { overflow: clip; /* Medien selbst bleiben geclippt */ } /* Platzhalter vermeiden – kein margin/padding auf body setzen */ /* Hero-Bild (LCP) stabilisieren */ .hero-image img, .hero .background { width: 100%; height: auto; aspect-ratio: 3 / 2; /* an deine reale Hero-Aspekt-Ratio anpassen */ display: block; } /* Swiper/Carousel-Bilder konsistent & ohne Verzerrung */ .swiper-wrapper .swiper-slide img, .courses-gallery .swiper-slide img { height: auto !important; aspect-ratio: 3 / 2; /* oder 4/3 – je nach deinen Bildquellen */ object-fit: cover; /* füllt Karten gleichmäßig */ } /* Logo-Bild: Größe/Verhältnis vorgeben (zusätzlich HTML width/height setzen!) */ header .main .logo img { max-width: 100%; height: auto; } /* Unterhalb des „Folds“ erst rendern, wenn sichtbar */ .courses-gallery { content-visibility: auto; contain-intrinsic-size: 1000px 800px; } /* ===== Tablet Breakpoints (Portrait & Landscape) ===== */ /* 1) Grundlayout & Container */ @media (min-width: 600px) and (max-width: 1024px) { .container { padding-left: 20px; padding-right: 20px; max-width: 960px; /* verhindert zu breite Zeilen */ } /* 2) Hero: Bild & Overlay-Typo */ .hero-image img { aspect-ratio: 16 / 9; /* wirkt auf Tablets meist harmonischer */ width: 100%; height: auto; object-fit: cover; } .hero .overlay { padding: 24px 0 28px; } .hero .title h1, .kalendra-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.2; margin-bottom: .6rem; } .kalendra-hero .lead { font-size: clamp(1rem, 1.5vw, 1.1rem); } /* 3) Suche: Inputs nebeneinander mit sauberer Zeile */ .hero .row .input form { display: grid; grid-template-columns: 1fr 1fr auto; /* Titel | Adresse | Button */ gap: 10px; align-items: center; } .hero .row .input .input-container input[type="text"]{ font-size: 16px; /* verhindert iOS-Zoom, bessere Tap-Ziele */ min-height: 44px; } .hero .row .input input[type="submit"]{ min-height: 44px; padding: 0 16px; font-weight: 600; } /* Falls du bei schmalen Tablets lieber stacked willst: @media (max-width: 768px){ .hero .row .input form { grid-template-columns: 1fr; } } */ /* 4) Cards / Grids: zwei Spalten */ .courses-gallery .swiper-slide .info { padding: 10px 8px; font-size: 0.95rem; } } /* 5) Slider-Bilder & Paginierung – Tablet-optimiert */ @media (min-width: 600px) and (max-width: 1024px) { .courses-gallery .swiper { padding-bottom: 32px; /* Platz für Pagination */ } .courses-gallery .swiper-slide img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .swiper-pagination-bullets .swiper-pagination-bullet { width: 10px; height: 10px; } } /* 6) Header / Logo: stabil & nicht zu dominant */ @media (min-width: 600px) and (max-width: 1024px) { header .main .logo img { max-height: 48px; /* verhindert Übergröße am Tablet */ height: auto; } } /* 8) Touch-Optimierungen (coarse Pointer = Tablet/Phone) */ @media (pointer: coarse) { /* sichtbarer Fokus für Tastatur/Screenreader */ :focus-visible { outline: 2px solid rgba(93,214,185,.9); outline-offset: 2px; } } .bordered-box { border: 2px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 12px; background-color: #fff; box-sizing: border-box; } .bordered-box img { border-radius: 10px; width: 100%; height: auto; display: block; } .kal-card{background:#fff;border:1px solid #ececec;border-radius:20px;padding:26px;box-shadow:0 10px 28px rgba(0,0,0,.06)} .kal-title{font-family:'Raleway',system-ui,sans-serif;font-weight:700;font-size:1.75rem;margin:0 0 6px} .kal-subtitle{color:#6b7280;margin:0 0 18px} .kal-h2{font-size:1.1rem;margin:6px 0 12px;font-weight:700} .kal-section{margin-top:18px} .kal-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width: 800px){.kal-grid-2{grid-template-columns:1fr}} .kal-field{margin-bottom:12px} .kal-label{display:block;font-weight:600;margin-bottom:6px} .kal-input,.kal-textarea,.kal-file{width:100%;border:1px solid #ddd;border-radius:12px;padding:12px 14px;font:inherit;outline:0} .kal-input:focus,.kal-textarea:focus{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.15)} .kal-help{display:block;font-size:.85rem;color:#6b7280;margin-top:4px} .kal-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap} .kal-btn{background:#4f46e5;color:#fff;border:0;border-radius:14px;padding:12px 22px;font-weight:700;cursor:pointer;transition:box-shadow .2s,transform .02s} .kal-btn:hover{box-shadow:0 10px 24px rgba(79,70,229,.25)} .kal-btn:active{transform:translateY(1px)} .kal-btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:14px;border:1px solid #ddd;text-decoration:none;color:#333;background:#fafafa} .kal-ai-toggle{display:flex;align-items:center;gap:10px} .kal-switch{width:44px;height:24px;appearance:none;background:#ddd;border-radius:999px;position:relative;outline:0;cursor:pointer;transition:background .2s} .kal-switch:checked{background:#4f46e5} .kal-switch:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s} .kal-switch:checked:before{left:23px} .kal-switch-label{cursor:pointer} /* ===================================================================== Kalendra Events (.cm-*) – Light, modern, consistent Dominant colors: white & black, brand #00505f Drop-in: copy into multidim.css OR load as separate file. ===================================================================== */ /* ===== Tokens ===== */ :root{ --cm-bg: #ffffff; --cm-surface: #ffffff; --cm-text: #111111; --cm-muted: #5f6673; --cm-border: #e8eaf0; --cm-radius: 14px; --cm-radius-sm: 10px; --cm-shadow-1: 0 8px 22px rgba(0,0,0,.06); --cm-shadow-2: 0 14px 38px rgba(0,0,0,.12); --cm-brand: #00505f; --cm-brand-ghost: rgba(0,80,95,.12); } /* ===== Root containers ===== */ .cm-events-list, .cm-event-create, .cm-event-edit, .cm-event-preview, .cm-event-view{ color: var(--cm-text); } .cm-form, .cm-cards, .cm-event-preview, .cm-event-view{ background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow-1); padding: clamp(22px, 2.2vw, 32px); max-width: 1100px; margin-inline: auto; } .cm-events-list{ max-width: 1100px; margin-inline: auto; } /* ===== Headings ===== */ .cm-events-list h1, .cm-event-create h1, .cm-event-edit h1, .cm-event-preview h1, .cm-event-view h1{ font-weight: 800; letter-spacing: .2px; line-height: 1.15; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color: #111111; text-align: center; } /* ===== Grid & fields ===== */ .cm-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px){ .cm-grid{ grid-template-columns: repeat(2, 1fr); } } .cm-field{ display:flex; flex-direction:column; gap:8px; margin-bottom: 12px; } .cm-field label{ font-weight: 700; color: #111; font-size: .95rem; } .cm-field input[type="text"], .cm-field input[type="email"], .cm-field input[type="tel"], .cm-field input[type="date"], .cm-field input[type="time"], .cm-field input[type="file"], .cm-field textarea{ background:#fff; color:#111; border:1px solid var(--cm-border); border-radius: var(--cm-radius-sm); padding: 12px 14px; font: inherit; transition: border-color .15s ease, box-shadow .15s ease; outline: none; } .cm-field textarea{ min-height:150px; resize: vertical; } .cm-field input:focus, .cm-field textarea:focus{ border-color: var(--cm-brand); box-shadow: 0 0 0 3px var(--cm-brand-ghost); } /* ===== Actions & buttons ===== */ .cm-actions{ display:flex; flex-wrap:wrap; gap: 12px; justify-content:center; margin-top: 10px; } .cm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6ch; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--cm-brand); color: #fff; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: var(--cm-shadow-1); transition: transform .06s ease, filter .2s ease, box-shadow .2s ease; } .cm-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); } .cm-btn:active{ transform: translateY(0); } .cm-btn.cm-ghost{ background:#fff; color: var(--cm-brand); border-color: var(--cm-brand); box-shadow:none; } .cm-link{ color: var(--cm-brand); font-weight: 700; text-decoration: none; } .cm-link:hover{ text-decoration: underline; } /* ===== Cards / list ===== */ .cm-cards{ list-style:none; margin:0; padding:0; display:grid; gap: 16px; } @media (min-width: 720px){ .cm-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1024px){ .cm-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } } .cm-card{ background:#fff; border:1px solid var(--cm-border); border-radius: var(--cm-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--cm-shadow-1); transition: transform .12s ease, box-shadow .2s ease; } .cm-card:hover{ transform: translateY(-2px); box-shadow: var(--cm-shadow-2); } .cm-card-media img{ width:100%; height:220px; object-fit:cover; display:block; } .cm-card-body{ padding:16px; display:flex; flex-direction:column; gap:8px; text-align:center; } .cm-card-title{ font-size:1.1rem; margin:0; color:#111; font-weight: 800; } .cm-card-title a{ color:#111; text-decoration:none; } .cm-card-title a:hover{ text-decoration: underline; } .cm-card-meta{ color: var(--cm-muted); margin:0; font-size:.95rem; } /* ===== Image + body ===== */ .cm-image img{ width:100%; height:auto; border-radius: 16px; border:1px solid var(--cm-border); box-shadow: var(--cm-shadow-1); max-width: 222px; } .cm-body{ color:#111; /* schwarze Beschreibung */ text-align:center; /* zentriert */ background:#fff; border:1px solid var(--cm-border); border-radius: 16px; box-shadow: var(--cm-shadow-1); padding: 22px; max-width: 850px; margin: 12px auto 0; line-height: 1.65; font-size: 1.02rem; } /* ===== Date block (weekday + big date + time) ===== */ .cm-date{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 26px; border:1px solid var(--cm-border); border-radius:16px; background:#fff; box-shadow: var(--cm-shadow-2); margin: 0 auto 20px; color:#111; min-width:220px; text-align:center; } .cm-date .cm-date-weekday{ font-size:1rem; font-weight:600; color:#6b7280; letter-spacing:.3px; margin-bottom:6px; } .cm-date .cm-date-main{ font-size:2rem; font-weight:800; line-height:1.1; } .cm-date .cm-date-time{ font-size:1.15rem; font-weight:600; color:#333; margin-top:6px; } /* ===== Search & empty ===== */ .cm-search{ display:flex; gap:10px; align-items:center; justify-content:center; margin: 0 0 12px; } .cm-search input[type="search"]{ flex:1; max-width:560px; border-radius:999px; border:1px solid var(--cm-border); background:#fff; color:#111; padding:12px 16px; } .cm-empty{ text-align:center; padding: 28px; border:1px dashed var(--cm-border); border-radius: 14px; color: var(--cm-muted); background: #fafafd; } /* ===== Messages (fallback, wenn Theme nichts liefert) ===== */ .cm-event-create .messages, .cm-event-edit .messages, .cm-event-preview .messages{ margin-bottom: 12px; } /* ===== Print ===== */ @media print{ .cm-btn, .cm-link, .cm-search, .cm-actions{ display:none !important; } .cm-event-view, .cm-event-preview{ box-shadow:none; border-color:#ddd; } .cm-image img{ border:0; box-shadow:none; } } /* ========================================================== Verbesserte Event-View: zentrierter Stil mit großem Datum ========================================================== */ .cm-event-view header { text-align: center; margin-bottom: 1.8rem; } .cm-event-view h1 { font-size: clamp(2rem, 2.2vw + 1rem, 2.8rem); font-weight: 800; color: #000; margin-bottom: 1.2rem; line-height: 1.15; } .cm-event-view .cm-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px 34px; margin: 0 auto 2rem; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); min-width: 260px; } .cm-event-view .cm-date .cm-date-weekday { font-size: 1.9rem; font-weight: 600; color: #000; margin-bottom: 6px; } .cm-event-view .cm-date .cm-date-main { font-size: 2.8rem; font-weight: 800; color: #000; letter-spacing: 0.5px; } .cm-event-view .cm-date .cm-date-time { font-size: 1.3rem; font-weight: 600; color: #000; margin-top: 6px; } .cm-event-view .cm-body { text-align: center; color: #000; background: #fff; border: 1px solid #eee; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); padding: 26px; max-width: 850px; margin: 1rem auto; line-height: 1.7; font-size: 1.05rem; } /* ============================================== Zentrierte Datumsanzeige mit "ab 20 Uhr" ============================================== */ .cm-event-view, .cm-event-preview { text-align: center; } .cm-event-view .cm-date, .cm-event-preview .cm-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px 34px; margin: 0 auto 2rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); min-width: 260px; } .cm-date .cm-date-weekday { font-size: 1.3rem; font-weight: 700; color: #d64541; /* harmonisches Rot */ margin-bottom: 6px; letter-spacing: 0.4px; text-transform: uppercase; } .cm-date .cm-date-main { font-size: 2.8rem; font-weight: 800; color: #000; letter-spacing: 0.5px; } .cm-date .cm-date-time { font-size: 1.4rem; font-weight: 600; color: #333; margin-top: 8px; font-style: italic; } /* =========================================================== EVENT-DATUM – Kalendra-Stil Hell, zentriert, klar, mit Rot + leichtem Blauton (#00505f) =========================================================== */ .cm-event-view, .cm-event-preview { text-align: center; } .cm-event-view .cm-date, .cm-event-preview .cm-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; color: #111; border: 2px solid rgba(0, 80, 95, 0.2); /* sanftes Kalendra-Blau */ border-radius: 18px; padding: 26px 38px; margin: 0 auto 2.5rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); min-width: 280px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cm-event-view .cm-date:hover, .cm-event-preview .cm-date:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08); border-color: rgba(0, 80, 95, 0.4); } .cm-date .cm-date-weekday { font-size: 1.3rem; font-weight: 700; color: #d64541; /* harmonisches Rot */ margin-bottom: 6px; letter-spacing: 0.4px; text-transform: uppercase; } .cm-date .cm-date-main { font-size: 2.8rem; font-weight: 800; color: #000; letter-spacing: 0.5px; line-height: 1.2; } .cm-date .cm-date-time { font-size: 1.4rem; font-weight: 600; color: #333; margin-top: 8px; font-style: italic; } /* =============================================== Event-Bild kompakter und zentriert dargestellt =============================================== */ .cm-event-view .cm-image { text-align: center; margin: 2rem auto 1.5rem; } .cm-event-view .cm-image img { max-width: 70%; /* etwas kleiner, zentriert */ height: auto; border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .cm-event-view .cm-image img:hover { transform: scale(1.02); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15); } /* ---- Überschrift & Centering ---- */ .cm-event-view header { text-align: center; margin-bottom: 1.8rem; } .cm-event-view h1 { font-size: clamp(2rem, 2.2vw + 1rem, 2.8rem); font-weight: 800; color: #000; margin-bottom: 1.2rem; line-height: 1.15; } /* ---- Datum groß, Wochentag rot, blauer Rand ---- */ .cm-event-view, .cm-event-preview { text-align: center; } .cm-event-view .cm-date, .cm-event-preview .cm-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; color: #111; border: 2px solid rgba(0, 80, 95, 0.2); /* Kalendra-Blau soft */ border-radius: 18px; padding: 26px 38px; margin: 0 auto 2.2rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); min-width: 280px; } .cm-date .cm-date-weekday { font-size: 1.3rem; font-weight: 700; color: #d64541; margin-bottom: 6px; letter-spacing: .4px; text-transform: uppercase; } .cm-date .cm-date-main { font-size: 2.8rem; font-weight: 800; color: #000; letter-spacing: .5px; line-height: 1.2; } .cm-date .cm-date-time { font-size: 1.4rem; font-weight: 600; color: #333; margin-top: 8px; font-style: italic; } /* ---- Bild kompakter & zentriert ---- */ .cm-event-view .cm-image { text-align: center; margin: 1.5rem auto 1rem; } .cm-event-view .cm-image img { max-width: 70%; height: auto; border-radius: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.10); } /* ---- Standort + Map + Route ---- */ .cm-locationbox { max-width: 1000px; margin: 0 auto 1.2rem; } .cm-location { font-weight: 700; color: #111; margin-bottom: .6rem; } .cm-map { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.06); margin: .4rem auto 0.8rem; max-width: 1000px; } .cm-map iframe { width: 100%; height: 360px; /* kompakte Standardhöhe */ display: block; border: 0; } @media (max-width: 640px) { .cm-map iframe { height: 260px; } } .cm-route { margin-bottom: 1rem; } .cm-btn.cm-ghost { background: #fff; color: #00505f; border: 1px solid #00505f; } /* ---- Kontaktbox ---- */ .cm-contactbox { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 18px; max-width: 700px; margin: 0.8rem auto 1.2rem; box-shadow: 0 6px 18px rgba(0,0,0,.06); text-align: left; } .cm-contactbox h3 { margin: 0 0 .4rem; font-size: 1.1rem; color: #000; } .cm-contactlist { list-style: none; padding: 0; margin: 0; } .cm-contactlist li { padding: .25rem 0; color: #111; } .cm-contactlist a { color: #00505f; font-weight: 700; text-decoration: none; } .cm-contactlist a:hover { text-decoration: underline; } /* ---- Aktionen ---- */ .cm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 1rem; flex-wrap: wrap; } .cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6ch; padding: 12px 18px; border-radius: 999px; border: 1px solid #00505f; background: #00505f; color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.06); } .cm-btn.cm-danger { background: #dc2626; border-color: #dc2626; } .cm-search { display: flex; justify-content: center; margin-bottom: 2rem; } .cm-search-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; width: 100%; max-width: 800px; } .cm-search-row input { border: 1px solid #ddd; border-radius: 2rem; padding: 0.8rem 1.2rem; font-size: 1rem; width: 100%; } .cm-search-row input:focus { outline: none; border-color: #6fb48c; box-shadow: 0 0 5px rgba(111,180,140,0.5); } .cm-btn { color: #fff; border: none; border-radius: 2rem; padding: 0 1.2rem; font-weight: bold; cursor: pointer; transition: background 0.2s; } .cm-btn:hover { background: #5a9b77; } .cm-listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; justify-content: center; max-width: 1200px; margin: 0 auto; } .cm-card { display: flex; flex-direction: column; background: #fff; border-radius: 1rem; overflow: hidden; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; } .cm-card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,0.12); } .cm-listing h1, .cm-listing h2 { text-align: center; margin-bottom: 1.5rem; } .cm-listing { text-align: center; } .cm-listing { text-align: center; padding: 2rem 1rem; } .cm-listing h1 { font-size: 2rem; font-weight: 600; margin-bottom: 2rem; color: #2d2d2d; } /* Suchleiste */ .cm-search { display: flex; justify-content: center; margin-bottom: 2rem; } .cm-search-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; width: 100%; max-width: 800px; } .cm-search-row input { border: 1px solid #ddd; border-radius: 2rem; padding: 0.8rem 1.2rem; font-size: 1rem; width: 100%; } .cm-search-row input:focus { outline: none; border-color: #6fb48c; box-shadow: 0 0 6px rgba(111,180,140,0.4); } .cm-btn { color: #fff; border: none; border-radius: 2rem; padding: 0 1.4rem; font-weight: bold; cursor: pointer; transition: background 0.2s; } .cm-btn:hover { background: #5aa47a; } /* Karten */ .cm-listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; justify-content: center; max-width: 1200px; margin: 0 auto; } .cm-card { display: flex; flex-direction: column; background: #fff; border-radius: 1rem; overflow: hidden; text-decoration: none; color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cm-card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,0.15); } .cm-card__image img { height: 200px; object-fit: cover; } .cm-card__content { padding: 1rem; } .cm-card__title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; } .cm-card__location, .cm-card__date, .cm-card__price { color: #6b6b6b; font-size: 0.9rem; } .cm-empty { color: #888; font-style: italic; margin-top: 2rem; } /* Desktop: kann nebeneinander bleiben */ .menu.has-menu .mobile { display: flex; gap: 1rem; } /* ===== MOBILE-MENÜ: Kalendra-Style & unter dem Header ===== */ @media (max-width: 768px) { /* Menüblock soll NICHT überlagern, sondern im Flow stehen */ .menu.has-menu { position: static !important; /* überschreibt evtl. absolute/fixed */ background: #0e6a71; /* Kalendra-Teal */ box-shadow: 0 4px 12px rgba(0,0,0,.12); margin: 0; } .menu.has-menu .container { padding: 8px 16px; } /* Einträge untereinander */ .menu.has-menu .mobile { display: flex !important; flex-direction: column; gap: 0; } .menu.has-menu .mobile > li { width: 100%; border-top: 1px solid rgba(255,255,255,.15); } .menu.has-menu .mobile > li > a { display: block; padding: 14px 6px; color: #fff; text-decoration: none; } .menu.has-menu .mobile > li > a:hover, .menu.has-menu .mobile > li > a:focus { background: rgba(255,255,255,.08); } /* Falls dein HEADER oben fixed ist: auf Mobile einfach lösen, so schiebt sich alles natürlich nach unten. */ header, .header, .site-header { position: static !important; } } /* ==== MOBILE-FIX: Menü untereinander, im Flow, Kalendra-Style ==== */ @media (max-width: 768px) { /* Header & Menü dürfen nicht overlayen */ header, .menu.has-menu { position: static !important; } /* UL "mobile" darf NICHT absolut/fixed sein */ .menu.has-menu .mobile { position: static !important; top: auto !important; left: auto !important; right: auto !important; display: block !important; background: #00505f; /* Kalendra-Teal */ margin: 0; padding: 0; z-index: auto !important; /* kein Overlay */ } /* Einträge untereinander + Stil */ .menu.has-menu .mobile > li { list-style: none; border-top: 1px solid rgba(255,255,255,.15); } .menu.has-menu .mobile > li > a { display: block; padding: 14px 16px; color: #fff; text-decoration: none; } .menu.has-menu .mobile > li > a:hover, .menu.has-menu .mobile > li > a:focus { background: rgba(255,255,255,.08); } /* Abstand unter dem Menü, damit nichts verdeckt wird */ } /* ---- MOBILE: Menü im Balken, Balken wird höher ---- */ @media (max-width: 768px) { /* Der grüne Balken soll sich der Höhe des Menüs anpassen */ .menu.has-menu { background: #00505f; /* Kalendra-Farbe */ position: relative; /* nicht overlay */ height: auto !important; padding: 0; /* damit nix verschoben wird */ } /* UL mobile sichtbar im Flow, nicht overlay */ .menu.has-menu .mobile { display: flex !important; flex-direction: column; width: 100%; margin: 0; padding: 0; position: static !important; /* verhindert Überlappen */ } /* Menüeinträge */ .menu.has-menu .mobile > li { list-style: none; border-top: 1px solid rgba(255,255,255,.15); } .menu.has-menu .mobile > li > a { display: block; color: white; text-align: center; padding: 16px; font-size: 18px; text-decoration: none; } } /* ---- Desktop unverändert ---- */ @media (min-width: 769px) { .menu.has-menu .mobile { flex-direction: row; gap: 2rem; justify-content: center; } } .cm-search__row{display:grid;grid-template-columns:1fr 1.2fr auto auto;gap:.5rem;align-items:center} .cm-place{display:flex;gap:.4rem;align-items:center} .cm-input{padding:.7rem .9rem;border:1px solid #ddd;border-radius:12px} .cm-btn{padding:.7rem 1rem;border:1px solid #ddd;border-radius:12px;cursor:pointer} .cm-btn--primary{border-color:transparent;background:#111;color:#fff} .cm-btn--icon{width:44px;min-width:44px} .visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden} @media (max-width: 900px){.cm-search__row{grid-template-columns:1fr;}} /* Formular für Kurse/Dienstleistungen (courses_content) */ .node-courses-content-form { max-width: 820px; margin: 0 auto 3rem; padding: 1.5rem 1.5rem 2rem; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.06); border: 1px solid #e5e7eb; } .node-courses-content-form .form-item label { font-weight: 600; } .node-courses-content-form .form-actions { text-align: center; } /* --- GRID --- */ .cm-listing-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding: 10px 0; } /* --- CARD --- */ .cm-card { display: block; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.08); text-decoration: none; color: #111; transition: transform .12s ease, box-shadow .12s ease; } .cm-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.15); } /* --- IMAGE --- */ .cm-card__image { margin: 0; padding: 0; background: #fff; display: flex; align-items: center; justify-content: center; height: 180px; /* feste Höhe für einheitliche Karten */ } .cm-card__image img { width: 100%; height: 100%; background: #fff; } /* --- CONTENT --- */ .cm-card__content { padding: 14px 18px 18px; } .cm-card__title { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; color: #000; } .cm-card__sub, .cm-card__meta { margin: 2px 0; font-size: 0.95rem; color: #444; } /* Uploadfläche */ .kalendra-upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #000; border-radius: 22px; padding: 45px 20px; cursor: pointer; text-align: center; transition: 0.25s ease; } .kalendra-upload-area:hover { background: #0e6a71; border-color: #000; transform: scale(1.01); } .upload-icon { font-size: 58px; opacity: 0.85; margin-bottom: 10px; } .upload-text strong { font-size: 18px; color: #000; } .upload-text .subtext { font-size: 14px; color: #000; opacity: 0.9; } /* verstecktes Input */ .upload-input { display: none; } .upload-preview { margin-top: 25px; text-align: center; } .upload-preview img { max-width: 100%; border-radius: 22px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); } .hidden { display: none; } .hint-text { margin-top: 25px; color: #000; font-size: 15px; text-align: center; line-height: 1.4; } .kalendra-button { background: #00505f; border: none; padding: 15px 34px; border-radius: 25px; font-size: 17px; color: #fff; font-weight: 600; cursor: pointer; transition: 0.25s ease; width: 100%; } .kalendra-button:hover { background: #0e6a71; transform: translateY(-2px); } /* Drupal Status Messages ausblenden (werden als JS-Popup angezeigt) */ [data-drupal-messages], .messages, .messages__wrapper { display: none !important; } /* Listing Searchbar + Cards (aus Twig ausgelagert) */ #cmSearchBar{margin-bottom:1.6rem;display:flex;justify-content:center} #cmSearchBar .cm-search-row{ width:100%;max-width:900px; display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr) auto; gap:.6rem; align-items:center; } #cmSearchBar .cm-geo-wrap{display:flex;gap:.4rem;min-width:0} #cmSearchBar input[type="search"], #cmSearchBar input[type="text"]{ box-sizing:border-box;width:100%; padding:.9rem 1rem;border-radius:14px;border:1px solid #e6e6e6; background:#fff;color:#111;font-size:1.05rem;min-width:0; box-shadow:0 4px 14px rgba(0,0,0,.06); transition:box-shadow .2s,border-color .2s,transform .05s; } #cmSearchBar input::placeholder{color:#6b7280} #cmSearchBar input:focus{ outline:none;border-color:#79b9ff; box-shadow:0 0 0 3px rgba(121,185,255,.35),0 6px 18px rgba(0,0,0,.09); } #cmSearchBar .cm-btn{ background:#00505f;color:#fff;padding:.9rem 1.3rem;border:0;border-radius:14px;cursor:pointer; font-size:1.05rem;box-shadow:0 6px 16px rgba(0,0,0,.12); transition:transform .05s,box-shadow .2s,background .2s; } #cmSearchBar .cm-btn:hover{background:#222;box-shadow:0 8px 22px rgba(0,0,0,.16)} #cmSearchBar .cm-btn:active{transform:translateY(1px)} #cmSearchBar .cm-btn-icon{ padding:.9rem 1rem;border-radius:14px;border:1px solid #e6e6e6;background:#fff;cursor:pointer; font-size:1.2rem;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.06); transition:box-shadow .2s,background .2s } #cmSearchBar .cm-btn-icon:hover{background:#f5f5f5;box-shadow:0 6px 18px rgba(0,0,0,.09)} @media (max-width: 900px){ #cmSearchBar .cm-search-row{grid-template-columns:1fr} #cmSearchBar .cm-btn{width:100%} #cmSearchBar .cm-btn-icon{width:52px} } .cm-msg{margin-top:.4rem;font-size:.92rem;color:#b91c1c} .cm-listing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); margin-top:1.2rem; } .cm-card{ display:block;text-decoration:none;color:inherit; border-radius:12px;overflow:hidden;background:#fff; transition:transform .25s ease, filter .25s ease; } .cm-card:hover,.cm-card:focus-visible{filter:saturate(1.06);transform:scale(1.01)} .cm-card__image{position:relative;height:200px;margin:0;overflow:hidden} .cm-card__image img{width:100%;height:100%;object-fit:cover;display:block} .cm-card__content{padding:1rem} .cm-card__title{margin:0 0 .35rem;font-size:1.15rem;font-weight:700} .cm-card__sub{margin:0 0 .35rem;color:#666} .cm-card__meta{margin:.15rem 0;color:#333} .hero--clean{ padding: 56px 0 28px; position: relative; overflow: hidden; } .hero--clean::before{ content:""; position:absolute; inset:-40px; background: radial-gradient(600px 240px at 15% 20%, rgba(32,134,129,.18), transparent 60%), radial-gradient(520px 260px at 85% 35%, rgba(32,134,129,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1)); pointer-events:none; } .hero--clean .overlay, .hero--clean .container{ position: relative; z-index: 1; } .hero-head{ text-align: center; margin-bottom: 18px; } .hero-title{ margin: 0; font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.02em; } .hero-subtitle{ margin: 8px 0 0; font-size: 18px; opacity: .85; } .hero-cta{ margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: 999px; text-decoration:none; border: 1px solid rgba(0,0,0,.10); background: #fff; } .btn-primary{ background: #208681; color: #fff; border-color: transparent; } .btn-secondary{ background: rgba(255,255,255,.85); } .hero-hint{ margin: 12px 0 0; font-size: 14px; opacity: .75; } :root{ --k-green: #0b5f63; /* dein Menü-Grün */ --k-radius: 22px; } .hero--clean{ padding: 16px 0 10px; background: #fff; } .search-card{ background: #fff; border-radius: var(--k-radius); box-shadow: 0 12px 30px rgba(0,0,0,.08); padding: 18px 16px; margin: 10px 0 18px; } .search-card__title{ margin: 0 0 12px; font-size: 28px; line-height: 1.15; letter-spacing: .2px; } .search-card .input-container{ margin: 10px 0; } .btn{ display: inline-flex; justify-content: center; align-items: center; border-radius: 18px; padding: 14px 16px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; } .btn--full{ width: 100%; } .btn--primary{ background: var(--k-green); color: #fff; } .btn--ghost{ background: rgba(11,95,99,.08); color: var(--k-green); border: 1px solid rgba(11,95,99,.18); } .cta-row{ margin-top: 14px; display: grid; gap: 10px; } .cta-hint{ margin-top: 6px; font-size: 13px; opacity: .75; text-align: center; } .home-search{ padding: 20px 0 16px; /* wenig Abstand nach oben & unten */ background: #fff; } .home-search-form{ max-width: 520px; margin: 0 auto; display: grid; gap: 12px; } .home-search-input{ width: 100%; padding: 16px 18px; font-size: 17px; border-radius: 20px; border: 1px solid var(--k-border, #e5e7eb); text-align: center; } .home-search-input::placeholder{ text-align: center; font-size: 16px; opacity: 0.7; } .home-search-button{ margin-top: 6px; padding: 14px 18px; font-size: 16px; border-radius: 20px; border: 0; cursor: pointer; background: var(--k-green, #0b5f63); color: #fff; } @media (max-width: 768px){ .home-search{ padding: 16px 0 12px; } } .kalendra-about { max-width: 800px; margin: 0 auto; text-align: center; } /* Datenschutz / Rechtstexte */ .kalendra-privacy { max-width: 900px; margin: 3rem auto; padding: 0 1.5rem; /* Abstand zum Rand */ } .kalendra-privacy h1 { margin-bottom: 2rem; } .kalendra-privacy h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; } .kalendra-privacy p, .kalendra-privacy ul { margin-bottom: 1rem; line-height: 1.7; } .kalendra-privacy ul { padding-left: 1.2rem; /* saubere Einrückung */ } .kalendra-privacy li { margin-bottom: 0.4rem; } /* ====================================================== KALENDRA – VERKAUFSARTIKEL EDIT FORM ====================================================== */ body.node-verkaufsartikel-form { background: #f4f7f8; } /* Formular Container */ body.node-verkaufsartikel-form form { max-width: 900px; margin: 40px auto; padding: 40px; background: #ffffff; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); } /* Feldgruppen Abstand */ body.node-verkaufsartikel-form .form-item { margin-bottom: 28px; } /* Labels */ body.node-verkaufsartikel-form label { font-weight: 600; font-size: 15px; margin-bottom: 8px; display: block; color: #1a1a1a; } /* Inputs & Textareas */ body.node-verkaufsartikel-form input, body.node-verkaufsartikel-form textarea, body.node-verkaufsartikel-form select { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #d6d6d6; font-size: 15px; transition: 0.2s ease; } /* Fokus Effekt */ body.node-verkaufsartikel-form input:focus, body.node-verkaufsartikel-form textarea:focus, body.node-verkaufsartikel-form select:focus { border-color: #0f7c84; outline: none; box-shadow: 0 0 0 3px rgba(15,124,132,0.15); } /* Textarea größer */ body.node-verkaufsartikel-form textarea { min-height: 180px; } /* Bildfeld Styling */ body.node-verkaufsartikel-form .field--name-field-imagearticle { background: #f8fbfc; padding: 20px; border-radius: 16px; border: 1px dashed #d0e5e7; } /* Button Bereich */ body.node-verkaufsartikel-form .form-actions { margin-top: 40px; display: flex; gap: 16px; } /* Speichern Button */ body.node-verkaufsartikel-form input#edit-submit { background: #0f7c84; color: white; border: none; padding: 14px 28px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: 0.2s ease; } body.node-verkaufsartikel-form input#edit-submit:hover { background: #0c646b; transform: translateY(-2px); } /* Vorschau Button */ body.node-verkaufsartikel-form input#edit-preview { background: #e8f4f5; border: none; border-radius: 30px; padding: 14px 28px; } /* Delete Button */ body.node-verkaufsartikel-form input#edit-delete { background: #ffeaea; color: #a60000; border: none; border-radius: 30px; padding: 14px 28px; } /* ========================================= VERKAUFSARTIKEL – EDIT FORM STYLING ========================================= */ .page-node-edit.node--type-verkaufsartikel form.node-verkaufsartikel-form { max-width: 900px; margin: 40px auto; } /* Feldgruppen als Karten */ .page-node-edit.node--type-verkaufsartikel .form-item, .page-node-edit.node--type-verkaufsartikel .field--type-text-long, .page-node-edit.node--type-verkaufsartikel .field--type-string, .page-node-edit.node--type-verkaufsartikel .field--type-email, .page-node-edit.node--type-verkaufsartikel .field--type-decimal, .page-node-edit.node--type-verkaufsartikel .field--type-telephone { background: #ffffff; padding: 25px; margin-bottom: 25px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); } /* Labels schöner */ .page-node-edit.node--type-verkaufsartikel label { font-weight: 600; font-size: 15px; margin-bottom: 6px; display: block; } /* Inputs */ .page-node-edit.node--type-verkaufsartikel input, .page-node-edit.node--type-verkaufsartikel select, .page-node-edit.node--type-verkaufsartikel textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #ddd; font-size: 15px; transition: all 0.2s ease; } /* Focus */ .page-node-edit.node--type-verkaufsartikel input:focus, .page-node-edit.node--type-verkaufsartikel textarea:focus, .page-node-edit.node--type-verkaufsartikel select:focus { border-color: #148a96; box-shadow: 0 0 0 3px rgba(20,138,150,0.15); outline: none; } /* CKEditor */ .page-node-edit.node--type-verkaufsartikel .ck-editor { border-radius: 12px; overflow: hidden; } /* Media Feld */ .page-node-edit.node--type-verkaufsartikel .field--name-field-imagearticle { text-align: center; } /* Buttons */ .page-node-edit.node--type-verkaufsartikel .form-actions { display: flex; gap: 15px; margin-top: 40px; } .page-node-edit.node--type-verkaufsartikel .form-actions input { padding: 14px 28px; border-radius: 40px; border: none; cursor: pointer; font-weight: 600; transition: all 0.2s ease; } /* Speichern */ .page-node-edit.node--type-verkaufsartikel .form-actions #edit-submit { background: #148a96; color: white; } .page-node-edit.node--type-verkaufsartikel .form-actions #edit-submit:hover { background: #0f6e78; } /* Vorschau */ .page-node-edit.node--type-verkaufsartikel .form-actions #edit-preview { background: #eee; } /* Delete */ .page-node-edit.node--type-verkaufsartikel .form-actions #edit-delete { background: #e74c3c; color: white; } .k-lb--gallery{ position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9999; display:flex; align-items:center; justify-content:center; padding: 24px; } .k-lb--gallery[hidden]{ display:none; } .k-lb--gallery img{ width: 100%; height: 75vh; object-fit: contain; /* in Lightbox lieber nichts abschneiden */ border-radius: 16px; } .site-footer__inner{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items:start; } @media (max-width: 900px){ .site-footer__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px){ .site-footer__inner{ grid-template-columns: 1fr; } } .site-footer{ width: 100%; padding: 28px 0; /* klein halten */ } .site-footer__inner{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* z.B. 3 Spalten */ gap: 22px; align-items: start; } @media (max-width: 900px){ .site-footer__inner{ grid-template-columns: 1fr; } } /* =============================== Startseite – Suche zentrieren ================================ */ .home-search { display: flex; justify-content: center; align-items: center; padding: 120px 20px; /* Abstand oben/unten */ } .home-search-form { width: 100%; max-width: 640px; /* schöne Breite */ display: flex; justify-content: center; } .home-search-button { width: 100%; height: 56px; border-radius: 28px; font-size: 16px; } /* =============================== Startseite – Suche vertikal ================================ */ .home-search { display: flex; justify-content: center; padding: 120px 20px 90px; } .home-search .container { width: 100%; max-width: 640px; } .home-search-form { display: flex; flex-direction: column; gap: 16px; } /* Inputs */ .home-search-input { width: 100%; height: 58px; padding: 0 20px; border-radius: 18px; border: 1px solid rgba(0,0,0,0.12); background: #ffffff; font-size: 16px; outline: none; transition: all .2s ease; } .home-search-input::placeholder { color: rgba(0,0,0,0.45); } .home-search-input:focus { border-color: rgba(0, 80, 95, 0.55); box-shadow: 0 0 0 4px rgba(0, 80, 95, 0.14); } /* Button */ .home-search-button { width: 100%; height: 58px; border-radius: 18px; border: 0; background: #00505f; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,0.10); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; } .home-search-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.14); opacity: 0.95; } .home-search-button:active { transform: translateY(0); } .path-user-login .layout-content { min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; padding: 60px 20px; } .path-user-login form.user-login-form, .path-user-login form#user-login-form { width: 100%; max-width: 440px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 22px; box-shadow: 0 14px 35px rgba(0,0,0,0.10); } .path-user-login .kalendra-login-help { margin-top: 18px; display: grid; gap: 12px; text-align: center; } .path-user-login .kalendra-help-line { font-size: 14px; color: rgba(0,0,0,0.55); line-height: 1.5; } .path-user-login .kalendra-help-link { color: #00505f; font-weight: 600; text-decoration: none; position: relative; padding-bottom: 2px; transition: opacity .2s ease; } .path-user-login .kalendra-help-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(0, 80, 95, 0.35); transition: opacity .2s ease; } .path-user-login .kalendra-help-link:hover { opacity: 0.8; } /* Der echte Center-Wrapper bei dir heißt .layout-content (siehe DOM im Screenshot) */ .path-user-login main#main-content .layout-content { width: 100%; display: flex; justify-content: center; padding: 70px 20px 90px; } /* Das Formular als Card */ .path-user-login form.user-login-form { width: 100%; max-width: 440px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 24px; box-shadow: 0 14px 35px rgba(0,0,0,0.10); } .path-user-login .user-login-form .form-item { margin: 0 0 14px; } .path-user-login .user-login-form input[type="text"], .path-user-login .user-login-form input[type="email"], .path-user-login .user-login-form input[type="password"] { width: 100%; height: 56px; padding: 0 18px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.12); background: #fff; font-size: 16px; outline: none; } .path-user-login .user-login-form input:focus { border-color: rgba(0, 80, 95, 0.55); box-shadow: 0 0 0 4px rgba(0, 80, 95, 0.14); } .path-user-login .user-login-form .form-submit { width: 100%; height: 56px; border-radius: 16px; border: 0; background: #00505f; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,0.10); transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease; } .path-user-login .user-login-form .form-submit:hover { opacity: .94; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.12); } /* ========================================= LOGIN – main komplett zentriert ========================================= */ .path-user-login .site-main, .path-user-login main#main-content, .path-user-login main[role="main"] { display: flex; align-items: center; /* vertikal */ justify-content: center; /* horizontal */ min-height: calc(100vh - 180px); padding: 40px 20px; } .path-user-login .layout-content, .path-user-login .block-system-main-block, .path-user-login #block-lara-content { width: 100%; display: flex; justify-content: center; } .path-user-login form.user-login-form { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; padding: 26px; box-shadow: 0 20px 45px rgba(0,0,0,0.12); } :root{ --brand: #00505f; /* deine eine Farbe */ --text: #0b0f14; --bg: #ffffff; --border: rgba(0,0,0,.12); --shadow: 0 10px 28px rgba(0,0,0,.08); --radius: 14px; --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .button, .cta-button, .cm-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font-weight: 222; text-decoration: none; cursor: pointer; transition: transform .08s ease, filter .2s ease; } .button:hover, .cta-button:hover, .cm-btn:hover { filter: brightness(1.05); transform: translateY(-1px); } .button.ghost, .cm-btn.cm-ghost { background: transparent; color: var(--brand); } /* 1 Schrift überall */ html, body, button, input, select, textarea { font-family: var(--font) !important; color: var(--text); } body { background: var(--bg); } .nav-link{ margin-left: 14px; color: var(--brand, #00505f); text-decoration: none; font-weight: 700; line-height: 1; } .nav-link:hover{ text-decoration: underline; } /* ========================= HEADER RESPONSIVE FIX - Floats raus, Flex rein - Ruhiger Übergang Tablet ========================= */ /* Header oben stabil */ header .main{ display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 18px 0; float: none; /* überschreibt alte float-Logik */ } header .main .logo{ float:none; width:auto; margin:0; display:flex; align-items:center; } header .main .links{ float:none; width:auto; margin:0; padding:0; display:flex; align-items:center; justify-content:flex-end; gap: 18px; } /* Links rechts: ruhiger Look + eigener Underline-Style */ header .main .links a{ float:none; padding: 0; font-size: 20px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } /* ========================= MENÜ RESPONSIVE FIX - Zwischenstufe für Tablets - Mobile-Stack erst ab 640px ========================= */ /* Desktop/Tablet: horizontal, darf umbrechen statt “springen” */ header .menu ul{ flex-wrap: wrap; gap: 10px 20px; } header .menu ul li{ flex-grow: 0; /* verhindert 3 riesige gleich breite Blöcke */ } header .menu ul li a{ font-size: clamp(16px, 2.1vw, 22px); display:inline-block; padding: 8px 10px; } /* Tablet: etwas kompakter, aber noch horizontal */ @media (max-width: 900px){ header .main .links a{ font-size: 18px; } header .menu{ padding: 8px 0; } } /* Mobile-Stack erst wirklich bei Phones */ @media (max-width: 640px){ .menu.has-menu .mobile{ display:flex !important; flex-direction:column; } } /* ========================= KALENDRA HEADER SYSTEM (clean override) ruhig / modern / elegant ========================= */ :root{ --brand: #00505f; } /* 1) Header oben: Flex statt floats/% */ header .main{ display:flex !important; align-items:center; justify-content:space-between; gap: 18px; padding: 18px 0; float:none !important; width:100%; } header .main .logo, header .main .links{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; } /* Logo nicht zu groß */ header .main .logo img{ max-height: 70px; width:auto; } /* Login/Register als elegante Links */ header .main .links{ display:flex; align-items:center; gap: 22px; justify-content:flex-end; } header .main .links a{ float:none !important; padding:0 !important; color: var(--brand); font-size: 20px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } header .main .links a:hover{ opacity:.75; } /* 2) Menü-Leiste: nicht als 3 fette Blöcke */ header .menu ul{ display:flex; justify-content:center; flex-wrap: wrap; /* Tablet: bricht weich um */ gap: 10px 24px; } header .menu ul li{ flex-grow: 0 !important; /* killt den "Block-Look" */ text-align:center; } header .menu ul li a{ display:inline-block; padding: 10px 10px; font-size: clamp(16px, 1.8vw, 22px); text-decoration: underline; text-underline-offset: 4px; } /* 3) Breakpoints: Desktop / Tablet / Smartphone */ @media (max-width: 1023px){ header .main .logo img{ max-height: 60px; } header .main .links a{ font-size: 18px; } } /* ========================= ACCOUNT MENU – MOBILE CLEAN ========================= */ @media (max-width: 679px){ /* Topbar: Logo links, Account rechts */ header .main{ display:flex !important; flex-direction: row !important; align-items:center; justify-content:space-between; gap: 12px; position: relative; } /* float raus, damit Flex greifen kann */ .login-view{ float: none !important; position: relative; /* Anker für Desktop bleibt ok */ } /* Kreis etwas kleiner und ruhiger auf Mobile */ .login-text{ width: 77px; height: 77px; line-height: 46px; border-width: 2px; } /* Dropdown: nicht mehr "über dem Logo hängen" */ .submenu_hover{ position: fixed; /* löst es vom Header-Layout */ top: 84px; /* ggf. 76–96 je nach Headerhöhe */ right: 12px; left: 12px; /* verhindert off-screen */ width: auto; max-width: 420px; /* fühlt sich wie Panel an */ margin-left: auto; /* rechts ausgerichtet */ z-index: 9999; } /* Listenfloats auf Mobile entfernen (ruhiger) */ .submenu_hover li, .submenu_hover li a{ float: none !important; width: 100%; } .submenu_hover li{ padding: 12px 10px; /* mehr Touchfläche */ } } .form-element { padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.15); background: #fff; font-size: 16px; min-height: 44px; box-sizing: border-box; } .form-element:focus { outline: none; border-color: #0f8b8d; box-shadow: 0 0 0 4px rgba(15,139,141,0.15); } /* Die eigentliche Form wie eine Card */ form.user-form, user-form { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 12px 32px rgba(0,0,0,0.08); } /* Tabs etwas Abstand */ .tabs { margin-bottom: 18px; } /* Buttons unten schöner */ .form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .form-actions .button, .form-actions input[type="submit"] { border-radius: 999px; padding: 10px 16px; } /* Alle Drupal Formulare schöner als Card */ form.user-form, form#user-form { background: #ffffff; border-radius: 18px; padding: 32px; box-shadow: 0 16px 40px rgba(0,0,0,0.08); margin-top:12px; } .form-element { padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.15); font-size: 16px; min-height: 44px; box-sizing: border-box; transition: all 0.2s ease; } .form-element:focus { outline: none; border-color: #0f8b8d; box-shadow: 0 0 0 4px rgba(15,139,141,0.15); } .form-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; } .form-actions input[type="submit"], .form-actions .button { border-radius: 999px; padding: 10px 18px; font-weight: 600; } form.user-form { max-width: 600px; /* Breite begrenzen */ margin: 0 auto; /* Horizontal zentrieren */ padding: 20px; } form.user-form .form-item { margin-bottom: 20px; } form.user-form input, form.user-form select, form.user-form textarea { padding: 10px; border-radius: 6px; border: 1px solid #ccc; } .form-actions .button { width: 100%; max-width: 400px; /* optional Begrenzung */ display: block; margin: 10px auto; text-align: center; } @media screen and (min-width: 38em) { .layout-container { margin: 0; } } .layout-container { margin: 0; } .submenu_hover li { display: flex; align-items: center; justify-content: center; /* oder flex-start wenn linksbündig */ min-height: 56px; /* statt padding 7px */ padding: 0 16px; font-size: 22px; border-bottom: 1px solid #eaeaea; box-sizing: border-box; } .submenu_hover li { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .submenu_hover li:active { background-color: #f2f2f2; } .submenu_hover li { display: flex; align-items: center; justify-content: flex-start; min-height: 60px; padding: 0 20px; font-size: 22px; border-bottom: 1px solid #f0f0f0; } .user-profile { max-width: 760px; margin: 24px auto; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); } .user-profile .field { margin: 10px 0; font-size: 16px; } .profile-card { max-width: 800px; margin: 40px auto; padding: 40px; background: #fff; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); } .profile-header { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; } .profile-avatar img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 20px rgba(0,0,0,0.15); } .profile-name { font-size: 32px; margin: 0; color: #0f6d75; } .profile-location { font-size: 16px; color: #666; margin-top: 8px; } .profile-details { margin-top: 20px; display: grid; gap: 12px; font-size: 16px; } .profile-item { padding: 12px 16px; background: #f7f9fa; border-radius: 10px; } .profile-page { max-width: 900px; margin: 60px auto; text-align: center; } .profile-hero img { max-width: 320px; margin-bottom: 30px; } .profile-title { font-size: 42px; margin-bottom: 30px; } .profile-description { font-size: 18px; line-height: 1.7; margin-bottom: 50px; } .profile-contact { border-top: 1px dashed #999; border-bottom: 1px dashed #999; padding: 40px 0; margin-top: 30px; } .contact-item { margin: 25px 0; font-size: 18px; } .contact-label { display: block; font-size: 12px; letter-spacing: 2px; margin-bottom: 6px; color: #777; } .k-profile__head { text-align: center; } .k-profile__logo img { max-width: 340px; width: 100%; height: auto; display: inline-block; } .k-profile__name { margin-top: 24px; } .k-profile__details { max-width: 720px; margin: 0 auto; } /* ✅ Thumbs wie bei Dienstleistungen: klein, gleichmäßig, hübsch */ /* optional: Body scroll lock */ body.k-lb-open{ overflow:hidden; } @media (max-width: 640px){ .k-gallery__thumb{ width:110px; height:74px; } .k-gallery-swiper{ height:70vh; } } /* ========================= DETAIL SYSTEM ========================= */ .k-detail{ padding:26px 0; text-align:center; border-bottom:1px dashed rgba(0,0,0,.15); } .k-detail:last-child{ border-bottom:0; } .k-detail__value{ font-size:18px; font-weight:400; color:#111; } .k-detail__value--big{ font-size:22px; font-weight:500; } /* ========================= PREIS ========================= */ .k-detail--price{ padding-top:10px; } .k-currency{ margin-left:4px; font-size:18px; } /* ========================= BADGES ========================= */ .k-badges-row{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .k-badge{ padding:6px 14px; border-radius:999px; font-size:13px; font-weight:500; } /* Verhandlungsbasis */ .k-badge--neutral{ background:#e9e9e9; color:#555; } /* Privatverkauf */ .k-badge--offer{ background:#cfe7e5; color:#0d6b63; } /* Zustand */ .k-badge--condition{ background:#dbe3f5; color:#2a4aa8; } /* ========================= LINKS (Telefon & Mail) ========================= */ .k-link{ color:#0a58ff; text-decoration:none; } .k-link:hover{ text-decoration:underline; }