/*! * Bootstrap v4.4.1 (https://getbootstrap.com/) * Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ :root { --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Resets Bootstrap ========================================================================================================= */ *, *::after, *::before {box-sizing: border-box; text-rendering: optimizelegibility;} html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { margin: 0; font-weight: normal; overflow-y: scroll !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } hr { box-sizing: content-box; height: 0; overflow: visible; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } a { text-decoration: none; background-color: transparent; } a:hover { text-decoration: underline; } a:not([href]) { color: inherit; text-decoration: none; } a:not([href]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } figure { margin: 0 0 1rem; } img { vertical-align: middle; border-style: none; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6c757d; text-align: left; caption-side: bottom; } th { text-align: inherit; } label { display: inline-block; margin-bottom: 0.5rem; } button { border-radius: 0; } button:focus { outline: none; outline:none; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } select { word-wrap: normal; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } [hidden] { display: none !important; } /* Bootstrap Elements======================================================================================================== */ .container { width: 100%; padding: 0px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container{ max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 980px; } }@media (min-width: 1200px) { .container { max-width: 1140px; } } .navbar { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; padding: 0; } .navbar .container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } .navbar-nav { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; list-style: none; } .navbar-nav .dropdown-menu { position: static; float: none; } .collapse:not(.show) { display: none; } .accordion > .card { overflow: hidden; } .card > hr { margin-right: 0; margin-left: 0; } .card > .list-group:first-child .list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .card > .list-group:last-child .list-group-item:last-child { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 0.3rem 1.25rem 1.25rem 1.25rem; } .fade { transition: opacity 0.15s linear; } @media (prefers-reduced-motion: reduce) { .fade { transition: none; } } .fade:not(.show) { opacity: 0; } .collapsing { position: relative; height: 0; overflow: hidden; transition: height 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } } .dropleft { position: relative; } .dropdown-toggle { white-space: nowrap; } .dropdown-toggle::after { /* display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; */ } .dropdown-toggle:empty::after { margin-left: 0; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0; margin: 0.025rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } .dropleft .dropdown-menu { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: 0.125rem; } .dropleft .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; } .dropleft .dropdown-toggle::after { display: none; } .dropleft .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; } .dropleft .dropdown-toggle:empty::after { margin-left: 0; } .dropleft .dropdown-toggle::before { vertical-align: 0; } .dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] { right: auto; bottom: auto; } .dropdown-menu.show { display: block; } .btn-group, .btn-group-vertical { position: relative; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; } .btn-group > .btn, .btn-group-vertical > .btn { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; } .btn-group > .btn:hover, .btn-group-vertical > .btn:hover { z-index: 1; } .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 1; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) { margin-left: -1px; } .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; } .nav-link { display: block; } .nav-link:hover, .nav-link:focus { text-decoration: none; } .nav-link.disabled { color: #6c757d; pointer-events: none; cursor: default; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; padding: 1.25rem; } .media { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; } .media-body { -ms-flex: 1; flex: 1; } .close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: none; /*opacity: .5;*/ } .close:hover { color: #000; text-decoration: none; } button.close { padding: 0; width:auto; background-color: transparent; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } a.close.disabled { pointer-events: none; } .modal-open { overflow:auto; padding-right:0 !important; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; } .modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; } .modal.fade .modal-dialog { transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transform: translate(0, -50px); transform: translate(0, -50px); } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } .modal.show .modal-dialog { -webkit-transform: none; transform: none; } .modal.modal-static .modal-dialog { -webkit-transform: scale(1.02); transform: scale(1.02); } .modal-dialog-scrollable { display: -ms-flexbox; display: flex; max-height: calc(100% - 1rem); } .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; } .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer { -ms-flex-negative: 0; flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: calc(100% - 1rem); } .modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); content: ""; } .modal-dialog-centered.modal-dialog-scrollable { -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; height: 100%; } .modal-dialog-centered.modal-dialog-scrollable .modal-content { max-height: none; } .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } .modal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-clip: padding-box; border-radius: 0.3rem; outline: 0; border:0 } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 0.5; } .modal-header { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem 1rem 0 1rem; border-bottom: 0px solid #dee2e6; border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } .modal-header .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } .modal-title { margin-bottom: 0; line-height: 1.5; } .modal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 1rem 1rem 1rem; } .modal-footer { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 0px solid #dee2e6; border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } .modal-footer > * { margin: 0rem; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .tooltip { position: absolute; z-index: 1070; display: block; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; opacity: 0; } .tooltip.show { opacity: 1; margin-top:.2rem } .tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; } .tooltip .arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; /*color: #fff;*/ text-align: center; /*background-color: #000;*/ border-radius: 0.25rem; } /* Zur Überprüfung offen */ .clearfix::after { display: block; clear: both; content: ""; } .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } @media print { .d-print-none { display: none !important; } .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: -ms-flexbox !important; display: flex !important; } .d-print-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } .flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } .float-left { float: left !important; } .float-right { float: right !important; } .float-none { float: none !important; } .overflow-auto { overflow: auto !important; } .overflow-hidden { overflow: hidden !important; } .position-static { position: static !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: -webkit-sticky !important; position: sticky !important; } .fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; } @supports ((position: -webkit-sticky) or (position: sticky)) { .sticky-top { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } } .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } .shadow-none { box-shadow: none !important; } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } .min-vw-100 { min-width: 100vw !important; } .min-vh-100 { min-height: 100vh !important; } .vw-100 { width: 100vw !important; } .vh-100 { height: 100vh !important; } .stretched-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); } /* I. BODY RESET */ /* -------------------------------------------------------------------------------------all Ports*/ /* 1 Elements und Container =============== */ html { font-size:15px; } .clear::after, .clearboth::after { display: block; clear:both; content: ""; } body.offcanvas-active { overflow:hidden; } body { padding: 0 !important; padding-bottom:0; } section { margin-right:auto; margin-left:auto; margin:auto; } section.main-content { width:100%; max-width: 1600px; } .story-100, .footer-100 { width:auto; margin:0 auto; padding-left:0vw; padding-right:0vw; } .footer-100 { max-width:980px } p.absatz { line-height: calc(1.7rem - .9rem); clear: both; display: block; margin: 0; } .offcanvas-header{ display:none; } body { font-family:'Ibm Plex'; font-weight:400; color:#eeee22; } body a { color:#81d742; } body article a :not(h2 a) { font-weight:500; } body a, body a:hover { text-decoration:none; } .main-content :is(article.hsb-blog, article.hsb-nonblog ) { font-size:1.07rem; line-height:1.7rem; } .main-content article a, .main-content article a:hover { text-decoration:none } .wrap-end {width:100%; float:left; } .wrap-instance { max-width: 100%; display: flex !important; box-shadow: 0px 1px 2px -1px #000000; } .flex-middle{ align-items: center !important; } .flex-bottom { align-items: flex-end !important; } .mitte { margin: auto; } .zentriert { text-align: center; } .rechts { float: right; margin-right:0 !important; } .container { margin:auto; } hr { margin-top: 1.5rem; margin-bottom: 1.5rem; border: 0; border-top: 1px solid #9b1c17; } .wrap-player hr { margin-top: .5rem; margin-bottom: .5rem; border: 0; border-top: 1px solid #9b1c17; } /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ body { background:#282828 } body { background: url('/wp-content/uploads/flip-01.jpg') no-repeat center center fixed; background-size: cover; } body.os-ios:after, body.os-mac:after { content:""; position:fixed; /* stretch a fixed position to the whole screen */ top:0; height:100vh; /* fix for mobile browser address bar appearing disappearing */ left:0; right:0; z-index:-1; /* needed to keep in the background */ background: url('/wp-content/uploads/flip-01.jpg') center center; background-size: cover; } .bg-no-repeat { background-repeat: no-repeat; background-position: 0 0 !important; } /* Vollformat (ohne Wiederholung) */ .bg-repeat { background-repeat: repeat; } /* gekachelt (gesamter Bildschirm) */ .bg-repeat-x { background-repeat: repeat-x; } /* gekachelt (auf x-Achse) */ .bg-repeat-y { background-repeat: repeat-y; background-position: 0px 0px !important; } /* gekachelt (auf y-Achse) */ .bg-size-auto { background-size:auto; } .bg-size-cover { background-repeat: no-repeat; background-size:100vh auto, cover; } .bg-size-contain { background-size:contain; background-repeat: no-repeat; background-position: center top !important; } .bg-size-100x100 { background-size:100% 100%; } .bg-size-100 { background-size:100%; background-repeat: no-repeat;} .bg-attachement-scroll { background-attachment:scroll; } .bg-attachement-fixed { background-attachment:fixed; } .bg-attachement-local { background-attachment:local; } /* Wo zum Einsatz bringen? */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ .form_textfeld, .form_textfeld_quiz { max-width:250px } .wpcf7 .screen-reader-response { display:none } span.wpcf7-list-item { display:block } span.wpcf7-list-item label { display: inline-block; margin-bottom: 0.1rem;} span.wpcf7-list-item input[type="checkbox"] {position: relative; margin: 0 .35rem 0 0;} .wpcf7-not-valid-tip, .wpcf7-validation-errors, .wpcf7-acceptance-missing { max-width:250px; } .wpcf7-not-valid-tip, .wpcf7-validation-errors, .wpcf7-acceptance-missing, .wpcf7-response-output { border-radius:4px; display:flex; margin:8px 0; background:#f4b903; color:red; font-weight:bold } .wpcf7-validation-errors, .wpcf7-acceptance-missing {float:left; margin-top:5px } .wpcf7-mail-sent-ok {float:left; padding:5px; margin-left:5px; color:#4c4949; background-color:#ff8e26; color:#fff } .wpcf7-quiz-label { margin: 0 0.3rem 0 0; font-family: 'Yanone Kaffeesatz'; font-size: 1.7rem; line-height: 1.6rem; font-weight: 500; } .wpcf7-form-control-wrap { margin: 0.3rem 0 0 0; } .form_textfeld, .form_textarea, .form_textfeld_right, .form_textfeld_quiz { border: 1px solid #ddd; } .wpcf7-form-control-wrap label { margin-bottom:0px } .wpcf7-mail-sent-ok {color:#000000; background-color:#f4b903; } .wpcf7-response-output { margin-top:7px; clear:both } .search-submit { display: none; } input.is-search-input { -webkit-appearance: textfield; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline:none; background: #f4b903 url(/wp-content/themes/hoerspielbox/media/search.png) no-repeat 9px center; font-family: 'Yanone Kaffeesatz'; font-weight: normal; font-size: 1.6rem; line-height: 1.05em; border: 0px solid #000; padding: 9px 10px 5px 37px; border-radius: 4px; width: 100%; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .form_textfeld, .form_textfeld_quiz { -webkit-appearance: textfield; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline:none; background: #f4b903 ; font-family: 'Yanone Kaffeesatz'; font-weight: normal; font-size: 1.6rem; line-height: 1.1em; border: 0px solid #000; padding: 10px; border-radius: 4px; width: 100%; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } input.is-search-input:focus, .form_textfeld:focus, .form_textfeld_quiz:focus { background-color:#fff; color: #000; } input.search-field:-internal-autofill-selected { transition: all .5s; appearance: menulist-button; background-image: none !important; background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important; color: -internal-light-dark(lime, orange) !important; } input[type=search]::-webkit-search-cancel-button { transition: all .5s; -webkit-appearance: none;-moz-appearance: none; background-color: #000000; background-repeat: no-repeat; padding:2px; background-position: center center; background-size: 15px 15px; background-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.46, transparent), color-stop(0.46, #f4b903), color-stop(0.54, #f4b903), color-stop(0.54, transparent), to(transparent)), -webkit-gradient(linear, right top, left bottom, from(transparent), color-stop(0.46, transparent), color-stop(0.46, #f4b903), color-stop(0.54, #f4b903), color-stop(0.54, transparent), to(transparent)) !important; border: 4px solid #000000; box-sizing: border-box; height: 20px; width: 20px; display: inline-block; vertical-align: middle; margin-left: 0.5em; border-radius: 1em; } input::-webkit-search-decoration { display: none; } /* placeholder */ input:-moz-placeholder { color: #000; } input::-webkit-input-placeholder { color: #000; } .screen-reader-text { display: none; } .is-ajax-search-post { background: #ffffff } .is-ajax-search-details .is-title a, .is-ajax-search-post .is-title a, .is-ajax-search-details a, .is-ajax-search-result a { font-weight:400; color: #000000;} .is-meta-category { font-size:10px } .is-show-more-results {background: #f4b903; } /* 6 Scroll-to-top-Button ================= */ .scroll-top { border:0px; border-radius: 0rem; background-color: #f6db89; border-top-left-radius: 5px; border-bottom-left-radius: 5px; position: fixed; display: none; z-index:10; bottom: 4vh; right: 0px; cursor:pointer; font-size: 2.8rem; padding:.3rem .5rem; } .scroll-top:hover { background:#f4b903; } .scroll-top i { line-height: 1.8rem; padding:.9rem .7rem; color: #000000; } .scroll-top i:hover { color:#000000; } .icon-scroll-up:before { content: '\f106'; } /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ @font-face { font-family: 'theme-this'; src: url('https://hoerspielbox.de/wp-content/themes/hoerspielbox/fonts/theme-this.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { font-family: 'theme-this' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; line-height: 1; } .icon-chevron-right:before { content: "\e900";} .icon-chevron-left:before { content: "\e901";} .icon-chevron-down:before { content: "\e902";} .icon-chevron-up:before { content: "\e903";} .icon-check:before { content: "\e904";} .icon-chevron-with-circle-up:before { content: "\e905";} .icon-chevron-with-circle-right:before { content: "\e906";} .icon-chevron-with-circle-left:before { content: "\e907";} .icon-chevron-with-circle-down:before { content: "\e908";} .icon-check1:before { content: "\e909";} .icon-chevron-small-up:before { content: "\e90a";} .icon-chevron-small-right:before { content: "\e90b";} .icon-chevron-small-left:before { content: "\e90c";} .icon-chevron-small-down:before { content: "\e90d";} .icon-share2:before { content: "\ea82";} .icon-x-altx-alt:before { content: "\e90e";} .icon-search:before { content: "\f002";} .icon-check2:before { content: "\f00c";} .icon-close:before { content: "\f00d";} .icon-remove:before { content: "\f00d";} .icon-times:before { content: "\f00d";} .icon-volume-up:before { content: "\f028";} .icon-tag:before { content: "\f02b";} .icon-tags:before { content: "\f02c";} .icon-map-marker:before { content: "\f041";} .icon-plus-circle:before { content: "\f055";} .icon-minus-circle:before { content: "\f056";} .icon-times-circle:before { content: "\f057";} .icon-info-circle:before { content: "\f05a";} .icon-twitter-square:before { content: "\f081";} .icon-facebook-square:before { content: "\f082";} .icon-phone:before { content: "\f095";} .icon-phone-square:before { content: "\f098";} .icon-hand-o-right:before { content: "\f0a4";} .icon-hand-o-left:before { content: "\f0a5";} .icon-hand-o-up:before { content: "\f0a6";} .icon-hand-o-down:before { content: "\f0a7";} .icon-chain:before { content: "\f0c1";} .icon-link:before { content: "\f0c1";} .icon-bars:before { content: "\f0c9";} .icon-navicon:before { content: "\f0c9";} .icon-reorder:before { content: "\f0c9";} .icon-pinterest-square:before { content: "\f0d3";} .icon-envelope:before { content: "\f0e0";} .icon-cloud-download:before { content: "\f0ed";} .icon-suitcase:before { content: "\f0f2";} .icon-plus-square:before { content: "\f0fe";} .icon-angle-double-left:before { content: "\f100";} .icon-angle-double-right:before { content: "\f101";} .icon-angle-left:before { content: "\f104";} .icon-angle-right:before { content: "\f105";} .icon-angle-up:before { content: "\f106";} .icon-angle-down:before { content: "\f107";} .icon-minus-square:before { content: "\f146";} .icon-share-alt-square:before { content: "\f1e1";} .icon-paypal:before { content: "\f1ed";} .icon-whatsapp:before { content: "\f232";} /* 10 Font Überschriften ================== */ h1, .h1 { font-family:'Yanone Kaffeesatz'; color:#dd3333; font-size:2rem; line-height:3.22rem; text-indent:0px; font-weight:500; margin-top:0rem; margin-bottom:0rem; } h2, .h2 { font-family:'Yanone Kaffeesatz'; color:#dd3333; font-size:1.7rem; line-height:1.9rem; text-indent:0px; font-weight:500; margin-top:0rem; margin-bottom:0rem; } h3, .h3 { font-family:'Yanone Kaffeesatz'; color:#dd3333; font-size:1.35rem; line-height:1.89rem; text-indent:0px; font-weight:normal; margin-top:0rem; margin-bottom:0rem; } h4, .h4 { font-family:'Yanone Kaffeesatz'; color:#dd3333; font-size:1.25rem; line-height:1.5rem; text-indent:0px; font-weight:500; margin-top:0rem; margin-bottom:0rem; } h5, .h5 { font-family:'Yanone Kaffeesatz'; color:#dd3333; font-size:1.3rem; line-height:2.5rem; text-indent:0px; font-weight:600; margin-top:0rem; margin-bottom:0rem; } h6, .h6 { font-family:'Yanone Kaffeesatz'; color:#dd3333; font-size:1.3rem; line-height:2rem; text-indent:0px; font-weight:700; margin-top:0rem; margin-bottom:0rem; } /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------all Ports*/ /* 1 Container Head (Top-Navigation) ====== */ .navbar-head { z-index:200; background-color:#f4b903; } .navbar-head.smaller { background:rgba(255,255,255,0.8); } .navbar-head ul { display: flex; flex-flow:row wrap; justify-content: space-around; list-style: none; justify-content: flex-end; margin:0 1rem 0 0; } .navbar-head ul li { margin:0 0 0 3px; } .navbar-head ul li a { font-size:1.2rem; color:#000000; outline:none; border-radius: 0px; line-height: 1rem; font-family:'Yanone Kaffeesatz'; font-weight: 500; } .navbar-head ul li a:hover, .navbar-head a.tt-head:hover { color:#f4b903; background:#000000 } .navbar-head ul li.current-menu-item a { color:#f4b903; background:#000000 } .navbar-head ul li.current-menu-item a:hover { color:#f4b903; } .tooltip > .arrow { display:none } .tooltip-inner { font-family:'Yanone Kaffeesatz'; font-weight:500; font-size:1.5rem; color:#ffffff; letter-spacing: .03rem; background:#cf0000; box-shadow: 0px 1px 2px -1px #2b2b2b; } .navbar-head .topsocial-icon a, .navbar-head .topsocial-icon a:hover { background:none; } .socialsidebar .icon-facebook { color:#dd3333; } .socialsidebar .icon-twitter { color:#1e73be; } .socialsidebar .icon-twitter, .socialsidebar .icon-facebook { color:#ffffff } .socialsidebar .icon-facebook, .socialsidebar .icon-twitter { font-size:1.7rem; } /* 2 Container Logo (Main-Navigation) ===== */ .navbar-main { background-color:rgba(10,10,10,0.49) } .navbar-main:hover { background-color:rgba(0,0,0,0.85) } .navbar-main .container { align-items: start;} .navbar-main .container {flex-direction: row;} .navbar-main span.navbar-brand a { font-weight:700; font-family:Yanone Kaffeesatz; font-size: 4.5rem; line-height:4.5rem; color:#f4b903; } .secondcontainer .navbar-nav { flex-direction: row; -ms-flex-direction: row;} .secondcontainer .first a.nav-link { text-transform: uppercase; } .secondcontainer .first li.menu-item { margin-right: 1.5rem; padding: 0; } .secondcontainer .container .navbar-nav.second { margin: 10px 0 0 25px; } .navbar-main .second li.menu-item { margin-right: .7rem; padding: 0rem; } .navbar-main .navbar-nav li.current_page_item > a.nav-link { cursor:default } .navbar-main a.nav-link, .navbar-main a.dropdown-item { font-family:Yanone Kaffeesatz; font-size:1.6rem; line-height:1.4rem; } /* normaler Link inaktiv erste Ebene ohne Dropdown */ .navbar-main li.menu-item a.nav-link { color:#ffffff; font-weight:400 } /* normaler Link aktiv erste Ebene ohne Dropdown */ .navbar-main li.menu-item.current-category-ancestor a.nav-link, .navbar-main li.menu-item.current-menu-item a.nav-link, .navbar-main li.menu-item.current-menu-parent a.nav-link{ color:#f4b903; } /* Link mit Dropdown inaktiv */ .navbar-main li.dropdown a.nav-link { color:#ffffff; } /* Link mit Dropdown aktiv */ .navbar-main li.dropdown.active a.nav-link { color:#f4b903; } .navbar-main .navbar-nav li.active > a.nav-link, .navbar-main .navbar-nav li.active > a.nav-link { background-color: #ffffff; color:#f4b903 } .navbar-main .navbar-nav a.nav-link:hover, .navbar-main .navbar-nav .show > a.nav-link { color:#f4b903 } .navbar-main li.menu-item a:before { background: #f4b903 ;} .navbar-main div.collapse ul.nav li.current-menu-item a:before, .navbar-main div.collapse ul.nav li.current-menu-parent a:before { background: #f4b903 } .navbar-main .wrap-search label { margin-bottom:0 } .navbar-main .firstcontainer { padding:1rem; margin-bottom:0px; border:0px dotted #fff; } .navbar-main .secondcontainer { padding:0rem 0rem 0rem 1rem; margin-bottom:1px; border:0px dotted #fff; } .navbar-main .secondcontainer ul.first { border:0px solid #fff; margin-bottom: 1rem } .navbar-main .secondcontainer ul.second { border:0px solid #fff; margin: 0 0 1.5rem 1.2rem } .wrap-search { border:0px solid red; padding-bottom:1.5rem } /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------all Ports*/ /* 1 Blog-Styles ========================== */ .hsb-blog .col-bg h1 { color: #ffffff; font-size:1.7rem; line-height:1.9rem; font-weight:500; } .hsb-blog .col-bg h1 span { text-transform:uppercase } .hsb-blog .research-category h1:before { content: "\f0f2"; } .hsb-blog .research-search span h1:before { content: "\f002"; } .hsb-blog .research-tag span h1:before { content: "\f02c"; } .hsb-blog .dropdown-menu li {margin-bottom:10px;} .hsb-blog .dropdown-menu li a { text-transform: none; color: #000000 !important; } .hsb-blog .smallview button.btn { background:none; padding:5px; } .hsb-blog .smallview.pd-1 { padding:0 1rem } .hsb-blog .smallview .btn-group .dropdown-menu { color:#251415 !important; background:#f6db89; } .hsb-blog .smallview button.btn .fa {letter-spacing: -4px; color:#ffffff; font-size:1.7rem; } .hsb-blog .smallview button.btn.dropdown-toggle:before { border: 0em solid transparent; content:none } h2.shuffleme:before { content: "\f0f2"; } .cat-preview span:before { content: "\f0f2"; } .research-category:hover, .research-search:hover, .research-tag:hover { background: rgba(10,10,10,0.91);} .research-category a, .col-bg.resarch-category h2 a { color:#ffffff !important; } .research-category a:hover, .col-bg.resarch-category h2 a:hover { color:#f4b903 !important; } .research-category a, .research-search a, .research-tag a, .col-bg.resarch-category h2 a, .dropdown-menu span { text-transform: uppercase } .hsb-blog h1:before, h2.shuffleme:before, .cat-preview span:before, .widget-title:before, a.all-the-tags:before, a.all-the-info:before, .need-you:before, .exlusive:before, .socialdings:before, .dropdown-menu span:before, .card a[aria-expanded="true"] div.card-header:before, .card a[aria-expanded="false"] div.card-header:before, .card a[aria-expanded="true"] div.card-header:after, .card a[aria-expanded="false"] div.card-header:after { font-family: 'theme-this'; margin-left: .2rem; margin-right: .6rem; font-weight: normal; } .widget-title:before, a.all-the-tags:before { content: "\f02c" } .need-you:before, a.all-the-info:before, .exlusive:before { content: "\f05a" } .socialdings:before { content: "\f028" } .socialsidebar .icon-twitter-square:before, .socialsidebar .icon-facebook-square:before { font-size: 1.45rem} .cat-preview.single { background-color: #f4b903; } .cat-preview.single span { color:#251415; font-size:.98rem; } .cat-preview :is(.category span, .single-loop span, .searchtag span) { color:#251415; font-size:0.95rem; } .cat-preview a { font-weight:500; text-decoration: underline; text-decoration-color: transparent; } .cat-preview.category, .cat-preview.single-loop, .cat-preview.searchtag, .cat-preview.single { float: right; width:100%; border-radius:5px 5px 0 0px } .cat-preview.category span, .cat-preview.single-loop span, .cat-preview.single span, .cat-preview.searchtag span { display:flex; align-items: baseline; line-height: 1.8rem; float:right; padding: 0px 10px; border-radius:0px 5px 0 5px; margin: 0.3rem 0; } .cat-preview .fa-suitcase { margin-right:.4rem } .tsc { border-radius: 5px; width:100% } .tsc-plain, .full-cover { margin:0 0 11px 0; } .tsc-full { margin:0 0 0 0; } .tsc.tsc-full { background: linear-gradient(15deg, #f4b903 0, #f9e39f 50%, #f4b903 100%); } .tsc :is(.cat-preview a ) { font-family:'Yanone Kaffeesatz'; font-weight:700; font-size: 1.07rem; letter-spacing: .03rem !important; text-decoration: underline; text-decoration-color: transparent; } .tsc :is(.cat-preview a:hover ) {text-decoration:underline; } .tsc.tsc-full .cat-preview a { color:#251415 !important; } .tsc.tsc-plain .cat-preview a { color:#251415 !important; } .tsc.tsc-full .cat-preview a:hover { color:#c4231d !important; text-decoration-color: #c4231d; } .tsc.tsc-plain .cat-preview a:hover { color:#c4231d !important; text-decoration-color: #c4231d; } .tsc.tsc-full { background-color: #f6db89; } .tsc.tsc-full :is(.title h1, .content, .content h2, .tags h2, .shareme h2, .info h2, .getsound h2) { color:#000000; } .tsc.tsc-full .title h1 { font-size:1.7rem; line-height:1.9rem; text-indent:0px; font-weight:500; margin-top:0rem; margin-bottom:0rem;} .tsc.tsc-full :is(.title, .tags, .shareme, .info, .getsound) { color:#000000; } .tsc.tsc-full :is(.player, .content, .tags, .shareme, .info) { border-top:1px solid #f0c541; } .tsc.tsc-plain { background-color: #f4b903; } .tsc.tsc-plain:hover { background-color: #f6db89; } .tsc.tsc-plain :is(.title, .title > h2 > a, .tags, .tags h2, .shareme, .shareme h2, a.download span h2) { color:#000000; } .tsc.tsc-plain :is(.player, .tags, .shareme, .getsound) { border-top:1px dashed #f6db89; } .tsc.tsc-plain:hover :is(.player, .tags, .shareme) { border-top:1px solid #f4b903; } .tsc.tsc-plain .cat-preview { background-color: #f6db89; } .tsc.tsc-plain:hover .cat-preview { background-color: #f4b903; } span.tag-links a { border-radius: 0 2px 2px 0; font-size:13px; margin: 9px 4px 2px 10px; padding: 3px 7px 3px 7px; position: relative; line-height: 1.2727272727; display: inline-block; } span.tag-links a:hover { text-decoration:none; } span.tag-links a:before { border-top: 11px solid transparent; border-bottom: 11px solid transparent; content: ""; height: 0; position: absolute; top: 0; left: -8px; width: 0; } span.tag-links a:after { border-radius: 50%; content: ""; height: 4px; position: absolute; top: 8px; left: -2px; width: 4px; } .tsc.tsc-full span.tag-links a { background-color: #000000; color:#ffffff; } .tsc.tsc-plain span.tag-links a { background-color: #000000; color:#ffffff; } .tsc.tsc-full span.tag-links a:hover { background-color: #f4b903; color: #000000; } .tsc.tsc-plain span.tag-links a:hover { background-color: #f4b903; color: #000000; } .tsc.tsc-full span.tag-links a:before { border-right: 8px solid #000000; } .tsc.tsc-plain span.tag-links a:before { border-right: 8px solid #000000;} .tsc.tsc-full span.tag-links a:hover:before { border-right-color: #f4b903; } .tsc.tsc-plain span.tag-links a:hover:before { border-right-color: #f4b903; } .tsc.tsc-full span.tag-links a:after { background-color: #f6db89; } .tsc.tsc-plain span.tag-links a:after { background-color: #f4b903; } .tsc :is(.title, .content, .tags, .shareme) { cursor:default } .tsc.tsc-full .info .accordion .card div.card-header { padding: 0px !important; text-align:center } .tsc.tsc-full:hover { box-shadow:none; } .tsc :is(.title:hover, .content:hover) { cursor:default } .tsc :is(.title, .player, .content, .tags, .shareme, .info, .getsound) { width: 100%; } .tsc .player { align-items: center; } .tsc .getsound { min-height:80px } .tsc.tsc-full :is(.content, .tags, .shareme, .info) { padding-bottom:2.3rem; } .tsc .player { padding: 0 3px;} .tsc-plain .player { min-height:55px} .tsc-full .player { min-height:80px} .tsc-plain .flex-pad { padding: .5rem 1rem; } .tsc-full .flex-pad { padding: 1rem 1rem 1rem 1rem; } .flex-pad { display:flex; align-items:flex-start; } .flex-pad h2 { margin-top:2px } .flex-pad span.mainicon { flex-basis: 2.5rem; } .tsc :is(.title, .content, .tags) :nth-child(2) { flex-basis: 100%; } .tsc.tsc-full .content { width: 100%; } .tsc.tsc-full .info .accordion { margin-bottom:0; } .tsc.tsc-full .info .accordion a[aria-expanded="false"] div.card-header { background:none } .tsc.tsc-full .info .accordion > .card { box-shadow:none; margin-bottom:0px } .tsc.tsc-full .info .accordion .card .card-body { padding:0 0 20px 6px !important } .tsc.tsc-full .info .accordion .card .card-body span { font-family:'Yanone Kaffeesatz'; font-weight:400; font-size:1.2rem } .tsc.tsc-full :is( .hsb-blog .accordion a div.card-header h2, .hsb-blog .accordion a[aria-expanded="false"] div.card-header h2) { color: #000000 !important; } .tsc.tsc-full .accordion a div.card-header:hover { background-color: none; } .tsc.tsc-full :is(.accordion a div.card-header h2:hover) { color: #000000; } .tsc.tsc-full :is(.accordion a[aria-expanded="true"] div.card-header, .accordion .card a:hover[aria-expanded="true"] .card-header,.accordion .card-body) { background: none; } .tsc.tsc-full .accordion .card a div.card-header h2:before { display:none } .col-bg.full-cover { background:rgba(10,10,10,0.49); } .col-bg.full-cover:hover { background:rgba(10,10,10,0.91); } .fullview, .smallview { background: rgba(10,10,10,0.49); } .research-category.fullview .accordion > .card, .research-tag.fullview .accordion > .card, .research-search.fullview .accordion > .card { margin-bottom: 0px !important; } .player .mejs-controls .mejs-time-rail .mejs-time-current { background: #cf0000; } .player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: #000000; } .player .mejs-controls .mejs-time-rail .mejs-time-loaded { background:#000000} .player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .player .mejs-controls .mejs-time-rail .mejs-time-total { background: rgba(50,50,50,.8); background: -webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8))); background: -webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); background: -moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); background: -o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); background: -ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); background: linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8)); } /* Farbe Zeitachse full running */ .tsc .player .mejs-container { border-radius:0px; } .tsc :is(.player .mejs-container:hover, .info .accordion .card:hover) { box-shadow:none} .tsc .player .mejs-container .mejs-controls { box-shadow:none; } .tsc .player .mejs-container .mejs-controls:hover { box-shadow: none; } .mejs-time-buffering, .mejs-time-current, .mejs-time-float, .mejs-time-float-corner, .mejs-time-float-current, .mejs-time-hovered, .mejs-time-loaded, .mejs-time-marker, .mejs-time-total { border-radius: 2px; } .player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { border-radius:2px; } .player .mejs-controls .mejs-time-rail .mejs-time-loaded { border-radius: 2px; } .player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .player .mejs-controls .mejs-time-rail .mejs-time-total { border-radius:2px; } .player .mejs-time { padding: 14px 6px 0; } .player .mejs-time:hover, .player .mejs-time:hover { cursor:pointer } .player .mejs-container * { font-family:'Yanone Kaffeesatz'; } .mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body { background: none !important;} .tsc .player .mejs-time { font-size: 1.25rem; } .tsc.tsc-full .player .mejs-time { color: #000000; } .tsc.tsc-plain .player .mejs-time { color: #000000; } .tsc .player .mejs-button > button { margin:10px 0; background-image: url("https://hoerspielbox.de/wp-content/themes/hoerspielbox/media/mejscontrols-1.svg"); } .tsc span .fa:not(.cat-preview .fa, .tagsoption .fa) { font-size: 1.7rem; } div.share-icons { display:flex; margin-top:.5rem } div.share-icons .share-sound { margin:0rem .5rem 0 0; padding:0; } div.share-icons button.clipboard { border:0px dotted #fff; background:none; margin:0rem 0rem 0 0; padding:0; } div.share-icons .share-sound .fa { border-radius:.5rem; color: #000000 !important; font-size:2.2rem; padding:.4rem; border-radius:.5rem; transition: color .3s ease-in-out, background-color .3s ease-in-out; } div.share-icons .share-sound .fa:hover:not(.share-sound.eject .fa) { background:#fff } div.share-icons .share-sound.twitter .fa:hover { color:#1d9bf0 !important; } div.share-icons .share-sound.facebook .fa:hover { color:#1877f2 !important; } div.share-icons .share-sound.whapp .fa:hover { color:#1bd741 !important; } div.share-icons .share-sound.mailtothem .fa:hover { color:#cf0000 !important; } div.share-icons .share-sound.copylink .fa:hover { color:orange !important; } div.share-icons .share-sound.eject .fa { background:#cf0000; color:#fff !important } a.teaserlink-preview { text-decoration: none; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, #000000, #000000, #000000); background-size: 100% 0.1em, 0 0.1em; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; } a.teaserlink-preview:hover, a.teaserlink-preview:focus { background-size: 0 0.1em, 100% 0.1em; } .os-windows .looper:hover, .os-android .looper:hover { animation: perspect 2.5s infinite linear; animation-iteration-count: 1; cursor:grabbing } @keyframes perspect { 0% {transform:perspective(300px) rotateY(0deg)} 25% {transform:perspective(300px) rotateY(90deg)} 50% {transform:perspective(300px) rotateY(180deg)} 75% {transform:perspective(300px) rotateY(270deg)} 100% {transform:perspective(300px) rotateY(360deg)} } /* .looper:not(.os-ios) { animation: perspect 2.5s infinite linear; animation-iteration-count: 1; cursor:grabbing } */ /* 2 Pagination Übersichtsseiten ========== */ nav.pagination { background-color:rgba(10,10,10,0.49) !important; border-radius:5px 5px 5px 5px; box-shadow: none; margin-bottom: 20px; } nav.pagination:hover { background-color:rgba(10,10,10,0.91) !important; } nav.pagination .nav-links { padding:8px 0 ; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; -ms-flex-align: center; -ms-flex-pack: justify; align-items: flex-start; flex-direction: row; align-content: stretch; justify-content: center; } nav.pagination :is(.nav-links a, .nav-links a.page-numbers, .nav-links span.page-numbers) { font-family: Yanone Kaffeesatz; font-size: 1.8em; color: #ffffff; border-radius:4px; padding:7px 6px; margin:0px 6px; } nav.pagination .nav-links span.page-numbers.current { background:#f4b903; cursor:default; color: rgba(10,10,10,0.91); } nav.pagination .nav-links a.solo-article:hover, nav.pagination .nav-links a.page-numbers:hover { background:#ffffff; color: rgba(10,10,10,0.91) } nav.pagination .nav-links a.prev, nav.pagination .nav-links a.next { color: #ffffff; } nav.pagination .nav-links a.prev:hover, nav.pagination .nav-links a.next:hover { background:#ffffff; color: rgba(10,10,10,0.91) } /* 3 Tag-Cloud ============================ */ .columntaglist { column-count: 3; } .taglistwrap { display:block; border: 0px solid #000; margin-right: 10px; line-height: 1.8rem; } .sidebar_right .tagcloud { width:100% } .sidebar_right .tagcloud a, .sidebar_right .socialsidebar a { color:#ffffff; text-decoration: underline; text-decoration-color: transparent; } .sidebar_right .tagcloud a:hover, .columntaglist .taglistwrap a:hover, .sidebar_right .socialsidebar a:hover { text-decoration:underline; } .sidebar_right .tagcloud a { font-family:'Yanone Kaffeesatz'; font-weight:300; } /* 4 Kolumnen ============================= */ .colwrap-all-border { border:2px dashed #727272; border-radius:5px 5px 5px 5px; } .colwrap, .colwrap-all, .colwrap-all-border, .colwrap-all-bg, .col-bg { width:100%; float:left; } .container-right-sidebar .colwrap, .colwrap-all, .colwrap-all-border, .colwrap-all-bg { margin-bottom:7px; } .colwrap { margin-bottom:0px; margin-right:0%; padding-bottom: 0px; } .colwrap-all, .colwrap-all-border, .colwrap-all-bg { margin-right:1.4%; } .colwrap-all.col-ran { margin-top:2.5rem } .colwrap img { width:100% } .colwrap-2-norm { width:100% !important; } .colwrap-3-norm { width:100% !important; } .colwrap-4-norm { width:100% !important; } .colwrap-5-norm { width:100% !important; } .colwrap-6-norm { width:100% !important; } .colwrap-5-6-norm { width:100% !important; } .colwrap-4-5-norm { width:100% !important; } .colwrap-3-4-norm { width:100% !important; } .colwrap-2-3-norm { width:100% !important; } .colwrap-3-5-norm { width:100% !important; } .colwrap-2-5-norm { width:100% !important; } .colwrap-1, .colwrap-1-bg { width:100% !important; } .colwrap-2, .colwrap-2-bg { width:100% !important; } .colwrap-3, .colwrap-3-bg { width:100% !important; } .colwrap-4, .colwrap-4-bg { width:100% !important; } .colwrap-5, .colwrap-5-bg { width:100% !important; } .colwrap-6, .colwrap-6-bg { width:100% !important; } .colwrap-5-6, .colwrap-5-6-bg { width:100% !important; } .colwrap-4-5, .colwrap-4-5-bg { width:100% !important; } .colwrap-3-4, .colwrap-3-4-bg { width:100% !important; } .colwrap-2-3, .colwrap-2-3-bg { width:100% !important; } .colwrap-3-5, .colwrap-3-5-bg { width:100% !important; } .colwrap-2-5, .colwrap-2-5-bg { width:100% !important; } .last-col { float:right; margin-right: 0 !important; clear: right; } .last-col::after { clear:both } .colwrap-all > img, .colwrap-all-border > img, .colwrap-all-bg > .col-bg img { max-width:100%; max-width:100%; margin:4px 0 0px 0; display:block} .col-bg a:hover, .jumbotron a:hover { text-decoration:underline } .jumbotron { box-shadow:none; border-radius: 0;} .col-bg h1, .col-bg h2, .col-bg h3, .col-bg h4, .col-bg h5, .col-bg h6, .jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron h5, .jumbotron h6 { color:#ffffff; } .col-bg a, .jumbotron a { color:#ffffff; } .col-bg a:hover, .jumbotron a:hover { color:#ffffff; } .col-bg, .jumbotron { background:rgba(10,10,10,0.49); color:#ffffff; border-radius:5px 5px 5px 5px; } .col-bg:hover { background:rgba(10,10,10,0.72); } /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ blockquote { position: relative; margin: 0px auto; border-left: 3px solid #000000; color:#000000; font-family: Yanone Kaffeesatz; font-size:1.6rem; line-height:2.5rem; padding: 0 2%; margin-left: 3vw; } .col-bg.quote {background-color:#f4b903;} .col-bg.quote:hover {background-color:#eeee22;} blockquote span { font-style:italic; display:block; text-align:right; font-size:calc(1.4rem - .1rem); margin-top:.7rem; margin-right:2rem } .quote { background-color:rgba(10,10,10,0.49); color:#ffffff; } .quote:hover {background:rgba(10,10,10,0.72); } /* 7 Tabs ================================= */ .nav-tabs { display:block; margin: 0; padding-left:0 } .nav-tabs .nav-item { margin-bottom: 2px; } .nav-tabs > li { padding-right:0px; } .nav-tabs > li > a { padding:0px 16px 0px 16px; } .nav-tabs > li > a.active:hover { cursor:default; } .nav-tabs .nav-link { background:#ffffff; } .nav-tabs .nav-link h3 { font-family:'Yanone Kaffeesatz'; font-size: 1.3rem; line-height: 2.9rem; color:#000000; margin-bottom:0} .nav-tabs .nav-link:hover h3 { color:#ffffff; } .nav-tabs .nav-link:hover { background:#f4b903; } .nav-tabs .nav-link.active h3, .nav-tabs .nav-link.active:hover h3, .nav-tabs .nav-link.active:focus h3 { color:#000000; } .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus { background:#f4b903; } .nav-tabs > li > a, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-radius:0; } .tab-content { margin-bottom:20px; } .tab-content div.active { background:#f4b903; border-radius:0; color:#000000; } .tab-content h1, tab-content h2, tab-content h3, tab-content h4, tab-content h5, tab-content h6 { color:#000000 } .tab-content .fade { } .tab-content img { max-width:100% } /* 8 Toggle und Akkordeon ================= */ .accordion { margin-bottom:20px } .accordion > .card { margin-bottom: 6px; } .accordion .card a[aria-expanded="true"] div.card-header h3:before, .accordion .card a[aria-expanded="false"] div.card-header h3:before { font-family:'theme-this'; margin-right: 0.25rem; font-weight:normal; } .accordion .card a[aria-expanded="true"] div.card-header h3:before { content: "\e903"; } .accordion .card a[aria-expanded="false"] div.card-header h3:before { content: "\e902"; } .accordion .card { border-radius: 4px; box-shadow:none } .accordion .card-header h2, .accordion .card-header h3 { color: #000000; font-family:Yanone Kaffeesatz; font-size:1.6rem; line-height:2.2rem; margin-top:0 } .accordion a[aria-expanded="false"] div.card-header { background:#f4b903; } .accordion .card a:hover[aria-expanded="false"] .card-header h3 { color: #000000; } .accordion .card a:hover[aria-expanded="false"] .card-header { background-color: #d3931d; } .accordion a[aria-expanded="true"] div.card-header { background:#f4b903; } .hsb-nonblog .accordion a[aria-expanded="true"] div.card-header h2 { color:#000000 !important; } .accordion .card-body { background:#f4b903; } .accordion .card-body, .accordion .card-body h1, .accordion .card-body h2, .accordion .card-body h3, .accordion .card-body h4, .accordion .card-body h5, .accordion .card-body h6 { color:#000000; } .accordion .card a:hover[aria-expanded="true"] .card-header { background-color: #f4b903; } .accordion.searchorder { margin-bottom: 0px; } .accordion.searchorder .card-header, .dropdown-menu span { padding: 0.1rem .5rem; margin-bottom: 0; border:0; font-family:'Yanone Kaffeesatz'; font-weight:700; letter-spacing: .06rem !important; } .accordion.searchorder.cat-order .card a[aria-expanded="true"] div.card-header:before, .research-category .dropdown-menu span:before { content: "\f0f2" !important; } .accordion.searchorder.cat-order .card a[aria-expanded="false"] div.card-header:before { content: "\f0f2" !important; } .accordion.searchorder.tag-order .card a[aria-expanded="true"] div.card-header:before, .research-tag .dropdown-menu span:before { content: "\f02c" !important; } .accordion.searchorder.tag-order .card a[aria-expanded="false"] div.card-header:before { content: "\f02c" !important; } .accordion.searchorder.search-order .card a[aria-expanded="true"] div.card-header:before, .research-search .dropdown-menu span:before { content: "\f002" !important; } .accordion.searchorder.search-order .card a[aria-expanded="false"] div.card-header:before { content: "\f002" !important; } .accordion.searchorder .card a[aria-expanded="true"] div.card-header:after { content: "\e903" !important; } .accordion.searchorder .card a[aria-expanded="false"] div.card-header:after { content: "\e902" !important; } .accordion.searchorder a[aria-expanded="false"] div.card-header { background:#f4b903; color:#000000 } .accordion.searchorder a[aria-expanded="true"] div.card-header { background:#f6db89; color:#000000 } .accordion.searchorder .card a:hover[aria-expanded="false"] .card-header { background-color: #f6db89; color:#000000 } .accordion.searchorder .card a:hover[aria-expanded="true"] .card-header { background-color: #f6db89; color:#000000 } .accordion.searchorder .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 0.1rem; background:#f6db89; } .accordion.searchorder .card-body li, .accordion.searchorder .card-body li a { font-family: 'Ibm Plex'; color: #000000 !important; text-transform:none !important; font-weight: normal; text-decoration: underline; text-decoration-color: transparent; } .accordion.searchorder .card-body li:hover, .accordion.searchorder .card-body li a:hover { text-decoration:underline } /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ #textslider_content { text-align: center; border:1px solid blue; padding-bottom:10px } .textslider_pics { height:auto; overflow: hidden; z-index:1; padding:0 } .textslider_pics img { width:100%; } #textslider_text { width:100%; font-style:normal; text-align: left; } #textslider_container .textslidernav { margin-left:5px; position:relative; left:0px; top:240px; z-index:1; } .textslidernav { /*display:inline-block;*/ display: flex; justify-content: center; /*margin: 10px auto 0px auto;*/ margin:0 auto 0 auto; padding: 0px; width: auto; } .textslidernav a { font-size:0em; margin: 2px 7px 0px 0px; width:-webkit-fill-available; width:-webkit-fill-available; width: -moz-available; width: fill-available; height: 10px; border-radius: 12px; float:left; } .textslidernav a.activeSlide { cursor:default; } .textslidernav a:focus { outline: none; } .textslidernav a:hover { outline: none; } .textslider_text h2 { text-align:center; } .textslidernav.off { display:none } /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ .automodaloverlay.modal { padding-left:0px } .automodaloverlay .modal-dialog { margin: 0 auto; max-width:86vw; margin-top: 50px; } .automodaloverlay .modal-header button.icon-times-circle:before { color:#000; font-size:1.8rem; } .automodaloverlay .modal-body :is(h1,h2,h3,h4,h5,h6){ color:#000; } .automodaloverlay .modal-body { color:#000; } .automodaloverlay .modal-content { background:#f4b903 } .automodaloverlay .modal-dialog .modal-body img { width:100%; } /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ article ul { padding-inline-start: 24px; margin:.4rem 0 .3rem 0;} article ul:after { clear:both;} article ul.circle {list-style-type: circle;} article ul.square {list-style-type: square;} article ul.decimal {list-style-type: decimal;} article ul.normal {list-style-type: inherit;} article ul.check, article ul.pfeil { list-style: none; } article ul.check li:before, article ul.pfeil li:before { content:'\e90b'; font-family:'theme-this'; display:inline-block; margin-left:-1.3rem; width: 1.3rem; vertical-align: bottom; } article ul.check li:before { content:'\f00c'; font-size:.8rem; } /* 18 Button ============================== */ button, [type="submit"] { margin-bottom:7px;} a.btn, button.btn, button, [type="submit"] { background-color: #f4b903; color: #000000; border-radius: 4px; text-align: center; width: 100%; float: right; text-decoration: none; padding: 8px 20px 8px 20px; font-family: Yanone Kaffeesatz; font-size: 1.40em; border: none; } a.btn:hover, a.btn:focus, a.btn:active, button.btn:hover, button, [type="submit"]:hover { background:#f6db89; color:#000000; } a.download { border-radius:0 0 0px 0px; text-align: center; width: 100%; outline: none; position: relative; } .download:before { font-family: 'theme-this'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 3.9rem; line-height: 5.9rem; position: relative; -webkit-font-smoothing: antialiased; } a.download { background-color: #f4b903 !important; padding:4px 0; } a.download:hover { background-color: #cf0000 !important; color:#fff } a.download-5:before, a.download-5:active:before { color: #fff; } .download-5 { overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .download-5 span { display: inline-block; left:0; right:0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .download-5:before { position: absolute; left:0; right:0; height: 100%; width: 100%; } .download-5a:hover span { -webkit-transform: translateY(300%); -moz-transform: translateY(300%); -ms-transform: translateY(300%); transform: translateY(300%); } .download-5a:before { top:-100%; } .download-5a:hover:before { top:0; } .icon:before {content: "\f0ed"; } /* Wolke */ a.download:focus, a.download:active { background:#cf0000 } /* 19 Divider ============================= */ p.divider { border-top: 1px solid #9b1c17; margin-top: 2rem; margin-bottom: 2rem; } /* 20 Initiale ============================ */ .initiale { font-size: 5rem; line-height: 5rem; float: left; margin: 0 1.5rem 0 1rem; } /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ .navbar-main span.navbar-brand a { background: linear-gradient(15deg, #462523 0, #f4b903 30%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #f4b903 65%, #462523 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 23 Padding, Margin und Flex ============ */ .pd-0 {padding: 0rem} .pd-small {padding: .4rem .4rem } .pd-1 { padding: 1rem 1rem 1rem 1rem; } .mi-0 { margin:0rem } .mi-1 { margin: 20px 50px 30px 40px } .flex { display:flex; flex-direction: row; } .flex-1 { justify-content: flex-start; } .flex-2 { justify-content: space-between; } .flex-3 { align-items: center; justify-content: center; } .flex-4 { align-items: center; } .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .justify-content-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } /* 24 animated ============================ */ /* .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } */ /* 25 Transitions ========================= */ /* transition: width */ input[type=search] { transition: width 0.9s ease-in-out; } /* transition: all */ .navbar-head a, .navbar-main a, span.tag-links a, span.tag-links a:before, .accordion.searchorder .card-body li, .accordion.searchorder .card-body li a, nav.pagination, nav.pagination .nav-links a, nav.pagination .nav-links a.page-numbers, nav.pagination .nav-links span.page-numbers, a.download, a.btn, button.btn, .download-5 span, .download-5:before, .cat-preview a { transition: all .5s ease-in-out; } .tab-content .fade { transition: all 0ms ease-in-out; } /* transition: background-color */ .navbar-main, input[type=search]:focus, button, [type="submit"], .scroll-top, .col-bg, .accordion .card a[aria-expanded="false"] .card-header, .accordion.searchorder a[aria-expanded="false"] div.card-header, input[type='radio']:hover + label::before { transition: background-color .5s ease-in-out; } .tsc.tsc-plain { transition: background-color 1.2s ease-in-out; } .navbar-head, .navbar-head.smaller { transition: background-color 500ms ease-in-out; } /* transition: color */ .scroll-top i, .accordion .card a[aria-expanded="false"] .card-header h3, .research-category a, .col-bg.resarch-category h2 a { transition: color .5s ease-in-out; } /* transition: text-decoration */ section aside .footer-100 .impress a, .sidebar_right .tagcloud a, .sidebar_right .socialsidebar a, .columntaglist .taglistwrap a { transition: text-decoration .5s ease-in-out; } /* opacity */ .opacitysearch article { transition: all .5s ease-in-out; background:#000; opacity: 0.5; } /* transition: box-shadow */ .tsc, .info .accordion .card, a.download-button { transition: box-shadow .5s ease-in-out; } /* transition: background-size */ a.teaserlink-preview { transition: background-size .5s ease-in-out; } .tsc :is(.cat-preview) { transition: all .5s ease-in-out; } /* IV. FOOTER + ENDPAGE + DOWNLOAD-PAGE */ /* -------------------------------------------------------------------------------------all Ports*/ section.footer { margin-bottom:180px; } .footer { padding:18px 0 10px 0; margin-bottom:30px } .footer .footer { padding: 18px 0 10px 0; } .footer .colwrap-all { padding:0 } .footer .menu li { list-style:none; float:left; background:none } .footer .menu li a { width: auto; height: auto; margin: 0px 4px 4px 0px; border-radius: 3px; border: 0px solid rgba(255,255,255,1); padding: 1px 4px 1px 4px; float: left; text-decoration: none; } .footer ul, .footer ol { margin-top: 0; margin-bottom: 10px; margin-left: 0px; border: 0px solid #000; float: left; padding: 0;} .footer .menu li a:hover, .footer .menu .current-menu-item a, .footer .menu .current-menu-item a:hover { text-decoration:none; box-shadow:none } .footer .menu .current-menu-item a, .footer .menu .current-menu-item a:hover { cursor:default } .footer .form_textfeld, .footer .form_textarea { width:180px; height:auto } .footer .form_textfeld_quiz { width:130px } .footer .column-bg .divider { border-color: #f2e3d2; margin: 10px 0 12px 0; } .footer { background-color:rgba(0,0,0,0.81);} .footer .menu li a { background:#8dae3f; color:#ffffff; } .footer .menu li a:hover { background:#f39d43; color:#000000; } .footer .menu .current-menu-item a { background:#ffffff; color:#8dae3f; } .footer .menu .current-menu-item a:hover { background:#ffffff; color:#8dae3f; } section aside .footer-100 .menu li a { background:#8dae3f; color:#ffffff; } section aside .footer-100 .menu li a:hover { color:#000000; } section aside .footer-100 .menu .current-menu-item a { background:#ffffff; color:#8dae3f; } section aside .footer-100 .menu .current-menu-item a:hover { color:#8dae3f; } section aside .footer-100 .impress { margin:0.8rem 30px 0 0; font-size:1rem; color:#ffffff;} section aside .footer-100 .impress a { color:#f4b903; text-decoration: underline; text-decoration-color: transparent; } section aside .footer-100 .impress a:hover { text-decoration:underline; text-decoration-color: #f4b903; } .paypal-form { border:0px solid #000; width:100%; float:left; margin:12px 0 18px; color:#ffffff } .paypal-radio { float:left; margin: 0 8px 0 0; padding-bottom:18px } input[type='radio'] { width:auto; float:left; margin-right: .75em; background:transparent; border:none; } input[type='radio']:checked, input[type='radio']:not(:checked) { background: transparent; position: relative; visibility: hidden; display:none; margin:0; padding:0; } input[type='radio'] + label { cursor: pointer; } input[type='radio']:checked + label::before, input[type='radio']:not(:checked) + label::before { content:' '; display:inline-block; width: 25px; height:25px; position: relative; top:6px; border: none; background: #ffffff; margin-right: 2px; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1); } input[type=radio]:checked + label::before, input[type=radio]:not(:checked) + label::before { border-radius: 30px; } input[type='radio']:hover + label::before { background:#f4b903; box-shadow: inset 0 0 0 2px #f4b903; } input[type='radio']:checked + label::before { background:#000; box-shadow: inset 0 0 0 5px #f4b903; } /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------all Ports*/ /* 1 Compilanz-Window ==================== */ #cc-window { font-family:Ibm Plex !important; font-size:1.07rem !important; color:#f4b903 !important; background:rgba(10,10,10,0.49) !important; border-color:rgba(10,10,10,0.49) !important; box-shadow: 0px 1px 2px -1px #000000; } #cc-window .cc-message { text-align: left !important; } #cc-window a.cc-btn.cc-accept-all, #cc-window a.cc-btn.cc-dismiss, #cc-window a.cc-btn.cc-save { text-decoration:none !important; font-family:Ibm Plex !important; font-size:1.07rem !important;} #cc-window a.cc-btn.cc-accept-all { background:#ffffff !important; border-color: #ffffff !important;} #cc-window a.cc-btn.cc-accept-all:hover { } #cc-window a.cc-btn.cc-dismiss, #cc-window a.cc-btn.cc-save { background:rgba(10,10,10,0.49) !important; border-color: #ffffff !important; color:#f4b903 !important;} #cc-window a.cc-btn.cc-dismiss:hover { background:#cf0000 !important; border-color: #cf0000 !important; color:#f4b903 !important;} #cc-window a.cc-btn.cc-save:hover { background:#ffffff !important; color:#f4b903 !important;} /* === Maximal 575.97px breit Small devices (landscape phones, 575.97px and up) */ @media (max-width: 575.97px) { /* I. BODY RESET */ /* -------------------------------------------------------------------------------------max576*/ /* 1 Elements und Container =============== */ .wrap-instance { margin:0 0vw 0 0vw; } .main-content { width:100%; } .full-cover.pd-1 { padding:1rem 0 1rem 0 } /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ /* 6 Scroll-to-top-Button ================= */ .scroll-top { font-size: 2.8rem; padding:.3rem 0; } .scroll-top i { line-height: 2.8rem; padding:.5rem .7rem; } /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ .tsc div.share-icons { margin-top:.5rem } .tsc div.share-icons .share-sound { background:none; margin:0rem .5rem 0 0; padding:0; } .tsc div.share-icons button.clipboard { background:none; margin:0rem 0rem 0 0; padding:0; } .tsc div.share-icons .share-sound .fa { border-radius:.1rem; background-color: #f4b903; font-size:1.6rem; padding:.4rem; border-radius:.3rem; transition: color 0s ease-in-out, background-color 0s ease-in-out; } .tsc div.share-icons .share-sound .fa:hover:not(.share-sound.eject .fa) { background:#fff } .tsc div.share-icons .share-sound.twitter .fa:hover { color:#1d9bf0 !important; } .tsc div.share-icons .share-sound.facebook .fa:hover { color:#1877f2 !important; } .tsc div.share-icons .share-sound.whapp .fa:hover { color:#1bd741 !important; } .tsc div.share-icons .share-sound.mailtothem .fa:hover { color:#cf0000 !important; } .tsc div.share-icons .share-sound.copylink .fa:hover { color:orange !important; } .tsc div.share-icons .share-sound.eject .fa { background:#cf0000; color:#fff !important } /* 10 Font Überschriften ================== */ nav.pagination .nav-links a, nav.pagination .nav-links a.page-numbers, nav.pagination .nav-links span.page-numbers { font-size:1.07rem; line-height: 1.4rem; letter-spacing:.03rem; } nav.pagination .nav-links a, nav.pagination .nav-links a.page-numbers, nav.pagination .nav-links span.page-numbers { border-radius:4px; padding:4px 6px; margin:0px 4px; } h2, h2.shuffleme, .research-category h1 a, .hsb-blog .col-bg span :is(.h1, h1, h1 a, h2, .h2, h2 a, .h2 a), .tsc :is(.h1, h1, h1 a, h2, .h2, h2 a, .h2 a) { font-weight:400; font-size:1.2rem } /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------max576*/ /* 1 Container Head (Top-Navigation) ====== */ .navbar-head { padding-right: 10px !important } /* 2 Container Logo (Main-Navigation) ===== */ .navbar-main span.navbar-brand a { font-size:2.5rem; line-height: 2.5rem; } .navbar-main .first li.menu-item { padding: 0; margin-right:0.51rem } .navbar-main ul.first li a.nav-link { font-size:1.26rem; line-height:1.5rem } .navbar-main ul.second li a.nav-link { font-size:1.2rem; line-height:1.5rem } .wrap-search { width:100%; display:block; } .wrap-search label { display:block } input.is-search-input { width:93%} /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------max576*/ /* 1 Blog-Styles ========================== */ span.tag-links a.play-tag { font-size: 0.7rem; text-transform:none} span.tagsoption { /*display:none*/ } .tsc .content span { line-height: 1.6rem; } /* 2 Pagination Übersichtsseiten ========== */ /* 3 Tag-Cloud ============================ */ /* 4 Kolumnen ============================= */ .col-bg, .jumbotron { border-radius:0px 0px 0px 0px; } .cat-preview.category, .cat-preview.single-loop, .cat-preview.searchtag, .cat-preview.single {border-radius: 0px 0px 0 0px;} .columntaglist { column-count: 1; } .taglistwrap { float:left; border: 0px solid #000; margin-right: 10px; line-height: 1.8rem; } /* = Pagination Uebersichtsseiten ===================================== */ .pagi-flex-box-wrap { border-radius:0px 0px 0px 0px; } .tsc { border-radius: 0px; } .container-right-sidebar .colwrap-all-bg .col-bg div .fa-hand-o-right {transform: rotate(90deg);} /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ blockquote {font-size: 1.4rem; line-height: 1.5rem; margin-left: 1.5vw;} blockquote span { margin-top: 0.2rem; } /* 7 Tabs ================================= */ /* 8 Toggle und Akkordeon ================= */ /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ /* 18 Button ============================== */ /* 19 Divider ============================= */ /* 20 Initiale ============================ */ /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ /* 23 Padding, Margin und Flex ============ */ /* 24 animated ============================ */ /* 25 Transitions ========================= */ /* transition: width */ /* transition: all */ /* transition: background-color */ /* transition: color */ /* transition: text-decoration */ /* transition: opacity */ /* transition: box-shadow */ /* transition: background-size */ /* IV. FOOTER + ENDPAGE + DOWNLOAD-PAGE */ /* -------------------------------------------------------------------------------------max576*/ .footer-100 { padding-left:10px; padding-right:10px } /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------max576*/ } /* === Mindestens 575.98px breit Small devices (landscape phones, 575.98px and up) */ @media (min-width: 575.98px) { /* I. BODY RESET */ /* -------------------------------------------------------------------------------------min576*/ /* 1 Elements und Container =============== */ .story-container, .story-60, .story-80, .footer-100 { padding-left:4.5vw; padding-right:4.5vw; } /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ /* 6 Scroll-to-top-Button ================= */ /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ /* 10 Font Überschriften ================== */ /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------min576*/ /* 1 Container Head (Top-Navigation) ====== */ /* 2 Container Logo (Main-Navigation) ===== */ /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------min576*/ /* 1 Blog-Styles ========================== */ /* 2 Pagination Übersichtsseiten ========== */ /* 3 Tag-Cloud ============================ */ /* 4 Kolumnen ============================= */ /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ /* 7 Tabs ================================= */ /* 8 Toggle und Akkordeon ================= */ /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ /* 18 Button ============================== */ /* 19 Divider ============================= */ /* 20 Initiale ============================ */ /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ /* 23 Padding, Margin und Flex ============ */ /* 24 animated ============================ */ /* 25 Transitions ========================= */ /* transition: width */ /* transition: all */ /* transition: background-color */ /* transition: color */ /* transition: text-decoration */ /* transition: opacity */ /* transition: box-shadow */ /* transition: background-size */ /* IV. SECTION ARTICLE */ /* -------------------------------------------------------------------------------------min576*/ /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------min576*/ /* 1 Compilanz-Window ==================== */ } /* === Maximal 767.97px breit // Medium devices (tablets, 767.98px and up) */ @media (max-width: 767.97px) { /* I. BODY RESET */ /* -------------------------------------------------------------------------------------max768*/ /* 1 Elements und Container =============== */ /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ /* 6 Scroll-to-top-Button ================= */ /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ /* 10 Font Überschriften ================== */ /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------max768*/ /* 1 Container Head (Top-Navigation) ====== */ /* 2 Container Logo (Main-Navigation) ===== */ .navbar-main li a.nav-link:hover { padding:0 !important; } /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------max768*/ /* 1 Blog-Styles ========================== */ /* 2 Pagination Übersichtsseiten ========== */ /* 3 Tag-Cloud ============================ */ /* 4 Kolumnen ============================= */ .iconview-hidden { display:none } /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ /* 7 Tabs ================================= */ /* 8 Toggle und Akkordeon ================= */ /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ /* 18 Button ============================== */ /* 19 Divider ============================= */ /* 20 Initiale ============================ */ /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ /* 23 Padding, Margin und Flex ============ */ /* 24 animated ============================ */ /* 25 Transitions ========================= */ /* transition: width */ /* transition: all */ /* transition: background-color */ /* transition: color */ /* transition: text-decoration */ /* transition: opacity */ /* transition: box-shadow */ /* transition: background-size */ /* IV. FOOTER + ENDPAGE + DOWNLOAD-PAGE */ /* -------------------------------------------------------------------------------------max768*/ /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------max768*/ /* 1 Compilanz-Window ==================== */ } /* === Mindestens 767.98px breit // Medium devices (tablets, 767.98px and up) */ @media (min-width: 767.98px) { /* I. BODY RESET */ /* -------------------------------------------------------------------------------------min768*/ /* 1 Elements und Container =============== */ .story-container, .story-60, .story-80 { padding-left:2.8vw; padding-right:2.8vw; } .pagi-flex-box {box-shadow: 0px 1px 2px -1px #2b2b2b;} /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ /* 6 Scroll-to-top-Button ================= */ /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ /* 10 Font Überschriften ================== */ /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------min768*/ /* 1 Container Head (Top-Navigation) ====== */ /* 2 Container Logo (Main-Navigation) ===== */ /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------min768*/ /* 1 Blog-Styles ========================== */ /* 2 Pagination Übersichtsseiten ========== */ /* 3 Tag-Cloud ============================ */ /* 4 Kolumnen ============================= */ .colwrap img { width:100% } .colwrap-2-norm { width:50% !important; } .colwrap-3-norm { width:33.33% !important; } .colwrap-4-norm { width:25% !important; } .colwrap-5-norm { width:20% !important; } .colwrap-6-norm { width:16.666% !important; } .colwrap-5-6-norm { width:83.33% !important; } .colwrap-4-5-norm { width:80% !important; } .colwrap-3-4-norm { width:75% !important; } .colwrap-2-3-norm { width:66.66% !important; } .colwrap-3-5-norm { width:60% !important; } .colwrap-2-5-norm { width:40% !important; } .colwrap-1, .colwrap-1-bg { width:100% !important; } .colwrap-2, .colwrap-2-bg { width:49.3% !important; } .colwrap-3, .colwrap-3-bg { width:32.4% !important; } .colwrap-4, .colwrap-4-bg { width:23.94% !important; } .colwrap-5, .colwrap-5-bg { width:18.87% !important; } .colwrap-6, .colwrap-6-bg { width:15.50% !important; } .colwrap-5-6, .colwrap-5-6-bg { width:83% !important; } .colwrap-4-5, .colwrap-4-5-bg { width:79.68% !important; } .colwrap-3-4, .colwrap-3-4-bg { width:74.62% !important; } .colwrap-2-3, .colwrap-2-3-bg { width:66.2% !important; } .colwrap-3-5, .colwrap-3-5-bg { width:59.41% !important; } .colwrap-2-5, .colwrap-2-5-bg { width:39.14% !important; } /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ /* 7 Tabs ================================= */ /* 8 Toggle und Akkordeon ================= */ .accordion .card { border-radius:4px; box-shadow:0px 1px 2px -1px #2b2b2b } /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ .automodaloverlay .modal-dialog { max-width:70vw } /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ /* 18 Button ============================== */ a.download { border-radius:0 0 4px 4px; } /* 19 Divider ============================= */ /* 20 Initiale ============================ */ .initiale { font-size: 5rem; line-height: 5rem; margin: 0 3rem 0 2rem; } /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ /* 23 Padding, Margin und Flex ============ */ /* 24 animated ============================ */ /* 25 Transitions ========================= */ /* transition: width */ /* transition: all */ /* transition: background-color */ /* transition: color */ /* transition: text-decoration */ /* transition: opacity */ /* transition: box-shadow */ /* transition: background-size */ /* IV. FOOTER + ENDPAGE + DOWNLOAD-PAGE */ /* -------------------------------------------------------------------------------------min768*/ /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------min768*/ /* 1 Compilanz-Window ==================== */ } /* === Maximal 991.97px breit // Medium devices (tablets, 991.97px and up); Umschaltpunkt der Collapesed-Navigation */ @media (max-width: 991.97px) { /* I. BODY RESET */ /* -------------------------------------------------------------------------------------max992*/ /* 1 Elements und Container =============== */ .main-content article, .container article { border: 0px solid #000; padding: 0 0px 0 0px; } .container-right-sidebar { margin-bottom: 15px; } .wrap-player hr { margin-top: .5rem; margin-bottom: .5rem;} article .container-right-sidebar { opacity: 1; } section { padding-top:1.3rem } /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ /* 6 Scroll-to-top-Button ================= */ /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ /* 10 Font Überschriften ================== */ /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------max992*/ /* 1 Container Head (Top-Navigation) ====== */ /* 2 Container Logo (Main-Navigation) ===== */ .offcanvas-header { display:block; margin-top: 2rem } .navbar-main { background-color:rgba(0,0,0,0.85) } .navbar-main:hover { background-color:rgba(0,0,0,0.85) } .navbar-main .container { } .navbar-main .navbar-collapse { position: fixed; top:0; bottom: 0; right: 100%; width: 100%; padding-right: 1rem; padding-left: 2rem; overflow-y: auto; visibility: hidden; z-index:1080; width:100vw; transition: visibility 1.3s ease, transform .99s ease; } .navbar-main .navbar-collapse ul.navbar-nav { padding-top:3vw } .navbar-main a.nav-link { float:left } .navbar-main .navbar-collapse { background-color: rgba(10,10,10,0.49); } .navbar-main .navbar-collapse.show { visibility: visible; transform: translateX(100%); } .navbar-main a.dropdown-item { padding: 0.25rem 1.5rem 0.25rem 1rem; margin-bottom: .5rem; margin-top: .5rem; } .navbar-main .navbar-nav .show > a.nav-link { padding: 0.25rem 1.5rem 0.25rem 0.5rem; } .navbar-main .second li.menu-item { margin-right: 0.5rem; } .navbar-main .secondcontainer { display:block } .navbar-main .secondcontainer ul.second { margin-left: 0rem; } /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------max992*/ /* 1 Blog-Styles ========================== */ h1.dl-full { display:none } .random-sounds { padding: .4rem 1rem } .tsc .player { min-height: 0px; } .tsc :is(.content, .tags, .shareme, .info) {padding-bottom: 1rem;} .fullview { display:none } /* 2 Pagination Übersichtsseiten ========== */ /* 3 Tag-Cloud ============================ */ /* 4 Kolumnen ============================= */ .col-bg.resarch-category, .fullview, .smallview, .jumbotron, nav.pagination { background: rgba(10,10,10,0.91) !important } /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ /* 7 Tabs ================================= */ /* 8 Toggle und Akkordeon ================= */ /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ .automodaloverlay.modal { padding-left:0px } /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ /* 18 Button ============================== */ /* 19 Divider ============================= */ /* 20 Initiale ============================ */ /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ /* 23 Padding, Margin und Flex ============ */ /* 24 animated ============================ */ /* 25 Transitions ========================= */ /* transition: width */ /* transition: all */ /* transition: background-color */ /* transition: color */ /* transition: text-decoration */ /* transition: opacity */ /* transition: box-shadow */ /* transition: background-size */ /* IV. FOOTER + ENDPAGE + DOWNLOAD-PAGE */ /* -------------------------------------------------------------------------------------max992*/ /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------max992*/ /* 1 Compilanz-Window ==================== */ } /* === Mindestens 991.98px breit // Medium devices (tablets, 991.98px and up) */ @media (min-width: 991.98px) { /* I. BODY RESET */ /* -------------------------------------------------------------------------------------min992*/ /* 1 Elements und Container =============== */ body { font-size:1.07rem; line-height:1.7rem; } .story-100 { width:100%; } .footer-100 { width:auto; } div.minheight .col-bg { min-height:199px } .story-container, .story-60, .story-80, .story-100, .footer-100 { padding-left:0vw; padding-right:0vw; } .container-right-sidebar { width: 71%; position: relative; float: left; } .sidebar_right { width: 29%; position: relative; margin-right: 0; float: right; padding-left: 1.5%; min-height: 375px; /*background: url(/wp-content/themes/hoerspielbox/media/sidebar-left.png) no-repeat scroll 0px 32px transparent;*/ } .sidebar_right .form_textfeld, .sidebar_right .form_textarea { width:100%; } section { padding-top:1.3rem } /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ /* 6 Scroll-to-top-Button ================= */ /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ /* 10 Font Überschriften ================== */ /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------min992*/ /* 1 Container Head (Top-Navigation) ====== */ .navbar-head { box-shadow: 0px 1px 2px -1px #000000; } /* 2 Container Logo (Main-Navigation) ===== */ /* !!! Main Navigation ab hier sichtbar */ .navbar-collapse {flex-grow: 1; } /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------min992*/ /* 1 Blog-Styles ========================== */ h1.dl-small { display:none } /* 2 Pagination Übersichtsseiten ========== */ /* 3 Tag-Cloud ============================ */ /* 4 Kolumnen ============================= */ .smallview { display:none } .sidebar_right.last {position: sticky; top: 34px;} .columntaglist { column-count: 3; column-fill: balance; column-gap: 40px; column-rule: 1px solid #3e3e3e; background: none; } .taglistwrap { display:block; border: 0px solid #000; margin-right: 10px; line-height: 1.8rem; } /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ blockquote { font-size:1.7rem; line-height:2.1rem; padding: 0 3% 0 2%; } blockquote span { font-size:calc(1.7rem - .3rem); } /* 7 Tabs ================================= */ .nav-tabs { display:flex } .nav-tabs .nav-item { margin-bottom: 0px; } .nav-tabs > li { padding-right:3px; } .nav-tabs > li > a, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-radius:2px 7px 0 0; } .tab-content div.active { background:#f4b903; border-radius:0 2px 2px 2px; color:#000000; box-shadow: 0px 1px 2px -1px #2b2b2b } /* 8 Toggle und Akkordeon ================= */ /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ .automodaloverlay .modal-dialog { max-width:70vw } /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ /* 18 Button ============================== */ /* 19 Divider ============================= */ /* 20 Initiale ============================ */ .initiale { font-size: 8rem; line-height: 7rem; margin: 0 3rem 0 3rem; } /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ /* 23 Padding, Margin und Flex ============ */ /* 24 animated ============================ */ /* 25 Transitions ========================= */ /* transition: width */ /* transition: all */ /* transition: background-color */ /* transition: color */ /* transition: text-decoration */ /* transition: opacity */ /* transition: box-shadow */ /* transition: background-size */ /* IV. FOOTER + ENDPAGE + DOWNLOAD-PAGE */ /* -------------------------------------------------------------------------------------min992*/ section.footer { margin-top:50px; box-shadow: 0px 1px 2px -1px #000000; } /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------min992*/ /* 1 Compilanz-Window ==================== */ } /* === Mindestens 1199.98px breit // Extra large devices (large desktops, 1199.98px and up) */ @media (min-width: 1199.98px) { /* I. BODY RESET */ /* -------------------------------------------------------------------------------------min1200*/ /* 1 Elements und Container =============== */ /* 2 Bildeigenschaften ==================== */ /* 3 Hintergrundbild-Eigenschaften ======== */ /* 4 Body Hintergrund-Abfrage ============= */ /* 5 Input-Fields ========================= */ /* 6 Scroll-to-top-Button ================= */ /* 7 Font Yanone Kaffeesatz =============== */ /* 8 Font ibm-plex-sans-condensed-500 ===== */ /* 9 Font Site-Icons ====================== */ /* 10 Font Überschriften ================== */ /* II. NAVIGATION */ /* -------------------------------------------------------------------------------------min1200*/ /* 1 Container Head (Top-Navigation) ====== */ /* 2 Container Logo (Main-Navigation) ===== */ .navbar { display: block; } /* III. MAIN-CONTENT */ /* -------------------------------------------------------------------------------------min1200*/ /* 1 Blog-Styles ========================== */ /* 2 Pagination Übersichtsseiten ========== */ /* 3 Tag-Cloud ============================ */ /* 4 Kolumnen ============================= */ /* 5 Jumbotron ============================ */ /* 6 Blockquote =========================== */ /* 7 Tabs ================================= */ /* 8 Toggle und Akkordeon ================= */ /* 9 Big-Slider Bootstrap ================= */ /* 10 Content-Slider ====================== */ /* 11 Image Slider Bootstrap ============== */ /* 12 Modal-Fotogalerie =================== */ /* 13 Modal Auto-Overlay ================== */ .automodaloverlay .modal-dialog { max-width:500px } /* 14 Google-Map ========================== */ /* 15 Zeilenumbruch ======================= */ /* 16 Absatz ============================== */ /* 17 Liste =============================== */ /* 18 Button ============================== */ /* 19 Divider ============================= */ /* 20 Initiale ============================ */ /* 21 optional Colors ===================== */ /* 22 Logo Verlauf ======================== */ /* 23 Padding, Margin und Flex ============ */ /* 24 animated ============================ */ /* 25 Transitions ========================= */ /* transition: width */ /* transition: all */ /* transition: background-color */ /* transition: color */ /* transition: text-decoration */ /* transition: opacity */ /* transition: box-shadow */ /* transition: background-size */ /* IV. FOOTER + ENDPAGE + DOWNLOAD-PAGE */ /* -------------------------------------------------------------------------------------min1200*/ /* V. ZUBEHÖR */ /* -------------------------------------------------------------------------------------min1200*/ /* 1 Compilanz-Window ==================== */ } ::selection { background: #f4b903; color: #000; } span.navbar-brand a::selection { background: none; color: #000 !important; } label .is-screen-reader-text, .is-form-style button.is-search-submit { display:none } /* https://hoerspielbox.sendeplatz.de/wp-content/plugins/add-search-to-menu/public/css/ivory-ajax-search.css */ /* AJAX Search Style */ .is-ajax-search .is-loader-image { display: none; position: absolute; top: 50%; transform: translateY(-50%); height: 25px; right: 5px; z-index: 9999; width: 25px; background-repeat: no-repeat; background-size: contain;} .is-ajax-search.processing .is-loader-image { display: block;} .is-ajax-search label { position: relative; } /* .is-ajax-search-details { border: 0; border-radius: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; padding: 0; outline: 0 !important; margin: 0; text-transform: none; text-shadow: none; box-shadow: none; text-decoration: none; text-align: left; letter-spacing: normal; font-size: 13px; line-height: 18px; vertical-align: baseline;} */ /* .is-ajax-search-result { border: 0; border-radius: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; padding: 0; outline: 0 !important; margin: 0; text-transform: none; text-shadow: none; box-shadow: none; text-decoration: none; text-align: left; letter-spacing: normal; font-size: 13px; line-height: 18px; vertical-align: baseline;} */ /* .is-ajax-search-details * { border: 0; border-radius: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; padding: 0; outline: 0 !important; margin: 0; text-transform: none; text-shadow: none; box-shadow: none; text-decoration: none; text-align: left; letter-spacing: normal; font-size: 13px; line-height: 18px; vertical-align: baseline;} */ .is-ajax-search-result * { border: 0; line-height: 1.2rem; border-radius: 4px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; padding: 0; outline: 0 !important; margin: 0; } .is-ajax-search-details a:hover, .is-ajax-search-result a:hover { text-decoration: underline;} div.is-ajax-search-details, div.is-ajax-search-result { display: none; height: auto; width: 500px; max-width: 100%; position: absolute; z-index: 999999; background: rgba(10,10,10,0.9); color: #000; padding: 5px; border-radius:4px; margin-left: -4px; } /* Background wie Kolumnen allgemein; Color wie .wrap-player-plain .title h2 a, .wrap-player-plain .tags */ .is-ajax-search-items { max-height: 400px; overflow-y: auto; overflow-x: hidden;} .is-search-sections { position: relative; clear: both; overflow: hidden;} .is-search-sections:after { content: ""; display: block; clear: both;} .is-search-sections .left-section { float: left;} .is-show-more-results { border-top: none; margin-top: 3px; } .is-show-more-results-text { cursor: pointer; padding: 8px 0; text-align: center; font-family:'Yanone Kaffeesatz'; font-size:1.34rem; } .is-load-more-image { display: block; margin: 0 auto; max-height: 25px;} .is-ajax-search-no-result { padding: 10px; background: #FFF; text-align: center;} .is-ajax-search-items .post-title { display: inline-block; font-weight: normal; font-size: 15px; text-transform: capitalize;} .is-search-sections .meta { margin: 0;} .is-search-sections .meta i { font-size: 11px; display:none} .is-search-sections .meta span.is-meta-category::before { content: "KATEGORIE → "; font-style:italic } .is-search-sections .meta > div { margin-bottom: 5px;} .is-search-sections .meta > div > span { margin-left: 10px;} .is-search-sections .meta > div > span:first-child { margin-left: 0;} .is-has-badge .is-search-sections .is-title { margin-right: 35px;} .is-has-badge .is-search-sections .meta > div > span:last-child { margin-right: 10px;} .is-search-sections .meta > span:not(:last-child):after { margin: 0 2px; content: '/'; display: inline-block;} .is-search-sections .thumbnail { margin-right: 10px; width: 70px;} .is-search-sections .thumbnail img { float: left; max-width: 70px; height: auto;} .is-ajax-term-label { display: block; font-style: italic; font-size: 10px; text-transform: uppercase; color: #7b7b7b; line-height: 12px; letter-spacing: 2px;} .is-ajax-result-description { font-size: 14px; margin-top: 10px;} .is-ajax-search-post-details, .is-ajax-search-post { clear: both; padding: 10px 5px 13px 15px; margin: 0 0 3px 0} .is-ajax-search-details .is-ajax-search-items > div { background: #ffc300; } /* .is-ajax-search-result .is-ajax-search-post:hover, .is-ajax-search-result .is-show-more-results:hover, .is-ajax-search-tags-details > div:hover, .is-ajax-search-categories-details > div:hover { background: #e2e2e2;} */ .is-ajax-search-post-details:last-child, .is-ajax-search-posts .is-ajax-search-post:last-child { border: 0;} .is-ajax-search-items .stock-status { color: #7ad03a;} .is-ajax-search-items .is-prices del { text-decoration: line-through;} .is-ajax-search-items .is-prices .amount { background: none; font-weight: 800;} .is-ajax-search-items .is-prices del .amount { font-weight: lighter; font-size: 90%; opacity: .6;} .is-ajax-search-items .is-prices ins { background: none;} .is-ajax-search-items .stock-status.is-out-of-stock { color: #a44;} .is-featured-icon { display: inline-block; width: 13px; fill: #FFC107; vertical-align: text-top;} .is-ajax-search-items .is-sale-badge { background: #77a464; color: #fff; height: 20px; padding-top: 2px; position: absolute; right: -24px; text-align: center; top: 4px; transform: rotate(45deg); width: 77px;} .is-ajax-search-post-details .is-ajax-term-label { display: inline-block;} .is-ajax-term-name { font-size: 16px; text-transform: capitalize;} .is-ajax-term-wrap { margin-bottom: 10px;} div.is-ajax-search-details { width: 400px;} .is-ajax-search-post-details { display: none;} .is-ajax-search-posts-details .is-search-sections .thumbnail { width: 150px;} .is-ajax-search-posts-details .is-search-sections .thumbnail img { max-width: 150px; float: none;} @media screen and ( max-width: 910px ) { div.is-ajax-search-result { max-width: 97%; } .is-ajax-search-details { display: none !important; } } @media screen and ( max-width: 510px ) { .is-ajax-search-result { left: 3px !important; } } /** * simplebar.css- v5.3.5 * Scrollbars, simpler. * https://grsmto.github.io/simplebar/ * * Made by Adrien Denat from a fork by Jonathan Nicol * Under MIT License */ [data-simplebar] { position: relative; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start;} .simplebar-wrapper { overflow: hidden; width: inherit; height: inherit; max-width: inherit; max-height: inherit;} .simplebar-mask { direction: inherit; position: absolute; overflow: hidden; padding: 0; margin: 0; left: 0; top: 0; bottom: 0; right: 0; width: auto !important; height: auto !important; z-index: 0;} .simplebar-offset { direction: inherit !important; box-sizing: inherit !important; resize: none !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 0; margin: 0; -webkit-overflow-scrolling: touch;} .simplebar-content-wrapper { direction: inherit; box-sizing: border-box !important; position: relative; display: block; height: 100%; width: auto; max-width: 100%; max-height: 100%; scrollbar-width: none; -ms-overflow-style: none;} .simplebar-content-wrapper::-webkit-scrollbar, .simplebar-hide-scrollbar::-webkit-scrollbar { width: 0; height: 0;} .simplebar-content:before, .simplebar-content:after { content: ' '; display: table;} .simplebar-placeholder { max-height: 100%; max-width: 100%; width: 100%; pointer-events: none;} .simplebar-height-auto-observer-wrapper { box-sizing: inherit !important; height: 100%; width: 100%; max-width: 1px; position: relative; float: left; max-height: 1px; overflow: hidden; z-index: -1; padding: 0; margin: 0; pointer-events: none; flex-grow: inherit; flex-shrink: 0; flex-basis: 0;} .simplebar-height-auto-observer { box-sizing: inherit; display: block; opacity: 0; position: absolute; top: 0; left: 0; height: 1000%; width: 1000%; min-height: 1px; min-width: 1px; overflow: hidden; pointer-events: none; z-index: -1;} .simplebar-track { z-index: 1; position: absolute; right: 0; bottom: 0; pointer-events: none; overflow: hidden;} [data-simplebar].simplebar-dragging .simplebar-content { pointer-events: none; -webkit-user-select: none; user-select: none;} [data-simplebar].simplebar-dragging .simplebar-track { pointer-events: all;} .simplebar-scrollbar { position: absolute; left: 0; right: 0; min-height: 10px; } .simplebar-scrollbar:before { position: absolute; content: ''; background: black; border-radius: 7px; left: 2px; right: 2px; opacity: 0; transition: opacity 0.2s linear; } .simplebar-scrollbar.simplebar-visible:before { opacity: 0.5; transition: opacity 0s linear; } .simplebar-track.simplebar-vertical { top: 0; width: 11px; } .simplebar-track.simplebar-vertical .simplebar-scrollbar:before { top: 2px; bottom: 2px; } .simplebar-track.simplebar-horizontal { left: 0; height: 11px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before { height: 100%; left: 2px; right: 2px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar { right: auto; left: 0; top: 2px; height: 7px; min-height: 0; min-width: 10px; width: auto; } [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical { right: auto; left: 0; } .hs-dummy-scrollbar-size { direction: rtl; position: fixed; opacity: 0; visibility: hidden; height: 500px; width: 500px; overflow-y: hidden; overflow-x: scroll; } .simplebar-hide-scrollbar { position: fixed; left: 0; visibility: hidden; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .cc-window{opacity:1;transition:opacity 1s ease} .cc-window.cc-invisible{opacity:0} .cc-animate.cc-revoke{transition:transform 1s ease} .cc-animate.cc-revoke.cc-top{transform:translateY(-2em)} .cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)} .cc-animate.cc-revoke.cc-active.cc-bottom, .cc-animate.cc-revoke.cc-active.cc-top, .cc-revoke:hover{transform:translateY(0)} .cc-grower{max-height:0;overflow:hidden;transition:max-height 1s} .cc-link, .cc-revoke:hover{text-decoration:underline}.cc-revoke, .cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999} .cc-window.cc-static{position:static} .cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column} .cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row} .cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700} .cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer} .cc-link{opacity:.8;display:inline-block;padding:.2em} .cc-link:hover{opacity:1}.cc-link:active, .cc-link:visited{color:initial} .cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap} .cc-banner .cc-btn:last-child{min-width:140px} .cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent} .cc-highlight .cc-btn:first-child:focus, .cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline} .cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75} .cc-close:focus,.cc-close:hover{opacity:1} .cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em} .cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em} .cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em} .cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em} .cc-floating .cc-message{display:block;margin-bottom:1em} .cc-window.cc-floating .cc-compliance{-ms-flex:1;flex:1} .cc-window.cc-banner{-ms-flex-align:center;align-items:center} .cc-banner.cc-top{left:0;right:0;top:0} .cc-banner.cc-bottom{left:0;right:0;bottom:0} .cc-banner .cc-message{-ms-flex:1;flex:1} .cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between} .cc-compliance>.cc-btn{-ms-flex:1;flex:1} .cc-btn+.cc-btn{margin-left:.5em} @media print{.cc-revoke,.cc-window{display:none}} @media screen and (max-width:900px){.cc-btn{white-space:normal}} @media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){ .cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0} .cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0} .cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column} .cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1} .cc-window.cc-floating{max-width:none} .cc-window .cc-message{margin-bottom:1em} .cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}} .cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px} .cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none} .cc-theme-classic .cc-btn{border-radius:5px} .cc-theme-classic .cc-btn:last-child{min-width:140px} .cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block} .cc-theme-edgeless.cc-window{padding:0} .cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em} .cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%} .cc-banner.cc-theme-edgeless .cc-message{margin-left:1em} .cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}