/* ---- 03.02.2025 ---- */ :root, [data-bs-theme=light] { scroll-behavior: smooth; --bs-body-bg: var(--bs-gray-100); --bs-body-font-family: "", sans-serif; --bs-body-font-size: medium; --bs-body-font-weight: 300; --bs-body-line-height: 1.5em; --bs-body-color: #666; --bs-body-color-rgb: 69, 69, 69; --bs-body-color-a-rgb: 69, 69, 69; --heading-font-family: "", sans-serif; --bs-heading-color: var(--bs-primary); --heading-link-color: inherit; --heading-link-decoration: none; --heading-link-hover-color: inherit; --heading-link-hover-decoration: underline; --bs-primary: #2299ff; --bs-primary-rgb: 34, 153, 255; --bs-primary-a-rgb: 34, 153, 255; --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.5); --bs-primary-color: rgba(var(--bs-primary-rgb), 0.75); --bs-primary-dark: #0077dd; --bs-primary-dark-rgb: 0,119,221; --bs-primary-light: #aaddff; --bs-primary-light-rgb: 170,221,255; --bs-primary-bg: var(--bs-primary); --bs-primary-text-emphasis: var(--bs-primary-dark); --bs-primary-bg-subtle: var(--bs-primary-light); --bs-secondary: #ff8800; --bs-secondary-rgb: 255,136,0;/* in Forms */ --bs-secondary-a-rgb: 255,136,0; --bs-secondary-border-subtle: rgba(var(--bs-secondary-rgb), 0.5); --bs-secondary-color: rgba(var(--bs-secondary-rgb), 0.75); --bs-secondary-dark: #dd6600; --bs-secondary-dark-rgb: 255,68,0; --bs-secondary-light: #ffaa44; --bs-secondary-light-rgb: 255,170,68; --bs-secondary-bg: var(--bs-secondary); /* disabled */ --bs-secondary-text-emphasis: var(--bs-secondary-dark); --bs-secondary-bg-subtle: var(--bs-secondary-light); --bs-accent: orchid; --bs-accent-rgb: 216, 112, 214; --bs-accent-a-rgb: 216, 112, 214; --bs-accent-dark: mediumorchid; --bs-accent-dark-rgb: 186,84,211; --bs-accent-light: plum; --bs-accent-light-rgb: 221, 160, 221; --bs-accent-bg: var(--bs-accent); --bs-light: #e4e8f0; --bs-light-rgb: 228, 232, 240; --bs-lighter: #f1f4fa; --bs-lighter-rgb: 241, 244, 250; --bs-dark: #222; --bs-dark-rgb: 34,34,34; --bs-gray: #6c757d; --bs-gray-rgb: 108, 117, 125; --bs-gray-dark: #5D6874; --bs-gray-dark-rgb: 93,104,116; --bs-gray-light: #dee2e6; --bs-gray-light-rgb: 222,226,230; --bs-red: #f12244; --bs-danger: #f12244; --bs-red-rgb: 241,34,68; --bs-danger-rgb: 241,34,68; --bs-red-dark: #cc1133; --bs-red-dark-rgb: 204,17,51; --bs-green: #11cc66; --bs-success: #11CC66; --bs-green-rgb: 17,204,102; --bs-success-rgb: 17,204,102; --bs-green-dark: #00a44a; --bs-green-dark-rgb: 0,164,74; --bs-test: aqua; --bs-test-rgb: 0,255,255; --bs-test2: yellow; --bs-test2-rgb: 255,255,0; --bs-test3: fuchsia; --bs-test3-rgb: 255,0,255; --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-color: var(--bs-primary); --bs-link-hover-color: var(--bs-primary-dark); --bs-link-decoration: underline; --link-hover-decoration: none; --link-weight: 500; --link-parallel-color: var(--bs-primary-rgb); --link-parallel-hover-color: var(--bs-secondary); --link-parallel-weight: var(--bs-body-font-weight); --link-parallel-decoration: none; --link-parallel-hover-decoration: underline; --nav-font-family: ""; --nav-font-weight: 400; --nav-link-font-family: ""; --nav-link-font-weight: 400; --nav-link-color: var(--bs-body-color); --nav-link-hover-font-weight: 400; --nav-link-hover-color: var(--bs-primary); --nav-link-active-font-weight: 600; --nav-link-active-color: var(--bs-primary); --nav-link-show-font-weight: 400; --nav-link-show-color: var(--bs-primary); --nav-link-affix-font-weight: var(--nav-link-font-weight); --nav-link-affix-color: var(--nav-link-color); --nav-link-affix-hover-font-weight: var(--nav-link-hover-font-weight); --nav-link-affix-hover-color: var(--nav-link-hover-color); --nav-link-affix-active-font-weight: var(--nav-link-active-font-weight); --nav-link-affix-active-color: var(--nav-link-active-color); --nav-link-affix-show-font-weight: var(--nav-link-show-font-weight); --nav-link-affix-show-color: var(--nav-link-show-color); --dropdown-font-family: ""; --dropdown-font-weight: 400; --dropdown-color: var(--bs-body-color); --dropdown-bg: rgba(var(--bs-gray-rgb), 0); --dropdown-hover-font-weight: 900; --dropdown-hover-color: var(--bs-black); --dropdown-hover-bg: rgba(var(--bs-gray-rgb), .2); --dropdown-active-font-weight: 900; --dropdown-active-color: var(--bs-black); --dropdown-active-bg: rgba(var(--bs-gray-rgb), 0); --list-einschub: 28px !important; --list-einschub-md: 37px !important; --list-einschub-lg: 43px !important; --list-padding-t: .4em; --list-padding-b: .4em; --list-symbol-color: var(--bs-primary); --list-symbol-hover-color: var(--bs-primary-dark); --list-symbol-active-color: var(--bs-accent); --list-symbol: '\F061'; --list-symbol-font-family: "Font Awesome 5 Free"; --list-symbol-font-weight: 900; --list-border-color: var(--bs-gray-400); --list-border-width: 1px; --bs-border-radius-sm: 0 !important; --bs-border-radius: 0 !important; --bs-border-color: var(--bs-gray-400); --bs-border-width: 1px; --bs-border-radius-img: 4px; --bs-border-radius-img-aside: 3px; --form-control-bg: #f9f9fb; --form-color: rgba(0,0,0, 1) !important; --form-color-rgb: rgba(0,0,0, .5) !important; --form-bg: rgba(var(--bs-gray-light-rgb), .2) !important; --form2-bg: rgba(var(--bs-gray-light-rgb), .6) !important; --form-color-rgb: 102,102,102 !important; --muted: var(--heading-font-family); --small: 0.875em; --smaller: 0.75em; --gradient-1: linear-gradient(0deg, rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-secondary-rgb), 1) ); --gradient-2: linear-gradient(45deg, rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-secondary-rgb), 1)); --gradient-3: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-secondary-rgb), 1)); --gradient-4: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-secondary-rgb), 1)); --gradient-5: linear-gradient(270deg, rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-secondary-rgb), 1)); --gradient-6: linear-gradient(360deg, rgba(var(--bs-primary-rgb), 1) 30%, rgba(var(--bs-secondary-rgb), 1) 80%, rgba(var(--bs-secondary-rgb), 1) 100%); } form, form input, form label, form select, form textarea, form button, input[type="file"]:disabled::-webkit-file-upload-button, input[type="file"]:disabled::file-selector-button, input[type="file"].form-control:disabled { --bs-secondary-bg: var(--form-bg) } input[type="file"].form-control:hover, input[type="file"].form-control:hover::-webkit-file-upload-button, input[type="file"].form-control:hover::file-selector-button { --bs-secondary-bg: var(--form2-bg) } :disabled { border-color: rgba(170, 170, 170, 0.2) !important } body [data-bs-theme=primary] { --bs-body-color: var(--bs-white-rgb); color: rgba(var(--bs-body-color), 1) !important; } [data-bs-theme=primary] > * { --bs-body-bg: var(--bs-lighter) !important; --bs-heading-color: rgba(var(--bs-accent-rgb), 1) !important; --heading-link-hover-color: var(--bs-white) !important; --bs-link-color: var(--bs-accent-light) !important; --bs-link-hover-color: var(--bs-white) !important; --bs-primary: rgba(var(--bs-accent-rgb), 1) !important; --bs-primary-rgb: var(--bs-accent-rgb) !important; --bs-secondary: var(--bs-secondary-light) !important; --bs-secondary-rgb: var(--bs-secondary-light-rgb) !important; --bs-accent: var(--bs-accent-light) !important; --bs-accent-rgb: var(--bs-accent-light-rgb) !important; --bs-gray: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-100: rgba(var(--bs-white-rgb), 0.1) !important; --bs-gray-200: rgba(var(--bs-white-rgb), 0.2) !important; --bs-gray-300: rgba(var(--bs-white-rgb), 0.3) !important; --bs-gray-400: rgba(var(--bs-white-rgb), 0.4) !important; --bs-gray-500: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-600: rgba(var(--bs-white-rgb), 0.6) !important; --bs-gray-700: rgba(var(--bs-white-rgb), 0.7) !important; --bs-gray-800: rgba(var(--bs-white-rgb), 0.8) !important; --bs-gray-900: rgba(var(--bs-white-rgb), 0.9) !important; --bs-gray-dark: rgba(var(--bs-white-rgb), 0.8) !important; --list-symbol-color: var(--bs-accent-light); --list-symbol-hover-color: var(--bs-white) !important; --list-symbol-active-color: var(--bs-accent-light) !important; } [data-bs-theme=primary] .text-accent, [data-bs-theme=primary] a.text-accent, [data-bs-theme=primary] a.text-accent:hover { color: rgba(var(--bs-accent-light-rgb), 1) !important } [data-bs-theme=primary] .text-primary, [data-bs-theme=primary] a.text-primary, [data-bs-theme=primary] a.text-primary:hover { color: rgba(var(--bs-accent-light-rgb), 1) !important } [data-bs-theme=primary] .text-secondary, [data-bs-theme=primary] a.text-secondary, [data-bs-theme=primary] a.text-secondary:hover { color: rgba(var(--bs-secondary-light-rgb), 1) !important } [data-bs-theme=primary] .btn-absenden { --bs-primary: var(--bs-secondary) !important; --bs-primary-rgb: var(--bs-secondary-light) !important; } [data-bs-theme=primary] .btn-absenden:hover { --bs-primary-dark: rgba(var(--bs-white-rgb), 1) !important; --bs-primary-dark-rgb: rgba(var(--bs-white-rgb), 1) !important; --bs-white: rgba(var(--bs-primary-a-rgb), 1) !important } [data-bs-theme=primary] .icon-bg.bg-white, [data-bs-theme=primary] .icon-bg.bg-white:hover, [data-bs-theme=primary] .icon-bg.border-white:hover { color: rgba(var(--bs-primary-a-rgb), 1) !important } [data-bs-theme=primary] .btn-primary, [data-bs-theme=primary] .icon-bg.bg-primary { background: rgba(var(--bs-primary-light-rgb), 1) !important; border-color: rgba(var(--bs-primary-light-rgb), 1) !important; color: rgba(var(--bs-primary-a-rgb), 1) !important } [data-bs-theme=primary] .btn-primary:hover, [data-bs-theme=primary] .icon-bg.bg-primary:hover { background: rgba(var(--bs-white-rgb), 1) !important; border-color: rgba(var(--bs-white-rgb), 1) !important; color: rgba(var(--bs-primary-a-rgb), 1) !important } [data-bs-theme=primary] .btn-outline-primary, [data-bs-theme=primary] .icon-bg.border-primary { border-color: rgba(var(--bs-primary-light-rgb), 1) !important; color: rgba(var(--bs-primary-light-rgb), 1) !important } [data-bs-theme=primary] .btn-outline-primary:hover, [data-bs-theme=primary] .icon-bg.border-primary:hover { background: rgba(var(--bs-primary-light-rgb), 1) !important; border-color: rgba(var(--bs-primary-light-rgb), 1) !important; color: rgba(var(--bs-primary-a-rgb), 1) !important; } body [data-bs-theme=secondary] { --bs-body-color: var(--bs-white-rgb); color: rgba(var(--bs-body-color), 1) !important; } [data-bs-theme=secondary] > * { --bs-body-bg: var(--bs-lighter) !important; --bs-heading-color: rgba(var(--bs-primary-dark-rgb), 1) !important; --heading-link-hover-color: var(--bs-white) !important; --bs-link-color: rgba(var(--bs-accent-dark-rgb), 1) !important; --bs-link-hover-color: var(--bs-white) !important; --bs-primary: var(--bs-primary-dark) !important; --bs-primary-rgb: var(--bs-primary-dark-rgb) !important; --bs-secondary: var(--bs-secondary-light) !important; --bs-secondary-rgb: var(--bs-secondary-light-rgb) !important; --bs-accent: rgba(var(--bs-accent-dark-rgb), 1) !important; --bs-accent-rgb: rgba(var(--bs-accent-dark-rgb), 1) !important; --bs-gray: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-100: rgba(var(--bs-white-rgb), 0.1) !important; --bs-gray-200: rgba(var(--bs-white-rgb), 0.2) !important; --bs-gray-300: rgba(var(--bs-white-rgb), 0.3) !important; --bs-gray-400: rgba(var(--bs-white-rgb), 0.4) !important; --bs-gray-500: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-600: rgba(var(--bs-white-rgb), 0.6) !important; --bs-gray-700: rgba(var(--bs-white-rgb), 0.7) !important; --bs-gray-800: rgba(var(--bs-white-rgb), 0.8) !important; --bs-gray-900: rgba(var(--bs-white-rgb), 0.9) !important; --bs-gray-dark: rgba(var(--bs-white-rgb), 0.8) !important; --list-symbol-color: var(--bs-accent-dark) !important; --list-symbol-hover-color: var(--bs-white) !important; --list-symbol-active-color: var(--bs-accent-dark) !important; } [data-bs-theme=secondary] .text-accent, [data-bs-theme=secondary] a.text-accent, [data-bs-theme=secondary] a.text-accent:hover { color: rgba(var(--bs-accent-dark-rgb), 1) !important } [data-bs-theme=secondary] .text-primary, [data-bs-theme=secondary] a.text-primary, [data-bs-theme=secondary] a.text-primary:hover { color: rgba(var(--bs-primary-dark-rgb), 1) !important } [data-bs-theme=secondary] .text-secondary, [data-bs-theme=secondary] a.text-secondary, [data-bs-theme=secondary] a.text-secondary:hover { color: rgba(var(--bs-secondary-light-rgb), 1) !important } [data-bs-theme=secondary] .btn-absenden:hover { --bs-primary-dark: rgba(var(--bs-white-rgb), 1) !important; --bs-primary-dark-rgb: rgba(var(--bs-white-rgb), 1) !important; --bs-white: rgba(var(--bs-secondary-a-rgb), 1) !important } [data-bs-theme=secondary] .icon-bg.bg-white, [data-bs-theme=secondary] .icon-bg.bg-white:hover, [data-bs-theme=secondary] .icon-bg.border-white:hover { color: rgba(var(--bs-secondary-a-rgb), 1) !important } [data-bs-theme=secondary] .btn-secondary, [data-bs-theme=secondary] .icon-bg.bg-secondary { background: rgba(var(--bs-secondary-light-rgb), 1) !important; border-color: rgba(var(--bs-secondary-light-rgb), 1) !important; color: rgba(var(--bs-secondary-a-rgb), 1) !important } [data-bs-theme=secondary] .btn-secondary:hover, [data-bs-theme=secondary] .icon-bg.bg-secondary:hover { background: rgba(var(--bs-white-rgb), 1) !important; border-color: rgba(var(--bs-white-rgb), 1) !important; color: rgba(var(--bs-secondary-a-rgb), 1) !important } [data-bs-theme=secondary] .btn-outline-secondary, [data-bs-theme=secondary] .icon-bg.border-secondary { border-color: rgba(var(--bs-secondary-light-rgb), 1) !important; color: rgba(var(--bs-secondary-light-rgb), 1) !important } [data-bs-theme=secondary] .btn-outline-secondary:hover, [data-bs-theme=secondary] .icon-bg.border-secondary:hover { background: rgba(var(--bs-secondary-light-rgb), 1) !important; border-color: rgba(var(--bs-secondary-light-rgb), 1) !important; color: rgba(var(--bs-secondary-a-rgb), 1) !important; } [data-bs-theme=secondary] .icon-bg.bg-accent { background: rgba(var(--bs-accent-light-rgb), 1) !important; border-color: rgba(var(--bs-accent-light-rgb), 1) !important; color: rgba(var(--bs-accent-a-rgb), 1) !important } [data-bs-theme=secondary] .icon-bg.bg-accent:hover { background: rgba(var(--bs-white-rgb), 1) !important; border-color: rgba(var(--bs-white-rgb), 1) !important; color: rgba(var(--bs-accent-a-rgb), 1) !important } [data-bs-theme=secondary] .icon-bg.border-accent { border-color: rgba(var(--bs-accent-light-rgb), 1) !important; color: rgba(var(--bs-accent-light-rgb), 1) !important } [data-bs-theme=secondary] .icon-bg.border-accent:hover { background: rgba(var(--bs-accent-light-rgb), 1) !important; border-color: rgba(var(--bs-accent-light-rgb), 1) !important; color: rgba(var(--bs-accent-a-rgb), 1) !important; } body [data-bs-theme=accent] { --bs-body-color: var(--bs-white-rgb); color: rgba(var(--bs-body-color), 1) !important; } [data-bs-theme=accent] > * { --bs-body-bg: var(--bs-white) !important; --bs-heading-color: rgba(var(--bs-primary-dark-rgb), 1) !important; --heading-link-hover-color: var(--bs-white) !important; --bs-link-color: var(--bs-primary-dark) !important; --bs-link-hover-color: var(--bs-white) !important; --bs-primary: var(--bs-primary-dark) !important; --bs-primary-rgb: var(--bs-primary-dark-rgb) !important; --bs-secondary: var(--bs-secondary-light) !important; --bs-secondary-rgb: var(--bs-secondary-light-rgb) !important; --bs-accent: var(--bs-accent-dark-rgb) !important; --bs-accent-rgb: var(--bs-accent-dark-rgb) !important; --bs-gray: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-100: rgba(var(--bs-white-rgb), 0.1) !important; --bs-gray-200: rgba(var(--bs-white-rgb), 0.2) !important; --bs-gray-300: rgba(var(--bs-white-rgb), 0.3) !important; --bs-gray-400: rgba(var(--bs-white-rgb), 0.4) !important; --bs-gray-500: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-600: rgba(var(--bs-white-rgb), 0.6) !important; --bs-gray-700: rgba(var(--bs-white-rgb), 0.7) !important; --bs-gray-800: rgba(var(--bs-white-rgb), 0.8) !important; --bs-gray-900: rgba(var(--bs-white-rgb), 0.9) !important; --bs-gray-dark: rgba(var(--bs-white-rgb), 0.8) !important; --list-symbol-color: var(--bs-primary-dark) !important; --list-symbol-hover-color: var(--bs-white) !important; --list-symbol-active-color: var(--bs-primary-dark) !important; } [data-bs-theme=accent] .text-primary, [data-bs-theme=accent] a.text-primary, [data-bs-theme=accent] a.text-primary:hover { color: rgba(var(--bs-primary-dark-rgb), 1) !important } [data-bs-theme=accent] .text-secondary, [data-bs-theme=accent] a.text-secondary, [data-bs-theme=accent] a.text-secondary:hover { color: rgba(var(--bs-secondary-light-rgb), 1) !important } [data-bs-theme=accent] .text-accent, [data-bs-theme=accent] a.text-accent, [data-bs-theme=accent] a.text-accent:hover { color: rgba(var(--bs-white-rgb), 1) !important } [data-bs-theme=accent] .btn-absenden { --bs-primary: var(--bs-secondary) !important; --bs-primary-rgb: var(--bs-secondary-light) !important; } [data-bs-theme=accent] .btn-absenden:hover { --bs-primary-dark: rgba(var(--bs-white-rgb), 1) !important; --bs-primary-dark-rgb: rgba(var(--bs-white-rgb), 1) !important; --bs-white: rgba(var(--bs-accent-a-rgb), 1) !important } [data-bs-theme=accent] .icon-bg.bg-white, [data-bs-theme=accent] .icon-bg.bg-white:hover, [data-bs-theme=accent] .icon-bg.border-white:hover { color: rgba(var(--bs-accent-a-rgb), 1) !important } [data-bs-theme=accent] .icon-bg.border-accent { border-color: rgba(var(--bs-accent-dark-rgb), 1) !important; color: rgba(var(--bs-accent-dark-rgb), 1) !important } [data-bs-theme=accent] .icon-bg.border-accent:hover { background: rgba(var(--bs-white-rgb), 1) !important; border-color: rgba(var(--bs-white-rgb), 1) !important; color: rgba(var(--bs-accent-a-rgb), 1) !important; } body [data-bs-theme=dark] { --bs-body-color: var(--bs-white-rgb); color: rgba(var(--bs-body-color), 1) !important; } [data-bs-theme=dark] > * { --bs-body-bg: var(--bs-lighter) !important; --heading-link-hover-color: var(--bs-white) !important; --bs-heading-color: var(--bs-primary); --heading-link-hover-color: var(--bs-white) !important; --bs-link-color: var(--bs-primary) !important; --bs-link-hover-color: var(--bs-white) !important; --bs-secondary: var(--bs-secondary-light) !important; --bs-secondary-rgb: var(--bs-secondary-light-rgb) !important; --bs-black: rgba(var(--bs-white-rgb), .6) !important; --bs-black-rgb: rgba(var(--bs-white-rgb), .6) !important; --bs-dark: rgba(var(--bs-white-rgb), 0.75) !important; --bs-dark-rgb: rgba(var(--bs-white-rgb), 0.75) !important; --bs-gray: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-100: rgba(var(--bs-white-rgb), 0.1) !important; --bs-gray-200: rgba(var(--bs-white-rgb), 0.2) !important; --bs-gray-300: rgba(var(--bs-white-rgb), 0.3) !important; --bs-gray-400: rgba(var(--bs-white-rgb), 0.4) !important; --bs-gray-500: rgba(var(--bs-white-rgb), 0.5) !important; --bs-gray-600: rgba(var(--bs-white-rgb), 0.6) !important; --bs-gray-700: rgba(var(--bs-white-rgb), 0.7) !important; --bs-gray-800: rgba(var(--bs-white-rgb), 0.8) !important; --bs-gray-900: rgba(var(--bs-white-rgb), 0.9) !important; --bs-gray-dark: rgba(var(--bs-white-rgb), 0.8) !important; --list-symbol-color: var(--bs-primary) !important; --list-symbol-hover-color: var(--bs-white) !important; --list-symbol-active-color: var(--bs-primary) !important; } [data-bs-theme=dark] .text-black, [data-bs-theme=dark] a.text-black, [data-bs-theme=dark] a.text-black:hover { color: rgba(var(--bs-white-rgb), .6) !important } [data-bs-theme=dark] .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.7); } [data-bs-theme=dark] .icon-bg.bg-white, [data-bs-theme=dark] .icon-bg.bg-white:hover, [data-bs-theme=dark] .icon-bg.border-white:hover { color: rgba(var(--bs-gray-rgb), 1) !important } [data-font-theme=large2] { --bs-body-font-size: 130%; --list-einschub: 33px !important; --list-einschub-md: 42px !important; --list-einschub-lg: 48px !important; .navbar .nav-link, .offcanvas .nav-link { font-size: 150% !important; } .navbar .nav-link span, .offcanvas .nav-link span { font-size: 50% !important;} .navbar .dropdown-header, .offcanvas .dropdown-header { font-size: 120% !important;} .navbar .dropdown-menu, .offcanvas .dropdown-menu { font-size: 100% !important;} :is(h1,.h1) { font-size: 210% !important } :is(h2,.h2) { font-size: 195% !important } :is(h3,.h3) { font-size: 170% !important } :is(h4,.h4) { font-size: 150% !important } :is(h5,.h5) { font-size: 135% !important } :is(h6,.h6) { font-size: 120% !important } :is(h1,.h1).display-1 { font-size: 380% !important } :is(h1,.h1).display-2 { font-size: 350% !important } :is(h1,.h1).display-3 { font-size: 320% !important } :is(h1,.h1).display-4 { font-size: 290% !important } :is(h1,.h1).display-5 { font-size: 260% !important } :is(h1,.h1).display-6 { font-size: 230% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-1 { font-size: 310% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-2 { font-size: 280% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-3 { font-size: 250% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-4 { font-size: 220% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-5 { font-size: 200% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-6 { font-size: 180% !important } .fs-1 { font-size: 185% !important; } .fs-2 { font-size: 160% !important; } .fs-3 { font-size: 140% !important; } .fs-4 { font-size: 125% !important; } .fs-5 { font-size: 110% !important; } .fs-6 { font-size: 100% !important; } /* Normal */ .fs-7 { font-size: 90% !important; } .fs-8 { font-size: 80% !important; } .fs-9 { font-size: 70% !important; } @media (min-width: 575px) {.fs-sm-1 { font-size: 185% !important; }.fs-sm-2 { font-size: 160% !important; }.fs-sm-3 { font-size: 140% !important; }.fs-sm-4 { font-size: 125% !important; }.fs-sm-5 { font-size: 110% !important; }.fs-sm-6 { font-size: 100% !important; }.fs-sm-7 { font-size: 90% !important; }.fs-sm-8 { font-size: 80% !important; }.fs-sm-9 { font-size: 70% !important; }} @media (min-width: 768px) {.fs-md-1 { font-size: 185% !important; }.fs-md-2 { font-size: 160% !important; }.fs-md-3 { font-size: 140% !important; }.fs-md-4 { font-size: 125% !important; }.fs-md-5 { font-size: 110% !important; }.fs-md-6 { font-size: 100% !important; }.fs-md-7 { font-size: 90% !important; }.fs-md-8 { font-size: 80% !important; }.fs-md-9 { font-size: 70% !important; }} @media (min-width: 992px) {.fs-lg-1 { font-size: 185% !important; }.fs-lg-2 { font-size: 160% !important; }.fs-lg-3 { font-size: 140% !important; }.fs-lg-4 { font-size: 125% !important; }.fs-lg-5 { font-size: 110% !important; }.fs-lg-6 { font-size: 100% !important; }.fs-lg-7 { font-size: 90% !important; }.fs-lg-8 { font-size: 80% !important; }.fs-lg-9 { font-size: 70% !important; }} @media (min-width: 1200px) {.fs-xl-1 { font-size: 185% !important; }.fs-xl-2 { font-size: 160% !important; }.fs-xl-3 { font-size: 140% !important; }.fs-xl-4 { font-size: 125% !important; }.fs-sm-5 { font-size: 110% !important; }.fs-xl-6 { font-size: 100% !important; }.fs-xl-7 { font-size: 90% !important; }.fs-xl-8 { font-size: 80% !important; }.fs-xl-9 { font-size: 70% !important; }} } /*-------------------------------------------------------------- # Frontend-Balken / Screenreader --------------------------------------------------------------*/ .frontend img { width: auto !important; height: auto !important } /*-------------------------------------------------------------- # Farben (style_basics_01.css) --------------------------------------------------------------*/ .bg-primary-dark { background-color: rgba(var(--bs-primary-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-primary-light { background-color: rgba(var(--bs-primary-light-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-secondary-dark { background-color: rgba(var(--bs-secondary-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-secondary-light { background-color: rgba(var(--bs-secondary-light-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-accent { background-color: rgba(var(--bs-accent-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-accent-dark { background-color: rgba(var(--bs-accent-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-accent-light { background-color: rgba(var(--bs-accent-light-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-lighter { background-color: rgba(var(--bs-lighter-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-gray { background-color: rgba(var(--bs-gray-rgb), var(--bs-bg-opacity, 1)) !important; } .text-primary { --bs-bg-opacity: 1; color: var(--bs-primary) !important; } .text-primary-dark { --bs-bg-opacity: 1; color: var(--bs-primary-dark) !important; } .text-primary-light { --bs-bg-opacity: 1; color: var(--bs-primary-light) !important; } .text-secondary { --bs-bg-opacity: 1; color: var(--bs-secondary) !important; } .text-secondary-dark{ --bs-bg-opacity: 1; color: var(--bs-secondary-dark) !important; } .text-secondary-light{ --bs-bg-opacity: 1; color: var(--bs-secondary-light) !important; } .text-accent { --bs-bg-opacity: 1; color: var(--bs-accent) !important; } .text-accent-dark { --bs-bg-opacity: 1; color: var(--bs-accent-dark) !important; } .text-accent-light { --bs-bg-opacity: 1; color: var(--bs-accent-light) !important; } .text-red, .red, .rot { --bs-bg-opacity: 1; color: var(--bs-red) !important; } .text-green, .green, .gruen { --bs-bg-opacity: 1; color: var(--bs-green) !important } .text-orange, .orange { --bs-bg-opacity: 1; color: var(--bs-orange) !important } .text-blue, .blue { --bs-bg-opacity: 1; color: var(--bs-blue) !important } .text-gray, .gray, .grau { --bs-bg-opacity: 1; color: var(--bs-gray) !important } .text-gray-dark { --bs-bg-opacity: 1; color: var(--bs-gray-dark) !important } .text-gray-light { --bs-bg-opacity: 1; color: var(--bs-gray-light) !important } .text-gray-100 { --bs-bg-opacity: 1; color: var(--bs-gray-100) !important } .text-gray-200 { --bs-bg-opacity: 1; color: var(--bs-gray-200) !important } .text-gray-300 { --bs-bg-opacity: 1; color: var(--bs-gray-300) !important } .text-gray-400 { --bs-bg-opacity: 1; color: var(--bs-gray-400) !important } .text-gray-500 { --bs-bg-opacity: 1; color: var(--bs-gray-500) !important } .text-gray-600 { --bs-bg-opacity: 1; color: var(--bs-gray-600) !important } .text-gray-700 { --bs-bg-opacity: 1; color: var(--bs-gray-700) !important } .text-gray-800 { --bs-bg-opacity: 1; color: var(--bs-gray-800) !important } .text-gray-900 {--bs-bg-opacity: 1; color: var(--bs-gray-900) !important } .border-accent { --bs-border-opacity: 1; border-color: rgba(var(--bs-accent-rgb), var(--bs-border-opacity)) !important;} .border-accent-light { --bs-border-opacity: 1; border-color: rgba(var(--bs-accent-light-rgb), var(--bs-border-opacity)) !important;} .border-gray { --bs-border-opacity: 1; border-color: rgba(var(--bs-gray-rgb), var(--bs-border-opacity)) !important;} .bg-gradient-1 { background: var(--gradient-1) !important } .bg-gradient-2 { background: var(--gradient-2) !important } .bg-gradient-3 { background: var(--gradient-3) !important } .bg-gradient-4 { background: var(--gradient-4) !important } .bg-gradient-5 { background: var(--gradient-5) !important } .bg-gradient-6 { background: var(--gradient-6) !important } /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ .z-100 {z-index: 100 !important;} .z-1000 {z-index: 1000 !important;} #lightboxOverlay { z-index: 100000} #lightbox { z-index: 100000} /* Anker-Sprung */ [id] { scroll-margin-top: 200px; } [id^="ID"] { display: block; /* wichtig für korrekten Sprung (navi-parallel), auch ohne Fronend-Modus */ } @media (max-width: 767px) { [id] { scroll-margin-top: 30px; } } html, body { /* muss evtl weggelassen werden */ overflow-x: hidden !important; } html { height: 100%;/* für Sticky Footer */ } body { min-height: 100%;/* für Sticky Footer */ margin: 0;/* für Sticky Footer */ display: flex;/* für Sticky Footer */ flex-direction: column;/* für Sticky Footer */ } main { flex: 1;/* für Sticky Footer */ } body { color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); background: var(--bs-body-bg) !important; white-space: normal; word-break: normal; /* Verhindert das Brechen einzelner Buchstaben */ hyphens: auto; /* Aktiviert Silbentrennung */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; /* Mindestanzahl von Zeichen vor/nach einem Trennstrich */ -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 4 4 4; /* Mindestens 4 Zeichen insgesamt, 4 davor und danach */ } /*-------------------------------------------------------------- # Sections / Aufbau --------------------------------------------------------------*/ main { padding: 130px 0; } .start main { padding-top: 0; padding-bottom: 0 } .start main > section { padding: 100px 0; } @media (max-width: 1200px) { main .container, footer .container, #highlight .container { min-width: 100%; padding-left: 30px; padding-right: 30px; } } @media (max-width: 992px) { main { padding: 100px 0; } .start main > section { padding: 100px 0; } } @media (max-width: 767px) { main { padding: 70px 0; } .start main > section { padding: 70px 0; } main .container, footer .container, #highlight .container { margin-bottom: 1.25em } } /*-------------------------------------------------------------- # Typografie -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6 { color: var(--bs-heading-color); font-family: var(--heading-font-family); display: block; width: 100%; margin-top: 2em; margin-bottom: .3em; white-space: normal; word-break: normal; /* Verhindert das Brechen einzelner Buchstaben */ hyphens: auto; /* Aktiviert Silbentrennung */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; /* Mindestanzahl von Zeichen vor/nach einem Trennstrich */ -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 4 4 4; /* Mindestens 4 Zeichen insgesamt, 4 davor und danach */ } :is(h1, h2, h3, h4, h5, h6) a, :is(.h1, .h2, .h3, .h4, .h5, .h6) a, a.h2,a.h3,a.h4,a.h5,a.h6 { color: var(--heading-link-color); text-decoration: var(--heading-link-decoration); font-weight: inherit !important; } h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover, .h1 a:hover,.h2 a:hover,.h3 a:hover,.h4 a:hover,.h5 a:hover,.h6 a:hover { color: var(--heading-link-hover-color); text-decoration: var(--heading-link-hover-decoration); transition: .3s } h1,.h1, aside h2, aside .h2 { margin-top: 0 } aside h3, aside .h3, aside h4, aside .h4, aside h5, aside .h5, aside h6, aside .h6 { margin-top: 1.5em } h1.border, h2.border, h3.border, h4.border, h5.border, h6.border, .h1.border, .h2.border, .h3.border, .h4.border, .h5.border, .h6.border { display: block; width: 100%; border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, .1) !important; border-color: var(--list-border-color) !important; border-left: none !important; border-right: none !important; border-bottom: none !important; margin-top: 2em; padding-top: 2.3em; text-transform: none !important } h1 sub, h2 sub, h3 sub, h4 sub, h5 sub, h6 sub, .h1 sub, .h2 sub, .h3 sub, .h4 sub, .h5 sub, .h6 sub, .title sub { font-size: 60%; text-transform: none; letter-spacing: 0; font-weight: normal; display: block; align-self: stretch; display: block; width: 100%; padding-top: 0; line-height: 1.3em; white-space: normal !important; } h2 sub, .h2 sub { font-size: 65% } h3 sub, .h3 sub { font-size: 70% } h4 sub, .h4 sub { font-size: 75% } h5 sub, .h5 sub { font-size: 80% } h6 sub, .h6 sub { font-size: 90% } h2.title sub, .h2.title sub { font-size: 45% } h3.title sub, .h3.title sub { font-size: 50% } h4.title sub, .h4.title sub { font-size: 55% } h5.title sub, .h5.title sub { font-size: 60% } h6.title sub, .h6.title sub { font-size: 70% } aside h1 sub, aside .h1 sub { font-size: 70% } aside h2 sub, aside .h2 sub { font-size: 75% } aside h3 sub, aside .h3 sub { font-size: 80% } aside h4 sub, aside .h4 sub { font-size: 85% } aside h5 sub, aside .h5 sub { font-size: 100% } aside h6 sub, aside .h6 sub { font-size: 100% } h1, .h1, /* Headline H1: Page + Container */ #c-page > h1:not(:is(.c-row *)), /* H1 Page */ #c-page .c-row h1:not(.c-element *) /* H1 Container */ { font-size: clamp(2rem, 1.8rem + 1.2vw, 3.25rem); line-height: 1.2; } h2, .h2 { font-size: clamp(1.55rem, 1.35rem + 0.8vw, 2.5rem); line-height: 1.25; } h3, .h3 { font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.8rem); line-height: 1.3; } h4, .h4 { font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.65rem); line-height: 1.35; } h5, .h5 { font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.4rem); line-height: 1.4; } h6, .h6 { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem); line-height: 1.45; } aside h1, aside .h1 { font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2.25rem); } aside h2, aside .h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.7rem); } aside h3, aside .h3 { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.4rem); } aside h4, aside .h4 { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); } aside h5, aside .h5 { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); } aside h6, aside .h6 { font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem); } @media (max-width: 767px) { h1, .h1, aside h1, aside .h1 { font-size: clamp(2rem, 1.75rem + 1.5vw, 3.25rem); } h2, .h2, aside h2, aside .h2 { font-size: clamp(1.55rem, 1.35rem + 1vw, 2.5rem); } h3, .h3, aside h3, aside .h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); } h4, .h4, aside h4, aside .h4 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.55rem); } h5, .h5, aside h5, aside .h5 { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); } h6, .h6, aside h6, aside .h6 { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem); } h1 sub, .h1 sub, aside h1 sub, aside .h1 sub { font-size: 60% } h2 sub, .h2 sub, aside h2 sub, aside .h2 sub { font-size: 65% } h3 sub, .h3 sub, aside h3 sub, aside .h3 sub { font-size: 70% } h4 sub, .h4 sub, aside h4 sub, aside .h4 sub { font-size: 75% } h5 sub, .h5 sub, aside h5 sub, aside .h5 sub { font-size: 80% } h6 sub, .h6 sub, aside h6 sub, aside .h6 sub { font-size: 90% } } @media (max-width: 575px) { #c-page .c-row h1:not(.c-element *) /* H1 Container */ { font-size: clamp(2rem, 1.75rem + 1.5vw, 3.25rem) !important; } } .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7 { font-weight: inherit; } .display-1 { font-size: 460% !important } .display-2 { font-size: 430% !important } .display-3 { font-size: 400% !important } .display-4 { font-size: 370% !important } .display-5 { font-size: 330% !important } .display-6 { font-size: 300% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-1 { font-size: 310% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-2 { font-size: 280% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-3 { font-size: 250% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-4 { font-size: 220% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-5 { font-size: 190% !important } :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6).display-6 { font-size: 160% !important } .title, /* Headline H1: Page + Container */ #c-page > h1:not(:is(.c-row *)), /* H1 Page */ #c-page .c-row h1:not(.c-element *) /* H1 Container */ { display: flex; flex-direction: column; align-items: flex-start } aside .title { margin-bottom: 35px; padding-bottom: 0; margin-top: 0; text-align: left } aside h5.title, aside .h5.title, aside h6.title, aside .h6.title { padding-bottom: 10px; margin-bottom: 15px; } aside .title::before { left: 0 } aside .title::after { left: 0 } a.title-mehr { margin-left: -5px } a.title-mehr i { color: var(--bs-gray) !important; transition: .3s; } a.title-mehr:hover i { color: var(--bs-primary) !important } .topline { display: block; line-height: 1.35em; font-size: var(--fs-5) !important } @media (max-width: 1200px) { .topline { font-size: var(--fs-6) !important } } @media (max-width: 992px) { .topline { font-size: var(--fs-7) !important } } @media (max-width: 767px) { .topline { font-size: var(--fs-8) !important } } .title.text-center { text-align: center !important; } .title.text-start { text-align: left !important; } .title.text-end { text-align: right !important } .text-center sub { text-align: center !important; } .text-start sub { text-align: left !important; } .text-end sub { text-align: right !important; } @media (min-width: 575px) { .title.text-sm-center { text-align: center !important; } .title.text-sm-start { text-align: left !important; } .title.text-sm-end { text-align: right !important; } .text-sm-center .topline { text-align: center !important; } .text-sm-start .topline { text-align: left !important } .text-sm-end .topline { text-align: right !important } .text-sm-center sub { text-align: center !important; } .text-sm-start sub { text-align: left !important; } .text-sm-end sub { text-align: right !important; } } @media (min-width: 768px) { .title.text-md-center { text-align: center !important } .title.text-md-start { text-align: left !important; } .title.text-md-end { text-align: right !important; } .text-md-center .topline { text-align: center !important; } .text-md-start .topline { text-align: left !important} .text-md-end .topline { text-align: right !important } .text-md-center sub { text-align: center !important } .text-md-start sub { text-align: left !important; } .text-md-end sub { text-align: right !important; } } @media (min-width: 992px) { .title.text-lg-center { text-align: center !important; } .title.text-lg-start { text-align: left !important; } .title.text-lg-end { text-align: right !important; } .text-lg-center .topline { text-align: center !important } .text-lg-start .topline { text-align: left !important } .text-lg-end .topline { text-align: right !important } .text-lg-center sub { text-align: center !important } .text-lg-start sub { text-align: left !important; } .text-lg-end sub { text-align: right !important; } } /*-------------------------------------------------------------- # Wrapper-link --------------------------------------------------------------*/ .wrapper-link { flex-direction: column } .wrapper-link, .wrapper-link:hover { text-decoration: none !important; } .wrapper-link article :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6) { text-decoration: none !important } .wrapper-link:hover :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--heading-link-hover-color); text-decoration: var(--heading-link-hover-decoration); transition: .2s } .wrapper-link p, .wrapper-link:hover p { text-decoration: none !important; color: var(--bs-body-color); } /* a:not(.lb-next):not(.lb-prev):focus, a:not(.lb-next):not(.lb-prev):focus-visible, .wrapper-link:focus, .wrapper-link:focus-visible, .stretched-link:focus, .stretched-link:focus-visible, .nav-link:focus, .nav-link:focus-visible, .nav-item:focus, .nav-item:focus-visible, button:focus, button:focus-visible, input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible, .figure a:focus, .figure a:focus-visible, .figure a:focus img, .figure a:focus-visible img { outline: 3px solid rgba(0, 240, 255, 0.5); box-shadow: 0 0 0 0.25rem rgba(0, 240, 255,.5) inset; } a[data-lightbox] { display: inline-block; } a[aria-hidden="true"]:focus-visible, a[aria-hidden="true"]:focus { outline: none !important; box-shadow: none !important; } */ main a:not(.wrapper-link):not(.btn):not(.nav-link):not(.dropdown-item):not(.debug-box a):not(.pagination a):not(.navi-parallel a) { color: var(--bs-link-color); font-weight: var(--link-weight); text-decoration: none; transition: .3s; } main a:not(.wrapper-link):not(.btn):not(.nav-link):not(.dropdown-item):not(.debug-box a):not(.pagination a):not(.navi-parallel a):hover { color: var(--bs-link-hover-color); text-decoration: var(--link-hover-decoration); } main li:not(.page-item) a { font-weight: var(--link-weight); } ul.navi-parallel li a { color: var(--link-parallel-color); font-weight: var(--link-parallel-weight); text-decoration: var(--link-parallel-decoration) !important; transition: .1s; } ul.navi-parallel li a:hover { color: var(--link-parallel-hover-color); text-decoration: var(--link-parallel-hover-decoration) !important; } a.text-black { color: rgba(0, 0, 0, 1) !important} a.text-black:hover { color: rgba(0, 0, 0, 1) !important; text-decoration: underline} a.text-white { color: rgba(255,255,255, 1) !important} a.text-white:hover { color: rgba(255,255,255, 1) !important; text-decoration: underline} a.text-body { color: rgba(var(--bs-body-color-a-rgb), 1) !important; } a.text-body:hover { color: rgba(var(--bs-body-color-a-rgb), 1) !important; text-decoration: underline} a.text-primary { color: rgba(var(--bs-primary-a-rgb), 1) !important; } a.text-primary:hover { color: rgba(var(--bs-primary-a-rgb), 1) !important; text-decoration: underline} a.text-secondary { color: rgba(var(--bs-secondary-a-rgb), 1) !important} a.text-secondary:hover { color: rgba(var(--bs-secondary-a-rgb), 1) !important; text-decoration: underline} a.text-accent { color: rgba(var(--bs-accent-a-rgb), 1) !important} a.text-accent:hover { color: rgba(var(--bs-accent-a-rgb), 1) !important; text-decoration: underline} .pagination a:hover { text-decoration: none; } address { margin-bottom: 0 } b { font-weight: bold } strong { font-weight: 800 } .muted { font-family: var(--muted) } small, .small { font-size: var(--small) } .smaller { font-size: var(--smaller) } .lowercase, .text-none, :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6).lowercase, :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6).text-none { text-transform: none !important } .text-decoration-none, .text-decoration-none > a { text-decoration: none !important } :hover > .text-decoration-hover, .text-decoration-hover:hover { text-decoration: underline !important; } .nowrap, .text-nowrap { white-space: nowrap !important; } .text-no-break, :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6, .title).text-no-break { hyphens: none !important; -webkit-hyphens: none !important; -ms-hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .text-no-hyphens, :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6, .title).text-no-hyphens { hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; } .cursor-pointer { cursor: pointer !important } hr { width: 100% } .hr-break { height: 1em; border: none; margin: 0; padding: 0; width: 100% } .hr-xl { margin: 8em 0; padding: 0; } .hr-l { margin: 6em 0; padding: 0; } .hr-m { margin: 1.5em 0; padding: 0; } .hr-s { margin: 1em 0; padding: 0; } .hr-xs { margin: .5em 0; padding: 0; } @media (max-width: 767px) { hr { margin-top: 1.5em; padding-top: 0; } .hr-xl { margin: 3em 0; } .hr-l { margin: 2em 0; } .hr-m { margin: 1em 0; } .hr-s { margin: .5em 0;} } @media (min-width: 576px) { .shadow-none-sm { box-shadow: none !important; } .shadow-sm-sm { box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-sm-md { box-shadow: var(--bs-box-shadow) !important; } .shadow-sm-lg { box-shadow: var(--bs-box-shadow-lg) !important; } } @media (min-width: 768px) { .shadow-none-md { box-shadow: none !important; } .shadow-md-sm { box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-md-md, .shadow-md { box-shadow: var(--bs-box-shadow) !important; } .shadow-md-lg { box-shadow: var(--bs-box-shadow-lg) !important; } } @media (min-width: 992px) { .shadow-none-lg { box-shadow: none !important; } .shadow-lg-sm { box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-lg-md { box-shadow: var(--bs-box-shadow) !important; } .shadow-lg-lg { box-shadow: var(--bs-box-shadow-lg) !important; } } @media (min-width: 1200px) { .shadow-none-xl { box-shadow: none !important; } .shadow-xl-sm { box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-xl-md { box-shadow: var(--bs-box-shadow) !important; } .shadow-xl-lg { box-shadow: var(--bs-box-shadow-lg) !important; } } @media (min-width: 1400px) { .shadow-none-xxl { box-shadow: none !important; } .shadow-xxl-sm { box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-xxl-md { box-shadow: var(--bs-box-shadow) !important; } .shadow-xxl-lg { box-shadow: var(--bs-box-shadow-lg) !important; } } .border-6 { border-width: 6px !important; } .border-7 { border-width: 7px !important; } .border-8 { border-width: 8px !important; } .border-9 { border-width: 9px !important; } .border-10 { border-width: 10px !important; } @media (min-width:576px){.border-xs-0{border:none!important}.border-xs-1{border-width:1px!important}.border-xs-2{border-width:2px!important}.border-xs-3{border-width:3px!important}.border-xs-4{border-width:4px!important}.border-xs-5{border-width:5px!important}.border-xs-6{border-width:6px!important}.border-xs-7{border-width:7px!important}.border-xs-8{border-width:8px!important}.border-xs-9{border-width:9px!important}.border-xs-10{border-width:10px!important}} @media (min-width:768px){.border-sm-0{border:none!important}.border-sm-1{border-width:1px!important}.border-sm-2{border-width:2px!important}.border-sm-3{border-width:3px!important}.border-sm-4{border-width:4px!important}.border-sm-5{border-width:5px!important}.border-sm-6{border-width:6px!important}.border-sm-7{border-width:7px!important}.border-sm-8{border-width:8px!important}.border-sm-9{border-width:9px!important}.border-sm-10{border-width:10px!important}} @media (min-width:992px){.border-md-0{border:none!important}.border-md-1{border-width:1px!important}.border-md-2{border-width:2px!important}.border-md-3{border-width:3px!important}.border-md-4{border-width:4px!important}.border-md-5{border-width:5px!important}.border-md-6{border-width:6px!important}.border-md-7{border-width:7px!important}.border-md-8{border-width:8px!important}.border-md-9{border-width:9px!important}.border-md-10{border-width:10px!important}} @media (min-width:1200px){.border-lg-0{border:none!important}.border-lg-1{border-width:1px!important}.border-lg-2{border-width:2px!important}.border-lg-3{border-width:3px!important}.border-lg-4{border-width:4px!important}.border-lg-5{border-width:5px!important}.border-lg-6{border-width:6px!important}.border-lg-7{border-width:7px!important}.border-lg-8{border-width:8px!important}.border-lg-9{border-width:9px!important}.border-lg-10{border-width:10px!important}} @media (min-width:1400px){.border-xl-0{border:none!important}.border-xl-1{border-width:1px!important}.border-xl-2{border-width:2px!important}.border-xl-3{border-width:3px!important}.border-xl-4{border-width:4px!important}.border-xl-5{border-width:5px!important}.border-xl-6{border-width:6px!important}.border-xl-7{border-width:7px!important}.border-xl-8{border-width:8px!important}.border-xl-9{border-width:9px!important}.border-xl-10{border-width:10px!important}} @media (max-width: 767px) { .w-xs-0 { width: 0% !important } .w-xs-25 { width: 25% !important } .w-xs-50 { width: 50% !important } .w-xs-75 { width: 75% !important } .w-xs-100 { width: 100% !important } .w-xs-auto { width: 100% !important } } @media (min-width: 768px) { .w-sm-0 { width: 0% !important } .w-sm-25 { width: 25% !important } .w-sm-50 { width: 50% !important } .w-sm-75 { width: 75% !important } .w-sm-100 { width: 100% !important } .w-sm-auto { width: auto !important } } @media (min-width: 992px) { .w-md-0 { width: 0% !important } .w-md-25 { width: 25% !important } .w-md-50 { width: 50% !important } .w-md-75 { width: 75% !important } .w-md-100 { width: 100% !important } .w-md-auto { width: auto !important } } @media (min-width: 1200px) { .w-lg-0 { width: 0% !important } .w-lg-25 { width: 25% !important } .w-lg-50 { width: 50% !important } .w-lg-75 { width: 75% !important } .w-lg-100 { width: 100% !important } .w-lg-auto { width: auto !important } } @media (min-width: 1400px) { .w-xl-0 { width: 0% !important } .w-xl-25 { width: 25% !important } .w-xl-50 { width: 50% !important } .w-xl-75 { width: 75% !important } .w-xl-100 { width: 100% !important } .w-xl-auto { width: auto !important } } h1.muted, .h1.muted, h2.muted, .h2.muted, h3.muted, .h3.muted, h4.muted, .h4.muted, h5.muted, .h5.muted, h6.muted, .h6.muted, h1 .muted, h2 .muted, h3 .muted, h4 .muted, h5 .muted, h6 .muted { font-family: var(--bs-body-font-family); } .fw-lighter { font-weight: 200 !important; } .fw-light { font-weight: 300 !important; } .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } .fw-bolder { font-weight: 900 !important; } .ls-0 { letter-spacing: 0 !important; } .ls-1 { letter-spacing: .02rem !important } .ls-2 { letter-spacing: .05rem !important } .ls-3 { letter-spacing: .07rem !important } .ls-4 { letter-spacing: .1rem !important } .ls-5 { letter-spacing: .15rem !important } .ls-n1 { letter-spacing: -.02rem !important } .ls-n2 { letter-spacing: -.05rem !important } .ls-n3 { letter-spacing: -.07rem !important } .fs-1 { --fs-1: calc(1.4rem + 1.5vw) !important; font-size: var(--fs-1); } .fs-2 { --fs-2: calc(1.325rem + 0.9vw) !important; font-size: var(--fs-2); } .fs-3 { --fs-3: calc(1.3rem + 0.6vw) !important; font-size: var(--fs-3); } .fs-4 { --fs-4: calc(1.275rem + 0.3vw) !important; font-size: var(--fs-4); line-height: 1.4; } .fs-5 { --fs-5: 1.25rem !important; font-size: var(--fs-5); line-height: 1.45; } .fs-6 { --fs-6: 1rem !important; font-size: var(--fs-6); line-height: 1.5; } .fs-7 { --fs-7: .9rem !important; font-size: var(--fs-7); line-height: 1.55; } .fs-8 { --fs-8: .8rem !important; font-size: var(--fs-8); line-height: 1.6em } .fs-9 { --fs-9: .7rem !important; font-size: var(--fs-9) !important; line-height: 1.65em } @media (min-width: 575px) { .fs-sm-1 { --fs-sm-1: calc(1.375rem + 1.5vw) !important; font-size: var(--fs-sm-1); } .fs-sm-2 { --fs-sm-2: calc(1.325rem + 0.9vw) !important; font-size: var(--fs-sm-2); } .fs-sm-3 { --fs-sm-3: calc(1.3rem + 0.6vw) !important; font-size: var(--fs-sm-3); } .fs-sm-4 { --fs-sm-4: calc(1.275rem + 0.3vw) !important; font-size: var(--fs-sm-4); } .fs-sm-5 { --fs-sm-5: 1.25rem !important; font-size: var(--fs-sm-5); } .fs-sm-6 { --fs-sm-6: 1rem !important; font-size: var(--fs-sm-6); } .fs-sm-7 { --fs-sm-7: .9rem !important; font-size: var(--fs-sm-7); } .fs-sm-8 { --fs-sm-8: .8rem !important; font-size: var(--fs-sm-8); } .fs-sm-9 { --fs-sm-9: .7rem !important; font-size: var(--fs-sm-9); } } @media (min-width: 768px) { .fs-md-1 { --fs-md-1: calc(1.375rem + 1.5vw) !important; font-size: var(--fs-md-1); } .fs-md-2 { --fs-md-2: calc(1.325rem + 0.9vw) !important; font-size: var(--fs-md-2); } .fs-md-3 { --fs-md-3: calc(1.3rem + 0.6vw) !important; font-size: var(--fs-md-3); } .fs-md-4 { --fs-md-4: calc(1.275rem + 0.3vw) !important; font-size: var(--fs-md-4); } .fs-md-5 { --fs-md-5: 1.25rem !important; font-size: var(--fs-md-5); } .fs-md-6 { --fs-md-6: 1rem !important; font-size: var(--fs-md-6); } .fs-md-7 { --fs-md-7: .9rem !important; font-size: var(--fs-7); } .fs-md-8 { --fs-md-8: .8rem !important; font-size: var(--fs-md-8); } .fs-md-9 { --fs-md-9: .7rem !important; font-size: var(--fs-md-9); } } @media (min-width: 992px) { .fs-lg-1 { --fs-lg-1: calc(1.375rem + 1.5vw) !important; font-size: var(--fs-lg-1); } .fs-lg-2 { --fs-lg-2: calc(1.325rem + 0.9vw) !important; font-size: var(--fs-lg-2); } .fs-lg-3 { --fs-lg-3: calc(1.3rem + 0.6vw) !important; font-size: var(--fs-lg-3); } .fs-lg-4 { --fs-lg-4: calc(1.275rem + 0.3vw) !important; font-size: var(--fs-lg-4); } .fs-lg-5 { --fs-lg-5: 1.25rem !important; font-size: var(--fs-lg-5); } .fs-lg-6 { --fs-lg-6: 1rem !important; font-size: var(--fs-lg-6); } .fs-lg-7 { --fs-lg-7: .9rem !important; font-size: var(--fs-lg-7); } .fs-lg-8 { --fs-lg-8: .8rem !important; font-size: var(--fs-lg-8); } .fs-lg-9 { --fs-lg-9: .7rem !important; font-size: var(--fs-lg-9); } } @media (min-width: 1200px) { .fs-xl-1 { --fs-xl-1: calc(1.375rem + 1.5vw) !important; font-size: var(--fs-xl-1); } .fs-xl-2 { --fs-xl-2: calc(1.325rem + 0.9vw) !important; font-size: var(--fs-xl-2); } .fs-xl-3 { --fs-xl-3: calc(1.3rem + 0.6vw) !important; font-size: var(--fs-xl-3); } .fs-xl-4 { --fs-xl-4: calc(1.275rem + 0.3vw) !important; font-size: var(--fs-xl-4); } .fs-xl-5 { --fs-xl-5: 1.25rem !important; font-size: var(--fs-xl-5); } .fs-xl-6 { --fs-xl-6: 1rem !important; font-size: var(--fs-xl-6); } .fs-xl-7 { --fs-xl-7: .9rem !important; font-size: var(--fs-xl-7); } .fs-xl-8 { --fs-xl-8: .8rem !important; font-size: var(--fs-xl-8); } .fs-xl-9 { --fs-xl-9: .7rem !important; font-size: var(--fs-xl-9); } } @media (min-width: 1px) { .border-xs-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 576px) { .border-sm-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 768px) { .border-md-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 992px) { .border-lg-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1200px) { .border-xl-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1400px) { .border-xxl-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1px) { .border-xs-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 576px) { .border-sm-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 768px) { .border-md-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 992px) { .border-lg-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1200px) { .border-xl-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1400px) { .border-xxl-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1px) { .border-xs-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 576px) { .border-sm-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 768px) { .border-md-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 992px) { .border-lg-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1200px) { .border-xl-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1400px) { .border-xxl-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1px) { .border-xs-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 576px) { .border-sm-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 768px) { .border-md-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 992px) { .border-lg-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1200px) { .border-xl-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1400px) { .border-xxl-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }} @media (min-width: 1px) { .border-xs-start-0 { border-left: none !important; }} @media (min-width: 576px) { .border-sm-start-0 { border-left: none !important; }} @media (min-width: 768px) { .border-md-start-0 { border-left: none !important; }} @media (min-width: 992px) { .border-lg-start-0 { border-left: none !important; }} @media (min-width: 1200px) { .border-xl-start-0 { border-left: none !important; }} @media (min-width: 1400px) { .border-xxl-start-0 { border-left: none !important; }} @media (min-width: 1px) { .border-xs-end-0 { border-right: none !important; }} @media (min-width: 576px) { .border-sm-end-0 { border-right: none !important; }} @media (min-width: 768px) { .border-md-end-0 { border-right: none !important; }} @media (min-width: 992px) { .border-lg-end-0 { border-right: none !important; }} @media (min-width: 1200px) { .border-xl-end-0 { border-right: none !important; }} @media (min-width: 1400px) { .border-xxl-end-0 { border-right: none !important; }} @media (min-width: 1px) { .border-xs-top-0 { border-top: none !important; }} @media (min-width: 576px) { .border-sm-top-0 { border-top: none !important; }} @media (min-width: 768px) { .border-md-top-0 { border-top: none !important; }} @media (min-width: 992px) { .border-lg-top-0 { border-top: none !important; }} @media (min-width: 1200px) { .border-xl-top-0 { border-top: none !important; }} @media (min-width: 1400px) { .border-xxl-top-0 { border-top: none !important; }} @media (min-width: 1px) { .border-xs-bottom-0 { border-bottom: none !important; }} @media (min-width: 576px) { .border-sm-bottom-0 { border-bottom: none !important; }} @media (min-width: 768px) { .border-md-bottom-0 { border-bottom: none !important; }} @media (min-width: 992px) { .border-lg-bottom-0 { border-bottom: none !important; }} @media (min-width: 1200px) { .border-xl-bottom-0 { border-bottom: none !important; }} @media (min-width: 1400px) { .border-xxl-bottom-0 { border-bottom: none !important; }} /* ========================================================= Negative Margin ========================================================= */ :root{ --n1:-.25rem; --n2:-.5rem; --n3:-1rem; --n4:-1.5rem; --n5:-3rem; } .m-n1,.mx-n1,.my-n1,.mt-n1,.me-n1,.mb-n1,.ms-n1{--n:var(--n1)} .m-n2,.mx-n2,.my-n2,.mt-n2,.me-n2,.mb-n2,.ms-n2{--n:var(--n2)} .m-n3,.mx-n3,.my-n3,.mt-n3,.me-n3,.mb-n3,.ms-n3{--n:var(--n3)} .m-n4,.mx-n4,.my-n4,.mt-n4,.me-n4,.mb-n4,.ms-n4{--n:var(--n4)} .m-n5,.mx-n5,.my-n5,.mt-n5,.me-n5,.mb-n5,.ms-n5{--n:var(--n5)} [class*="m-n"] {margin:var(--n) !important} [class*="mx-n"]{margin-inline:var(--n) !important} [class*="my-n"]{margin-block:var(--n) !important} [class*="mt-n"]{margin-top:var(--n) !important} [class*="me-n"]{margin-right:var(--n) !important} [class*="mb-n"]{margin-bottom:var(--n) !important} [class*="ms-n"]{margin-left:var(--n) !important} @media(min-width:576px){.m-sm-n1,.mx-sm-n1,.my-sm-n1,.mt-sm-n1,.me-sm-n1,.mb-sm-n1,.ms-sm-n1{--n:var(--n1)}.m-sm-n2,.mx-sm-n2,.my-sm-n2,.mt-sm-n2,.me-sm-n2,.mb-sm-n2,.ms-sm-n2{--n:var(--n2)}.m-sm-n3,.mx-sm-n3,.my-sm-n3,.mt-sm-n3,.me-sm-n3,.mb-sm-n3,.ms-sm-n3{--n:var(--n3)}.m-sm-n4,.mx-sm-n4,.my-sm-n4,.mt-sm-n4,.me-sm-n4,.mb-sm-n4,.ms-sm-n4{--n:var(--n4)}.m-sm-n5,.mx-sm-n5,.my-sm-n5,.mt-sm-n5,.me-sm-n5,.mb-sm-n5,.ms-sm-n5{--n:var(--n5)}} @media(min-width:768px){.m-md-n1,.mx-md-n1,.my-md-n1,.mt-md-n1,.me-md-n1,.mb-md-n1,.ms-md-n1{--n:var(--n1)}.m-md-n2,.mx-md-n2,.my-md-n2,.mt-md-n2,.me-md-n2,.mb-md-n2,.ms-md-n2{--n:var(--n2)}.m-md-n3,.mx-md-n3,.my-md-n3,.mt-md-n3,.me-md-n3,.mb-md-n3,.ms-md-n3{--n:var(--n3)}.m-md-n4,.mx-md-n4,.my-md-n4,.mt-md-n4,.me-md-n4,.mb-md-n4,.ms-md-n4{--n:var(--n4)}.m-md-n5,.mx-md-n5,.my-md-n5,.mt-md-n5,.me-md-n5,.mb-md-n5,.ms-md-n5{--n:var(--n5)}} @media(min-width:992px){.m-lg-n1,.mx-lg-n1,.my-lg-n1,.mt-lg-n1,.me-lg-n1,.mb-lg-n1,.ms-lg-n1{--n:var(--n1)}.m-lg-n2,.mx-lg-n2,.my-lg-n2,.mt-lg-n2,.me-lg-n2,.mb-lg-n2,.ms-lg-n2{--n:var(--n2)}.m-lg-n3,.mx-lg-n3,.my-lg-n3,.mt-lg-n3,.me-lg-n3,.mb-lg-n3,.ms-lg-n3{--n:var(--n3)}.m-lg-n4,.mx-lg-n4,.my-lg-n4,.mt-lg-n4,.me-lg-n4,.mb-lg-n4,.ms-lg-n4{--n:var(--n4)}.m-lg-n5,.mx-lg-n5,.my-lg-n5,.mt-lg-n5,.me-lg-n5,.mb-lg-n5,.ms-lg-n5{--n:var(--n5)}} @media(min-width:1200px){.m-xl-n1,.mx-xl-n1,.my-xl-n1,.mt-xl-n1,.me-xl-n1,.mb-xl-n1,.ms-xl-n1{--n:var(--n1)}.m-xl-n2,.mx-xl-n2,.my-xl-n2,.mt-xl-n2,.me-xl-n2,.mb-xl-n2,.ms-xl-n2{--n:var(--n2)}.m-xl-n3,.mx-xl-n3,.my-xl-n3,.mt-xl-n3,.me-xl-n3,.mb-xl-n3,.ms-xl-n3{--n:var(--n3)}.m-xl-n4,.mx-xl-n4,.my-xl-n4,.mt-xl-n4,.me-xl-n4,.mb-xl-n4,.ms-xl-n4{--n:var(--n4)}.m-xl-n5,.mx-xl-n5,.my-xl-n5,.mt-xl-n5,.me-xl-n5,.mb-xl-n5,.ms-xl-n5{--n:var(--n5)}} @media(min-width:1400px){.m-xxl-n1,.mx-xxl-n1,.my-xxl-n1,.mt-xxl-n1,.me-xxl-n1,.mb-xxl-n1,.ms-xxl-n1{--n:var(--n1)}.m-xxl-n2,.mx-xxl-n2,.my-xxl-n2,.mt-xxl-n2,.me-xxl-n2,.mb-xxl-n2,.ms-xxl-n2{--n:var(--n2)}.m-xxl-n3,.mx-xxl-n3,.my-xxl-n3,.mt-xxl-n3,.me-xxl-n3,.mb-xxl-n3,.ms-xxl-n3{--n:var(--n3)}.m-xxl-n4,.mx-xxl-n4,.my-xxl-n4,.mt-xxl-n4,.me-xxl-n4,.mb-xxl-n4,.ms-xxl-n4{--n:var(--n4)}.m-xxl-n5,.mx-xxl-n5,.my-xxl-n5,.mt-xxl-n5,.me-xxl-n5,.mb-xxl-n5,.ms-xxl-n5{--n:var(--n5)}} hr { border-color: var(--list-border-color); opacity: 1 } /* ============================================================== # Zitat =================================================================== */ q { font-style: italic; margin-left: 5px } q::before, q::after { content: '\ec51'; font-family: 'remixicon'; position: relative; line-height: 1; /* Text nicht fuer Screenreader doppelt vorlesen */ speak: none; aria-hidden: true; font-size: 130%; color: rgba(var(--bs-primary-rgb), .8); vertical-align: top; margin-left: 1px; top: -2px } q::before { content: "\ec52"; margin-left: -5px; margin-right: 5px; vertical-align: bottom; top: auto; bottom: -3px } :not(.quote):not(.review) > blockquote { font-style: italic; border-left: 4px solid var(--bs-secondary); margin: 2rem 5rem; padding: .7rem 0 .5rem 2rem } :not(.quote):not(.review) > blockquote p { margin-bottom: .5rem; color: var(--bs-primary); font-size: 110%; line-height: 1.6em } cite, .author { color: var(--bs-gray-600); font-style: italic } cite a, .author a, a.author { color: var(--bs-gray-600) !important; } cite a:hover, .author a:hover, a.author:hover { color: var(--bs-secondary) !important } .quote { display: block; overflow: visible; position: relative; border-radius: var(--bs-border-radius); background: var(--bs-white); box-shadow: var(--bs-box-shadow-lg); padding: 50px 40px 30px 60px } .quote blockquote::before { content: "\ec52"; font-family: 'remixicon'; position: absolute; top: 10px; left: -20px; font-size: 4.3rem; line-height: 1; color: var(--bs-secondary); /* Text nicht fuer Screenreader doppelt vorlesen */ speak: none; aria-hidden: true; } .quote figcaption { font-style: italic; font-size: 85%; margin-top: 1em; margin-bottom: 0; text-align: right; color: var(--bs-gray); } .quote figcaption a, .quote cite a, .quote .author a, .quote a.author { color: var(--bs-secondary) !important; } .quote figcaption a:hover, .quote cite a:hover, .quote .author a:hover, .quote a.author:hover { color: var(--bs-secondary) !important } .quote cite { color: var(--bs-secondary); font-style: italic } .quote .author { color: var(--bs-secondary); font-style: italic } /*-------------------------------------------------------------- # Rezensionen / Reviews / Testimonials --------------------------------------------------------------*/ .review { box-shadow: var(--bs-box-shadow-lg); background: var(--bs-white); border: 2px solid rgba(var(--bs-primary-rgb), 0); padding: 30px; padding-top: 45px; padding-bottom: 25px; position: relative; text-align: center } .review blockquote::before { position: absolute; speak: none; aria-hidden: true; content: "\ec52"; font-family: 'remixicon'; font-size: 3.7rem; top: -15px; left: 0; right: 0; text-align: center; color: var(--bs-secondary); } .review blockquote p { line-height: 1.35em } .review figcaption { } .review .author { color: var(--bs-secondary); line-height: 1.35em; display: inline-block; font-style: normal } .review .rating { white-space: nowrap } .review .rating span { color: var(--bs-warning) } .review .quelle { line-height: 1.35em; } .review cite { font-style: normal; color: var(--bs-gray-600) !important } .review cite a { font-style: normal; } .review time { font-style: normal; color: var(--bs-gray-600) !important } /* ============================================================== # TOGGLE Nav + animierte Bar/Kreuz =================================================================== */ .navbar.navbar-expand-md .navbar-toggler { display: none; } @media (max-width: 767px) { .navbar.navbar-expand-md .navbar-toggler { display: inline-block; } } .navbar-toggler { z-index: 10000; position: fixed !important; cursor: pointer; outline: none; text-decoration: none; text-align: center; right: 0; top: 0; height: 50px; width: 50px; padding: 0; border-radius: 0 !important; background: var(--bs-primary); border: none; box-shadow: none; transition: all .3s ease-in-out; } .navbar-toggler:hover, .navbar-toggler:focus, .navbar-toggler:active { outline: none; border-bottom: none !important; } .navbar-toggler i { top: -4px; font-size: 30px; width: 30px; height: 2px; color: var(--bs-white); background: var(--bs-white); position: relative; display: inline-block; -webkit-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .navbar-toggler i::before, .navbar-toggler i::after { content: ''; width: 30px; height: 2px; background: var(--bs-white); position: absolute; left: 0; -webkit-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .navbar-toggler:hover i, .navbar-toggler:hover i::before, .navbar-toggler:hover i::after { background: var(--bs-white); } .navbar-toggler i::before { top: -10px; } .navbar-toggler i::after { bottom: -10px; } .navbar-toggler:hover i::before { top: -8px; } .navbar-toggler:hover i::after { bottom: -8px; } .navbar-toggler[aria-expanded="true"] i, .offcanvas .navbar-toggler i { background: transparent !important; } .navbar-toggler[aria-expanded="true"] i::before, .offcanvas .navbar-toggler i::before { top: 0; transform: rotate(45deg); background: var(--bs-white) !important; } .navbar-toggler[aria-expanded="true"] i::after, .offcanvas .navbar-toggler i::after { bottom: 0; transform: rotate(-45deg); background: var(--bs-white) !important; } /* --------- end TOGGLE Nav -------- */ /*-------------------------------------------------------------- # NAV / MENU / MENÜ --------------------------------------------------------------*/ .navbar { font-family: var(--nav-font-family); font-weight: var(--nav-font-weight); } .navbar .nav-link, .offcanvas .nav-link { font-family: var(--nav-link-font-family); font-weight: var(--nav-link-font-weight); color: var(--nav-link-color); text-decoration: none !important } .navbar .nav-link:hover, .navbar .nav-link:focus, .offcanvas .nav-link:hover, .offcanvas .nav-link:focus { font-weight: var(--nav-link-hover-font-weight); color: var(--nav-link-hover-color); text-decoration: none !important } .navbar .nav-link#active, .navbar .nav-link.active, .offcanvas .nav-link#active, .offcanvas .nav-link.active { font-weight: var(--nav-link-active-font-weight); color: var(--nav-link-active-color); } .navbar .nav-link.show, .offcanvas .nav-link.show { font-weight: var(--nav-link-show-font-weight); color: var(--nav-link-show-color); } @media (min-width: 768px) { .navbar.affix { position: fixed; top: 0; width: 100%; } .navbar.affix .nav-link, .offcanvas.affix .nav-link { font-weight: var(--nav-link-affix-font-weight); color: var(--nav-link-affix-color); } .navbar.affix .nav-link:hover, .navbar.affix .nav-link:focus, .offcanvas.affix .nav-link:hover, .offcanvas.affix .nav-link:focus { font-weight: var(--nav-link-affix-hover-font-weight); color: var(--nav-link-affix-hover-color); } .navbar.affix .nav-link#active, .navbar.affix .nav-link.active, .offcanvas.affix .nav-link#active, .offcanvas.affix .nav-link.active { font-weight: var(--nav-link-affix-active-font-weight); color: var(--nav-link-affix-active-color); } .navbar.affix .nav-link.show, .offcanvas.affix .nav-link.show { font-weight: var(--nav-link-affix-show-font-weight); color: var(--nav-link-affix-show-color); } } /*-------------------------------------------------------------- # Dropdown --------------------------------------------------------------*/ .dropdown-menu { --bs-dropdown-link-color: var(--dropdown-color); --bs-dropdown-link-hover-color: var(--dropdown-hover-color); --bs-dropdown-link-hover-bg: var(--dropdown-hover-bg) !important; --bs-dropdown-link-active-color: var(--dropdown-active-color); --bs-dropdown-link-active-bg: var(--dropdown-active-bg) !important; border-radius: 0; } .dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--bs-primary); } .navbar .nav-link.dropdown-toggle:focus, .offcanvas .nav-link.dropdown-toggle:focus { box-shadow: none !important } .navbar .dropdown-item, .offcanvas .dropdown-item { font-family: var(--dropdown-font-family); font-weight: var(--dropdown-font-weight) !important; background-color: var(--dropdown-bg); text-decoration: none !important } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus, .offcanvas .dropdown-item:hover, .offcanvas .dropdown-item:focus { text-decoration: none !important; } .navbar .dropdown-item#active, .navbar .dropdown-item.active, .offcanvas .dropdown-item#active, .offcanvas .dropdown-item.active { color: var(--bs-dropdown-link-active-color); font-weight: var(--dropdown-active-font-weight) !important; background-color: var(--bs-dropdown-link-active-bg); } .navbar .dropdown-item:hover, .offcanvas .dropdown-item:hover { color: var(--bs-dropdown-link-hover-color) !important; font-weight: var(--dropdown-hover-font-weight) !important; background-color: var(--bs-dropdown-link-hover-bg) !important } .navbar .dropdown-item#active:hover, .navbar .dropdown-item.active:hover, .offcanvas .dropdown-item#active:hover, .offcanvas .dropdown-item.active:hover { background-color: var(--bs-dropdown-link-hover-bg) !important } @media (max-width: 767px) { .navbar .dropdown-item#active:hover, .navbar .dropdown-item:hover, .offcanvas .dropdown-item#active:hover, .offcanvas .dropdown-item:hover { background-color: var(--bs-dropdown-link-hover-bg) !important } } @media (min-width: 768px) { .navbar .dropdown-menu:not(.dropdown-submenu > .dropdown-menu) { display: block !important; visibility: hidden; pointer-events: none; opacity: 0; --bs-dropdown-link-hover-bg: rgba(var(--bs-gray-rgb), 0.15); --bs-dropdown-link-active-bg: rgba(var(--bs-accent-rgb), .3); background: var(--bs-white); box-shadow: var(--bs-box-shadow); border-radius: 0; border: none; transform: translateY(-50px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; } .navbar .dropdown-menu:not(.dropdown-submenu > .dropdown-menu).show { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s; } } /* Multilevel / Submenu */ .dropdown-submenu { position: relative; border-radius: 0; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -5px !important; margin-left: .1rem; margin-right: 0; } .dropdown-menu.dropdown-menu-end .dropdown-submenu > .dropdown-menu { right: 100%; left: auto; margin-right: .1rem; margin-left: 0; } .dropdown-submenu > a::after { position: absolute; right: 0; border: none !important; font-weight: normal; font-size: var(--fs-8); vertical-align: middle; color: var(--bs-gray); content: "\F285" !important; font-family: "bootstrap-icons"; } .dropdown-menu.dropdown-menu-end .dropdown-submenu > a::after { right: auto; left: 0; content: "\F284" !important; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a.dropdown-toggle:focus + .dropdown-menu, .dropdown-submenu > a.dropdown-toggle:active + .dropdown-menu { display: block; } /* Dropdown-Level 1 */ .navbar .dropdown-submenu .dropdown-item, .offcanvas .dropdown-submenu .dropdown-item { } .navbar .dropdown-submenu .dropdown-item#active, .offcanvas .dropdown-submenu .dropdown-item#active { } /* Dropdown-Level 2 */ .navbar .dropdown-submenu .dropdown-menu .dropdown-item, .offcanvas .dropdown-submenu .dropdown-menu .dropdown-item { } .navbar .dropdown-submenu .dropdown-menu .dropdown-item#active, .offcanvas .dropdown-submenu .dropdown-menu .dropdown-item#active { } @media (max-width: 767px) { .dropdown-submenu > a::after, .dropdown-menu.dropdown-menu-end .dropdown-submenu > a::after { content: "\F282" !important; left: auto; right: 18px; } } /*-------------------------------------------------------------- # NAVBAR - OFFCANVAS --------------------------------------------------------------*/ .offcanvas { width: 600px !important; } @media (max-width: 992px) { .offcanvas { width: 500px !important } } @media (max-width: 575px) { .offcanvas { width: 100% !important } } .offcanvas-header { padding: 50px } .offcanvas-body { padding: 50px } .offcanvas-body ul { padding: 0 } .offcanvas .navbar-nav { display: flex; flex-direction: column; } .offcanvas .nav-item { position: relative; display: flex; flex-direction: column; } .offcanvas .nav-item:hover { transition: .3s } .offcanvas .nav-link { width: 100%; text-align: left; } .offcanvas .nav-item .nav-link:hover { color: var(--nav-link-hover-color); transition: .3s } .offcanvas .nav-item.active .nav-link { color: var(--nav-link-active-color); } /* Icon hinter Dropdown-Link */ .offcanvas .nav-link.dropdown-toggle::after { position: absolute; display: inline-block; float: right; font-weight: normal !important; border: none; top: 22px; right: 10px; color: var(--bs-gray-500); font-size: var(--fs-8); font-family: "bootstrap-icons"; content: "\f282"; } .offcanvas .nav-link.dropdown-toggle.show::after { transform: rotate(180deg); transition: transform .3s ease; } .offcanvas .dropdown-menu { position: relative !important; visibility: hidden; pointer-events: none; overflow: hidden; display: block !important; inset: auto !important; opacity: 0; transform-origin: top; transform: translateY(-4px); max-height: 0; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none !important; background: none; transition: max-height .35s ease, opacity .25s ease, transform .25s ease; } .offcanvas .dropdown-menu.show { visibility: visible; pointer-events: auto; opacity: 1; max-height: 1500px; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0; transform: translateY(0) !important; } .offcanvas .dropdown-menu li { white-space: normal } .offcanvas .dropdown-menu li:last-child { } .offcanvas li.dropdown-header { } .offcanvas li.dropdown-header a { } .offcanvas li.dropdown-header a:hover { } .offcanvas .dropdown-item { padding: 0; white-space: normal } /* --------- end NAVBAR - Offcanvas -------- */ /*-------------------------------------------------------------- # NAVBAR - fixed-bottom --------------------------------------------------------------*/ @media (max-width: 767px) { .navbar.fixed-bottom { position: fixed !important; z-index: 100000; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; display: inline !important; padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important; height: 70px !important; } .navbar.fixed-bottom .navbar-collapse { position: fixed; width: 100%; bottom: 0; left: 0; right: 0; padding: 0 !important; border: none; display: inline-block !important; box-shadow: 0px -2px 10px rgba(0, 0, 0, .2); background: var(--bs-white); transform: translateY(0); /* Start: sichtbar */ transition: transform .3s ease-in-out; } .navbar.fixed-bottom .navbar-collapse.show { display: inline-block !important; transform: translateY(0) !important; } /* versteckt beim Scroll */ .navbar.fixed-bottom .navbar-collapse.hide { transform: translateY(100%); } .navbar.fixed-bottom .navbar-nav { display: flex; align-items: center; flex-direction: row; width: 100%; padding: 0 !important; justify-content: space-around !important; justify-content: space-between !important; } .navbar.fixed-bottom .nav-item { height: 70px; display: flex; flex-direction: column; margin: 0 1px !important; padding: 0 !important; flex: 0 1 auto; /* Breite nach Inhalt, nicht wachsen */ flex: 1; /* Breite gleich */ } .navbar.fixed-bottom .nav-link { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; font-size: 14px; line-height: 1em; text-transform: uppercase; letter-spacing: -0.01em; color: rgba(var(--bs-black-rgb), 0.5); } .navbar.fixed-bottom .nav-link:hover, .navbar.fixed-bottom .nav-link:focus, .navbar.fixed-bottom .nav-link#active { color: var(--bs-black); background: rgba(var(--bs-primary-rgb), .1); } .navbar.fixed-bottom .nav-link#active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .05); font-weight: 700 } .navbar.fixed-bottom .nav-link i { display: flex !important; justify-content: center; align-items: center; background: none; font-size: 20px; color: var(--bs-secondary) !important; margin-bottom: 8px !important } .navbar.fixed-bottom .nav-item.home .nav-link::before { display: inline-block } .navbar.fixed-bottom .nav-item.home span { display: inline-block } .navbar.fixed-bottom .nav-link.dropdown-toggle::after { display: none } .navbar.fixed-bottom .dropdown-menu { position: fixed; z-index: -1; top: auto !important; background: var(--bs-white); box-shadow: var(--bs-box-shadow); border-radius: 0; border: none; padding: 0 !important; bottom: 70px !important; /*width: calc(100% - 20px); left: 10px; right: 10px;*/ width: 100%; left: 0; right: 0; bottom: 60px !important; font-size: 17px; } .navbar.fixed-bottom .dropdown-menu li { padding-top: .15em; padding-bottom: .15em; } .navbar.fixed-bottom .navbar-brand { position: fixed !important; width: 100%; top: 0 !important; left: 0; } .navbar.fixed-bottom .navbar-brand:hover { top: 0 !important; } .navbar.fixed-bottom .navbar-brand img { } .navbar.fixed-bottom .navbar-brand:hover img { } .navbar.fixed-bottom .navbar-toggler { top: auto !important; bottom: 85px !important; right: 5px !important; position: fixed !important; background: var(--bs-secondary); border-right: none !important; transition: all .3s ease-in-out; margin: 0 !important; padding: 3px 0 0 0; display: block !important; border-radius: 70px !important; height: 70px; width: 70px; border: 1px solid color-mix(in srgb, var(--bs-white), transparent 50%) !important; } .navbar.fixed-bottom .navbar-toggler[aria-expanded="true"] { bottom: 85px !important; } .navbar.fixed-bottom .navbar-toggler:hover { outline: none; transition: .3s; background-color: var(--bs-secondary-dark) !important; } .navbar.fixed-bottom .navbar-toggler span { color: var(--bs-white); font-size: 12px; font-weight: 600; text-transform: uppercase; margin-top: -6px; margin-bottom: 7px; display: block } .navbar.fixed-bottom .navbar-toggler i, .navbar.fixed-bottom .navbar-toggler i::before, .navbar.fixed-bottom .navbar-toggler i::after, .navbar.fixed-bottom .navbar-toggler:hover i, .navbar.fixed-bottom .navbar-toggler:hover i::before, .navbar.fixed-bottom .navbar-toggler:hover i::after, .navbar.fixed-bottom .navbar-toggler[aria-expanded="true"] i, .navbar.fixed-bottom .navbar-toggler[aria-expanded="true"] i::before, .navbar.fixed-bottom .navbar-toggler[aria-expanded="true"] i::after { transform: none !important; background: var(--bs-white) !important; height: 3px; border-radius: 2px } .navbar.fixed-bottom .navbar-toggler i::before { top: -9px !important } .navbar.fixed-bottom .navbar-toggler i::after { bottom: -9px !important } .navbar.fixed-bottom .navbar-toggler:hover i::before { top: -8px !important } .navbar.fixed-bottom .navbar-toggler:hover i::after { bottom: -8px !important } } /* --------- end NAVBAR - fixed-bottom -------- */ /*-------------------------------------------------------------- # HIGHLIGHT / CAROUSEL --------------------------------------------------------------*/ #highlight .frontend { z-index: 10 !important; } #highlight { overflow: hidden !important; background: var(--bs-primary) } .carousel-inner { width: 100%; overflow: hidden; } /* Bei .hero --------------- */ #highlight.hero { /* Komplette Höhe */ position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; margin-top: -80px; /* Höhe Navbar */ } #highlight.hero .carousel { width: 100%; height: 100vh; object-fit: cover; object-position: center; } #highlight.hero .carousel-inner { height: 100%; } /* Bei .ratio --------------- */ #highlight.ratio { --bs-aspect-ratio: 35%; } @media (min-width: 1600px) { #highlight.ratio { --bs-aspect-ratio: 30%; max-height: 500px; } } @media (max-width: 1400px) { #highlight.ratio { --bs-aspect-ratio: 40%; } } @media (max-width: 675px) { #highlight.ratio { --bs-aspect-ratio: 65% } } @media (max-width: 575px) { #highlight.ratio { --bs-aspect-ratio: 75% } } #highlight.ratio .carousel { } #highlight.ratio .carousel-inner { height: 100%; } .carousel-item { width: 100%; height: 100%; position: relative; overflow: hidden; } .carousel-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(var(--bs-black-rgb), .6); } .carousel-item img.carousel-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .carousel-item a.stretched-link { transition: all .4s ease; } .carousel-item a.stretched-link:hover .carousel-img { opacity: .8; transition: all .4s ease-in-out; } .carousel-item .caption-content { background: rgba(var(--bs-white-rgb), .8) !important; } .carousel-item a.stretched-link .caption-content { background: rgba(var(--bs-white-rgb), .8) !important; transition: .2s; } .carousel-item a.stretched-link:hover .caption-content { background: rgba(var(--bs-primary-rgb), .9) !important; transition: .2s; } .carousel-item a.stretched-link:hover .caption-content:hover { background: rgba(var(--bs-dark-rgb), 1) !important; transition: .2s; transform: scale(1); box-shadow: var(--bs-box-shadow-sm)} .carousel-item .highlight-title { color: var(--bs-primary) !important; } .carousel-item a.stretched-link .highlight-title { color: var(--bs-primary) !important; transition: .2s;} .carousel-item a.stretched-link:hover .highlight-title { color: var(--bs-white) !important; transition: .2s;} .carousel-item a.stretched-link .caption-content:hover .highlight-title { color: var(--bs-white) !important; transition: .2s;} .carousel-item a.stretched-link:hover .highlight-title:hover { text-decoration: none; transition: .2s; } .carousel-item .lead { color: var(--bs-black) !important; } .carousel-item a.stretched-link .lead { color: var(--bs-black) !important; transition: .2s;} .carousel-item a.stretched-link:hover .lead { color: var(--bs-white) !important; transition: .2s;} .carousel-item a.stretched-link .caption-content:hover .lead { color: var(--bs-white) !important; transition: .2s;} .carousel-item a.stretched-link:hover .lead:hover { color: var(--bs-white) !important; text-decoration: none; transition: .2s; } .carousel-caption { transition: .3s; z-index: 10; display: flex; flex-direction: column; /* Elemente untereinander anordnen */ justify-content: center; /* Vertikale Zentrierung der Kinder-Elemente */ text-align: center; height: 100%; width: 100%; top: 0; left: 0; right: 0; } .carousel-caption :is(.container, [class^="container-"]) { overflow: hidden; padding: 0 } .carousel-caption .caption-content { display: flex; flex-direction: column; gap: 50px; } .carousel-caption .highlight-title { margin: 0; position: relative; display: inline-block; cursor: pointer; } .carousel-caption .lead { margin: 0 } .carousel-caption .btn:not(.caption-content .btn):not(.w-100) { /* sitzt nicht in .caption-content */ align-self: flex-start; width: auto; flex: 0 0 auto; opacity: 0 } .carousel-item a.stretched-link:hover .carousel-caption .btn:not(.caption-content .btn) { /* sitzt nicht in .caption-content - bei hover */ opacity: 1; transition: all .4s ease-in-out; } .carousel-caption .caption-content .btn { opacity: 1; margin: 0; position: relative; left: auto; bottom: auto; transform: none } /* nur für 1. Carousel-item --------------- */ .carousel-caption img.carousel-img-2 { height: 150px; max-width: 150px; width: auto; margin: 0 auto !important } @media (max-width: 1400px) { .carousel-caption img.carousel-img-2 { height: 130px;} } @media (max-width: 992px) { .carousel-caption img.carousel-img-2 { height: 110px;} } @media (max-width: 575px) { .carousel-caption img.carousel-img-2 { height: 100px;} } @media (max-width: 380px) { .carousel-caption img.carousel-img-2 { height: 80px;} } .carousel-wrapper-url { } .carousel-indicators { position: absolute; display: flex; justify-content: center; z-index: 100 !important; } .carousel-indicators button:hover { opacity: 1; transition: 0s; } .carousel-indicators [data-bs-target] { width: 30px; height: 3px; background-color: var(--bs-gray-300); } .carousel-control-prev, .carousel-control-next { z-index: 30; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: all .2s ease-in-out; opacity: 1 !important; background: var(--bs-primary); color: var(--bs-gray-200); width: 50px; height: 50px; font-size: 30px; } .carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1; background: var(--bs-primary-dark); color: var(--bs-white); } .carousel-control-prev-icon, .carousel-control-next-icon { background: none; width: 100%; height: 100%; text-align: center; position: absolute; display: flex; align-items: center; justify-content: center } .carousel-control-prev-icon::before, .carousel-control-next-icon::before { font-weight: normal; font-style: normal; color: var(--bs-gray-200); transition: all .3s ease-in-out; font-family: 'bootstrap-icons'; content: "\F27A"; content: "\F284"; } .carousel-control-next-icon::before { content: "\F27B"; content: "\F285"; } .carousel-item a.stretched-link:hover .carousel-control-prev, .carousel-item a.stretched-link:hover .carousel-control-next { color: var(--bs-black); } .carousel-control-prev { left: -50px; } .carousel-control-next { right: -50px; } .carousel:hover .carousel-control-prev { left: 10px; } .carousel:hover .carousel-control-next { right: 10px; } .carousel .carousel-control-prev:hover, .carousel .carousel-control-next:hover { transition: all .2s ease-in-out; } /*-------------------------------------------------------------- # ASIDE / CONTENT-RECHTS --------------------------------------------------------------*/ /* aside .card { padding: 40px 50px; margin-bottom: 50px } aside .img-rand-top { margin: -40px -50px 0 -50px; width: calc(100% + 100px); border-radius: 0; } aside .img-rand { margin: 0 -50px; width: calc(100% + 100px); border-radius: 0; } aside .img-rand-top img, aside .img-rand img { border-radius: 0; margin: 1em 0 0 0 !important; padding: 0 !important; border: none !important } aside .img-rand-top img { margin: 0 !important; border-top-left-radius: var(--bs-border-radius) !important; border-top-right-radius: var(--bs-border-radius) !important } aside .img-rand-top .bildunterschrift, aside .img-rand .bildunterschrift { margin-top: 7px; margin-left: 10px; margin-right: 10px; } @media (min-width: 768px) and (max-width: 1200px ) { aside .card { padding: 25px } aside .img-rand-top { margin: -25px -25px 0 -25px; width: calc(100% + 50px); } aside .img-rand { margin: 0 -25px; width: calc(100% + 50px) } } */ /*-------------------------------------------------------------- # Accordion / FAQ --------------------------------------------------------------*/ .accordion { } .accordion .accordion-item { border-color: var(--bs-border-color); } .accordion .accordion-item[class*="mb-"] { border: 1px solid var(--bs-border-color); } .accordion .accordion-item[class*="-0"] { border-top: none; } .accordion .accordion-item:hover { transition: .3s; } /* Fokus sichtbar machen .accordion-button:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); } */ .accordion-button:focus-visible { outline: 3px solid rgba(13,110,253,.25); outline-offset: 2px; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); } .accordion-item > .accordion-header { border: none; font-size: 100% !important; margin-top: 0 } .accordion .accordion-item:last-of-type[class*="mb-"] > .accordion-header { margin-bottom: 0 } .accordion-item > .accordion-header .accordion-button { font-size: 110% !important; font-family: var(--bs-body-font-family); font-weight: 600; color: var(--bs-primary); letter-spacing: 0; margin: 0 !important; background: none; border: none; box-shadow: none; line-height: 1.4em; display: flex; align-items: start; } .accordion-item > .accordion-header.accordion-button, .accordion-item > .accordion-header.accordion-button[aria-expanded="false"] { } .accordion-item > .accordion-header.accordion-button.collapsed { color: var(--bs-primary); } .accordion-item > .accordion-header:hover .accordion-button { color: var(--bs-secondary); transition: 0s } .accordion-item > .accordion-header .accordion-button[aria-expanded="true"] { color: var(--bs-secondary); box-shadow: none; } .accordion-item > .accordion-header .accordion-button::after { opacity: .4; margin-top: 4px; margin-right: -10px; width: 30px; background-position: center; } .accordion-item > .accordion-header .accordion-button:hover::after { opacity: .4 } .accordion-item > .accordion-header .accordion-button[aria-expanded="true"]::after { opacity: 1 } .accordion .accordion-item.list-style .accordion-button { padding-left: 60px } .accordion .accordion-item.list-style .accordion-button::before, .accordion .accordion-item.list-style.span .accordion-button span { margin-left: -60px; min-width: 60px; text-align: center; } .accordion .accordion-item.list-style .accordion-button::before { color: var(--bs-primary); content: "\f505"; font-family: "bootstrap-icons"; font-weight: normal; display: block; position: relative; font-size: 28px; } .accordion .accordion-item.list-style:hover .accordion-button::before { color: var(--bs-secondary); } .accordion .accordion-item.list-style .accordion-button[aria-expanded="true"]::before { color: var(--bs-secondary); } .accordion .accordion-item.list-style.span .accordion-button span { color: var(--bs-primary); font-weight: 600; font-size: 125%; display: inline-block; } .accordion .accordion-item.list-style.span:hover .accordion-button span { color: var(--bs-secondary); } .accordion .accordion-item.list-style.span .accordion-button[aria-expanded="true"] span { color: var(--bs-secondary); } .accordion .accordion-item.list-style.span .accordion-button::before { display: none } .accordion .accordion-body { overflow: hidden; } .accordion .accordion-item.list-style .accordion-body { padding-left: 60px } .accordion .accordion-body a { color: var(--bs-secondary); } .accordion .accordion-body a:hover { color: var(--bs-black); } @media (max-width:767px) { .accordion .accordion-header .accordion-button { padding-left: 15px; padding-right: 15px; } .accordion .accordion-item.list-style .accordion-button { padding-left: 50px } .accordion .accordion-item.list-style .accordion-button::before, .accordion .accordion-item.list-style.span .accordion-button span { margin-left: -50px; min-width: 50px; } .accordion .accordion-item.list-style .accordion-body { padding-left: 50px } .accordion .accordion-item.list-style .accordion-button::before { font-size: 23px; } .accordion .accordion-item.list-style.span .accordion-button span { font-size: 115%; } .accordion .accordion-header .accordion-button::after { margin-right: -2px; width: 20px; } } .accordion figure { float: right; width: 40%; margin: 0 0 1rem 1rem } @media (max-width: 680px) { .accordion figure { width: 100%; margin: 0 0 1rem 0 } } .accordion .bildrahmenlinks, .accordion .bildrahmenrechts, .accordion .bildrahmenmitte, .accordion .bildlinks, .accordion .bildrechts, .accordion .bildrahmenmitte-wrapper, .accordion .bildrahmenlinks-nb, .accordion .bildrahmenrechts-nb, .accordion .bildrahmenmitte-nb, .accordion .bildlinks-nb, .accordion .bildrechts-nb, .accordion .bildrahmenmitte-wrapper-nb { width: 35%; float: right !important; margin: 0 0 1em 1em !important } .accordion .bildunterschrift-bildrahmenmitte a img.bildrahmenmitte { width: 100% } .accordion .bildunterschrift-bildrahmenmitte-nb { width: 35%; } .accordion .bildunterschrift-bildrahmenmitte-nb .bildunterschrift { width: 35%; margin-left: 20px; float: right } @media (max-width:992px) { .accordion .bildrahmenlinks, .accordion .bildrahmenrechts, .accordion .bildrahmenmitte, .accordion .bildlinks, .accordion .bildrechts, .accordion .bildrahmenmitte-wrapper, .accordion .bildrahmenlinks-nb, .accordion .bildrahmenrechts-nb, .accordion .bildrahmenmitte-nb, .accordion .bildlinks-nb, .accordion .bildrechts-nb, .accordion .bildrahmenmitte-wrapper-nb { width: 60%; } .accordion .bildunterschrift-bildrahmenmitte-nb { width: 60%; } .accordion .bildunterschrift-bildrahmenmitte-nb .bildunterschrift { width: 60%; } } @media (max-width:480px) { .accordion .bildrahmenlinks, .accordion .bildrahmenrechts, .accordion .bildrahmenmitte, .accordion .bildlinks, .accordion .bildrechts, .accordion .bildrahmenmitte-wrapper, .accordion .bildrahmenlinks-nb, .accordion .bildrahmenrechts-nb, .accordion .bildrahmenmitte-nb, .accordion .bildlinks-nb, .accordion .bildrechts-nb, .accordion .bildrahmenmitte-wrapper-nb { width: 100%; } .accordion .bildunterschrift-bildrahmenmitte-nb { width: 100%; } .accordion .bildunterschrift-bildrahmenmitte-nb .bildunterschrift { width: 100%; margin-left: 0 } } /*-------------------------------------------------------------- # CARDS --------------------------------------------------------------*/ /*.card { --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1rem; --bs-card-title-spacer-y: 0.5rem; --bs-card-title-color: ; --bs-card-subtitle-color: ; --bs-card-border-width: var(--bs-border-width); --bs-card-border-color: var(--bs-border-color-translucent); --bs-card-border-radius: var(--bs-border-radius); --bs-card-box-shadow: ; --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); --bs-card-cap-padding-y: 0.5rem; --bs-card-cap-padding-x: 1rem; --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03); --bs-card-cap-color: ; --bs-card-height: ; --bs-card-color: ; --bs-card-bg: var(--bs-body-bg); --bs-card-img-overlay-padding: 1rem; --bs-card-group-margin: 0.75rem; color: var(--bs-body-color); background-color: var(--bs-card-bg); border: var(--bs-card-border-width) solid var(--bs-card-border-color); border-radius: var(--bs-card-border-radius); } */ .card { display: block; /* wichtig für Bildposition links/rechts */ flex-direction: unset; /* wichtig für Bildposition links/rechts */ } .card-date { display: flex; justify-content: center; align-items: center; max-width: fit-content; float: right; position: absolute; width: auto; white-space: nowrap; top: 0; right: 0; height: 25px; background-color: var(--bs-secondary); color: var(--bs-black); text-transform: uppercase; font-size: var(--fs-6); padding: 2px 10px; font-weight: 500; border-radius: 0; } .card::after { /* damit Bilder nicht aus .card rausrutschen */ content: ""; display: block; clear: both; } /*-------------------------------------------------------------- # Buttons --------------------------------------------------------------*/ .btn { text-decoration: none !important; align-items: center; justify-content: center; vertical-align: middle; border-radius: var(--bs-border-radius); --bs-btn-font-size: 100%; } .btn:not([class*="btn-"]) { background: var(--bs-lighter); border-color: var(--bs-light); } .btn:not([class*="btn-"]):hover { text-decoration: none !important; background: var(--bs-light); } .btn:not([class*="d-"]) { display: inline-flex !important; } .btn:not(form .btn):not(label.btn):not(button[type=submit].btn):not(.input-group .btn) { min-width: 24px; min-height: 24px; } .btn:not([class*="ms-"]) { margin-left: 0 !important } .btn:not(.back-to-top) i { margin-right: .4em } .btn-sm, .btn-group-sm > .btn { line-height: 1.25; min-width: 24px; min-height: 24px; --bs-btn-font-size: 75%; } .btn-md, .btn-group-md > .btn { line-height: 1.5; min-width: 55px; min-height:55px; --bs-btn-font-size: 100%; } .btn-lg, .btn-group-lg > .btn { line-height: 1.5; min-width: 70px; min-height: 70px; --bs-btn-font-size: 115%; } .btn:focus-visible, .btn-sm:focus-visible, .btn-lg:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; transition: none; } .btn + .btn, .btn-sm + .btn-sm, .btn-lg + .btn-lg { margin-left: 0.5rem; } /* .btn:not(.back-to-top) i { color: var(--bs-primary); display: flex; align-items: center; justify-content: center; margin-right: 0; margin-left: -.2rem; font-size: 22px; min-width: 30px; min-height: 28px; } .btn.btn-sm i { font-size: 17px;min-width: 20px;min-height: 20px; } .btn.btn-md i { font-size: 22px;min-width: 30px;min-height: 28px; } .btn.btn-lg i { font-size: 28px;min-width: 35px;min-height: 35px; } */ .btn:not(.back-to-top) i { font-size: 110%; } .btn-default { --bs-btn-color: var(--bs-black); --bs-btn-bg: var(--bs-gray-light); --bs-btn-border-color: var(--bs-gray-light); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-gray); --bs-btn-hover-border-color: var(--bs-gray); --bs-btn-focus-shadow-rgb: var(--bs-gray-light-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-gray); --bs-btn-active-border-color: var(--bs-gray); --bs-btn-disabled-color: var(--bs-white); --bs-btn-disabled-bg: var(--bs-gray-light); --bs-btn-disabled-border-color: var(--bs-gray-light); } .btn-outline-default { --bs-btn-color: var(--bs-gray); --bs-btn-border-color: var(--bs-gray); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-gray); --bs-btn-hover-border-color: var(--bs-gray); --bs-btn-focus-shadow-rgb: var(--bs-gray-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-gray); --bs-btn-active-border-color: var(--bs-gray); --bs-btn-disabled-color: var(--bs-gray); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-gray); --bs-gradient: none; } .btn-primary { --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-primary-dark); --bs-btn-hover-border-color: var(--bs-primary-dark); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-primary-dark); --bs-btn-active-border-color: var(--bs-primary-dark); --bs-btn-disabled-color: var(--bs-white); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-primary); --bs-gradient: none; } .btn-secondary { --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-secondary-dark); --bs-btn-hover-border-color: var(--bs-secondary-dark); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-secondary-dark); --bs-btn-active-border-color: var(--bs-secondary-dark); --bs-btn-disabled-color: var(--bs-white); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); } .btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-secondary); --bs-gradient: none; } .btn-light { --bs-btn-color: var(--bs-light); --bs-btn-border-color: var(--bs-light); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-light); --bs-btn-hover-border-color: var(--bs-light); --bs-btn-focus-shadow-rgb: var(--bs-light-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-light); --bs-btn-active-border-color: var(--bs-light); --bs-btn-disabled-color: var(--bs-light); --bs-btn-disabled-border-color: var(--bs-light); } .btn-dark { --bs-btn-color: var(--bs-white); --bs-btn-border-color: var(--bs-dark); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-dark); --bs-btn-hover-border-color: var(--bs-dark); --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-dark); --bs-btn-active-border-color: var(--bs-dark); --bs-btn-disabled-color: var(--bs-dark); --bs-btn-disabled-border-color: var(--bs-dark); } .btn-success { --bs-btn-bg: var(--bs-green); --bs-btn-border-color: var(--bs-green); --bs-btn-hover-bg: var(--bs-green-dark); --bs-btn-hover-border-color: var(--bs-green-dark); --bs-btn-active-bg: var(--bs-green-dark); --bs-btn-active-border-color: var(--bs-green-dark); --bs-btn-disabled-bg: var(--bs-green); --bs-btn-disabled-border-color: var(--bs-green); } .btn-outline-success { --bs-btn-color: var(--bs-green); --bs-btn-border-color: var(--bs-green); --bs-btn-hover-bg: var(--bs-green); --bs-btn-hover-border-color: var(--bs-green); --bs-btn-active-bg: var(--bs-green); --bs-btn-active-border-color: var(--bs-green); --bs-btn-disabled-color: var(--bs-green); --bs-btn-disabled-border-color: var(--bs-green); } .btn-danger { --bs-btn-bg: var(--bs-red); --bs-btn-border-color: var(--bs-red); --bs-btn-hover-bg: var(--bs-red-dark); --bs-btn-hover-border-color: var(--bs-red-dark); --bs-btn-active-bg: var(--bs-red-dark); --bs-btn-active-border-color: var(--bs-red-dark); --bs-btn-disabled-bg: var(--bs-red); --bs-btn-disabled-border-color: var(--bs-red); } .btn-outline-danger { --bs-btn-color: var(--bs-red); --bs-btn-border-color: var(--bs-red); --bs-btn-hover-bg: var(--bs-red); --bs-btn-hover-border-color: var(--bs-red); --bs-btn-active-bg: var(--bs-red); --bs-btn-active-border-color: var(--bs-red); --bs-btn-disabled-color: var(--bs-red); --bs-btn-disabled-border-color: var(--bs-red); } .btn-absenden { --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-primary-dark); --bs-btn-hover-border-color: var(--bs-primary-dark); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-primary-dark); --bs-btn-active-border-color: var(--bs-primary-dark); --bs-btn-disabled-color: var(--bs-white); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-custom { background: var(--bs-primary); color: var(--bs-white); border-radius: 40px; padding: 15px 20px; margin-top: 10px; display: inline-block; line-height: 1em; text-transform: uppercase; font-weight: 400; letter-spacing: .01em; display: flex; flex-direction: row; align-items: center; justify-content: center; } aside .card .btn-custom { width: 100% } .btn-custom:hover { background: var(--bs-primary-dark); color: var(--bs-white); transition: .3s } .btn-custom i { color: var(--bs-white); margin-right: 10px; font-size: var(--fs-6); } .icon-link { text-decoration: none !important; display: inline-block; position: relative; z-index: 100; padding-right: 20px } button.icon-link { background: none !important; outline: none !important; border: none !important; box-shadow: none !important } .icon-link:hover { text-decoration: underline } .icon-link.w-100 { text-align: center; width: 100%; max-width: 100%; } .icon-link.w-100.text-start { text-align: left; } .icon-link.w-100.text-end { text-align: right; } .icon-link.border { border: none !important; border-top: 1px solid rgba(0, 0, 0, .1) !important; padding-top: 15px; } .icon-link::after { position: relative; display: inline-block; content: "\ea6e"; font-family: "remixicon"; font-size: 140%; vertical-align: middle; top: -1px; width: 0px !important; } .icon-link:hover::after, a:hover .icon-link::after { margin-left: 5px; transition: margin-left .2s ease-in-out; } .icon-link:hover { text-decoration: underline !important; } .wrapper-link:hover .icon-link { text-decoration: none !important; } .wrapper-link:hover .icon-link:hover { text-decoration: underline !important; } @media (prefers-reduced-motion: reduce) { .icon-link:hover::after, a:hover .icon-link::after { transition: none; } } .rounded-top-left { border-top-left-radius: var(--bs-border-radius-pill) !important; } .rounded-top-right { border-top-right-radius: var(--bs-border-radius-pill) !important; } .rounded-bottom-left { border-bottom-left-radius: var(--bs-border-radius-pill) !important; } .rounded-bottom-right { border-bottom-right-radius: var(--bs-border-radius-pill) !important; } .rounded-top-left-0 { border-top-left-radius: 0 !important; } .rounded-top-right-0 { border-top-right-radius: 0 !important; } .rounded-bottom-left-0 { border-bottom-left-radius: 0 !important; } .rounded-bottom-right-0 { border-bottom-right-radius: 0 !important; } .btn.rounded-0 { border-radius: 0 !important; } .btn.rounded-1 { border-radius: var(--bs-border-radius-sm) !important; } .btn.rounded-2 { border-radius: var(--bs-border-radius) !important; } .btn.rounded-3 { border-radius: var(--bs-border-radius-lg) !important; } .btn.rounded-4 { border-radius: var(--bs-border-radius-xl) !important; } .btn.rounded-5 { border-radius: var(--bs-border-radius-xxl) !important; } .btn.rounded-pill { border-radius: var(--bs-border-radius-pill) !important; } .btn.rounded-top-left-0 { border-top-left-radius: 0 !important; } .btn.rounded-top-right-0 { border-top-right-radius: 0 !important; } .btn.rounded-bottom-left-0 { border-bottom-left-radius: 0 !important; } .btn.rounded-bottom-right-0 { border-bottom-right-radius: 0 !important; } .btn.rounded-top-left { border-top-left-radius: var(--bs-border-radius-pill) !important; } .btn.rounded-top-right { border-top-right-radius: var(--bs-border-radius-pill) !important; } .btn.rounded-bottom-left { border-bottom-left-radius: var(--bs-border-radius-pill) !important; } .btn.rounded-bottom-right { border-bottom-right-radius: var(--bs-border-radius-pill) !important; } /*-------------------------------------------------------------- # ergänzende Delay-Zeiten zu animate --------------------------------------------------------------*/ .animate__delay-01s { animation-delay: 0.1s; } .animate__delay-02s { animation-delay: 0.2s; } .animate__delay-03s { animation-delay: 0.3s; } .animate__delay-04s { animation-delay: 0.4s; } .animate__delay-05s { animation-delay: 0.5s; } .animate__delay-06s { animation-delay: 0.6s; } .animate__delay-07s { animation-delay: 0.7s; } .animate__delay-08s { animation-delay: 0.8s; } .animate__delay-09s { animation-delay: 0.9s; } .animate__delay-1s { animation-delay: 1s; } .animate__delay-11s { animation-delay: 1.1s; } .animate__delay-12s { animation-delay: 1.2s; } .animate__delay-13s { animation-delay: 1.3s; } .animate__delay-14s { animation-delay: 1.4s; } .animate__delay-15s { animation-delay: 1.5s; } .animate__delay-16s { animation-delay: 1.6s; } .animate__delay-17s { animation-delay: 1.7s; } .animate__delay-18s { animation-delay: 1.8s; } .animate__delay-19s { animation-delay: 1.9s; } .animate__delay-2s { animation-delay: 2s; } /*-------------------------------------------------------------- # EFFEKTE / EFFECTS --------------------------------------------------------------*/ [class*="hover-"] { transition: all 0.3s ease-in-out; } @media (min-width: 1200px) { .hover-xl-none:hover { transform: none !important } .hover-xl-zoom:hover { transform: scale(1.1) !important } .hover-xl-jump:hover { transform: translateY(-10px) !important } .hover-xl-shadow:hover { box-shadow: var(--bs-box-shadow) !important; } .hover-xl-shadow-sm:hover { box-shadow: var(--bs-box-shadow-sm) !important; } .hover-xl-shadow-lg:hover { box-shadow: var(--bs-box-shadow-lg) !important; } } @media (min-width: 992px) { .hover-lg-none:hover { transform: none !important } .hover-lg-zoom:hover { transform: scale(1.1) !important } .hover-lg-jump:hover { transform: translateY(-10px) !important } .hover-lg-shadow:hover { box-shadow: var(--bs-box-shadow) !important; } .hover-lg-shadow-sm:hover { box-shadow: var(--bs-box-shadow-sm) !important; } .hover-lg-shadow-lg:hover { box-shadow: var(--bs-box-shadow-lg) !important; } } @media (min-width: 768px) { .hover-md-none:hover { transform: none !important } .hover-md-zoom:hover { transform: scale(1.1) !important } .hover-md-jump:hover { transform: translateY(-10px) !important } .hover-md-shadow:hover { box-shadow: var(--bs-box-shadow) !important; } .hover-md-shadow-sm:hover { box-shadow: var(--bs-box-shadow-sm) !important; } .hover-md-shadow-lg:hover { box-shadow: var(--bs-box-shadow-lg) !important; } } @media (min-width: 576px) { .hover-sm-none:hover { transform: none !important } .hover-sm-zoom:hover { transform: scale(1.1) !important } .hover-sm-jump:hover { transform: translateY(-10px) !important } .hover-sm-shadow:hover { box-shadow: var(--bs-box-shadow) !important; } .hover-sm-shadow-sm:hover { box-shadow: var(--bs-box-shadow-sm) !important; } .hover-sm-shadow-lg:hover { box-shadow: var(--bs-box-shadow-lg) !important; } } .hover-none:hover { transform: none !important } .hover-bg:hover { transition: all 0.3s ease-in-out; background: var(--bs-primary-light) } .hover-img:hover img { /*transform: scale(1.1) rotate(-1deg);*/ transform: scale(1.05); transition: all .35s ease-in-out; } .hover-zoom:hover { transform: scale(1.1); } .hover-grayscale:hover { filter: grayscale(100%); } .hover-opacity:hover { opacity: 0.7; } .hover-jump:hover { transform: translateY(-10px); } .hover-shadow:hover { box-shadow: var(--bs-box-shadow) !important; } .hover-shadow-lg:hover { box-shadow: var(--bs-box-shadow-lg) !important; } .hover-shadow-sm:hover { box-shadow: var(--bs-box-shadow-sm) !important; } .hover-rotate > .icon-bg, .hover-rotate > .icon-bg i, .hover-rotate > .icon i, .hover-rotate > i { transition: 0.5s; } .hover-rotate:hover .icon-bg, .hover-rotate:hover .icon-bg i, .hover-rotate:hover i { transform: rotate(180deg); text-decoration: none } .hover-bg-primary:hover { background-color: var(--bs-primary) } .hover-bg-primary-light:hover { background-color: var(--bs-primary-light) } .hover-bg-primary-dark:hover { background-color: var(--bs-primary-dark) } .hover-bg-secondary:hover { background-color: var(--bs-secondary) } .hover-bg-secondary-light:hover { background-color: var(--bs-secondary-light) } .hover-bg-secondary-dark:hover { background-color: var(--bs-secondary-dark) } .hover-bg-accent:hover { background-color: var(--bs-accent) } .hover-bg-accent-light:hover { background-color: var(--bs-accent-light) } .hover-bg-accent-dark:hover { background-color: var(--bs-accent-dark) } .hover-bg-lighter:hover { background-color: var(--bs-lighter) } .hover-bg-light:hover { background-color: var(--bs-light) } .hover-bg-dark:hover { background-color: var(--bs-dark) } .hover-bg-darer:hover { background-color: var(--bs-darker) } .hover-bg-black:hover { background-color: var(--bs-black) } .hover-bg-white:hover { background-color: var(--bs-white) } .hover-window-img .card { background-color: none; position: relative; /* wichtig für das absolute img */ overflow: hidden; /* damit das Bild nicht übersteht */ } .hover-window-img .card img.bg-img { position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; object-position: center; /* mittig ausrichten */ transform: translate(-50%, -50%); /* genau zentrieren */ opacity: 0; transition: opacity 0.5s ease; } .hover-window-img .card:hover img.bg-img { opacity: 1; } .hover-window-img .card .card-body { z-index:200; position: relative } .hover-window-img .card .card-body { background-color: var(--bs-gray-200); transition: .5s; } .hover-window-img .card:hover { background-color: rgba(0, 0, 0, 0); background: none !important; } .hover-window-img .card:hover .card-body { background-color: rgba(0, 0, 0, .3); } .hover-window-img .card * { transition: .3s; } .hover-window-img .card:hover * { color: var(--bs-white); } .hover-window-img .card .btn { width: 40px; height: 40px; align-items: center; white-space: nowrap; overflow: hidden; transition: .4s; text-align: center; display: inline-flex; align-items: center; } .hover-window-img .card .btn i { width: 40px; } .hover-window-img .card:hover .btn { width: 200px; } .hover-window-bottom .card { height: 400px; background: none; overflow: hidden } .hover-window-bottom .card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; } .hover-window-bottom .card .card-body { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1000; } .hover-window-bottom .card .card-body::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 0; background: var(--bs-white); transition: .5s; z-index: 3; } .hover-window-bottom .card:hover .card-body::before { background: var(--bs-white); width: 100%; height: 100%; } .hover-window-bottom .card:hover::after { background-color: rgba(0, 0, 0, 0); transition: .5s } .hover-window-bottom .card .card-inner, .hover-window-bottom .card .card-inner :is(h1, h2, h3, h4, h5, h6, p, a, .title) { z-index: 1000; position: relative } .hover-window-bottom .card .card-inner .title { color: var(--bs-white) !important; margin: 0; } .hover-window-bottom .card:hover .card-inner .title { color: var(--bs-secondary) !important } .hover-window-bottom .card:hover .card-inner .topline { color: var(--bs-black) !important } .hover-window-bottom .card:hover .card-inner { z-index: 1000; position: relative; color: var(--bs-black) !important } .hover-window .card { } .hover-window .card .card-body { position: relative; z-index: 2; } .hover-window .card:hover .card-body { z-index: 9; position: relative; color: var(--bs-white) !important; } .hover-window .card .card-body::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 10px; background: var(--bs-secondary); transition: .3s; z-index: 3; } .hover-window .card:hover .card-body::before { background: var(--bs-secondary); width: 100%; height: 100% } .hover-window .card:hover .card-inner { z-index: 9; position: relative; color: var(--bs-black) } .hover-window .card:hover i, .hover-window .card:hover p, .hover-window .card:hover h1, .hover-window .card:hover h2, .hover-window .card:hover h3, .hover-window .card:hover h4, .hover-window .card:hover h5, .hover-window .card:hover h6, .hover-window .card:hover .icon-link { color: var(--bs-white) !important } .hover-window.window-x { } .hover-window.window-x .card .card-body::before { left: 50%; width: 0; height: 100%; z-index: -1; transform: translateX(-50%); } .hover-window.window-x .card:hover .card-body::before { width: 100%; } .hover-corner { position: relative; overflow: hidden; } .hover-corner::before { content: ""; background: color-mix(in srgb, var(--bs-black), transparent 60%); position: absolute; transition: all ease-in-out 0.3s; z-index: 2; border-radius: var(--bs-border-radius); opacity: 0; left: 30px; right: 30px; top: 30px; bottom: 30px; } .hover-corner:hover::before { opacity: 1; top: 0; left: 0; right: 0; bottom: 0; } .hover-corner .hover-corner-item { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; z-index: 3; transition: all ease-in-out 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; } .hover-corner:hover .hover-corner-item { opacity: 1; } .hover-corner .hover-corner-item::before { display: block; content: ""; width: 48px; height: 48px; position: absolute; top: 35px; left: 35px; border-top: 3px solid var(--bs-white); border-left: 3px solid var(--bs-white); transition: all 0.5s ease 0s; z-index: 9994; } .hover-corner:hover .hover-corner-item::before { top: 15px; left: 15px; } .hover-corner .hover-corner-item::after { display: block; content: ""; width: 48px; height: 48px; position: absolute; bottom: 35px; right: 35px; border-bottom: 3px solid var(--bs-white); border-right: 3px solid var(--bs-white); transition: all 0.5s ease 0s; z-index: 9994; } .hover-corner:hover .hover-corner-item::after { bottom: 15px; right: 15px; } .hover-corner-item h4 { font-size: var(--fs-5); color: var(--bs-white); font-weight: 600; display: none } .hover-corner-item p { color: var(--bs-white); padding: 0 25px; line-height: 1.3em; margin: 0; font-size: var(--fs-7); display: none } .hover-corner-item .link { font-weight: 500; color: var(--bs-white); opacity: 1; transition: all .3s ease 0s; text-transform: uppercase; margin-top: 25px; } .hover-corner-item .link::after { position: relative; content: "\f138"; font-family: "bootstrap-icons"; font-size: 40pt; margin-top: -10px; font-weight: normal; display: block; color: var(--bs-white); opacity: .7; } .hover-corner-item:hover .link { color: var(--bs-white); opacity: .7 } .hover-corner-item .link:hover { color: var(--bs-white); opacity: 1 } .hover-corner-item .link:hover::after { color: var(--bs-secondary); opacity: 1; transition: .3s } /*-------------------------------------------------------------- # SWIPER --------------------------------------------------------------*/ .swiper { overflow: hidden; } .swiper-steuerung { position: relative; display: flex; flex-direction: row; align-items: center; gap: 20px; z-index: 1000; width: auto; float: right; right: auto; height: 25px; margin: 5px 0 0 0; } .swiper-steuerung .swiper-button-prev, .swiper-steuerung .swiper-button-next { position: relative !important; color: var(--bs-gray-700); width: 25px; height: 25px; margin-top: -22px; } .swiper-steuerung .swiper-button-next { margin-right: -28px } .swiper-steuerung .swiper-button-prev::after, .swiper-steuerung .swiper-button-next::after { font-size: 20px; color: var(--bs-gray); } .swiper-steuerung .swiper-button-prev:hover::after, .swiper-steuerung .swiper-button-next:hover::after { color: var(--bs-black); transition: .3s } .swiper-toggle { position: relative !important; background: none; cursor: pointer; border: none; padding: 0; width: 25px; height: 25px; font-size: 1px; margin-top: -2px; margin-left: 0; margin-right: 5px; z-index: 100; } .swiper-toggle[aria-pressed="true"]::after, .swiper-toggle[aria-pressed="false"]::after { content: "\F4F3"; font-family: "bootstrap-icons"; font-weight: normal; font-size: 25px; color: var(--bs-gray); width: 25px; height: 25px; } .swiper-toggle[aria-pressed="false"]::after { content: "\F4C2"; } .swiper-toggle:hover::after { color: var(--bs-black); transition: .3s } .swiper-pagination { margin-top: 30px; margin-left: 50%; transform: translateX(-50%) !important; width: auto !important; text-align: center; display: flex; justify-content: center; position: relative !important; } .swiper-pagination-bullet { background: var(--bs-gray) !important; transition: all .2s ease; } .swiper-pagination-bullet:hover { opacity: 1; } .swiper-pagination-bullet-active { background: var(--bs-gray) !important; } .swiper-wrapper { display: flex; align-items: stretch; align-items: flex-start; } .swiper-slide { width: auto; margin: 0; display: flex; justify-content: center; align-items: stretch; /* gleiche höhe der cards: */ height: auto !important; } /* Wichtig für .frontend-Balken */ .swiper-slide { flex-direction: column } .swiper-slide .wrapper-link { width: 100%; /* gleiche höhe der cards: */ display: flex; flex: 1 1 auto; } .swiper-slide img { width: 100%; height: auto /*filter: grayscale(50%); opacity: .5;*/ } .swiper-slide:hover img { filter: grayscale(0); opacity: 1; } .swiper-slide-active img { } .swiper-slide .card img { object-fit: cover; flex-grow: 1; width: 100%; height: 100%; } .swiper-brands .swiper-slide img { transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; filter: grayscale(100%); opacity: .7; height: auto } .swiper-brands .swiper-slide img:hover { transform: scale(1.05); filter: grayscale(0); opacity: 1; } /*-------------------------------------------------------------- # Parallax --------------------------------------------------------------*/ .parallax { position: relative; overflow: hidden; } .parallax::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .parallax.secondary::after { background: rgba(var(--bs-secondary-dark-rgb), .5); } .parallax.primary::after { background: rgba(var(--bs-primary-rgb), .5); } .parallax.accent::after { background: rgba(var(--bs-accent-rgb), .5); } .parallax.white::after { background: rgba(var(--bs-white-rgb), .5);} .parallax.dark::after { background: rgba(var(--bs-dark-rgb), .5); } .parallax.darker::after { background: rgba(var(--bs-darker-rgb), .5); } .parallax .container, .parallax [class*="container-"] { z-index: 2; position: relative } /*-------------------------------------------------------------- # Cookie --------------------------------------------------------------*/ #cookiedingsbums { display: none; z-index: 1000; background-color: var(--bs-white); width: 300px; height: auto; left: 20px; bottom: 20px; position: fixed; opacity: .7 } /*-------------------------------------------------------------- # Pagetop --------------------------------------------------------------*/ .back-to-top { position: fixed; z-index: 999; opacity: 0; visibility: hidden; display: flex; justify-content: center; align-items: center; right: 10px; bottom: 50px; width: 80px; height: 80px; border-radius: 50px; background: rgba(var(--bs-primary-rgb), .5) !important; border: 1px solid rgba(var(--bs-white-rgb), .5) !important; color: var(--bs-white); transition: opacity 0.5s ease, visibility 0.5s ease; transition: all 0.5s ease; } .back-to-top i { font-size: 26px; color: var(--bs-white); line-height: 0; } .back-to-top:hover { background: var(--bs-primary) !important; color: var(--bs-white); transition: .3s } .back-to-top.active { visibility: visible; opacity: .7; } @media (max-width: 767px) { .back-to-top { width: 60px; height: 60px; bottom: 120px; } } /*-------------------------------------------------------------- # Suche / Search --------------------------------------------------------------*/ .search { position: relative; z-index: 1000 !important; width: auto !important; margin-right: 10px } .search form { } .search * { outline: none; box-sizing: border-box; } .search_field { width: 40px; height: 40px; color: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.3s ease-in-out; background: none; border-radius: 0; border: none; top: auto; right: auto; } .search_field:focus { cursor: default; font-weight: normal; width: 230px; border-radius: 40px; border: 1px solid var(--bs-gray-500); background: #fff; padding-left: 20px; padding-right: 60px; color: var(--bs-black) } .search_field:focus ~ .search_icon { background-color: transparent; cursor: pointer; pointer-events: auto; background: url(../images/lupe/lupe_888.svg); background-size: 18px; background-repeat: no-repeat; background-position: center 11px; } .search_field:focus:hover ~ .search_icon { background: url(../images/lupe/lupe_000.svg); background-size: 18px; background-repeat: no-repeat; background-position: center 11px; } .search_icon { position: absolute; pointer-events: none; display: inline-block; border: none; transition: background-color 0.2s ease-in-out; float: right; background: var(--bs-primary) url(../images/lupe/lupe_fff.svg); background-size: 18px; background-repeat: no-repeat; background-position: center 11px; width: 40px !important; min-height: 40px !important; border-radius: 40px; right: 0; } .search_field:hover ~.search_icon { background-color: var(--bs-primary); } .search_field:focus ~ .search_icon:hover { background-color: var(--bs-white); background: url(../images/lupe/lupe_000.svg); background-size: 18px; background-repeat: no-repeat; background-position: center 11px; } .search_field { /* Eingabetext */ color: rgba(0, 0, 0, 0) !important; } .search_field::-webkit-input-placeholder { /* Blindtextwort */ color: rgba(153, 153, 153, 0); } .search_field:focus::-webkit-input-placeholder { color: #999; } @media (min-width:768px) { .search { width: 230px; } .search_field:focus { width: 230px; box-shadow: 0 0 .5em rgba(0, 0, 0, 0.2); box-shadow: none } .search_icon { right: 0; } .affix .search { } } #searchModal .modal { } #searchModal .modal-content { background: rgba(var(--bs-primary-rgb), .3); } #searchModal .modal-body { padding-bottom: 20% } #searchModal .modal-header { border: none; } #searchModal .btn-close { font-size: 300%; right: 0; top: 0; margin-top: 5px; margin-right: 20px; opacity: 1; color: var(--bs-white); border-color: var(--bs-white); transition: .3s; filter: invert(100%); } #searchModal .btn-close:hover { filter: invert(70%); } #searchModal .btn-search i { margin: 0 } #searchModal .form-control { font-size: 100% } @media (max-width: 767px) { #searchModal .modal-body { padding-bottom: 45% } #searchModal .btn-close { margin-top: 0; margin-right: 0; } } /* --------- end SUCHE -------- */ /*-------------------------------------------------------------- # Listen / Aufzählungen --------------------------------------------------------------*/ main ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu):not(.gallery-list), footer ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu) { margin-left: 0; padding-left: 0; } main ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu):not(.gallery-list) > li, footer ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu) > li, .list-group.list-group-flush > li.list-group-item { position: relative; list-style: none; padding-top: var(--list-padding-t); padding-bottom: var(--list-padding-b); width: calc(100% - var(--list-einschub)); left: var(--list-einschub); } main ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu):not(.gallery-list) > li::before, footer ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu) > li::before, .list-group > li:not(.list-group-item):not(.dropdown-item)::before, .list-group.list-group-flush > li.list-group-item::before { display: inline-block; text-align: left; font-size: 85%; content: var(--list-symbol); color: var(--list-symbol-color); font-family: var(--list-symbol-font-family); font-weight: var(--list-symbol-font-weight); margin-left: calc(var(--list-einschub) * -1); width: var(--list-einschub); } main ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu):not(.gallery-list) > li:hover::before, footer ul:not(.nav-pills):not(.nav-tabs):not(.list-group):not(.filter-menu):not(.filter-items):not(.accordion-list):not(.pagination):not(.dropdown-menu) > li:hover::before, .list-group > li:not(.list-group-item):not(.dropdown-item):hover::before, .list-group.list-group-flush > li.list-group-item:hover::before { color: var(--list-symbol-hover-color); } ul.even-odd { } ul.even-odd li { break-inside: avoid; } ul.even-odd.list-unstyled li { padding-left: .4em !important; padding-right: .4em !important; } ul.even-odd li:nth-child(odd) { background: var(--bs-white); } ul.even-odd li:nth-child(even) { background: rgba(var(--bs-lighter-rgb), .7); } .list-inline li { display: inline; } .list-group > li:not(.list-group-item):not(.dropdown-item) { padding-top: var(--list-padding-t); padding-bottom: var(--list-padding-b); left: var(--list-einschub); width: calc(100% - var(--list-einschub)); } .list-group > li:not(.list-group-item):not(.dropdown-item) { list-style: none; } ul:not(.list-group) .list-group-item, ul.list-group.list-group-flush .list-group-item { background: none } .list-group .list-group-item { left: 0 !important; } .list-group-item.active { background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--bs-white); } .list-unstyled li, .list-group-flush.list-unstyled li { left: 0 !important; width: 100% !important } .list-group.list-group-flush:not(.list-unstyled):not(.list-group-numbered) li:not(.list-group-item) { width: calc(100% - var(--list-einschub)); margin-left: var(--list-einschub) } .list-group.list-group-flush:not(.list-unstyled):not(.list-group-numbered) li.list-group-item { left: var(--list-einschub) !important; width: calc(100% - var(--list-einschub)); padding-left: 0 !important; } .list-group.list-group-numbered:not(.list-group-flush) .list-group-item { padding-left: calc(var(--list-einschub) * 1.5); } .list-group:not(.list-group.list-group-flush) li:not(.list-group-item) { padding-left: var(--list-einschub); left: auto; width: 100%; } ol { padding-left: 0 } ol ul li { list-style: decimal !important; } ol > li, ol ul li { padding-top: var(--list-padding-t); padding-bottom: var(--list-padding-b); } ol > li { position: relative; left: var(--list-einschub); width: calc(100% - var(--list-einschub)); } ol.list-group.list-group-numbered li.list-group-item { width: 100% } ol ul li::before { display: none !important } main ol li::marker, main ol li::before, main ol ul li::marker, main ol ul li::before, main ul.list-group-numbered li::before, main ul.list-group-numbered li::marker, main ul.list-group-numbered.list-group-flush li::before, main ul.list-group-numbered.list-group-flush li::marker { color: var(--list-symbol-color) !important; font-weight: bold !important; } ul.gap-0 > li, ol.gap-0 > li { padding-top: 0 !important; padding-bottom: 0 !important; } :not(.list-group).list-group-flush.d-flex { flex-direction: column; } .list-group-flush > li:not(.dropdown-item) { border: var(--list-border-width) solid var(--list-border-color); border-width: 0 0 var(--list-border-width); } .list-group-flush > li:not(.dropdown-item):last-child { border: none; } .list-unstyled { } .list-unstyled > li::before { display: none !important } .list-unstyled > li { padding-left: 0 !important; } .list-group-numbered > li::before { display: inline-block; content: counters(section, ".") ". "; counter-increment: section; margin-left: calc(var(--list-einschub) * -1); width: var(--list-einschub); } .list-group.list-group-numbered > li { padding-left: var(--list-einschub); } .list-group-flush.list-group-numbered > li::before { content: none; display: inline-block; content: counters(section, ".") ". " !important; counter-increment: section !important; font-family: inherit !important; color: inherit !important; font-weight: inherit !important; font-size: inherit !important } /*-------------------------------------------------------------- # ICON-LIST --------------------------------------------------------------*/ .icon-list, .icon-md-list, .icon-lg-list { display: inline-block; list-style: none; list-style-type: none; margin-left: 0; padding-left: 0; } aside .icon-list, aside .icon-md-list, aside .icon-lg-list { width: 100% } .icon-list :is(li, div, p), .icon-md-list :is(li, div, p), .icon-lg-list :is(li, div, p) { border-bottom: 1px solid var(--bs-border-color); padding-top: var(--list-padding-t); padding-bottom: var(--list-padding-b); list-style: none; list-style-type: none; margin-left: 0; margin-bottom: 0 } .icon-list :is(li, div, p):last-child, .icon-md-list :is(li, div, p):last-child, .icon-lg-list :is(li, div, p):last-child { border: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important } .icon-list.list-unstyled :is(li, div, p), .icon-md-list.list-unstyled :is(li, div, p), .icon-lg-list.list-unstyled :is(li, div, p) { border: none } .icon-list i, .icon-md-list i, .icon-lg-list i { color: var(--bs-primary); text-align: left; margin-right: 0 !important } .icon-list li::before, .icon-md-list li::before, .icon-lg-list li::before { display: none !important } .icon-list a, .icon-md-list a, .icon-lg-list a { color: var(--bs-body-color) !important; text-decoration: underline !important; } .icon-list a:hover, .icon-md-list a:hover, .icon-lg-list a:hover { color: var(--bs-primary) !important; text-decoration: underline !important } .icon-list :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6) { margin-left: calc(var(--list-einschub) * -1) !important } .icon-md-list :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6) { margin-left: calc(var(--list-einschub-md) * -1) !important } .icon-lg-list :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6) { margin-left: calc(var(--list-einschub-lg) * -1) !important } .icon-list { padding-left: var(--list-einschub) !important; } .icon-list li { margin-left: calc(var(--list-einschub) * -1) !important; left: var(--list-einschub) !important;} .icon-list :is(div, p) { margin-left: calc(var(--list-einschub) * -1) !important; padding-left: var(--list-einschub) !important; } .icon-list i { margin-left: calc(var(--list-einschub) * -1) !important; width: var(--list-einschub); font-size: 110% } .icon-md-list { padding-left: var(--list-einschub-md) !important; } .icon-md-list li { margin-left: calc(var(--list-einschub-md) * -1) !important; left: var(--list-einschub-md) !important;} .icon-md-list :is(div, p) { margin-left: calc(var(--list-einschub-md) * -1) !important; padding-left: var(--list-einschub-md) !important; } .icon-md-list i { margin-left: calc(var(--list-einschub-md) * -1) !important; width: var(--list-einschub-md); font-size: 140% } .icon-lg-list { padding-left: var(--list-einschub-lg) !important; } .icon-lg-list li { margin-left: calc(var(--list-einschub-lg) * -1) !important; left: var(--list-einschub-lg) !important;} .icon-lg-list :is(div, p) { margin-left: calc(var(--list-einschub-lg) * -1) !important; padding-left: var(--list-einschub-lg) !important; } .icon-lg-list i { margin-left: calc(var(--list-einschub-lg) * -1) !important; width: var(--list-einschub-lg); font-size: 170% } .icon-list :is(li.ms-0, div.ms-0, p.ms-0) { padding-left: 0 !important; margin-left: calc(var(--list-einschub) * -1) !important; } .icon-md-list :is(li.ms-0, div.ms-0, p.ms-0) { padding-left: 0 !important; margin-left: calc(var(--list-einschub-md) * -1) !important; } .icon-lg-list :is(li.ms-0, div.ms-0, p.ms-0) { padding-left: 0 !important; margin-left: calc(var(--list-einschub-lg) * -1) !important; } .icon-list :is(li.mb-0, div.mb-0 p.mb-0), .icon-md-list :is(li.mb-0, div.mb-0 p.mb-0), .icon-lg-list :is(li.mb-0, div.mb-0 p.mb-0) { margin-bottom: 0 !important; padding-bottom: 0 !important } .icon-list :is(li.mb-1, div.mb-1, p.mb-1), .icon-md-list :is(li.mb-1, div.mb-1 p.mb-1), .icon-lg-list :is(li.mb-1, div.mb-1 p.mb-1) { margin-bottom: .25em !important; padding-bottom: .25em !important } .icon-list :is(li.mb-2, div.mb-2, p.mb-2), .icon-md-list :is(li.mb-2, div.mb-2 p.mb-2), .icon-lg-list :is(li.mb-2, div.mb-2 p.mb-2) { margin-bottom: .5em !important; padding-bottom: .5em !important } .icon-list :is(li.mb-3, div.mb-3, p.mb-3), .icon-md-list :is(li.mb-3, div.mb-3 p.mb-3), .icon-lg-list :is(li.mb-3, div.mb-3 p.mb-3) { margin-bottom: .75em !important; padding-bottom: .75em !important } .icon-list :is(li.mb-4, div.mb-4, p.mb-4), .icon-md-list :is(li.mb-4, div.mb-4 p.mb-4), .icon-lg-list :is(li.mb-4, div.mb-4 p.mb-4) { margin-bottom: 1em !important; padding-bottom: 1em !important } .icon-list :is(li.mb-5, div.mb-5, p.mb-5), .icon-md-list :is(li.mb-5, div.mb-0 p.mb-5), .icon-lg-list :is(li.mb-5, div.mb-0 p.mb-5) { margin-bottom: 2em !important; padding-bottom: 2em !important } :is(ul.gap-0 > li, ol.gap-0 > li), .icon-list.gap-0 :is(li, div, p), .icon-md-list.gap-0 :is(li, div, p), .icon-lg-list.gap-0 :is(li, div, p) { padding-top: 0 !important; padding-bottom: 0 !important; } :is(ul.gap-1 > li, ol.gap-1 > li), .icon-list.gap-1 :is(li, div, p), .icon-md-list.gap-1 :is(li, div, p), .icon-lg-list.gap-1 :is(li, div, p) { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } :is(ul.gap-2 > li, ol.gap-2 > li), .icon-list.gap-2 :is(li, div, p), .icon-md-list.gap-2 :is(li, div, p), .icon-lg-list.gap-2 :is(li, div, p) { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } :is(ul.gap-3 > li, ol.gap-3 > li), .icon-list.gap-3 :is(li, div, p), .icon-md-list.gap-3 :is(li, div, p), .icon-lg-list.gap-3 :is(li, div, p) { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } :is(ul.gap-4 > li, ol.gap-4 > li), .icon-list.gap-4 :is(li, div, p), .icon-md-list.gap-4 :is(li, div, p), .icon-lg-list.gap-4 :is(li, div, p) { padding-top: 1rem !important; padding-bottom: 1rem !important; } :is(ul.gap-5 > li, ol.gap-5 > li), .icon-list.gap-5 :is(li, div, p), .icon-md-list.gap-5 :is(li, div, p), .icon-lg-list.gap-5 :is(li, div, p) { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } :is(ul.gap-6 > li, ol.gap-6 > li), .icon-list.gap-6 :is(li, div, p), .icon-md-list.gap-6 :is(li, div, p), .icon-lg-list.gap-6 :is(li, div, p) { padding-top: 2rem !important; padding-bottom: 2rem !important; } /* --------- end ICON-LIST -------- */ /*-------------------------------------------------------------- # UL - SPALTIGEKEIT --------------------------------------------------------------*/ .col-ul-5, .col-ul-4, .col-ul-3, .col-ul-2 { column-gap: 2rem !important; } .col-ul-5 {column-count: 5; } .col-ul-4 {column-count: 4; } .col-ul-3 {column-count: 3; } .col-ul-2 {column-count: 2; } .col-ul-5 > *, .col-ul-4 > *, .col-ul-3 > *, .col-ul-2 > * { break-inside: avoid; list-style: none } @media (max-width: 1200px) { .col-ul-5 {column-count: 4; } .col-ul-lg-5 {column-count: 5 !important; } .col-ul-lg-4 {column-count: 4 !important; } .col-ul-lg-3 {column-count: 3 !important; } .col-ul-lg-2 {column-count: 2 !important; } } @media (max-width: 992px) { .col-ul-5, .col-ul-4 {column-count: 3; } .col-ul-md-5 {column-count: 5 !important; } .col-ul-md-4 {column-count: 4 !important; } .col-ul-md-3 {column-count: 3 !important; } .col-ul-md-2 {column-count: 2 !important; } } @media (max-width: 767px) { .col-ul-5, .col-ul-4, .col-ul-3 {column-count: 2; } .col-ul-sm-5 {column-count: 5 !important; } .col-ul-sm-4 {column-count: 4 !important; } .col-ul-sm-3 {column-count: 3 !important; } .col-ul-sm-2 {column-count: 2 !important; } } @media (max-width: 575px) { .col-ul-5, .col-ul-4, .col-ul-3, .col-ul-2 {column-count: 1; } .col-ul-xs-5 {column-count: 5 !important; } .col-ul-xs-4 {column-count: 4 !important; } .col-ul-xs-3 {column-count: 3 !important; } .col-ul-xs-2 {column-count: 2 !important; } } @media (max-width: 380px) { .col-ul-5,.col-ul-4,.col-ul-3,.col-ul-2, .col-ul-lg-5,.col-ul-lg-4,.col-ul-lg-3,.col-ul-lg-2, .col-ul-md-5,.col-ul-md-4,.col-ul-md-3,.col-ul-md-2, .col-ul-sm-5,.col-ul-sm-4,.col-ul-sm-3,.col-ul-sm-2, .col-ul-xs-5,.col-ul-xs-4,.col-ul-xs-3,.col-ul-xs-2 { column-count: 1 !important; } } /* --------- end UL - SPALTIGEKEIT -------- */ /*-------------------------------------------------------------- # Paginierung --------------------------------------------------------------*/ .pagination { display: flex; flex-wrap: wrap; gap: 0; } nav:is([class*="col-"], [class*="w-"]) .pagination { width: 100% } .pagination li { } .pagination li::before { } .pagination li.page-item { width: auto; align-items: stretch; } .pagination:not(.no-gutter) li.page-item { display: flex } nav:is([class*="col-"], [class*="w-"]) .pagination li.page-item { flex: 1 1 0 } nav.border-0 .pagination li.page-item .page-link { border: none !important; } nav.py-0 .pagination li.page-item .page-link { padding-top: 0 !important; padding-bottom: 0 !important } nav.px-0 .pagination li.page-item .page-link { padding-left: 0 !important; padding-right: 0 !important } nav.bg-none .pagination li.page-item .page-link { background: none !important } .pagination li.page-item .page-link { color: var(--bs-body-color); line-height: 1.3em; font-size: 100%; background: none; display: flex; align-items: center; justify-content: center; } .pagination li.page-item:first-child .page-link, .pagination li.page-item:first-child.prev .page-link, .pagination li.page-item:first-child.ueberblick .page-link { justify-content: start; } .pagination li.page-item:last-child .page-link { justify-content: end; } .pagination li.page-item .page-link:hover { } .pagination li.page-item a.page-link:hover { background-color: rgba(var(--bs-primary-rgb), 0.2); color: var(--bs-primary) } .pagination li.page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--bs-white) } .pagination li.page-item .page-link i { margin: 0 } .pagination li.page-item a[rel="prev"] i { margin-right: 5px } .pagination li.page-item a[rel="next"] i { margin-left: 5px } @media (max-width: 767px) { nav:is([class*="col-"], [class*="w-"]) .pagination li.page-item { flex: 1 1 auto } .pagination li.page-item .page-link { justify-content: center !important; } } /*-------------------------------------------------------------- # PAGNATION - GAP --------------------------------------------------------------*/ .pagination.gap-1{gap:.25rem!important;row-gap:0!important}.pagination.gap-1 li.page-item{margin-top:-.25rem} .pagination.gap-2{gap:.5rem!important;row-gap:0!important}.pagination.gap-2 li.page-item{margin-top:-.5rem} .pagination.gap-3{gap:1rem!important;row-gap:0!important}.pagination.gap-3 li.page-item{margin-top:-.5rem} .pagination.gap-4{gap:1.5rem!important;row-gap:0!important}.pagination.gap-4 li.page-item{margin-top:-.75rem} .pagination.gap-5{gap:3rem!important;row-gap:0!important}.pagination.gap-5 li.page-item{margin-top:-1rem} @media (min-width:576px){ .pagination.gap-sm-1{gap:.25rem!important;row-gap:0!important}.pagination.gap-sm-1 li.page-item{margin-top:-.25rem} .pagination.gap-sm-2{gap:.5rem!important;row-gap:0!important}.pagination.gap-sm-2 li.page-item{margin-top:-.5rem} .pagination.gap-sm-3{gap:1rem!important;row-gap:0!important}.pagination.gap-sm-3 li.page-item{margin-top:-.5rem} .pagination.gap-sm-4{gap:1.5rem!important;row-gap:0!important}.pagination.gap-sm-4 li.page-item{margin-top:-.75rem} .pagination.gap-sm-5{gap:3rem!important;row-gap:0!important}.pagination.gap-sm-5 li.page-item{margin-top:-1rem} } @media (min-width:768px){ .pagination.gap-md-1{gap:.25rem!important;row-gap:0!important}.pagination.gap-md-1 li.page-item{margin-top:-.25rem} .pagination.gap-md-2{gap:.5rem!important;row-gap:0!important}.pagination.gap-md-2 li.page-item{margin-top:-.5rem} .pagination.gap-md-3{gap:1rem!important;row-gap:0!important}.pagination.gap-md-3 li.page-item{margin-top:-.5rem} .pagination.gap-md-4{gap:1.5rem!important;row-gap:0!important}.pagination.gap-md-4 li.page-item{margin-top:-.75rem} .pagination.gap-md-5{gap:3rem!important;row-gap:0!important}.pagination.gap-md-5 li.page-item{margin-top:-1rem} } @media (min-width:992px){ .pagination.gap-lg-1{gap:.25rem!important;row-gap:0!important}.pagination.gap-lg-1 li.page-item{margin-top:-.25rem} .pagination.gap-lg-2{gap:.5rem!important;row-gap:0!important}.pagination.gap-lg-2 li.page-item{margin-top:-.5rem} .pagination.gap-lg-3{gap:1rem!important;row-gap:0!important}.pagination.gap-lg-3 li.page-item{margin-top:-.5rem} .pagination.gap-lg-4{gap:1.5rem!important;row-gap:0!important}.pagination.gap-lg-4 li.page-item{margin-top:-.75rem} .pagination.gap-lg-5{gap:3rem!important;row-gap:0!important}.pagination.gap-lg-5 li.page-item{margin-top:-1rem} } @media (min-width:1200px){ .pagination.gap-xl-1{gap:.25rem!important;row-gap:0!important}.pagination.gap-xl-1 li.page-item{margin-top:-.25rem} .pagination.gap-xl-2{gap:.5rem!important;row-gap:0!important}.pagination.gap-xl-2 li.page-item{margin-top:-.5rem} .pagination.gap-xl-3{gap:1rem!important;row-gap:0!important}.pagination.gap-xl-3 li.page-item{margin-top:-.5rem} .pagination.gap-xl-4{gap:1.5rem!important;row-gap:0!important}.pagination.gap-xl-4 li.page-item{margin-top:-.75rem} .pagination.gap-xl-5{gap:3rem!important;row-gap:0!important}.pagination.gap-xl-5 li.page-item{margin-top:-1rem} } @media (min-width:1400px){ .pagination.gap-xxl-1{gap:.25rem!important;row-gap:0!important}.pagination.gap-xxl-1 li.page-item{margin-top:-.25rem} .pagination.gap-xxl-2{gap:.5rem!important;row-gap:0!important}.pagination.gap-xxl-2 li.page-item{margin-top:-.5rem} .pagination.gap-xxl-3{gap:1rem!important;row-gap:0!important}.pagination.gap-xxl-3 li.page-item{margin-top:-.5rem} .pagination.gap-xxl-4{gap:1.5rem!important;row-gap:0!important}.pagination.gap-xxl-4 li.page-item{margin-top:-.75rem} .pagination.gap-xxl-5{gap:3rem!important;row-gap:0!important}.pagination.gap-xxl-5 li.page-item{margin-top:-1rem} } /*-------------------------------------------------------------- # Reiter --------------------------------------------------------------*/ .nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); } .nav-pills .nav-item { } .nav-pills .nav-link { transition: background-color 0.3s ease, color 0.3s ease; padding: .5rem 1rem; font-weight: 500; display: flex; align-items: center; gap: .5rem; color: var(--bs-primary); border-radius: var(--bs-border-radius-pill); text-decoration: none !important; margin: 0 !important } .nav-pills .nav-link:not(.active):hover { text-decoration: none !important; color: var(--bs-primary-dark); background-color: rgba(var(--bs-primary-rgb), .2) } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--bs-white); background-color: var(--bs-primary); } .nav-pills .nav-link.active:hover, .nav-pills .show > .nav-link:hover { background-color: var(--bs-primary-dark) } .nav-pills .nav-link i { line-height: 1; } .nav-pills .nav-link span { white-space: nowrap; } /*-------------------------------------------------------------- # FILTER --------------------------------------------------------------*/ .filter-menu { text-align: center ; padding-left: 0 !important; } .filter-menu li { cursor: pointer; display: inline-block; padding: 10px 18px 12px 18px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--bs-body-color); transition: all 0.3s ease-in-out; margin: 0 4px 10px 4px; background: whitesmoke; border-radius: var(--bs-border-radius); } .filter-menu li:hover { background: var(--bs-dark); color: var(--bs-white); } .filter-menu li.current, .filter-menu li.current{ background: var(--bs-dark); color: var(--bs-white); } .filter-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 0 auto; max-width: 1200px; width: 100% } .filter-items .filter-inner { position: relative; width: 25%; transition: all .5s ease, visibility .5s ease; } .filter-items .filter-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease, filter 0.4s ease; } .filter-items .filter-inner.delete { pointer-events: none; opacity: 0; visibility: hidden; position: absolute } .filter-items .filter-inner.active { opacity: 1; pointer-events: all; visibility: visible; } @media (max-width: 767px) { .filter-items .filter-inner { } } @media (max-width: 480px) { .filter-items .filter-inner { } } .filter-items .filter-inner .img-title { opacity: 0; z-index: 1000; position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; right: 0; bottom: 0; background: rgba(var(--bs-black-rgb), 0.3); color: var(--bs-white); transition: opacity 0.3s ease-in-out; text-align: center; padding: 0 20px; } .filter-items .filter-inner:hover .img-title { opacity: 1; } /*-------------------------------------------------------------- # Initiale --------------------------------------------------------------*/ .initial { font-family: var(--heading-font-family); font-weight: 900; color: var(--bs-primary-rgb); position: relative; margin-left: -30px; font-size: var(--fs-1); z-index: -1; bottom: -.6em !important } /*-------------------------------------------------------------- # Outside --------------------------------------------------------------*/ .outside { display: flex; justify-content: center; position: relative; } .outside > :is(.container, [class^="container-"]) { margin: 0; padding: 0; z-index: 100; } .outside::before, .outside::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; /* Die Breite der Streifen */ background-color: var(--bs-secondary); /* Streifenfarbe, z.B. ein sehr helles Grau */ } .outside::before { left: 0; } .outside::after { right: 0; } .outside.left::after { display: none } .outside.right::before { display: none } /* --------- TOGGLE ================================================== */ .toggle-box { float: right; clear: both; position: fixed; right: 15px; top:15%; margin-top: 3em; margin-bottom: 2em; padding: .8em .5em .5em .5em; background: #fff; border-radius: 4px; box-shadow: .1em .1em .4em rgba(0, 0, 0, 0.4); z-index: 100; width: 150px } .toggle-box.debug-box { font-family: 'arial', sans-serif !important; font-size: 15px !important; font-weight: normal !important; z-index: 10000 } .toggle-box h1, .toggle-box h2, .toggle-box h3, .toggle-box h4, .toggle-box h5, .toggle-box h6 { padding-top: 0; margin-top: .3em; margin-bottom: .5em; line-height: 1.1em; } .toggle-box h2 { background: #2196F3; color: #fff !important; font-family: 'arial', sans-serif !important; font-size: 18px !important; font-weight: bold !important; text-transform: uppercase; letter-spacing: .05em; border: none; padding: .3em .5em .15em .5em; margin: -.8em -.4em .8em -.4em; width: 150px; float: left; display: inline-block; border-top-left-radius: 4px; border-top-right-radius: 4px; line-height: 1.2em !important; text-align: center; } .toggle-box h6 { font-size: 105%; margin-top: 0 } @media (max-width: 780px) { .toggle-box { top: 5%; right: 5px; font-size: 80% } .toggle-box .col { width: 33%; float: left } } @media (max-width: 500px) { .toggle-box .col { width: 50%; } } @media (max-width: 380px) { .toggle-box .col { width: 100%; } } .switch .open span, .switch .closed span { font-weight: normal; line-height: 1em; margin-left: 35px; margin-top: -5px; display: inline-block; position: relative } .switch .open, .switch .closed { position: absolute; cursor: pointer; background-color: #2196F3; -webkit-transition: .4s; transition: .4s; box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5) inset; border-radius: 17px; color: #000; position: relative; width: 30px; height: 17px; margin-bottom: .8em; clear: both; display: block; line-height: 1.2em; } .switch .open::before, .switch .closed::before { position: absolute; content: ""; height: 13px; width: 13px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.35); border-radius: 50%; } .switch .closed { background-color: #ccc; color: #aaa } .switch .closed::before { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .switch .open:hover, .switch .closed:hover { text-decoration: none; color: #2196F3; color: #000 } .toggle-box.xs .switch .open span, .toggle-box.xs .switch .closed span { margin-left: 30px; } .toggle-box.xs .switch .open, .toggle-box.xs .switch .closed { margin-bottom: .3em; font-size: 80%; height: 14px; width: 25px; margin-bottom: .7em } .toggle-box.xs .switch .open::before, .toggle-box.xs .switch .closed::before { height: 10px; width: 10px; -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } .toggle-box.xs .switch .closed::before { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .aktivieren { margin-top: 1em; font-weight: bold; } .aktivieren .switch .open { background: green; color: green; margin-top: 1.5em; } .aktivieren .switch .closed { background: red; color: red } .on { display: inherit } .ausblenden a, .einblenden a { background: #fff; color: #999; padding: .2em .6em; position: absolute; box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.2); border: 1px solid #e2e2e2; border-radius: 20px; z-index: 100; } .ausblenden a:hover, .einblenden a:hover { background: #ddd; color: #000; border-color: #ddd; box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.2) inset; text-decoration: none !important; } /* --------- end TOGGLE -------- */ /*-------------------------------------------------------------- # ICONS --------------------------------------------------------------*/ /*main i[class*="fa-"]:not(.pagination i[class*="fa-"], .icon-bg i[class*="fa-"]), main i[class*="fas-"]:not(.pagination i[class*="fas-"], .icon-bg i[class*="fas-"]), main i[class*="bx-"]:not(.pagination i[class*="bx-"], .icon-bg i[class*="bx-"]), main i[class*="bxs-"]:not(.pagination i[class*="bxs-"], .icon-bg i[class*="bxs-"]), main i[class*="bi-"]:not(.pagination i[class*="bi-"], .icon-bg i[class*="bi-"]), main i[class*="ri-"]:not(.pagination i[class*="ri-"], .icon-bg i[class*="ri-"]), main i[class*="flaticon-"]:not(.pagination i[class*="flaticon-"], .icon-bg i[class*="flaticon-"]),*/ main i[class*="fa-"]:not(:is(.pagination i, .icon-bg i)), main i[class*="fas-"]:not(:is(.pagination i, .icon-bg i)), main i[class*="bx-"]:not(:is(.pagination i, .icon-bg i)), main i[class*="bxs-"]:not(:is(.pagination i, .icon-bg i)), main i[class*="bi-"]:not(:is(.pagination i, .icon-bg i)), main i[class*="ri-"]:not(:is(.pagination i, .icon-bg i)), main i[class*="flaticon-"]:not(:is(.pagination i, .icon-bg i)) { /*color: var(--icon);*/ } .icon-bg { display: inline-flex; align-items: center; justify-content: center; transition: .3s; /*background-color: var(--icon);*/ /*color: var(--bs-white);*/ width: 50px; height: 50px; font-size: 20px; } .icon-bg[class*="bg-"] { color: var(--bs-white); } .is-sm { width: 30px; height: 30px; font-size: 14px; } .is-md {} .is-lg { width: 70px; height: 70px; font-size: 30px; } .is-xl { width: 100px; height: 100px; font-size: 50px; } .is-xxl { width: 130px; height: 130px; font-size: 60px; } @media (max-width: 992px) { .icon-bg { width: 40px; height: 40px; font-size: 17px; } .is-sm { width: 27px; height: 27px; font-size: 13px; } .is-md { } .is-lg { width: 60px; height: 60px; font-size: 27px; } .is-xl { width: 85px; height: 85px; font-size: 40px; } .is-xxl { width: 100px; height: 100px; font-size: 50px; } } @media (max-width: 767px) { .icon-bg { width: 35px; height: 35px; font-size: 16px; } .is-sm { width: 25px; height: 25px; font-size: 13px; } .is-md { } .is-lg { width: 50px; height: 50px; font-size: 25px; } .is-xl { width: 75px; height: 75px; font-size: 35px; } .is-xxl { width: 90px; height: 90px; font-size: 46px; } } .icon-bg.border-primary, .icon-bg.border-secondary, .icon-bg.border-danger, .icon-bg.border-success, .icon-bg.border-black, .icon-bg.border-dark, .icon-bg.border-gray, .icon-bg.border-white, .icon-bg.border-warning, .icon-bg.border-info, .icon-bg.border-accent { border-width: 1px; border-style: solid; background: none !important } .icon-bg[class*="border-"].bg-white { background: #fff !important } .icon-bg.border-primary { color: var(--bs-primary) !important } .icon-bg.border-secondary { color: var(--bs-secondary) !important } .icon-bg.border-danger { color: var(--bs-danger) !important } .icon-bg.border-success { color: var(--bs-success) !important } .icon-bg.border-black { color: var(--bs-black) !important } .icon-bg.border-dark { color: var(--bs-dark) !important } .icon-bg.border-gray { color: var(--bs-gray) !important; border-color: var(--bs-gray) !important } .icon-bg.border-white { color: var(--bs-white) !important } .icon-bg.border-warning { color: var(--bs-warning) !important } .icon-bg.border-info { color: var(--bs-info) !important } .icon-bg.border-accent { color: var(--bs-accent) !important; } .icon-bg.bg-white { color: var(--bs-gray-500) !important; } .icon-bg.bg-primary:hover, .icon-bg.bg-secondary:hover, .icon-bg.bg-danger:hover, .icon-bg.bg-success:hover, .icon-bg.bg-black:hover, .icon-bg.bg-dark:hover, .icon-bg.bg-gray:hover, .icon-bg.bg-warning:hover, .icon-bg.bg-info:hover, .icon-bg.bg-accent:hover { box-shadow: 0 0 5em rgba(0, 0, 0, .3) inset } .icon-bg.bg-white:hover { background: rgba(var(--bs-white-rgb), .7) !important } .icon-bg.border-primary:hover { background-color: var(--bs-primary) !important; color: var(--bs-white) !important } .icon-bg.border-secondary:hover { background-color: var(--bs-secondary) !important; color: var(--bs-white) !important } .icon-bg.border-danger:hover { background-color: var(--bs-danger) !important; color: var(--bs-white) !important } .icon-bg.border-success:hover { background-color: var(--bs-success) !important; color: var(--bs-white) !important } .icon-bg.border-black:hover { background-color: var(--bs-black) !important; color: var(--bs-white) !important } .icon-bg.border-dark:hover { background-color: var(--bs-dark) !important; color: var(--bs-white) !important } .icon-bg.border-gray:hover { background-color: var(--bs-gray) !important; color: var(--bs-white) !important } .icon-bg.border-white:hover { background-color: var(--bs-white) !important; color: var(--bs-gray-500) !important } .icon-bg.border-warning:hover { background-color: var(--bs-warning) !important; color: var(--bs-white) !important } .icon-bg.border-info:hover { background-color: var(--bs-info) !important; color: var(--bs-white) !important } .icon-bg.border-accent:hover { background-color: var(--bs-accent) !important; color: var(--bs-white) !important } .icon-bg.bg-primary[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-secondary[class*="opacity-"]{ color: var(--bs-white) !important } .icon-bg.bg-danger[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-success[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-black[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-dark[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-warning[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-info[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-accent[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-gray[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-white[class*="opacity-"] { color: var(--bs-white) !important } .icon-bg.bg-opacity-10:hover, .icon-bg.bg-opacity-25:hover, .icon-bg.bg-opacity-50:hover, .icon-bg.bg-opacity-75:hover { --bs-bg-opacity: 1; color: var(--bs-white) !important } .icon-bg.bg-white[class*="opacity-"]:hover { color: var(--bs-black) !important } .bg-none { background: none !important } /*-------------------------------------------------------------- # ICONS (altes css = als Liste) --------------------------------------------------------------*/ .icon { padding-left: 35px; margin: .5em 0 .5em 0; /* mit Linie */ border-bottom: 1px dotted #bbb; padding-bottom: .6em; } .icon.icon-noborder { border-bottom: none; margin-top: 0 } .div-lines .icon, .div-striped .icon { margin-top: 0 } .icon:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0 } .icon, .icon a { color: var(--bs-body-color); text-decoration: none } .icon a:hover { color: var(--bs-secondary); } .icon i { margin-left: -35px; width: 30px; text-align: left; color: var(--bs-secondary); float: left; font-size: 105%; margin-top: 4px; } .icon .row { margin: 0; } .icon .row > [class*="col-"] { padding-left: 0; padding-right: .3em; margin-bottom: .4em } /* --------- FILEICON ================================================== */ .fileicon { padding-left: var(--list-einschub); } main ul li a.fileicon { margin-left: calc(var(--list-einschub) * -1) !important; padding-left: var(--list-einschub) !important; } main ul li.fileicon { position: relative; list-style: none; padding-top: var(--list-padding-t); padding-bottom: var(--list-padding-b); margin-left: calc(var(--list-einschub) * -1); left: var(--list-einschub); width: calc(100% - var(--list-einschub)); background-position-y: 8px !important; z-index: 100; } main ul li.fileicon::before, main ul li.fileicon:hover::before { display: none !important; } main ul li.fileicon a { margin-right: .1em; } main ul li a.fileicon { padding-left: var(--list-einschub); margin-left: var(--list-einschub); margin-right: .3em; } main ul li.fileicon a:hover, main ul li a.fileicon:hover { text-decoration: underline; } .fileicon.xl { padding-left: 45px; padding-top: 1em; padding-bottom: 1em; min-height: 40px; display: inline-block } main ul li.fileicon.xl { padding-left: 45px; } main ul li a.fileicon.xl { padding-left: 45px; } .pdf, .fileicon.pdf { background: url(../images/fileicon_s/file_pdf.png) no-repeat } .doc, .fileicon.doc { background: url(../images/fileicon_s/file_doc.png) no-repeat } .xls, .fileicon.xls { background: url(../images/fileicon_s/file_xls.png) no-repeat } .ppt, .fileicon.ppt { background: url(../images/fileicon_s/file_ppt.png) no-repeat } .zip, .fileicon.zip { background: url(../images/fileicon_s/file_zip.png) no-repeat } .mov, .fileicon.mov { background: url(../images/fileicon_s/file_mov.png) no-repeat } .mp3, .fileicon.mp3 { background: url(../images/fileicon_s/file_mp3.png) no-repeat } .pic, .fileicon.pic { background: url(../images/fileicon_s/file_pic.png) no-repeat } .gps, .fileicon.gps { background: url(../images/fileicon_s/file_gps.png) no-repeat } .page, .fileicon.page { background: url(../images/fileicon_s/file_page.png) no-repeat } .heic, .fileicon.heic { background: url(../images/fileicon_s/file_heic.png) no-repeat } .fileicon.xl.pdf { background: url(../images/fileicon_m/file_pdf.png) no-repeat } .fileicon.xl.doc { background: url(../images/fileicon_m/file_doc.png) no-repeat } .fileicon.xl.xls { background: url(../images/fileicon_m/file_xls.png) no-repeat } .fileicon.xl.ppt { background: url(../images/fileicon_m/file_ppt.png) no-repeat } .fileicon.xl.zip { background: url(../images/fileicon_m/file_zip.png) no-repeat } .fileicon.xl.mov { background: url(../images/fileicon_m/file_mov.png) no-repeat } .fileicon.xl.mp3 { background: url(../images/fileicon_m/file_mp3.png) no-repeat } .fileicon.xl.pic { background: url(../images/fileicon_m/file_pic.png) no-repeat } .fileicon.xl.gps { background: url(../images/fileicon_m/file_gps.png) no-repeat } .fileicon.xl.page { background: url(../images/fileicon_m/file_page.png) no-repeat } .fileicon.xl.heic { background: url(../images/fileicon_m/file_heic.png) no-repeat } a[download]:not(li.fileicon a):not(ul.downloads li a):not(.fileicon) { cursor: download; margin-left: .1em; margin-right: .1em } a[download]:not(li.fileicon a):not(ul.downloads li a):not(.fileicon)::before { position: relative; display: inline-flex; justify-content: center; align-items: center; margin-right: .3em; content: "\f019"; font-family: 'FontAwesome'; font-weight: normal; color: var(--bs-primary); } ul.downloads { } ul.downloads li { left: 0 !important; min-width: 100%; margin-top: .25em; margin-bottom: .25em } ul.downloads li a { } /* --------- end FILEICONS -------- */ /*-------------------------------------------------------------- # Galerie / Gallery --------------------------------------------------------------*/ /* FAVORIT .gallery-list - optimal für Barrierefreiheit */ .gallery-list, .gallery-wrapper, .galerie_wrap { display: grid; list-style: none; padding: 0; margin: 2em 0; } .gallery-list li, .gallery-wrapper a, .galerie_wrap .galerie_container { overflow: hidden; aspect-ratio: 4 / 3; /*background-color: var(--bs-gray-200);*/ border-radius: var(--bs-border-radius); overflow: visible; /* wichtig für Fokkussierung */ } .gallery-wrapper a { display: flex; align-items: center; justify-content: center; } .galerie_wrap .galerie_container { width: auto !important; height: auto !important } .gallery-list li a, .gallery-wrapper a img, .galerie_wrap .galerie_container a { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .gallery-list li a img, .gallery-wrapper a img, .galerie_wrap .galerie_container a img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: transform 0.3s ease; object-fit: cover;/* für Overlay-Hover-Effekt */ display: block;/* für Overlay-Hover-Effekt */ transition: transform .25s ease;/* für Overlay-Hover-Effekt */ } aside .gallery-list li a img, aside .gallery-wrapper a img, aside .galerie_wrap .galerie_container a img { border-radius: 2px; } .gallery-wrapper a img { object-fit: contain; } /* --- HOVER --- */ /* schwarzer Overlay */ .gallery-list li a::before, .gallery-wrapper a::before, .galerie_wrap .galerie_container a::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; transform: scale(0); transform-origin: center center; transition: transform .4s ease, opacity .25s ease; z-index: 1; border-radius: inherit; pointer-events: none; } aside .gallery-list li a::before, aside .gallery-wrapper a::before, aside .galerie_wrap .galerie_container a::before { } /* Lupe */ .gallery-list li a::after, .gallery-wrapper a::after, .galerie_wrap .galerie_container a::after { content: "\F52A"; font-family: "bootstrap-icons"; font-size: 4rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.85); text-align: center; font-size: 1.4rem; color: #fff; border-radius: 50%; opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 2; pointer-events: none; } aside .gallery-list li a::after, aside .gallery-wrapper a::after, aside .galerie_wrap .galerie_container a::after { font-size: 1rem; } /* Hover */ .gallery-list li:hover, .gallery-list li a:focus-visible, .gallery-wrapper a:hover, .gallery-wrapper a:focus-visible, .galerie_wrap .galerie_container:hover, .galerie_wrap .galerie_container:focus-visible { transform: scale(1.05); transition: all .25s ease; } .gallery-list li:hover a::before, .gallery-list li a:focus-visible::before, .gallery-wrapper a:hover::before, .gallery-wrapper a:focus-visible::before, .galerie_wrap .galerie_container a:hover::before, .galerie_wrap .galerie_container a:focus-visible::before { opacity: 1; transform: scale(1); } .gallery-list li:hover a::after, .gallery-list li a:focus-visible::after, .gallery-wrapper a:hover::after, .gallery-wrapper a:focus-visible::after, .galerie_wrap .galerie_container a:hover::after, .galerie_wrap .galerie_container a:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .gallery-list, .gallery-wrapper, .galerie_wrap { grid-template-columns: repeat(5, 1fr); gap: 15px; } aside :is(.gallery-list, .gallery-wrapper, .galerie_wrap) { grid-template-columns: repeat(4, 1fr); gap: 10px } @media (max-width: 1400px) { .gallery-list, .gallery-wrapper, .galerie_wrap { grid-template-columns: repeat(4, 1fr); } aside :is(.gallery-list, .gallery-wrapper, .galerie_wrap) { grid-template-columns: repeat(4, 1fr) } } @media (max-width: 1200px) { .gallery-list, .gallery-wrapper, .galerie_wrap { grid-template-columns: repeat(4, 1fr); } aside :is(.gallery-list, .gallery-wrapper, .galerie_wrap) { grid-template-columns: repeat(3, 1fr) } } @media (max-width: 992px) { .gallery-list, .gallery-wrapper, .galerie_wrap { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .gallery-list, .gallery-wrapper, .galerie_wrap { grid-template-columns: repeat(4, 1fr); } aside :is(.gallery-list, .gallery-wrapper, .galerie_wrap) { grid-template-columns: repeat(4, 1fr) } } @media (max-width: 575px) { .gallery-list, .gallery-wrapper, .galerie_wrap { grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important } } @media (max-width: 480px) { .gallery-list, .gallery-wrapper, .galerie_wrap { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important } } /* ------ COVER - quadratisch füllend ------ */ .gallery-list.cover li, .gallery-wrapper.cover a, .galerie_wrap.cover .galerie_container { aspect-ratio: 1 / 1; /* quadratische Container */ } .gallery-list.cover li a img, .gallery-wrapper.cover a img, .galerie_wrap.cover .galerie_container a img { width: 100%; height: 100%; object-fit: cover; } /* --------- end GALERIE -------- */ /* --------- BILDER bisher ================================================== */ /* --------- AUSRICHTUNG rechts + links */ figure[class*="bildunterschrift-bildrahmen"] { } aside figure[class*="bildunterschrift-bildrahmen"] { } aside figure[class*="bildunterschrift-bildrahmenmitte"] { } @media (max-width: 767px) { figure[class*="bildunterschrift-bildrahmen"], aside figure[class*="bildunterschrift-bildrahmen"] { } aside figure[class*="bildunterschrift-bildrahmenmitte"] { } } figure[class*="bildunterschrift-bildrahmenrechts"] { float: right; clear: right; margin: .5rem 0 2rem 2rem; } figure[class*="bildunterschrift-bildrahmenlinks"] { float: left; clear: left; margin: .5rem 2rem 2rem 0; } @media (max-width: 767px) { figure[class*="bildunterschrift-bildrahmenrechts"] { margin-right: 1.25rem; margin-bottom: 1.25rem; } figure[class*="bildunterschrift-bildrahmenlinks"] { margin-left: 1.25rem; margin-bottom: 1.25rem; } } /* --------- AUSRICHTUNG mitte */ figure[class*="bildunterschrift-bildrahmenmitte"] { margin-bottom: 2rem } aside figure[class*="bildunterschrift-bildrahmenmitte"] { margin-bottom: 1rem } /* --------- IMG */ .figure-img, figure[class*="bildunterschrift-bildrahmen"] img { line-height: 1; height: auto; display: block; margin-bottom: 0; } /* --------- mit Rand */ .figure-img, figure[class*="bildunterschrift-bildrahmen"] img { padding: 3px; border: 1px solid var(--bs-border-color); background: var(--bs-white) } /* --------- ohne Rand */ .figure-img[class*="-nb"], figure[class*="-nb"] img { padding: 0 !important; border: none !important } /* --------- BILDER - TEMPORÄR ================================================================ */ figure[class*="bildunterschrift-bildrahmen"] { width: 45%;} aside figure[class*="bildunterschrift-bildrahmen"] { width: 45%;} figure[class*="bildunterschrift-bildrahmenmitte"] { width: 100%;} @media (max-width: 767px) { figure[class*="bildunterschrift-bildrahmen"], aside figure[class*="bildunterschrift-bildrahmen"] { width: 45% } figure[class*="bildunterschrift-bildrahmenmitte"] { width: 100%;} } .figure-img, figure[class*="bildunterschrift-bildrahmen"] img { width: 100% } .figure-img, figure[class*="bildunterschrift-bildrahmen"] img, img.bildrahmenmitte, img.bildrahmenrechts, img.bildrahmenlinks { padding: 3px !important; border: 1px solid var(--bs-border-color) !important; background: var(--bs-white) !important } .bildrahmenmitte-wrapper, .bildunterschrift-bildrahmenmitte-nb, .bildunterschrift-bildrahmenrechts, .bildunterschrift-bildrahmenrechts-nb, .bildunterschrift-bildrahmenlinks, .bildunterschrift-bildrahmenlinks-nb { display: inline-block; padding: 0; margin: 0 0 1.5em 0; } .bildrahmenmitte-wrapper, .bildunterschrift-bildrahmenmitte-nb{ width: 100%; } .bildunterschrift-bildrahmenrechts, .bildunterschrift-bildrahmenrechts-nb, .bildunterschrift-bildrahmenlinks, .bildunterschrift-bildrahmenlinks-nb { width: 45%; display: inline-flex; flex-direction: column; } .bildunterschrift-bildrahmenrechts, .bildunterschrift-bildrahmenrechts-nb { float: right; clear: right; margin-left: 1em; } .bildunterschrift-bildrahmenlinks, .bildunterschrift-bildrahmenlinks-nb { float: left; clear: left; margin-right: 1em } img.bildrahmenmitte, img.bildrahmenmitte-nb, img.bildrahmenrechts, img.bildrahmenrechts-nb, img.bildrahmenlinks, img.bildrahmenlinks-nb { width: 100%; padding: 0; margin: 0; } .bildrahmenmitte-wrapper .bildunterschrift, .bildunterschrift-bildrahmenmitte-nb .bildunterschrift, .bildunterschrift-bildrahmenrechts .bildunterschrift, .bildunterschrift-bildrahmenrechts-nb .bildunterschrift, .bildunterschrift-bildrahmenlinks .bildunterschrift, .bildunterschrift-bildrahmenlinks-nb .bildunterschrift { padding: 0; margin: .5em 0 0 0; } .bildunterschrift-bildrahmenrechts .bildunterschrift, .bildunterschrift-bildrahmenrechts-nb .bildunterschrift { text-align: right; } /* --------- end Temporär -------- */ /* --------- BILDER-Radius ================================================================ */ img, .img-thumbnail, .img-rounded { border-radius: var(--bs-border-radius-img); } aside img, aside .img-thumbnail, aside .img-rounded { border-radius: var(--bs-border-radius-img-aside); } .rounded-img, .gallery-list li a img, .gallery-wrapper .gallery, .gallery-wrapper img, .galerie_wrap .galerie_container a img, .gallery-list li a::before, .gallery-wrapper a::before, .galerie_wrap .galerie_container a::before { border-radius: var(--bs-border-radius-img) !important; } aside .rounded-img, aside .gallery-list li a img, aside .gallery-wrapper .gallery, aside .gallery-wrapper img, aside .galerie_wrap .galerie_container a img, aside .gallery-list li a::before, aside .gallery-wrapper a::before, aside .galerie_wrap .galerie_container a::before { border-radius: var(--bs-border-radius-img-aside) !important; } :is(.carousel, .header-pic, .navbar-brand) img { border-radius: 0 } .card-img, .card-img-top { border-radius: var(--bs-border-radius-img) } .card-img.rounded-0,.card-img.rounded-0 .card-img-top { border-radius: 0 } @media (min-width: 1400px) { .rounded-xxl-0, .card-img.rounded-xxl-0,.card-img.rounded-xxl-0 .card-img-top { border-radius: 0 } } @media (min-width: 1200px) { .rounded-xl-0, .card-img.rounded-xl-0,.card-img.rounded-xl-0 .card-img-top { border-radius: 0 } } @media (min-width: 992px) { .rounded-lg-0, .card-img.rounded-lg-0,.card-img.rounded-lg-0 .card-img-top { border-radius: 0 } } @media (min-width: 768px) { .rounded-md-0, .card-img.rounded-md-0,.card-img.rounded-md-0 .card-img-top { border-radius: 0 } } @media (min-width: 576px) { .rounded-sm-0, .card-img.rounded-sm-0,.card-img.rounded-sm-0 .card-img-top { border-radius: 0 } } /* --------- BILDER ================================================== */ .img-thumbnail { padding: 0; border: none; } .wrapper-link:hover .img-thumbnail { transition: .2s; opacity: .8; transform: scale(.95) } figure.figure-bild { margin-bottom: 1.5rem; } figure.figure-bild:is(.float-end, .float-start) { margin-top: .25rem } figure.figure-bild.float-end { margin-left: 2rem } figure.figure-bild.float-start { margin-right: 2rem } @media (max-width: 767px) { figure.figure-bild { margin-bottom: 1rem; } figure.figure-bild.float-end { margin-left: 1rem } figure.figure-bild.float-start { margin-right: 1rem } } figure.figure-bild:not(.float-end):not(.float-start) { width: 100%; } figure.figure-bild img { width: 100%; height: auto } figure.figure-bild:not(.nb) img { padding: 3px; border: 1px solid var(--bs-border-color); background: var(--bs-white) } figure.figure-bild figcaption, .figure-caption, .bildunterschrift, .news_lang_video span { font-size: 85%; color: rgba(var(--bs-gray-dark-rgb), .8); line-height: 1.35em; font-style: italic; text-align: left; padding-top: .4rem } /* --------- RATIOS */ .ratio-20x8 { --bs-aspect-ratio: 40%; } .ratio-20x7 { --bs-aspect-ratio: 35%; } .ratio-20x5 { --bs-aspect-ratio: 25%; } /* --------- Platzhalter */ .bg-placeholder { object-fit: contain; width: 100%; height: 100%; display: block; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; background-color: var(--bs-light); } /* --------- end BILDER -------- */ /* --------- SOCIAL-MEDIA ================================================================================== */ .social-icons { display: flex; gap: 15px; z-index: 1000 /* justify-content: center; align-items: center;*/ } .social-icons a { font-size: 24px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--bs-primary); color: var(--bs-white); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: .3s; text-decoration: none !important } .social-icons a.facebook { background: #1877F2 } .social-icons a.youtube { background: #FF0000 } .social-icons a.instagram { background: #833AB4 } .social-icons a:hover { background-color: var(--bs-primary-dark); text-decoration: none !important } .social-icons a:focus { outline: 3px solid var(--bs-white); outline-offset: 2px; background-color: var(--bs-primary-dark); text-decoration: none !important } .social-icons i { color: var(--bs-white) !important; font-weight: normal !important } /*-------------------------------------------------------------- # Passbild / Avatar / Team --------------------------------------------------------------*/ .avatar { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; margin: 0 auto } .card:hover .avatar { transition: all .3s ease-in-out; } /*-------------------------------------------------------------- # DOWNLOADS / DOKUMENTE / AUSSCHREIBUNGEN --------------------------------------------------------------*/ .btn-link { text-decoration: none; } .btn-link i { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--bs-accent); color: var(--bs-accent); width: 30px; height: 30px; } .btn-link:hover i { transition: .3s; background-color: var(--bs-accent); color: var(--bs-white) !important } /* =============================================================================== ==== C-Page Text: 100, mit Linie: 110 Boxen: 300, 310, 320, 330, 340 Header: 510, mit BG: 520, volle Breite: 530 Kontakt: 800, mit Linie: 805, mit Rahmen: 810 Kacheln: 1000, mit Linie: 1005 Navigationsliste: 1010, mit Linie: 1015 Linkliste: 1020, mit Linie: 1025, mit Rahmen 1026 M aus N ==== ================================================================================== */ :root { --c-page-gap: 40px !important; } @media (max-width: 767px) { :root { --c-page-gap: 30px !important; } } @media (max-width: 575px) { :root { --c-page-gap: 20px !important; } } #c-page { display: flex; flex-direction: column; padding-bottom: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; margin-top: 0 !important; gap: calc(var(--c-page-gap) * 1.5); } #c-page .c-row { margin-top: 0; } #c-page > .c-row:first-child { --bs-gutter-y: 0; } #c-page .c-col { row-gap: var(--c-page-gap) !important; display: flex; flex-direction: column; padding-bottom: 0 !important; margin-bottom: var(--c-page-gap) !important; margin-top: 0; } #c-page .c-col:last-child { margin-bottom: 0 !important; } @media (min-width: 576px) { #c-page .c-col[class*="col-sm-"] {margin-bottom: 0 !important;}} @media (min-width: 768px) { #c-page .c-col[class*="col-md-"] {margin-bottom: 0 !important;}} @media (min-width: 992px) { #c-page .c-col[class*="col-lg-"] {margin-bottom: 0 !important;}} @media (min-width: 1200px) { #c-page .c-col[class*="col-xl-"] {margin-bottom: 0 !important;}} @media (min-width: 1400px) { #c-page .c-col[class*="col-xxl-"] {margin-bottom: 0 !important;}} #c-page .c-element { width: 100%; min-width: 100%; display: block; position: relative; } /* Headline: Page */ #c-page > :is(h1, h2, h3, h4, h5, h6):not(:is(.c-row *)) { margin-top: 0 !important; padding-bottom: 0 !important; margin-bottom: calc(-1 * var(--c-page-gap) * 0) !important; } /* Headline: Container */ #c-page .c-row :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.c-element *) { margin-top: 0 !important; margin-bottom: calc(var(--c-page-gap) / 1.5) !important; } /* Headline: C-Element */ #c-page .c-element :is(h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6):first-of-type { margin-top: 0 !important; } /* Headline: mit Linie */ #c-page .c-element :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).border { margin-top: 0 !important; padding-top: var(--c-page-gap) !important } #c-page .card { padding: 40px; margin: 0 !important; } #c-page [class*="col-"][class*="-4"] .card, #c-page [class*="col-"][class*="-3"] .card { padding: 30px; } @media (max-width: 1200px) { #c-page .card, #c-page [class*="col-"][class*="-4"] .card, #c-page [class*="col-"][class*="-3"] .card { padding: 30px; } } /* --------- Frontend-Balken --------- */ #c-page .frontend { margin: 0 !important; margin-top: calc(-.5 * var(--c-page-gap)) !important; } #c-page .frontend.container { margin-top: calc(-1 * var(--c-page-gap)) !important; } #c-page .frontend.page { margin-top: calc(-1 * var(--c-page-gap)) !important; margin-bottom: calc(1 * var(--c-page-gap)) !important; } #c-page .kacheln .frontend { margin-top: calc(0 * var(--c-page-gap)) !important; } #c-page.mausn-wrap .frontend { margin-top: calc(.5 * var(--c-page-gap)) !important; } /* --------- HEADER_CONTENT --------- */ #c-page .c-col:has(.header-content) { z-index: 1 } .header-content { position: relative !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: center !important; text-align: center !important; line-height: 1.5 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: calc(-0 * var(--c-page-gap)) !important; gap: 25px !important; color: var(--bs-body-color) !important; } .header-content .bildrahmenmitte-wrapper, .header-content .bildunterschrift-bildrahmenmitte-nb, .header-content .bildunterschrift-bildrahmenrechts, .header-content .bildunterschrift-bildrahmenrechts-nb, .header-content .bildunterschrift-bildrahmenlinks, .header-content .bildunterschrift-bildrahmenlinks-nb, .header-content .figure, .header-content figure, .header-content img { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; margin: 0 !important; width: 100%; aspect-ratio: 21 / 6; } @media (max-width: 992px) { .header-content .bildrahmenmitte-wrapper, .header-content .bildunterschrift-bildrahmenmitte-nb, .header-content .bildunterschrift-bildrahmenrechts, .header-content .bildunterschrift-bildrahmenrechts-nb, .header-content .bildunterschrift-bildrahmenlinks, .header-content .bildunterschrift-bildrahmenlinks-nb, .header-content .figure, .header-content figure, .header-content img { aspect-ratio: 21 / 9; } } .header-content img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0 !important } .header-content .bildunterschrift, .header-content figcaption { display: none !important; } .header-content :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { display: inline-block !important; width: auto !important; margin: 0 auto !important; hyphens: none !important; -webkit-hyphens: none !important; -ms-hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .header-content :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5)::after { display: none !important; } .header-content p { margin: 0 !important; } /* TYP 2 --------------------------------------------------- */ .header-content.typ2 :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { color: var(--bs-white) !important; } .header-content.typ2::before { content: '' !important; position: absolute !important; display: block !important; overflow: visible !important; z-index: -10 !important; background: var(--bs-dark) !important; box-shadow: var(--bs-box-shadow) !important; margin-left: -1000px; margin-right: -1000px; width: calc(100% + 2000px); top: -350px; } /* TYP 3 --------------------------------------------------- */ .header-content.typ3 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; font-size: 0 !important; } .header-content.typ3 .bildrahmenmitte, .header-content.typ3 .figure { padding: 0 !important; border: none !important; } .header-content.typ3 .bildrahmenmitte-wrapper, .header-content.typ3 .bildunterschrift-bildrahmenmitte-nb, .header-content.typ3 .bildunterschrift-bildrahmenrechts, .header-content.typ3 .bildunterschrift-bildrahmenrechts-nb, .header-content.typ3 .bildunterschrift-bildrahmenlinks, .header-content.typ3 .bildunterschrift-bildrahmenlinks-nb, .header-content.typ3 .figure, .header-content.typ3 figure, .header-content.typ3 img { width: 100vw !important; } .header-content.typ3 img { z-index: 1; } .header-content.typ3 :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { z-index: 2; position: absolute !important; background: rgba(var(--bs-white-rgb), .5) !important; padding: .1em .4em .15em .4em !important; width: auto !important; box-shadow: var(--bs-box-shadow-sm) !important; max-width: 80% !important; line-height: 1.2em !important; } .header-content { margin-top: calc(var(--c-page-gap) * -1.25) !important; } .header-content.typ2 { } .header-content.typ2::before { height: 600px } .header-content.typ3 { margin-top: calc(var(--c-page-gap) * -2.75) !important; } .header-content.typ3 :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { font-size: var(--fs-3) !important; } @media (max-width: 1400px) { .header-content { } .header-content.typ2 { } .header-content.typ2::before { height: 550px !important } .header-content.typ3 { } .header-content.typ3 :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { font-size: var(--fs-4) !important; } } @media (max-width: 1200px) { .header-content { margin-top: calc(var(--c-page-gap) * -.75) !important; } .header-content.typ2 { } .header-content.typ2::before { } .header-content.typ3 { margin-top: calc(var(--c-page-gap) * -2) !important; } } @media (max-width: 992px) { .header-content { margin-top: calc(var(--c-page-gap) * -.5) !important; } .header-content.typ2 { } .header-content.typ2::before { height: 500px !important } .header-content.typ3 { margin-top: calc(var(--c-page-gap) * -1.75) !important; } .header-content.typ3 :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { font-size: var(--fs-5) !important; } } @media (max-width: 767px) { .header-content { } .header-content.typ2 { } .header-content.typ2::before { height: 470px !important } .header-content.typ3 { } .header-content.typ3 :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { font-size: var(--fs-5) !important; } } @media (max-width: 575px) { .header-content { margin-top: calc(var(--c-page-gap) * -1) !important; } .header-content.typ2 { } .header-content.typ2::before { height: 440px !important } .header-content.typ3 { margin-top: calc(var(--c-page-gap) * -2.5) !important; } .header-content.typ3 :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { font-size: var(--fs-5) !important; } } @media (max-width: 480px) { .header-content { } .header-content.typ2 { } .header-content.typ2::before { } .header-content.typ3 { margin-top: calc(var(--c-page-gap) * -2) !important; } } /* --------- end Header-Content -------- */ /* --------- Kacheln --------- */ #c-page .kacheln { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100% !important; gap: 20px 0; margin-right: -20px !important; width: calc(100% + 20px) !important; } #c-page .kacheln .col { box-sizing: border-box; flex: 0 0 calc((100% / 4) - 0px); max-width: calc((100% / 4) - 0px); } #c-page [class*="col-"][class*="-9"] .kacheln .col, #c-page [class*="col-"][class*="-8"] .kacheln .col, #c-page [class*="col-"][class*="-7"] .kacheln .col { flex: 0 0 calc((100% / 3) - 0px);max-width: calc((100% / 3) - 0px); } #c-page [class*="col-"][class*="-6"] .kacheln .col, #c-page [class*="col-"][class*="-5"] .kacheln .col { flex: 0 0 calc((100% / 2) - 0px);max-width: calc((100% / 2) - 0px); } #c-page [class*="col-"][class*="-4"] .kacheln .col, #c-page [class*="col-"][class*="-3"] .kacheln .col { flex: 0 0 100%;max-width: 100%; } @media (max-width: 1200px) { #c-page [class*="col-"][class*="-7"] .kacheln .col { flex: 0 0 calc((100% / 2) - 0px);max-width: calc((100% / 2) - 0px); } } @media (max-width: 992px) { #c-page .kacheln .col { flex: 0 0 calc((100% / 3) - 0px);max-width: calc((100% / 3) - 0px); } #c-page [class*="col-"][class*="-9"] .kacheln .col, #c-page [class*="col-"][class*="-8"] .kacheln .col { flex: 0 0 calc((100% / 2) - 0px);max-width: calc((100% / 2) - 0px); } #c-page [class*="col-"][class*="-6"] .kacheln .col, #c-page [class*="col-"][class*="-5"] .kacheln .col { flex: 0 0 100%;max-width: 100%; } } @media (max-width: 767px) { #c-page .kacheln { gap: calc(var(--c-page-gap)) 0; } #c-page .kacheln .col { flex: 0 0 calc((100% / 2) - 0px);max-width: calc((100% / 2) - 0px); } #c-page [class*="col-"][class*="-8"] .kacheln .col, #c-page [class*="col-"][class*="-7"] .kacheln .col { flex: 0 0 100%;max-width: 100%; } } @media (max-width: 575px) { #c-page .kacheln .col { flex: 0 0 100%;max-width: 100%; } } #c-page .kacheln .wrapper-link { text-decoration: none !important; display: flex; height: 100%; width: 100%; } #c-page .kacheln .wrapper-link:hover { transition: .3s; } #c-page .kacheln .card { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 0; background: rgba(var(--bs-primary-rgb), .1); border: 2px solid rgba(var(--bs-primary-rgb), .3); color: var(--bs-primary) !important; } #c-page .kacheln .wrapper-link:hover .card { transition: .3s; background-color: var(--bs-primary) } #c-page .kacheln .card .card-body { padding: 25px 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3rem } #c-page .kacheln a, #c-page .kacheln a:hover, #c-page .kacheln [class*="col-"]:hover a { text-decoration: none !important } #c-page .kacheln .wrapper-link :is(h1, h2, h3, h4, h5, h6) { text-decoration: none !important; margin: 0; font-weight: bold; color: var(--bs-primary); } #c-page .kacheln .wrapper-link:hover :is(h1, h2, h3, h4, h5, h6){ color: var(--bs-white) !important; } #c-page .kacheln .wrapper-link :is(h1, h2, h3, h4, h5, h6):hover { text-decoration: underline !important; } #c-page .kacheln p { margin: 0; font-size: 120%; opacity: .7 } #c-page .kacheln .wrapper-link:hover p { color: var(--bs-white); opacity: 1 } #c-page .kacheln span { display: flex; justify-content: center; align-items: center; border-radius: 0; width: 3rem; height: 3rem; font-size:3rem; margin-bottom: 1.5rem } #c-page .kacheln i { line-height: 1; color: var(--bs-primary); opacity: .7; } #c-page .kacheln .wrapper-link:hover i { text-decoration: none !important; transform: scale(1.1); transition: all .25s ease; color: var(--bs-white); opacity: 1 } #c-page .kacheln .ratio { position: relative; overflow: hidden; } #c-page .kacheln .ratio img { object-fit: cover; width: 100%; } #c-page .kacheln .wrapper-link:hover .ratio img { transform: scale(1.05); transition: all .5s ease; } /* --------- end Kacheln -------- */ /* --------- Navigationsliste --------- */ .navigationsliste { margin: 1em 0 !important; display: inline !important; position: relative !important; z-index: 1 !important; } .navigationsliste ul { padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .navigationsliste ul li { left: 0 !important; display: flex !important; align-items: stretch !important; padding: 0 !important; margin: 0 !important; list-style: none !important; white-space: nowrap; width: auto !important; } .navigationsliste ul li::before { display: none !important; } .navigationsliste ul li > a { padding: .4em .7em; line-height: 1.2em; font-weight: bold; background: rgba(var(--bs-primary-rgb), .1); border: 2px solid rgba(var(--bs-primary-rgb), .3); color: var(--bs-primary) !important; } .navigationsliste ul li > a:hover { transition: .3s; text-decoration: none !important; background: var(--bs-primary); border: 2px solid rgba(var(--bs-primary-rgb), .3); color: var(--bs-white) !important; } /* --------- end Navigationsliste -------- */ /* --------- Linkliste --------- */ .linkliste { margin-bottom: 0 } .linkliste li { padding-top: .1em !important; padding-bottom: .1em !important; list-style: none; padding-left: 25px; left: 0 !important; width: auto } .linkliste li::before { margin-left: -25px; width: 25px; display: inline-block; text-align: left; content: "\f08e" !important; font-family: 'FontAwesome'; font-weight: normal; font-size: 85%; vertical-align: middle } .linkliste li:hover::before { } .linkliste li > a { text-decoration: none; } .linkliste li > a:hover { transition: .3s; text-decoration: underline !important } /* --------- end Linkliste -------- */ /* --------- M aus N --------- */ #c-page .mausn { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100% !important; gap: 25px 0; margin-right: -20px !important; width: calc(100% + 20px) !important; } #c-page.mausn-wrap { background: rgba(var(--bs-primary-rgb), .07); margin-top: calc(var(--c-page-gap) * 2) !important; margin-bottom: 0 !important; padding-top: calc(1.25 * var(--c-page-gap)) !important; padding-bottom: calc(1.25 * var(--c-page-gap)) !important; } #c-page .mausn .col { box-sizing: border-box; flex: 0 0 calc((100% / 4) - 0px); max-width: calc((100% / 4) - 0px); } #c-page [class*="col-"][class*="-9"] .mausn .col, #c-page [class*="col-"][class*="-8"] .mausn .col, #c-page [class*="col-"][class*="-7"] .mausn .col { flex: 0 0 calc((100% / 3) - 0px); max-width: calc((100% / 3) - 0px); } #c-page [class*="col-"][class*="-6"] .mausn .col, #c-page [class*="col-"][class*="-5"] .mausn .col { flex: 0 0 calc((100% / 2) - 0px); max-width: calc((100% / 2) - 0px); } #c-page [class*="col-"][class*="-4"] .mausn .col, #c-page [class*="col-"][class*="-3"] .mausn .col { flex: 0 0 100%; max-width: 100%; } @media (max-width: 1200px) { #c-page [class*="col-"][class*="-7"] .mausn .col { flex: 0 0 calc((100% / 2) - 0px); max-width: calc((100% / 2) - 0px); } } @media (max-width: 992px) { #c-page .mausn .col { flex: 0 0 calc((100% / 3) - 0px); max-width: calc((100% / 3) - 0px); } #c-page [class*="col-"][class*="-9"] .mausn .col, #c-page [class*="col-"][class*="-8"] .mausn .col { flex: 0 0 calc((100% / 2) - 0px); max-width: calc((100% / 2) - 0px); } #c-page [class*="col-"][class*="-6"] .mausn .col, #c-page [class*="col-"][class*="-5"] .mausn .col { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 767px) { #c-page .mausn { gap: calc(var(--c-page-gap)) 0; } #c-page .mausn .col { flex: 0 0 calc((100% / 2) - 0px); max-width: calc((100% / 2) - 0px); } #c-page [class*="col-"][class*="-8"] .mausn .col, #c-page [class*="col-"][class*="-7"] .mausn .col { flex: 0 0 100%;max-width: 100%; } } @media (max-width: 575px) { #c-page .mausn .col { flex: 0 0 100%; max-width: 100%; } } #c-page .mausn .card { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; width: 100%; padding: 20px !important; } #c-page .mausn ul { margin: 0; padding: 0; width: 100% !important; position: relative; display: inline-block } #c-page .mausn ul li { margin: 0 !important; padding: .5em 0 !important; list-style: none; border-bottom: 1px solid var(--bs-border-color); display: block; float: left; clear: both; line-height: 1.3em; left: 0 !important; width: 100% !important; } #c-page .mausn ul li::before { display: none } #c-page .mausn ul li:last-child { border: none; margin-bottom: 0; padding-bottom: 0 } #c-page .mausn ul li .bild { height: 50px; width: auto; max-width: 120px; margin: 0 0 0 15px !important; border: 1px solid var(--bs-border-color); float: right } #c-page .mausn ul li a:hover .bild { opacity: .8; transition: .3s; } @media (max-width: 1200px) { #c-page .mausn ul li .bild { max-width: 100px; height: 40px; }} @media (max-width: 575px) { #c-page .mausn ul li .bild { max-width: 120px; height: 50px; }} #c-page .mausn :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) { margin: 0 0 .5em 0 !important; } /* --------- end M aus N -------- */ /*-------------------------------------------------------------- # Formulare / Forms --------------------------------------------------------------*/ form label, .form-label, .col-form-label { font-weight: normal; margin-bottom: .1rem; } label:is(.h1, .h2, .h3, .h4, .h5, .h6), .form-label:is(.h1, .h2, .h3, .h4, .h5, .h6), .col-form-label:is(.h1, .h2, .h3, .h4, .h5, .h6) { width: auto; display: inline-block; margin-bottom: .2rem; } .form-check .checkbox { margin-bottom: .2em } .form-check .checkbox .form-check-label { font-weight: normal !important; } .form-control, .form-select, .form-check-input { background-color: var(--form-control-bg); } .form-control, .form-control:focus, .form-control::-webkit-file-upload-button, .form-control::file-selector-button, .form-control-plaintext, .form-select, .input-group-text { color: var(--form-color); } .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label, .form-floating > .form-control:-webkit-autofill ~ label { color: var(--form-color-rgb); } .form-floating label, .form-floating:focus-within label, .form-floating > :disabled ~ label, .form-floating > .form-control:disabled ~ label, ::placeholder, ::-webkit-input-placeholder, ::-webkit-input-placeholder { color: var(--form-color-rgb) !important; } .form-floating ::placeholder, .form-floating ::-webkit-input-placeholder, .form-floating ::-webkit-input-placeholder { color: transparent !important; } .form-control-plaintext { color: var(--bs-body-color) } .form-text { color: var(--bs-primary) !important; } .form-control::-webkit-file-upload-button { background-color: var(--form2-bg); } .form-control::file-selector-button { background-color: var(--form2-bg); } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-range::-webkit-slider-runnable-track { background-color: rgba(var(--bs-primary-rgb), .3); } .form-range::-moz-range-track { background-color: rgba(var(--bs-primary-rgb), .3); } .form-range::-webkit-slider-thumb { background-color: var(--bs-primary); } .form-range::-webkit-slider-thumb:active { background-color: var(--bs-primary-dark); } .progress, .progress-stacked { background-color: rgba(var(--bs-primary-rgb), .5); } .input-group-text { background-color: var(--form-bg); } .pflicht { color: var(--bs-red) } /*.invalid-feedback*/ .error { background: var(--bs-red); border-radius: var(--bs-border-radius); color: var(--bs-white); z-index: 10; position: relative; width: 100%; font-size: var(--fs-8); font-weight: 400; line-height: 1.2em; padding: .2em .5em; margin-bottom: 4px; opacity: .85; box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.3); width: auto; display: flex; align-items: center; } /*.invalid-feedback::before,*/ /*.error::before { content: "\f0d7"; font-family: 'FontAwesome'; font-weight: normal; font-style: normal; color: var(--bs-red); bottom: 0; margin-bottom: -10px; left: 20px; position: absolute; font-size: var(--fs-8); }*/ /* --------- end FORMULAR ---------------------------------------------------- ================================================================================== */ /*-------------------------------------------------------------- # Tooltip --------------------------------------------------------------*/ .tooltip .tooltip-inner { padding: 1rem; padding-bottom: 1.2rem; border-radius: 0.25rem; background: var(--bs-white); color: var(--bs-body-color); box-shadow: var(--bs-box-shadow-lg); border: 1px solid var(--bs-border-color); text-align: left; line-height: 1.4em } .tooltip .tooltip-inner h6 { margin: 0 0 .5rem 0 !important; font-size: 120% } .tooltip .tooltip-inner ul { margin: 0; padding-left: 1rem } .tooltip .tooltip-inner ul li { margin-bottom: .5em; } .tooltip-arrow { --bs-tooltip-bg: var(--bs-white) !important; } .tooltip-form i { color: var(--bs-secondary) !important; } .tooltip .tooltip-arrow::before i:hover { color: var(--bs-secondary-dark) !important; } /* --------- end TOOLTIP ---------------------------------------------------- ================================================================================== */ . /*-------------------------------------------------------------- # DRUCKVERSION --------------------------------------------------------------*/ @media print { :root, [data-bs-theme=light] { --bs-gray: #888; } footer, .topbar-infos, .markenlogos, .navbar-wrap, .navbar-collapse, .social-icons, .back-to-top { display: none !important } .navbar { border-top: none !important; background: none !important; box-shadow: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important } body { width: 19cm !important; padding: 0 0 0 30px !important; margin: 0 auto !important; font-size: 11px !important; } main { min-width: 100% !important; margin: 0 auto !important; padding: 0 !important; height: auto !important; } main > .container { min-width: 100% !important; margin: 0 !important; padding: 0 !important; } aside { width: 35% !important } main ul:not(.gallery-list) li { margin: 0; padding: .1em 0 !important; border-bottom: 1px solid var(--bs-gray-500); line-height: 1.2em } .navbar-brand { width: 100% !important; height:50px !important; padding: 0 !important; margin: 10px auto 0 auto !important; display: inline-flex; justify-content: center; align-items: center; text-align: center; background: none !important; box-shadow: none !important } .navbar-brand img { height: 80% !important; width: auto !important; margin: 0 !important; padding: 0 !important } h1, .h1 { font-size: 20px !important } h2, .h2 { font-size: 16px !important } h3, .h3 { font-size: 14px !important } h4, .h4 { font-size: 12px !important } h5, .h5 { font-size: 11px !important } h6, .h6 { font-size: 10px !important } } /* ========================================================= TABLES / TABELLEN ========================================================= */ table { width: 100%; line-height: 1.3em; border-collapse: collapse; border-collapse: separate; border-spacing: 2px 0; } table td { padding: .75rem .75rem; vertical-align: top; border-bottom: 1px solid rgba(var(--bs-primary-rgb), .25); } table td:empty::after { content: "-"; opacity: .4; } .table-top table tbody tr:first-child > td { font-weight: bold; background-color: rgba(var(--bs-primary-rgb), .15); color: var(--bs-primary); border-bottom: 2px solid var(--bs-white); } .table-front table tbody tr > td:first-child { font-weight: bold; background-color: rgba(var(--bs-primary-rgb), .15); white-space: nowrap; color: var(--bs-primary); } .table-front table tbody tr:not(:last-child) > td:first-child { border-bottom: 2px solid var(--bs-white); } .table-striped table tbody tr:nth-child(even) > td { background-color: rgba(var(--bs-dark-rgb), .04); } .table-striped.table-front table tbody tr > td:first-child { font-weight: bold; background-color: rgba(var(--bs-primary-rgb), .15); white-space: nowrap; } .table-striped.table-top table tbody tr:nth-child(even) > td { background-color: rgba(var(--bs-dark-rgb), 0); } .table-striped.table-top table tbody tr:not(tr:first-child):nth-child(odd) > td { background-color: rgba(var(--bs-dark-rgb), .04); } .table-striped.table-top.table-front table tbody tr > td:first-child { background-color: rgba(var(--bs-primary-rgb), .15) !important; } .table-striped-columns table tbody tr > td:nth-child(even) { background-color: rgba(var(--bs-dark-rgb), .0); } .table-striped-columns table tbody tr > td:nth-child(odd) { background-color: rgba(var(--bs-dark-rgb), .04); } .table-striped-columns.table-top table tbody tr:first-child > td { background-color: rgba(var(--bs-primary-rgb), .15) !important; } .table-striped-columns.table-front table tbody tr > td:first-child { background-color: rgba(var(--bs-primary-rgb), .15) !important; } .table-hover table tbody tr:hover > td { background-color: rgba(var(--bs-primary-rgb), .08); transition: background-color .15s ease-in-out; } .table-sm table td { padding: .4rem .5rem; font-size: .9rem; line-height: 1.2em } .table-bordered, .table-bordered table { border-collapse: collapse; border-spacing: 0; border: none } .table-bordered table td { border: 1px solid rgba(var(--bs-dark-rgb), .2); } .table-borderless table td { border: none !important; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive table { min-width: 600px; } .table-bg table { border-collapse: separate; border-spacing: 6px; } .table-bg table tbody tr { border: none; } .table-bg table tbody tr > td { background-color: rgba(var(--bs-primary-rgb), .1); border: none; border-radius: .2rem } .table-bg.table-hover table tbody tr:hover > td { background-color: rgba(var(--bs-primary-rgb), .3); } .table-bg.table-top table tbody tr:first-child > td { font-weight: bold; background-color: rgba(var(--bs-primary-rgb), .5); color: var(--bs-white); } .table-bg.table-front table tbody tr > td:first-child { font-weight: bold; background-color: rgba(var(--bs-primary-rgb), .5); color: var(--bs-white); } /*-------------------------------------------------------------- # DL-Listen --------------------------------------------------------------*/ dl { display:inline-block; width: 100% } dl.debug { box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.1); background-color: #eee !important; border-radius: 5px; padding: 20px !important; font-size: 11.5px !important; line-height: 1.25em; clear: both; display: inline-block; width: 100%; margin: 1.5em 0; } dt, dd { float:left; border-top:1px solid rgba(0, 0, 0, 0.2); padding: .5em 0 0 0 !important; margin: .5em 0 0 0 !important; } dt:first-of-type, dd:first-of-type { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important } dt { clear:left; padding-right: 10px; width: calc(60% - 10px); font-weight: normal !important; } dd { padding-left: 10px; width: calc(40% - 10px) } .dl_liste_1 dt, .dl_liste_2 dt { width: calc(25% - 10px); } .dl_liste_2 dt { font-weight: normal; } .dl_liste_1 dd, .dl_liste_2 dd { width: calc(75% - 10px); } /* --------- end DL-LISTEN -------- */ /*-------------------------------------------------------------- # DRUCKVERSION --------------------------------------------------------------*/ @media print{ :root{ -webkit-print-color-adjust:exact; print-color-adjust:exact; --bs-gray:#777!important; } html,body{ background:none!important; } main{ min-width:100%!important; margin:0 auto!important; padding:0!important; height:auto!important; } main>.container{ min-width:100%!important; margin:0!important; padding:0!important; } .container,.container-fluid{ max-width:none!important; width:100%!important; padding-left:0!important; padding-right:0!important; } .row{ --bs-gutter-x:1rem; --bs-gutter-y:.75rem; } .affix{ position:relative!important; } .navbar{ border-top:none!important; background:none!important; box-shadow:none!important; width:100%!important; margin:0!important; padding:0!important; } .navbar-brand{ width:100%!important; height:50px!important; padding:0!important; margin:10px auto 1em auto!important; display:inline-flex; justify-content:center; align-items:center; text-align:center; background:none!important; box-shadow:none!important; } .navbar-brand img{ margin:0!important; padding:0!important; width:auto!important; max-width:none!important; height:90%!important; display:inline-block!important; position:relative!important; } .offcanvas,.modal,.toast,.tooltip,.popover,.carousel, .swiper,.btn,.dropdown,.breadcrumb,.pagination, .fixed-top,.fixed-bottom,.back-to-top,.no-print, #sticky,#cookiedingsbums,#highlight,.drucken,.edit-block, .debug-box,.frontend,.toggle-content.edit-block,footer,.footer, .topbar-infos,.markenlogos,.navbar-wrap,.navbar-collapse,.social-icons{ display:none!important; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.9em; word-break:break-all; } a[href^="#"]::after,a[href^="mailto:"]::after,a[href^="tel:"]::after{ content:""; } img,svg,video,canvas{ max-width:100%!important; height:auto!important; } .card,.shadow,.shadow-sm,.shadow-lg{ box-shadow:none!important; } .card{ border:1px solid #ddd!important; } table{ page-break-inside:auto; } thead{ display:table-header-group; } tr,img{ break-inside:avoid; page-break-inside:avoid; } h1,h2,h3,h4,h5,h6{ break-after:avoid-page; } h1,.h1{ font-size:20px!important; } h2,.h2{ font-size:16px!important; } h3,.h3{ font-size:14px!important; } h4,.h4{ font-size:12px!important; } h5,.h5{ font-size:11px!important; } h6,.h6{ font-size:10px!important; } p,ul,ol{ orphans:3; widows:3; } input,textarea,select{ border:1px solid #ccc!important; background:transparent!important; box-shadow:none!important; } }