/* livesystem.css 2021 */
/* created: 03.06.2017 */
/* last edit: 27.02.23 */
:root {
--bs-primary: #f80015;
--primary-on-dark: #FFB6B3;
--bs-body-color: #45433c;
--teaser_line--newsletter: #40454a;
--teaser_line--nsr_widget: #666a6e;
--teaser_line--app: radial-gradient(circle, rgba(242, 245, 247, 1) 0%, rgba(180, 185, 188, 1) 100%, rgba(0, 212, 255, 1) 100%);
--bs-body-bg: #f0f6f1;
--bs-grey-200: #d8d9d3;
--bs-grey-400: #cccccc;
--bs-grey-500: #c3c4c0;
--bs-grey-700: #666666;
--bs-grey-800: #444444;
--lf-ruler-top: #787b7b;
--lf-ruler-bottom: #2c2d30;
--bs-body-font-size: 0.875rem;
}
html {
background-color: var(--bs-body-bg);
font-size: 100%;
}
body {
background-color: inherit;
font-family: "proxima-nova", sans-serif;
line-height: 1.313em;
color: var(--bs-body-color);
text-rendering: optimizelegibility;
/* https://helpx.adobe.com/de/typekit/using/open-type-syntax.html */
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: "liga", "clig";
-webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig";
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
font-variant-numeric: tabular-nums;
-moz-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
font-feature-settings: "tnum";
}
@media (max-width: 767px) {
.wrapall { /* prevent horizontal scrolling on mobile browsers */
overflow-x:hidden;
height: auto;
}
}
/* bootstrap mod */
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1370px;
}
}
@media (min-width: 1700px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1670px;
}
}
/* http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php */
a { text-decoration: none; }
.logo-container .svg {
width: 9rem;
margin-top: 0.25rem;
}
@media (min-width: 768px) {
.logo-container {
margin-top: -4.325rem;
}
.logo-container a {
display: inline-block;
float: left;
width: 18.75rem;
height: 7.2rem;
}
.logo-container .svg {
width: 300px;
margin-left: 2px; /* grafische einrückung */
}
}
.logo-container h1 {
display: none; /* Verbessern! Siehe Beitrag zu effizienten verbergen in der visuellen Ansicht */
}
.intern img {
position: relative;
top: -17px;
}
.svg { /* svg into : object, img or inline */
width: 10rem;
background: transparent;
}
@media (min-width: 768px) {
.svg {
width: 18.75rem;
height: 7.2rem;
}
}
.video {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
}
#navbar-collapse-x.collapsing, #navbar-collapse-x.collapse.in {
clear: both;
margin-left: -15px;
overflow-x: hidden;
}
/* Teaser Line */
.row.teaser_line {
margin-right: 0;
}
.teaser_line--newsletter {
background-color: var(--teaser_line--newsletter);
margin-top: 8px;
}
.teaser_line--nsr_widget {
background-color: var(--teaser_line--nsr_widget);
margin-top: 7px;
}
.teaser_line--app {
background-color: var(--teaser_line--app);
margin-top: 7px;
}
.teaser_line--nsr_widget--more {
background-color: var(--teaser_line--nsr_widget);
}
.lg--version {
display: none;
}
@media (min-width: 992px) {
.xs--version {
display: none;
}
}
.lg--version {
display: block;
}
.teaser_line--app {
background: var(--teaser_line--app);
background-color: transparent;
margin-top: 7px;
}
@media (min-width: 768px) {
.teaser_line--box {
margin-top: 12px;
}
.teaser_line--nsr_widget {
margin-top: 12px;
}
.teaser_line--app {
margin-top: 12px;
}
}
@media (min-width: 992px) {
.teaser_line--box {
margin-top: 0;
}
.teaser_line--nsr_widget {
margin-top: 0;
}
.teaser_line--app {
margin-top: 0;
}
}
.teaser_line--newsletter--headline,
.teaser_line--nsr_widget--headline,
.teaser_line--app--headline {
font-size: 1.25rem;
text-transform: uppercase;
font-weight: 500;
/* bold */
margin-top: 2.5rem;
}
.teaser_line--newsletter--headline,
.teaser_line--nsr_widget--headline {
color: var(--bs-white);
}
.teaser_line--newsletter--form {
margin-top: 0.25rem;
}
.teaser_line--newsletter--form .form-control {
height: 1.5rem;
}
.teaser_line--newsletter--form .form-control::placeholder {
font-size: 0.875rem;
color: var(--bs-grey-500);
}
.teaser_line--newsletter--form .form-control:focus {
box-shadow: 2px 5px 5px rgb(0, 0, 0);
}
.btn--send.teaser_line--newsletter--form--button:hover,
.nsr--widget .knopf .btn:hover,
.teaser_line--app a>.store-icon:hover {
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
}
.btn--send.teaser_line--newsletter--form--button,
.nsr--widget .knopf .btn {
border-radius: 6px;
border: none;
height: 24px;
font-size: 0.75rem;
padding: 0 1.25rem 0 1.25rem;
}
.nsr--widget .knopf .btn {
padding: 0 0.75rem 0 0.75rem;
}
@media screen and (min-width: 576px) and (max-width: 768px) {
.teaser_line--newsletter--form {
margin: 0 auto;
max-width: 417px;
}
}
@media screen and (min-width: 768px) {
.teaser_line--newsletter--headline,
.teaser_line--nsr_widget--headline,
.teaser_line--app--headline {
font-size: 1.125rem;
margin-top: 2rem;
}
.teaser_line--newsletter--form {
margin: 0 auto;
max-width: 417px;
}
.teaser_line--newsletter--form .form-control {
height: 2rem;
}
.btn--send.teaser_line--newsletter--form--button,
.nsr--widget .knopf .btn {
height: 30px;
font-size: 0.875rem;
padding: 0 1.75rem 0 1.75rem;
}
}
@media screen and (min-width: 992px) and (max-width: 1120px) {
.btn--send.teaser_line--newsletter--form--button,
.nsr--widget .knopf .btn {
font-size: 0.725rem;
padding: 0 1rem 0 1rem;
}
}
@media screen and (min-width: 992px) and (max-width: 1399px) {
.teaser_line--newsletter--headline,
.teaser_line--nsr_widget--headline,
.teaser_line--app--headline {
font-size: 1.125rem;
margin-top: 2.5rem;
}
.teaser_line--newsletter--form {
max-width: 335px;
}
.teaser_line--newsletter--form .form-control {
height: 2rem;
}
}
@media screen and (min-width: 1121px) and (max-width: 1399px) {
.btn--send.teaser_line--newsletter--form--button,
.nsr--widget .knopf .btn {
font-size: 0.75rem;
padding: 0 1.75rem 0 1.75rem;
}
}
.teaser_line--newsletter--form .input-group:not(.has-validation)> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.teaser_line--newsletter--form .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3) .teaser_line--newsletter--form--button,
.teaser_line--newsletter--form .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) .teaser_line--newsletter--form--button,
.teaser_line--newsletter .teaser_line--newsletter--form .form-group.has-feedback .btn--search.btn--send.teaser_line--newsletter--form--button {
border-radius: 6px;
}
.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback).teaser_line--newsletter--form--button {
margin-left: 8px;
}
.teaser_line--newsletter .form-control.teaser_line--newsletter--form--input {
font-size: 0.75rem;
}
p.teaser_line--nsr_widget--headline {
margin-bottom: 0.5rem;
}
.teaser_line--newsletter small a.datenschutz,
.teaser_line--newsletter small a.newsletter_details,
.nsr--widget--wrapper .widget--mehr--text {
color: var(--bs-white);
font-size: 0.625rem;
}
.nsr--widget--wrapper .widget--mehr--text {
padding: 0 0.5em;
}
.teaser_line--newsletter small a.datenschutz,
.teaser_line--newsletter small a.newsletter_details {
margin-top: 1rem;
}
.teaser_line--newsletter .privacy_notice {
color: var(--bs-white);
margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
.teaser_line--newsletter small a.datenschutz,
.teaser_line--newsletter small a.newsletter_details,
.nsr--widget--wrapper .widget--mehr--text {
font-size: 0.75rem;
}
.teaser_line--newsletter small a.datenschutz,
.teaser_line--newsletter small a.newsletter_details,
.nsr--widget--wrapper .widget--mehr--text {
margin-top: 1.75rem;
}
p.teaser_line--nsr_widget--headline {
margin-bottom: 1rem;
}
.teaser_line--newsletter .privacy_notice {
margin-bottom: 3rem;
}
}
.teaser_line--newsletter .privacy_notice .collapse,
.teaser_line--newsletter .privacy_notice .collapsing {
height: 0 !important;
}
.teaser_line--newsletter #datenschutz-newsletter {
color: var(--bs-grey-400);
font-size: 0.625rem;
}
.teaser_line--newsletter #datenschutz-newsletter a {
color: var(--bs-white);
}
/* Teaser Line: NSR Widget */
.nsr--widget--wrapper.collapsed .widget--mehr--text:after {
content: " aufklappen";
}
.nsr--widget--wrapper .widget--mehr--text:after {
content: " zuklappen";
}
.nsr--widget--wrapper:hover .widget--mehr--text,
.nsr--widget--wrapper:active .widget--mehr--text,
.nsr--widget--wrapper:focus .widget--mehr--text {
color: var(--bs-grey-400);
}
/* Teaser Line */
.newsletter_promo_page {
margin-top: 58px;
}
.newsletter_promo_page .newsletter__box {
position: relative;
}
.newsletter_promo_page .newsletter__box::after {
content: "";
display: block;
width: 200px;
height: 400px;
position: absolute;
top: -35%;
left: calc(50% - 350px);
z-index: -50;
}
.container.newsletter_promo_page .newsletter__box img {
display: block;
background-color: transparent;
margin: auto;
position: relative;
top: -145px;
width: 160px;
z-index: 100;
}
.newsletter__box--text {
margin-top: -7.5rem;
}
@media screen and (min-width: 768px) {
.container.newsletter_promo_page .newsletter__box img {
width: 200px;
}
.newsletter__box--text {
margin-top: -6rem;
}
}
.newsletter_promo_page input#email.form-control {
height: 44px;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
.newsletter_archive .internal__summary__title {
border-bottom: 1px solid var(--bs-grey-700);
}
.article--content ol.internal__toc--newsletter {
list-style: none;
padding-left: 0;
margin-top: 1em;
counter-reset: my-awesome-counter;
}
ol.internal__toc--newsletter>li {
margin-bottom: 0.8em;
}
/* NSR-Widget */
.nsr--widget--wrapper {
border-top: #4c5156 1px solid;
padding: 0.25rem 0;
}
.nsr--widget--wrapper[type="button"] {
-webkit-appearance: none;
}
.nsr--widget--wrapper:hover,
.nsr--widget--wrapper:active,
.nsr--widget--wrapper:focus {
background-color: var(--bs-grey-700);
}
.col-centered{
float: none;
margin: 0 auto;
}
.nsr--widget .form-control {
font-size: 0.875rem;
}
/* https://css-tricks.com/styling-a-select-like-its-2019/
https://www.filamentgroup.com/lab/select-css.html */
.nsr--select-css {
display: block;
/*
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
*/
color: var(--bs-grey-700);
line-height: 1;
padding: 0.3em 1.5em .5em .8em;
width: 100%;
max-width: 140px;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
border-radius: .5em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: var(--bs-white);
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2345433c%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, var(--bs-white) 0%, #e5e5e5 100%);
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
text-align-last: center;
}
.nsr--select-css.nsr--select-css--notenskala {
margin: 4px 0 4px 0;
}
@media screen and (min-width: 768px) {
.nsr--select-css {
line-height: 1.3;
}
.nsr--select-css.nsr--select-css--notenskala {
margin-top: 10px;
}
}
.nsr--select-css::-ms-expand {
display: none;
}
.nsr--select-css:hover {
border-color: #888;
}
.nsr--select-css:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
.nsr--widget--wrapper h2,
.nsr--widget--wrapper h3 {
font-size: 0.8125rem;
letter-spacing: 0.025em;
font-weight: 400;
text-transform: uppercase;
color: var(--bs-body-color);
margin-top: 0.75em;
margin-bottom: 0.75em;
text-align: center;
}
.nsr--widget--wrapper .btn-default {
height: 2rem;
font-size: 0.875rem;
padding-left: 12px;
padding-right: 12px;
padding-top: 5px;
}
.nsr--widget--headline--emoji {
font-size: 1.5rem;
padding-right: 0.2rem;
}
@media (min-width: 576px) {
.nsr--widget--wrapper--top {
padding-top: 0.5rem;
}
}
@media (min-width: 768px) {
.nsr--widget--wrapper--top {
padding-top: 0.75rem;
}
.nsr--widget--wrapper {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
.nsr--widget--wrapper .auswahlbox {
margin: 0 -25px 0 25px; /* selectbox auf logo-achse gesetzt */
}
.nsr--widget--wrapper h2,
.nsr--widget--wrapper h3 {
font-size: 0.9375rem;
text-align: left;
line-height: 1.25rem;
margin: 0;
padding-top: 0.75em;
padding-bottom: 0.75em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='163px' height='304px'%3E%3Ctitle%3Echevron%3C/title%3E%3Cg id='Ebene_2' data-name='Ebene 2'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cline x1='3.49' y1='3.58' x2='159.49' y2='155.58' style='stroke:%2345433c;stroke-miterlimit:10;stroke-width:4px'/%3E%3Cline x1='4.49' y1='300.58' x2='156.49' y2='152.58' style='stroke:%2345433c;stroke-miterlimit:10;stroke-width:4px'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 36px 70px;
background-position: 100% center;
}
.col-sm-4.nsr--widget--headline--chevron {
padding-right: 0;
}
.nsr--widget--wrapper .btn-default {
height: 44px;
font-size: 1rem;
padding: 7px 15px 5px 15px;
}
}
.nsr--widget--headline--wrapper {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.125rem;
}
.nsr--widget--subheadline {
color: var(--primary-on-dark);
font-size: 1rem;
font-weight: 600;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
.nsr--widget--wrapper .form-control {
height: 2rem;
font-size: 1rem;
}
.teaser_line--nsr_widget .nsr--btn--gewaehr,
.nsr--widget--wrapper p {
color: var(--bs-white);
margin-bottom: 0;
font-size: 0.75rem;
line-height: 1rem;
}
.nsr--widget--mehr {
text-align: center;
touch-action: manipulation;
cursor: pointer;
user-select: none;
}
.nsr--widget--wrapper--link a {
padding-left: 0.5rem;
}
.nsr--widget--wrapper--link a {
text-decoration: underline;
}
.nsr--widget--wrapper--link a:link,
.nsr--widget--wrapper--link a:visited {
color: var(--bs-white);
}
h3.nsr--widget--subheadline {
text-transform: uppercase;
}
.nsr--widget--optionen a:hover,
.nsr--widget--optionen a:active,
.nsr--widget--optionen a:focus {
color: var(--bs-primary);
}
.nsr--widget--optionen ul {
padding-left: 0;
margin-bottom: 0.25em;
font-size: 1rem;
list-style-type: none;
}
.nsr--widget--optionen ul li {
padding-left: 0;
}
.nsr--widget--optionen ul li>a {
border-bottom: 1px solid var(--bs-white);
color: var(--bs-white);
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
position: relative;
display: block;
}
.nsr--widget--optionen ul li:last-of-type > a {
border-bottom: 0;
}
.nsr--widget--optionen ul li>a:hover,
.nsr--widget--optionen ul li>a:focus {
color: var(--primary-on-dark);
}
.nsr--widget--optionen li>a:hover>em,
.nsr--widget--optionen li>a:focus>em {
text-decoration: none;
}
.teaser_line--app img.app_icon {
background-color: transparent;
width: 72px;
height: auto;
float: right;
}
.teaser_line--app--claim {
font-size: 1rem;
font-weight: 700;
}
.teaser_line--app figure.stores {
padding-bottom: 5px;
}
.teaser_line--app img.store-icon {
background-color: transparent;
width: 85px;
height: auto;
}
@media screen and (min-width: 768px) {
.teaser_line--app img.app_icon {
width: 104px;
}
.teaser_line--app--claim {
font-size: 1.75em;
line-height: 115%;
}
.teaser_line--app img.store-icon {
width: 110px;
}
}
@media screen and (min-width: 992px) and (max-width: 1399px) {
.teaser_line--app img.app_icon {
width: 84px;
}
.teaser_line--app--claim {
font-size: 1.25rem;
line-height: 115%;
}
.teaser_line--app img.store-icon {
width: 85px;
}
}
hr {
margin: 0;
border-top: 2px solid var(--bs-white);
opacity: 1;
}
.nsr hr {
margin: 2rem 0;
border-color: var(--bs-primary) currentcolor currentcolor;
border-width: 1px;
}
/* NSR-Widget Ende - auch ownicon, weiter unten */
#suchetopthemen .form-group, #suchetopthemen .input-group {
width: 100%;
float: right;
}
@media (min-width: 576px) {
.nsr--widget--mehr {
margin-bottom: 0.33rem;
}
#suchetopthemen .form-group, #suchetopthemen .input-group {
max-width: 360px;
display: flex;
align-items: end;
}
}
@media (min-width: 768px) {
#suchetopthemen .form-group, #suchetopthemen .input-group {
max-width: 535px;
}
}
#suchetopthemen .form-control {
height: 44px;
}
#suchetopthemen .navbar-form {
margin-top: 0;
margin-left: 0;
padding-left: 0;
/* padding-top: 0; edit 03.2019 */
padding-right: 0;
width: 100%;
}
@media (min-width: 576px) {
#suchetopthemen.collapsing, #suchetopthemen.collapse.in {
margin-left: 0;
margin-right: 0;
clear: both;
}
#suchetopthemen .form-control {
height: 44px;
}
}
#suchetopthemen > .row > .col-xs-12 { /* edit 03.2019 */
white-space: nowrap;
}
@media (min-width: 992px) {
#suchetopthemen .navbar-form {
margin-left: -15px;
width: calc(100% - 154px);
float: right;
}
}
#xsError .form-group, #xsError .input-group {
width: 100%;
}
#xsError .form-control {
height: 44px;
font-size: 133%;
}
.input-group-addon, .red {
color: var(--bs-primary);
}
.navbar {
margin-bottom: 0;
}
@media (min-width: 768px) {
.navbar {
margin-bottom: 15px;
}
}
.navbar-light .navbar-toggler {
color: transparent;
border-color: transparent;
padding-right: 0;
}
/*
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke=' rgba%28241, 0, 21, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
*/
/* https://codepen.io/sevmusic/pen/BajmPXr */
.navbar-toggler-icon {
position: relative;
width: 24px;
background: var(--bs-primary);
height: 2px;
margin-top: -2px;
}
.navbar-toggler-icon:before, .navbar-toggler-icon:after {
position: absolute;
width: 24px;
height: 2px;
background: var(--bs-primary);
content: '';
left: 0;
top: -8px;
-webkit-transition: all 300ms ease 0ms;
-moz-transition: all 300ms ease 0ms;
-o-transition: all 300ms ease 0ms;
transition: all 300ms ease 0ms;
}
.navbar-toggler-icon:after {
top: auto;
bottom: -8px;
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
background: transparent;
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon:before {
transform: rotate(45deg);
top: 0;
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon:after {
transform: rotate(-45deg);
top: 0;
}
#navbar-collapse-x input#keywords.form-control.placeholder, /* Suche mobil */
#navbar-collapse-x input#keywords.form-control:focus,
#navbar-collapse-x input#keywords.form-control {
font-size: 1rem;
}
.form-control::placeholder {
font-size: 1.125rem;
color: var(--bs-grey-500);
}
/* Newsletter Mobile */
/* https://pepelsbey.dev/articles/skewed-highlight/ */
mark {
background-color: #f8db75;
color: inherit;
}
.newsletter__mobile mark {
--mark-color: #f8db75;
--mark-skew: 0.25em;
--mark-height: 1em;
--mark-overlap: 0.3em;
margin-inline: calc(var(--mark-overlap) * -1);
padding-inline: var(--mark-overlap);
background-color: transparent;
background-image:
linear-gradient(to bottom right,
transparent 50%,
var(--mark-color) 50%),
linear-gradient(var(--mark-color),
var(--mark-color)),
linear-gradient(to top left,
transparent 50%,
var(--mark-color) 50%);
background-size:
var(--mark-skew) var(--mark-height),
calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
var(--mark-skew) var(--mark-height);
background-position:
left center,
center,
right center;
background-repeat: no-repeat;
color: inherit;
webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.newsletter__mobile .form-control::placeholder {
font-size: 0.875rem;
}
.newsletter__mobile .form-control::placeholder {
color: var(--bs-grey-700);
}
.newsletter__mobile .form-control {
height: 2rem;
}
.newsletter__mobile .btn--search {
font-size: 0.875rem;
width: 98.1px;
height: 1.2rem;
}
.newsletter__mobile small {
margin-right: 3px;
}
.newsletter__mobile small>a.datenschutz,
.newsletter__mobile #datenschutz-newsletter {
font-size: 0.75rem;
}
.navbar {
padding-bottom: 0;
}
/* Newsletter Mobile */
@media (min-width: 768px) {
.form-control::placeholder {
font-size: 1.313rem;
}
}
.form-control {
font-size: 1.125rem;
color: var(--bs-body-color);
}
@media (min-width: 768px) {
.form-control {
font-size: 1.313rem;
}
}
.meta-nav a:link, .meta-nav a:visited {
color: var(--bs-body-color);
font-size: .75rem;
padding-top: 12px;
}
.nav > li > a:hover, .nav > li > a:focus {
color: #255f27;
background-color: transparent;
}
.navbar-collapse.collapsing .navbar-secondary {
margin-left:15px;
}
.navbar-secondary > li {
color: var(--bs-primary);
font-weight: 400;
font-size: 0.8rem;
text-transform: uppercase;
border-top: 1px solid var(--bs-primary);
}
.navbar-secondary > li > a {
padding: 10px;
width: 100%;
display: inline-block;
}
.navbar-secondary > li.nav--suche {
border-top: 1px solid var(--bs-primary);
padding-top: 0.5rem;
}
/*
.navbar-secondary > li:last-of-type > a {
border-bottom: 1px solid var(--bs-primary);
}
*/
.navbar-secondary > li.nav--tec > a { /* edit 06.2019 */
color: #2654c4;
}
@media (min-width: 576px) {
.intern img {
width: 10em;
background-color: transparent;
}
}
@media (min-width: 769px) {
.navbar-secondary {
margin-top: 2.5rem;
background-color: transparent;
}
.navbar-secondary > li {
border-top: none;
}
.navbar-secondary > li > a {
border-top: 1px solid var(--bs-primary);
}
}
@media (min-width: 992px) {
#navbar-collapse-x {
margin-left: auto;
}
.navbar-secondary > li > a {
border-top: none;
}
}
.navbar-secondary > li > a,
.btn--send, .btn-default, .btn-primary,
.btn--topthemen, .btn--search,
.article--content h4.dachzeile,
#main--content--features h4.dachzeile,
.teaser--entry h4.dachzeile,
.anzeige,
.breadcrumbs li,
.rtable th,
#footer h4,
#main--tools--teaser--content .teaser--nsr--linkblock li > a,
#main--tools--teaser--content .teaser--szr--linkblock li > a,
#article--body .teaser--nsr--linkblock li > a,
#article--body .teaser--szr--linkblock li > a,
.teaser--entry--linkblock li > a,
.teaser--kommentare--linkblock li > a,
body.is-withMagicUnderlines .article--content .teaser--nsr--linkblock a,
.article--content dl .kommentar--autor,
.teaser--newsletter--archiv>p {
letter-spacing: 0.05em;
}
.widget--mehr--text {
letter-spacing: 0.01em;
}
@media (min-width: 1200px) {
.navbar-secondary > li > a {
font-size: 0.9rem;
}
}
@media (min-width: 1700px) {
.navbar-secondary > li > a {
font-size: 1.1rem;
}
}
@media (min-width: 768px) {
.navbar-secondary > li > a:hover, .navbar-secondary > li > a:focus {
color: #255f27;
}
#navbar-collapse-x {
justify-content: flex-end !important;
border: 0;
}
}
.topthemen--liste li > a:hover, .topthemen--liste li > a:focus {
color: var(--bs-primary);
}
.meta-nav {
margin-top: 1em;
margin-bottom: 0;
min-height: 0;
}
.meta-nav .navbar-nav > li > a {
padding-bottom: 0;
}
.navbar-nav.navbar-secondary {
margin: 0;
}
.navbar-nav.navbar-secondary > li:first-of-type {
margin-top: 15px;
}
@media (min-width: 768px) {
.navbar-nav.navbar-secondary {
margin: 7.5px -15px; /* bootstrap original 3379 */
margin-left: 0;
margin-top: 0.875rem;
margin-right: 0;
margin-bottom: 0;
}
.navbar-nav.navbar-secondary > li:first-of-type {
margin-top: 0;
}
}
/* Google-Suche */
/*
.collapsing .input-sm, .collapse.in .input-sm {
margin-right: 15px;
padding: 0;
}
*/
/* Suche rechts oben */
@media (min-width: 768px) {
.meta-nav .navbar-form {
padding-top: 0;
padding-left: 0;
}
}
.navbar-form {
padding-bottom: 0;
}
.btn {
vertical-align: top;
font-size: 1rem;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 7px 20px 5px 20px;
}
.btn:active {
box-shadow: none;
}
.btn:focus, .btn:active:focus {
outline-offset: 0;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus, .btn-check:focus + .btn-primary, .btn-primary:focus {
box-shadow: 0 0 0 0.1rem rgba(241, 0, 21, 0.5);
}
.btn--search {
text-decoration: none;
white-space: nowrap;
box-sizing: content-box;
-webkit-font-smoothing: antialiased;
font-weight: bold;
justify-content: center;
text-shadow: none;
vertical-align: middle;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
line-height: 1;
padding: 0 16px;
text-align: center;
background-color: var(--bs-primary);
color: var(--bs-white);
font-size: 1rem;
height: 44px;
text-transform: uppercase;
}
.article--content .btn--search {
margin-right: 15px;
}
.btn--send, .btn-default, .btn-primary {
font-weight: 700;
background-color: var(--bs-primary);
border-top: 1px solid var(--bs-grey-400);
border-right: 1px solid var(--bs-grey-400);
border-bottom: 1px solid var(--bs-grey-400);
color: var(--bs-white);
padding: 7px 15px 5px 15px;
height: 44px;
text-transform: uppercase;
}
.btn--send {
height: 30px;
}
.btn--topthemen {
font-weight: 700;
color: var(--bs-white);
border-color: #716b6b;
background-color: #716b6b;
padding: 7px 15px 5px 15px;
height: 44px;
float: left;
}
.btn--topthemen.collapsed {
border-color: var(--bs-primary);
background-color: var(--bs-primary);
}
.has-feedback .form-control {
padding-right: 0;
}
.btn--topthemen:focus, .btn--topthemen:hover, .btn--topthemen:active, .btn--topthemen:active:focus, .btn--topthemen:active:hover,
.btn--search:focus, .btn--search:hover, .btn--search:active, .btn--search:active:focus, .btn--search:active:hover,
.btn-default:focus, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:active:hover,
.btn-primary:focus, .btn-primary:hover, .btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover {
background-color: #e6e6e6;
border-color: #e6e6e6;
color: var(--bs-primary);
}
.input-group .wrap .form-control {
position: relative;
width: 100%;
z-index: 1;
}
#keywords.form-control {
color: var(--bs-body-color);
background-color: #ffffff;
}
.input-group > .form-control {
z-index: 4;
}
.form-control:focus {
border-color: var(--bs-grey-400);
}
@media (min-width: 768px) {
#love .form-control.suche--input {
height: 28px;
}
#love .form-control.suche--input:focus {
width: 320px;
margin-left: -140px;
}
}
/* Topthemen */
@media (min-width: 576px) {
.topthemen {
margin-top: 15px;
margin-bottom: 12px;
}
}
.btn--topthemen {
margin-right: 1px;
}
.topthemen h3 {
font-weight: 700;
display: inline-block;
float: left;
margin: 0 0.5rem 0 0;
padding-top: 0.42rem;
}
.topthemen h3, .topthemen--liste {
font-size: 1rem;
}
@media (min-width: 992px) {
.topthemen h3, .topthemen--liste {
font-size: 1.1rem;
}
}
.topthemen--liste,
.teaser--nsr--linkblock,
.teaser--szr--linkblock,
.teaser--entry--linkblock,
.teaser--kommentare--linkblock,
.teaser--sidebar--linkblock,
.breadcrumbs,
#header--kat.article--content ul, /* kat */
.page--mag.article--content ul, /* pages neu */
.page--mag .summary ul {
list-style-type: none;
display: inline;
margin-bottom: 0;
}
.teaser--nsr--linkblock.nav {
line-height: 110%;
}
.teaser--nsr--linkblock.nav li {
margin-bottom: 5px;
}
.teaser--nsr--linkblock.pages {
height: 700px; !important;
}
.teaser--wrapper {
padding: 0 0 0 0;
margin-bottom: 2em;
}
.sidebar-sticky {
position: sticky;
top: 1rem;
right: 0;
z-index: 2;
height: calc(100vh - 7rem);
overflow-y: auto;
overflow-x: auto;
}
#header--kat,
#article--body,
#page--body {
margin-top: 1.5rem;
}
#kat--content--features .nav > li > a {
margin: 0;
}
.article--content ul.teaser--nsr--linkblock {
padding-left: 0;
margin-top: 1rem;
margin-bottom: 2rem;
}
#kat {
margin-bottom: 4rem;
}
.nav li ul li {
padding-left: 45px;
}
.nav-pills .btn {
background-color: #e6e6e6;
color: var(--bs-primary);
border-color: var(--bs-white);
}
.nav-pills .btn-primary:hover {
background-color: #716b6b;
color: var(--bs-white);
}
.nav-pills > li {
float: none;
}
.nav-pills > li,
.nav-pills > li > ul > li {
margin-right: 30px;
}
.nav-pills > li > a {
padding: 0;
}
.nav-pills li {
list-style: none;
}
.nav li > ul > li > ul li:first-of-type {
margin-top: 0;
}
#main--tools--teaser--content .teaser--nsr--linkblock li, /* rote linie schaltflächen tools */
#main--tools--teaser--content .teaser--szr--linkblock li,
#article--body .teaser--nsr--linkblock li,
#article--body .teaser--szr--linkblock li,
.teaser--entry--linkblock li,
.teaser--kommentare--linkblock li,
.teaser--sidebar--linkblock li,
.teaser--wrapper li /* Rote Linie bei Kontaktseite */ {
display: block;
border-bottom: 1px solid var(--bs-primary);
}
.teaser--nl--love::after { /* rote linie newsletter-teaser home, aber nicht statisch */
content: "";
display: block;
height: 3px;
width: 100%;
margin: 0 15px;
border-top: 1px solid var(--bs-primary);
}
.teaser--nl--statisch::after { /* rote linie newsletter-teaser home, aber nicht statisch */
content: "";
display: block;
height: 3px;
width: 100%;
margin: 0 15px;
}
.article--content ul.teaser--nsr--linkblock {
line-height: 1em; /* angleichung 3608 zu startseite */
}
.teaser--entry--linkblock li {
margin-bottom: 4em;
}
.page--mag .teaser--entry--linkblock li {
margin-bottom: 1em;
}
.teaser--entry::before { /* rote linie content-teaser home */
content: "";
display: block;
height: 3px;
width: 100%;
border-top: 1px solid var(--bs-primary);
padding-top: 2em;
}
figure {
margin: 0;
padding: 0 0 1rem;
}
.topthemen--liste li {
display: inline;
float: left;
padding-top: 0.42rem;
}
.topthemen--liste li > a {
color: #000005;
padding: 0 0.5rem;
}
.topthemen--liste li:last-child > a {
font-weight: 700;
}
.topthemen--liste li:last-child > a:hover, .topthemen--liste li:last-child > a:focus {
color: #255f27;
}
/* Searchbox */
.searchbox {
margin: 20px 0 10px 0;
}
@media (max-width: 767px), (min-width: 1200px) {
.searchbox {
margin: 0;
}
}
.searchandexplore {
border-bottom: 1px dashed var(--bs-grey-700);
}
.searchbox--input {
width: 600px !important;
}
/* #######################################################
Fonts und Linkauszeichnungen
####################################################### */
a,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
legend {
color: var(--bs-primary);
}
em > a {
color: var(--bs-body-color);
}
a:hover, a:focus, a:active {
color: #255f27;
text-decoration: none;
}
.promobox a:link, .promobox a:visited {
color: var(--bs-white);
}
.promobox a:hover, .promobox a:active, .promobox a:focus {
color: #dbdbdb; /* hellgrau */
}
.promobox a:hover .ownicon--chevron--prev, .promobox a:active .ownicon--chevron--prev, .promobox a:focus .ownicon--chevron--prev {
stroke: #dbdbdb;
}
#topthemen a:link, #topthemen a:visited {
color: var(--bs-body-color);
}
#topthemen a:hover, #topthemen a:active, #topthemen a:focus {
color: var(--bs-primary);
}
h1, h2, h3, .h1, .h2, .h3 {
-moz-font-feature-settings: "swsh";
-webkit-font-feature-settings: "swsh";
font-feature-settings: "swsh";
}
.nav > li > a { /* edit 03.2019 */
padding-left: 1px;
}
#kat--content--features { /* edit 03.2019 */ /*kategorienbaum mit abstand zum mobilerect */
margin-top: 1rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
#kat--content--features { /* edit 03.2019 */ /*kategorienbaum linksbündig erzwungen */
margin-left: 0;
}
.nav > li.intern > a {
margin: 0 8px;
}
}
@media (min-width: 992px) {
.nav > li > a {
margin: 0 2px;
}
#kat--content--features { /* edit 03.2019 */ /*kategorienbaum abstand rückgängig */
margin-top: 0;
}
}
@media (min-width: 1200px) {
.nav > li > a {
margin: 0 8px;
}
}
body.is-withMagicUnderlines .article--content a {
text-decoration: none;
background-image: linear-gradient(to bottom,rgba(241,0,21,.6) 50%,rgba(0,0,0,0) 50%);
background-repeat: repeat-x;
background-size: 2px .1em;
background-position: 0 1.2em;
cursor: pointer;
}
body.is-withMagicUnderlines .article--content a:hover,
body.is-withMagicUnderlines .article--content a:focus,
body.is-withMagicUnderlines .article--content a:active,
body.is-withMagicUnderlines .article--content a.noMagicUnderlines,
body.is-withMagicUnderlines .article--content #kat--content--features a,
body.is-withMagicUnderlines .article--content .nav a,
body.is-withMagicUnderlines .article--content .breadcrumbs a
{
/*
background-image: linear-gradient(to bottom,rgba(0,0,0,.6) 50%,rgba(0,0,0,0) 50%);
*/
}
#main--tools--teaser--content .teaser--nsr--linkblock li > a,
#main--tools--teaser--content .teaser--szr--linkblock li > a,
#article--body .teaser--nsr--linkblock li > a,
#article--body .teaser--szr--linkblock li > a,
.teaser--entry--linkblock li > a,
.teaser--kommentare--linkblock li > a,
body.is-withMagicUnderlines .article--content .teaser--nsr--linkblock a,
.teaser--sidebar--linkblock li > a {
display: block;
background: url(/library/images/icons/chevron-red.svg);
background-repeat: no-repeat;
background-size: 30px 50px;
min-height: 4rem;
background-position: 100%;
padding: 14px 30px 14px 0;
font-size: 0.9375rem;
text-transform: uppercase;
vertical-align: middle;
text-decoration: none;
}
.teaser--nsr--linkblock li > a > em,
.teaser--entry--linkblock li > a > em,
.teaser--sidebar--linkblock li > a > em,
.teaser--szr--linkblock li > a > em,
.nsr--widget--optionen li > a > em {
color: var(--bs-body-color);
font-style: normal;
font-size: 80%;
}
.article--content a {
text-decoration: underline;
}
.article--content h4.dachzeile,
#main--content--features h4.dachzeile,
.teaser--entry h4.dachzeile,
.anzeige {
color: var(--bs-primary);
text-transform: uppercase;
font-size: 0.8rem;
margin-bottom: 0;
}
.main--content--features--text .dachzeile {
margin-left: 2px; /* grafische einrückung */
}
.anzeige {
color: var(--bs-body-color);
margin-top: 10px;
margin-bottom: 0.68125rem;
}
.ueberschrift {
border-top: 3px solid var(--bs-primary);
margin-top: 0;
padding-top: 0.5rem;
}
a > h2.ueberschrift:hover, a > h2.ueberschrift:focus,
h2.ueberschrift > a:hover, h2.ueberschrift > a:focus {
text-decoration: underline;
}
#main--content--features h2.ueberschrift > a:hover, #main--content--features h2.ueberschrift > a:focus,
#main--content--features a > h2.ueberschrift:hover, #main--content--features a > h2.ueberschrift:focus {
text-decoration: underline;
}
#main--tools--teaser--content .ueberschrift {
border-top: 3px solid var(--bs-primary);
margin-top: 0.44em;
padding-top: 0.5rem;
font-size: 200%;
}
#main--tools--teaser--content .teaser--nsr .ueberschrift,
#main--tools--teaser--content .teaser--autorenbox .ueberschrift {
border-top: 1px solid var(--bs-primary);
margin-top: 0;
padding-top: 3rem;
}
#main--tools--teaser--content .teaser--szr .ueberschrift,
#main--tools--teaser--content .teaser--nl .ueberschrift,
#main--tools--teaser--content .teaser--kommentare .ueberschrift {
border: 0;
padding-top: 3rem;
margin-top: 0;
}
.teaser--entry .ueberschrift {
border: 0;
}
.header-beitrag-einzel {
margin-top: 2rem;
}
@media (min-width: 768px) {
.header-beitrag-einzel {
margin-top: 0;
}
}
.article--content .ueberschrift em {
display: block;
line-height: 1;
color: var(--bs-body-color);
font-weight: 300;
font-size: 70%;
text-transform: uppercase;
font-style: normal;
letter-spacing: 0.5px;
}
/* #######################################################
Content-Module
####################################################### */
/* Einzelbeitrag */
.article--meta--promo { /* weil row-eq-height ist display-flex geht das */
position: absolute;
bottom: 0;
}
.article--content,
.promobox--text,
#main--content--features,
.teaser--content--head,
#footer {
font-size: 18px; /* zentraler Hebel für Schriftgröße Font Size im Einzelbeitrag */
}
#main--content--features {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 768px) {
.article--content,
.promobox--text,
.teaser--content--head,
#topthemen li {
font-size: 133%; /* zentraler Hebel für Schriftgröße Font Size im Einzelbeitrag */
}
#main--content--features,
#footer h2,
#main--tools--teaser--content p.summary {
font-size: 166%;
}
#main--content--features {
padding-left: 15px;
padding-right: 15px;
}
}
#xsError li {
font-size: 133%;
}
.article--content .ueberschrift,
#main--content--features .ueberschrift,
#main--tools--teaser--content .size--max,
.teaser--entry h2,
#footer h2 {
font-size: 1.333em;
font-weight: 700;
line-height: 1.4em;
padding-bottom: 1em;
margin-bottom: 0;
}
#footer h2 {
margin-bottom: 0;
padding-top: 0.5rem; /* wie .ueberschrift */
/*
border-top: 3px solid var(--bs-primary);
*/
}
@media (max-width: 767px) {
#main--tools--teaser--content .ueberschrift {
font-size: 166%; /* Sonderwunsch edit 06.2020 */
}
}
#main--tools--teaser--content .ueberschrift {
font-weight: 700;
line-height: 1.4em;
margin-bottom: 0.5em;
}
#main--tools--teaser--content .size--max {
font-size: 48px;
font-size: calc(3.5em + 1vw); /* progressive enhancement */
line-height: 1;
}
.kategorien--subtitle {
padding-left: 1.5rem;/*
position: absolute;
right: 15px;
*/
}
@media (min-width: 768px) {
.kategorien--subtitle {
float: right;
}
}
/* home-typewriter 12/2020 */
@media (min-width: 768px) {
.type-animation {
display: -webkit-inline-box;
display: inline-flex;
width: 0;
overflow: hidden;
padding-right: 0.08em;
position: relative;
}
.type-animation:after {
content: "";
background: #f7f3ff;
position: absolute;
right: 0;
top: -0.05em;
bottom: -0.05em;
width: 0.08em;
border-right: 2px solid transparent;
}
.type-animation.animating {
-webkit-animation: type 1620ms;
animation: type 1620ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.type-animation.animating:after {
-webkit-animation: cursor 320ms 8.625 ease-in-out;
animation: cursor 320ms 8.625 ease-in-out;
}
@-webkit-keyframes cursor {
0%,
100% {
border-color: #f7f3ff;
}
50% {
border-color: #241b5b;
}
100% {
width: 0;
}
}
@keyframes cursor {
0%,
100% {
border-color: #f7f3ff;
}
50% {
border-color: #241b5b;
}
100% {
width: 0;
}
}
@-webkit-keyframes type {
11.1111111111% {
width: 0.49em;
}
22.2222222222% {
width: 0.98em;
}
33.3333333333% {
width: 1.47em;
}
44.4444444444% {
width: 1.96em;
}
55.5555555556% {
width: 2.45em;
}
66.6666666667% {
width: 2.94em;
}
77.7777777778% {
width: 3.43em;
}
88.8888888889% {
width: 3.92em;
}
100% {
width: 3.92em;
padding-right: 0;
}
}
@keyframes type {
11.1111111111% {
width: 0.49em;
}
22.2222222222% {
width: 0.98em;
}
33.3333333333% {
width: 1.47em;
}
44.4444444444% {
width: 1.96em;
}
55.5555555556% {
width: 2.45em;
}
66.6666666667% {
width: 2.94em;
}
77.7777777778% {
width: 3.43em;
}
88.8888888889% {
width: 3.92em;
}
100% {
width: 3.92em;
padding-right: 0;
}
}
}
/* ende home-typewriter 12/2020 */
/* tag--cloud */
p .tagStyle { margin-right: 2px; }
p .tagStyle1 { font-size : 11px; background-color : #fafafa; }
p .tagStyle2 { font-size : 13px; background-color : #f1f1f1; }
p .tagStyle3 { font-size : 15px; background-color: #e9e9e9; }
p .tagStyle4 { font-size : 17px; background-color: #dddddd }
p .tagStyle5 { font-size : 18px; background-color: #dadada }
p .tagStyle6 { font-size : 19px; background-color: #d6d6d6 }
p .tagStyle7 { font-size : 20px; background-color: #d3d3d3 }
p .tagStyle8 { font-size : 21px; background-color: #d1d1d1 }
p .tagStyle9 { font-size : 22px; background-color: #d1d1d1 }
p .tagStyle10 { font-size : 22px; background-color: #cfcfcf }
p .tagStyle11 { font-size : 22px; background-color: #cfcfcf }
p .tagStyle12 { font-size : 22px; background-color: #cccccc }
p .tagStyle13 { font-size : 23px; background-color: #cccccc }
p .tagStyle14 { font-size : 23px; background-color: #c9c9c9 }
p .tagStyle15 { font-size : 23px; background-color: #c9c9c9 }
p .tagStyle16 { font-size : 23px; background-color: #c7c7c7 }
p .tagStyle17 { font-size : 23px; background-color: #c7c7c7 }
p .tagStyle18 { font-size : 23px; background-color: #c5c5c5 }
p .tagStyle19 { font-size : 23px; background-color: #c5c5c5 }
p .tagStyle20 { font-size : 24px; background-color: #c4c4c4 }
p .tagStyle21 { font-size : 24px; background-color: #c4c4c4 }
p .tagStyle22 { font-size : 24px; background-color: #c4c4c4 }
p .tagStyle23 { font-size : 24px; background-color: #c4c4c4 }
p .tagStyle24 { font-size : 24px; background-color: #d1d1d1 }
p .tagStyle25 { font-size : 24px; background-color: #d1d1d1 }
p .tagStyle26 { font-size : 24px; background-color: #d1d1d1 }
p .tagStyle27 { font-size : 24px; background-color: #d1d1d1 }
p .tagStyle28 { font-size : 24px; background-color: #d1d1d1 }
p .tagStyle29 { font-size : 24px; background-color: #d1d1d1 }
p .tagStyle30 { font-size : 24px; background-color: #d1d1d1}
@media (min-width: 1120px) {
.article--content .tag--cloud p { line-height: 200%;}
p .tagStyle { margin-right: 5px; }
p .tagStyle1 { font-size : 14px; }
p .tagStyle2 { font-size : 14px; }
p .tagStyle3 { font-size : 15px; }
p .tagStyle4 { font-size : 17px; }
p .tagStyle5 { font-size : 18px; }
p .tagStyle6 { font-size : 19px; }
p .tagStyle7 { font-size : 21px; }
p .tagStyle8 { font-size : 24px; }
p .tagStyle9 { font-size : 25px; }
p .tagStyle10 { font-size : 25px; }
p .tagStyle11 { font-size : 25px; }
p .tagStyle12 { font-size : 25px; }
p .tagStyle13 { font-size : 27px; }
p .tagStyle14 { font-size : 27px; }
p .tagStyle15 { font-size : 27px; }
p .tagStyle16 { font-size : 27px; }
p .tagStyle17 { font-size : 27px; }
p .tagStyle18 { font-size : 27px; }
p .tagStyle19 { font-size : 27px; }
p .tagStyle20 { font-size : 30px; }
p .tagStyle21 { font-size : 30px; }
p .tagStyle22 { font-size : 30px; }
p .tagStyle23 { font-size : 30px; }
p .tagStyle30 { font-size : 30px; }
p .tagStyle25 { font-size : 30px; }
p .tagStyle26 { font-size : 30px; }
p .tagStyle27 { font-size : 30px; }
p .tagStyle28 { font-size : 30px; }
p .tagStyle29 { font-size : 30px; }
p .tagStyle30 { font-size : 30px; }
}
}
/* ende tag--cloud */
#topthemen ul,
#xsError ul {
margin-top: 1rem;
}
#topthemen li,
#xsError li {
line-height: 2em;
}
#topthemen li::after,
#xsError li::after {
content: '|';
padding: 0 0.5em;
}
#topthemen li:last-child:after,
#xsError li:last-child:after {
content: '';
padding: 0 0.5em;
}
.error404 .article--content p.summary {
margin-bottom: 0;
}
@media (min-width: 768px) {
.article--topline {
border-top: 1px solid var(--bs-primary);
margin-bottom: 1.33rem;
}
.article--content {
margin-top: 1.5rem;
}
}
@media (min-width: 768px) {
.article--topline-container {
padding-right: 15px;
}
}
.beitrag-meta {
padding: 0;
margin: 0 0 0.5em 0;
list-style-type: none;
color: var(--bs-primary);
}
.beitrag-meta .datum {
color: #5b584f;
}
.chevron {
width: 1rem;
height: 2rem;
/* Nice visual alignment for icons alongside text.
(I got a few questions about this and: with most
fonts and styles, this works better than just
vertical-align:middle. Try it and see what you
like best. */
vertical-align: -0.15em;
/* Paths and strokes that overflow the viewBox can
show in IE. If you use normalize.css, it already
sets this. */
overflow: hidden;
margin-left: 1.375rem;
color: lime;
}
.article--content p {
margin: 0 0 1rem;
}
.article--content .block {
margin-top: 1rem;
}
.article--content figcaption,
.teaser--entry figcaption {
font-weight: 300;
font-size: 0.75em;
}
.lesensieauch figcaption {
text-align: left;
}
figcaption a {
color: #7b7e72;
}
@media (min-width: 1200px) {
.teaser--entry {
-webkit-transition: background .33s;
transition: background .33s;
}
.teaser--entry:hover {
background: #ffffff;
}
}
.article--content p.summary,
#main--content--features p.summary,
#main--tools--teaser--content p.summary,
.teaser--entry p.summary {
padding: 1em 0 2rem 0;
line-height: 1.313em;
margin-bottom: 0;
}
.adsenseContentShareEinzelbeitrag,
.article--footer,
.nsr--ergebnis,
.article--content table.tabZusammenfassung,
.col-ergebnistabelle {
margin-top: 1em;
margin-bottom: 2rem;
}
@media (min-width: 768px) { /* edit 02.2019 */
.adsenseContentShareEinzelbeitrag,
.article--footer,
.nsr--ergebnis,
.article--content table.tabZusammenfassung,
.col-ergebnistabelle {
margin-top: 0;
}
}
.datum--oben {
border-top: 1px solid var(--lf-ruler-top);
border-bottom: 1px solid #2c2d30;
padding: 0.33rem 0 0.33rem 0;
margin-bottom: 1.5rem;
}
.nsr--nav .datum--oben {
border-bottom: 0;
}
.nsr--nav .datum--oben p,
.article--meta.nsr--nav .datum--oben {
margin-bottom: 0;
}
.nsr--nav h3 > span {
color: var(--bs-body-color);
text-transform: uppercase;
display: block;
}
.nsr--nav .nav > li > a {
padding: 5px 0;
}
.nsr--nav .nav > li > a:hover, .nsr--nav .nav > li > a:focus {
background: transparent;
}
.article--meta .datum--oben {
margin-bottom: 10px;
}
.article--content .marker,
.article--content dl .kommentar--autor,
.beschreibungZumRundungsmodus--text {
margin-bottom: 2rem;
padding-bottom: 1rem;
font-size: 0.8em;
text-transform: uppercase;
font-style: normal;
font-weight: 300;
line-height: 1.5em;
letter-spacing: 0.02em;
}
.article--content .marker {
border-bottom: 3px solid var(--lf-ruler-top);
}
.article--content .emphasis-box {
background: #ffffff;
padding: 1rem;
margin: 2rem 0;
border-top: 1px solid var(--lf-ruler-top);
border-bottom: 1px solid var(--lf-ruler-bottom);
}
@media (min-width: 768px) {
.article--content .emphasis-box {
margin: 2rem 1rem;
}
}
#kommentare > h3,
#kommentare fieldset > h3 {
color: var(--bs-body-color);
margin: 0 0 1.5rem 0;
}
.article--content .marker,
.beschreibungZumRundungsmodus--text {
text-transform: none;
font-weight: normal;
}
.marker + .marker {
margin-top: -0.5rem;
}
.article--content /* hervorhebung für alte beiträge wie marker, nur andere farbe */
.outdated {
background-color: #ffced4;
}
.article--content .marker a {
text-decoration: underline !important;
color: var(--bs-body-color);
}
.article--content dl,
.article--content dt,
.article--content dd,
.article--content p,
.article--content p.summary,
.teaser--entry p.summary,
.article--content ol,
.article--content ul,
.promobox p,
.page--mag ul.summary {
font-size: 1em;
line-height: 1.5em;
}
.page--mag ul.summary {
padding-left: 1em;
}
.article--content ol,
.article--content ul {
margin-bottom: 2rem;
}
.article--content .tabZusammenfassung ul {
margin-bottom: 0;
}
.article--content ul.beitrag-meta {
padding-top: 0.5rem;
margin-bottom: 0.5rem;
}
.article--content .nsr--ergebnis dl,
.article--content .nsr--ergebnis dt,
.article--content .nsr--ergebnis dd {
line-height: 1.313em;
}
body.is-withMagicUnderlines .article--content .nsr--ergebnis a {
background-image: none;
background-size: 0;
}
.article--content td > p {
font-size: 100%;
line-height: 1.313em;
}
.article--content ol,
.article--content ul {
padding-left: 1.2rem;
}
.article--content .breadcrumbs {
padding-left: 0;
font-weight: 500;
margin: 0;
padding: 0;
}
nav + .ueberschrift { /* für die breadcrumbs bei /kat/ */
margin-top: 0;
}
.breadcrumbs li {
display: inline;
font-size: 0.8rem;
text-transform: none;
}
.breadcrumbs li:first-of-type {
display: none;
}
.breadcrumbs li:after {
content: ">";
display: inline;
}
.breadcrumbs li:first-of-type:after {
content: '';
}
ul.suchergebnisse {
font-weight: 500;
list-style-type: none;
padding-left: 0;
}
ul.suchergebnisse li {
margin-bottom: 2rem;
}
ul.suchergebnisse dt {
font-size: 0.8em;
font-weight: 500;
line-height: 1.5em;
letter-spacing: 0.02em;
margin-top: 0.5rem;
}
ul.suchergebnisse a dd,
ul.suchergebnisse a li object a {
color: var(--bs-body-color);
}
mark {
color: inherit;
}
#header--kat.article--content .nav-pills,
#header--kat.article--content .nav-pills ul,
.page--mag.article--content .nav-pills,
.page--mag.article--content .nav-pills ul /* pages neu */ {
padding-left: 0;
}
.article--content li {
padding: 0;
}
.article--content h2,
legend,
.teaser--content--head h2 {
font-size: 1.33em;
line-height: 1.4em;
margin-bottom: 1em;
font-weight: 700;
}
.teaser--content--head a .ueberschrift {
color: var(--bs-body-color);
}
.article--content h3 {
font-size: 1.25em;
line-height: 1.25em;
margin-bottom: .5rem;
font-weight: 700;
color: #333333; /* neu */
}
.article--content h4 {
font-size: 1.125em;
line-height: 1.5em;
margin-bottom: .5rem;
color: #333333; /* neu */
}
#article--body h2, /* unterstreichungen von zwischenüberschriften mit unterlängen-aussparung,
https://css-tricks.com/styling-underlines-web/ */
#article--body .article--content h3,
#article--body .article--content h4,
#article--body .article--content h5,
#page--body h2,
#page--body .article--content h3,
#page--body .article--content h4,
#page--body .article--content h5,
#article--body .article--content legend,
#article--body .notenskala > legend,
#article--body .notenschluessel > legend,
#article--body .erweiterte > legend
{
border-top: 1px solid var(--bs-primary);
margin-top: 0.44em;
padding-top: 0.5rem;
}
.article--content h5 {
font-size: 0.875rem;
margin-top: 0.625rem;
}
#article--body .article--content legend,
#article--body .notenskala > legend,
#article--body .notenschluessel > legend,
#article--body .erweiterte > legend {
font-weight: 700;
float: none;
}
blockquote, .bsp {
position: relative;
margin-top: 1em;
margin-left: 2em;
margin-bottom: 1.5em;
width: 88%;
padding: 0.66em 0.4em 1em 0.4em;
color: inherit;
font-style: italic;
font-size: 1em;
line-height: 1.5em;
border-top: 1px solid #2c2d30;
border-bottom: 1px solid #2c2d30;
border-left: none;
overflow: visible;/*
background-image: url("../images/icons/icon-chevron-dbl.svg");
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: -10px 30px;
*/
/*
/*
/* FUN! */
/*
-webkit-mask-image: url("../images/icons/icon-chevron-dbl.svg");
mask-image: url("../images/icons/icon-chevron-dbl.svg");
*/
}
blockquote:before, .bsp:before {
content: url("data:image/svg+xml; utf8, ");
display:block;
width:22px;
height:22px;
margin-top: 3px;
position: absolute;
left: -20px;
}
.bsp p:last-child, .bsp ul:last-child, .bsp ol:last-child {
margin-bottom: 0;
}
.bsp p.quelle, .bsp small, .bsp .small, cite {
color: #404244;
font-size: 0.9375em;
display: block;
line-height: 1.5em;
letter-spacing: 0.02em;
}
.bsp p.quelle, .bsp small {
text-transform: uppercase;
}
.bsp p.quelle:before, .bsp small:before, .bsp .small:before {
content: "— ";
}
.bsp p.quelle a, .bsp small a, .bsp .small a {
background-image: none;
}
.bsp p.quelle a:hover, .bsp small a:hover, .bsp .small a:hover,
.bsp p.quelle a:focus, .bsp small a:focus, .bsp .small a:focus {
color: var(--bs-primary);
}
/* img in Beiträgen */
.article--content img.block {
margin-top: 1em;
margin-bottom: 0.2em;
position: relative;
width: 510px;
height: auto;
max-width: 100%;
transition: ease 1s;
}
.article--content p > img,
.article--content p > em > img {
margin-top: 2em;
margin-bottom: 2em;
display: block;
position: relative;
width: 510px;
height: auto;
max-width: 100%;
transition: ease 1s;
}
.article--content p > img.noscale,
.article--content p > em > img.noscale {
width: auto !important;
}
/* schatten bzw. rahmen um bilder in beiträgen */
.article--content img.block,
.article--content p > img,
.article--content p > em > img,
.article--content p > img.noscale,
.article--content p > em > img.noscale {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(180,184,181,1);
}
.article--content .bu {
font-style: italic;
margin: 1em 0 2em 0;
padding: 0 0 0.5em 5px;
border-bottom: 1px solid #b4b8b5;
}
/* table aus bootstrap */
.article--content table {
margin-top: 2rem;
margin-bottom: 1rem;
display: block;
font-size: 80%;
}
.article--content .sz-tabelle-ergebnis table {
margin-top: 0;
margin-bottom: 2rem ;
}
/*!
// CSS only Responsive Tables
// http://dbushell.com/2016/03/04/css-only-responsive-tables/
// by David Bushell
*/
/*!
// CSS only Responsive Tables
// http://dbushell.com/2016/03/04/css-only-responsive-tables/
// by David Bushell
*/
.rtable {
/*!
// IE needs inline-block to position scrolling shadows otherwise use:
// display: block;
// max-width: min-content;
*/
display: inline-block;
vertical-align: top;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
}
.rtable,
.rtable--flip tbody {
-webkit-overflow-scrolling: touch;
/*
background: -webkit-radial-gradient(left ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, -webkit-radial-gradient(right ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background: -o-radial-gradient(left ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, -o-radial-gradient(right ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background-size: 10px 100%, 10px 100%;
background-attachment: scroll, scroll;
background-repeat: no-repeat;
*/
}
.rtable td:first-child,
.rtable--flip tbody tr:first-child {
background-image: -webkit-linear-gradient(left, white 50%, rgba(255, 255, 255, 0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, white), to(rgba(255, 255, 255, 0)));
background-image: -o-linear-gradient(left, white 50%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%);
background-repeat: no-repeat;
background-size: 20px 100%;
}
.rtable td:last-child,
.rtable--flip tbody tr:last-child {
background-image: -webkit-linear-gradient(right, white 50%, rgba(255, 255, 255, 0) 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, white), to(rgba(255, 255, 255, 0)));
background-image: -o-linear-gradient(right, white 50%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to left, white 50%, rgba(255, 255, 255, 0) 100%);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 20px 100%;
}
.rtable th {
font-size: 10px;
text-align: left;
text-transform: uppercase;
background: #f2f0e6;
}
.rtable th,
.rtable td {
padding: 6px 12px;
border: 1px solid #d9d7ce;
}
.rtable--flip {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
background: none;
}
.rtable--flip thead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-negative: 0;
flex-shrink: 0;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
}
.rtable--flip tbody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
}
.rtable--flip tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.rtable--flip td,
.rtable--flip th {
display: block;
}
.rtable--flip td {
background-image: none !important;
border-left: 0;
}
.rtable--flip th:not(:last-child),
.rtable--flip td:not(:last-child) {
border-bottom: 0;
}
/* --- */
.article--content th {
text-align: center;
}
.article--content table > thead > tr > th, /* .table-condensed */
.article--content table > tbody > tr > th,
.article--content table > tfoot > tr > th,
.article--content table > thead > tr > td,
.article--content table > tbody > tr > td,
.article--content table > tfoot > tr > td {
padding: 5px;
}
/*
.article--content table > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.article--content table > tbody > tr:nth-of-type(even) {
background-color: #f5f5f5;
}
*/
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: transparent;
}
.article--content table > tbody > tr:hover { /* .table-hover */
background-color: white;
}
.article--content table.tabZusammenfassung > tbody > tr:hover { /* Ergebnistabelle ohne hover */
background-color: transparent;
}
/* ********************************************** */
/* * Notenschlüssel-App Landing Page */
/* ********************************************** */
.landing-page {
background: linear-gradient(90deg, #b4b9bc, #f2f5f7, #b4b9bc);
padding: 30px 0 0 0;
}
.landing-page img {
background: none;
}
.landing-page h2 {
color: var(--bs-body-color);
font-weight: 700;
font-size: 2rem;
}
.landing-page p {
font-size: 1rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.landing-page h2 {
font-size: 3rem;
}
.landing-page p {
font-size: 1.25rem;
line-height: 1.4;
}
}
.landing-page p.datenschutz {
font-size: 0.875rem;
}
.landing-page .ipad {
-webkit-filter: drop-shadow(29px 21px 113px rgba(133,129,133,1));
filter: drop-shadow(29px 21px 113px rgba(133,129,133,1));
}
/*
.landing-page .ipad-wrapper {
padding:15px;
padding-bottom:0;
-webkit-animation-name:fadein;
animation-name:fadein;
-webkit-animation-duration: 6s;
animation-duration:6s;
display:flex;
justify-content:center
}
@-webkit-keyframes fadein {
from {
opacity:0
}
to {
opacity:1
}
}
@keyframes fadein {
from {
opacity:0
}
to {
opacity:1
}
}
.scale-in-center {
-webkit-animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.scale-in-center-right {
-webkit-animation: scale-in-center-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/*keyframes*/
/*
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(-2deg);
transform: scale(1) rotate(-2deg);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(-2deg);
transform: scale(1) rotate(-2deg);
opacity: 1;
}
}
@-webkit-keyframes scale-in-center-right {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(2deg);
transform: scale(1) rotate(2deg);
opacity: 1;
}
}
@keyframes scale-in-center-right {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(2deg);
transform: scale(1) rotate(2deg);
opacity: 1;
}
}
*/
/* besser: https://codepen.io/alvarotrigo/pen/PoKamZy
https://alvarotrigo.com/blog/css-animations-scroll/ */
.ipad {
position: relative;
}
@keyframes wipe-enter {
0% {
-webkit-transform: scale(0, .025);
transform: scale(0, .025);
}
50% {
-webkit-transform: scale(1, .025);
transform: scale(1, .025);
}
100% {
}
}
@media (prefers-reduced-motion: no-preference) {
.ipad-animation, .iphone1-animation {
animation: wipe-enter 1s 1;
}
}
.ipad-wrapper, .iphone1-wrapper {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.lorbeeren {
background-image: url("/library/images/notenschluesselrechner-app/lorbeeren.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
/*
margin: 0 20px;
*/
}
.lorbeeren p {
font-size: 0.875rem;
font-weight: 400;
position: relative;
top: 30%;
height: 120px;
}
@media (min-width: 1400px) {
.lorbeeren p {
height: 150px;
}
}
.landing-page .card {
background-color: #cacaca;
border: 1px solid transparent;
transition: .8s all;
}
.landing-page .card:hover,
.landing-page .card:active,
.landing-page .card:focus {
background-color: #d8d8d8;
border: 1px solid white;
}
/*
.card image
{
filter:blur(0px);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-radius:15px;
}
.card:hover image
{
filter:blur(3px);
}
*/
.landing-page .card-img-top {
width: 400px;
}
@media (max-width: 768px) {
.card-body .btn {
font-size: 0.625rem;
}
}
@media (min-width: 992px) {
.lorbeeren {
margin-top: 100px;
}
.lorbeeren p {
font-size: 1.125rem;
}
}
/* ********************************************** */
/* * /Notenschlüssel-App Landing Page */
/* ********************************************** */
/* Amazon-Tooltippp */
/* https://codepen.io/css-tricks/full/wFeaG */
a.tooltippp {
position: relative;
text-decoration: none;
}
a.tooltippp:after {
content: attr(data-tooltippp);
position: absolute;
bottom: 130%;
left: 20%;
background: #255f27;
padding: 3px 5px;
color: white;
font-size: 0.75rem;
-webkit-border-radius: 6px;
-moz-border-radius : 6px;
border-radius : 6px;
white-space: nowrap;
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
}
a.tooltippp:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid #255f27;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
opacity: 0;
left: 30%;
bottom: 90%;
}
a.tooltippp:hover:after {
bottom: 100%;
}
a.tooltippp:hover:before {
bottom: 70%;
}
a.tooltippp:hover:after, a:hover:before {
opacity: 1;
}
/* Amazon-Tooltippp */
.article--content dd iframe { /* amazon-iframes */
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* hellgrauer spruch bei liste geschenke-beitrag */
.article--content h2.geschenkeliste {margin-bottom: 0; }
.article--content p.amazonhinweis {
font-weight: 300;
font-size: 0.875rem;
line-height: 1.2rem; l
}
.article--content p.amazonhinweis a {color: #7b7e72;}
/* hellgrauer spruch bei liste geschenke-beitrag */
/* marker--neu für Geschenkebeitrag */
.marker--neu {
font-size: 80%;
font-weight: 400;
font-style: italic;
text-transform: uppercase;
padding-left: 2px;
padding-right: 2px;
margin-right: 0.5em;
background-color: #ffffd7;
}
.article--footer dl:nth-of-type(1),
.nsr--ergebnis dl:nth-of-type(1) {
border-top: 1px #999999 solid;
}
.article--footer dl,
.nsr--ergebnis dl {
border-bottom: 1px #999999 solid;
padding: 0.25rem 0.15rem;
margin-bottom: 0;
}
.article--footer dd, .article--footer dt {
font-size: 120%;
}
.article--footer dd, .article--footer dt,
.nsr--ergebnis dd, .nsr--ergebnis dt {
display: inline;
}
.article--footer dd,
.nsr--ergebnis dd {
font-weight: 400;
margin-left: 0.25em;
}
.article--footer dt,
.nsr--ergebnis {
font-weight: 700;
}
dd.icon--dt--anzahl-kommentare
{
margin-left: 0.25rem;
}
/* Meta-Spalte */
@media (min-width: 768px) {
.article--meta, .article--sidebar {
padding-top: 3.75rem;
}
}
.article--meta h3,
.article--content .bu {
font-size: 0.875rem;
color: var(--bs-body-color);
line-height: 1.313em;
font-weight: 500;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* fuer ueberlange LF-Woerter auf mobil */
.article--content ul,
.article--content table {
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border: 0;
}
/* pagination */
.pagination--line {
}
.pagination--nav {
border-top: 3px solid var(--bs-primary);
margin-top: 1.75rem;
padding-top: 3.0875rem;
}
.pagination--nav ul, footer ul,
#topthemen ul,
#xsError ul {
list-style-type: none;
padding-left: 0;
}
.pagination--nav li,
#topthemen li,
#xsError li {
display: inline-block;
vertical-align: middle;
}
.pagination--nav li > a {
font-size:calc(13px + 0.44vw);
font-style: normal;
font-weight: 500;
background-color: transparent;
color: var(--bs-primary);
border: 0;
}
@media (min-width: 992px) {
.pagination--nav li > a {
font-weight: 100;
}
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
color: var(--bs-body-color);
background-color: transparent;
border: 0;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
color: #256f27;
background-color: transparent;
border: 0;
}
/* Promobox */
.promobox {
margin: 20px 0 10px 0;
padding-top: 1.5em;
min-height: 8rem;
background-color: var(--bs-primary);
color: white;
}
.promobox--content {
border-top: 3px solid var(--bs-white);
margin-top: 1.5em;
margin-bottom: 3em;
padding-bottom: 3em;
}
.promobox--btpadding--left {
padding-left: 0;
margin-right: 15px;
}
.promobox--btpadding--right {
padding-left: 0;
}
@media (min-width: 768px) {
.promobox--content {
margin-top: 3.5em;
margin-right: 15px;
}
.promobox h3.abozahl {
font-weight: 100;
float: right;
}
.promobox--btpadding--left {
margin-left: 0;
}
.promobox--btpadding--right {
margin-left: -15px;
padding-right: 0;
}
.promobox--btpadding--left.promobox--btpadding--right {
margin-left: -15px;
margin-right: 0;
padding-right: 15px;
padding-left: 15px;
}
.promobox .btn {
margin-right: -15px;
}
}
.promobox h2,
.promobox h3 {
color: inherit;
}
.promobox h2 {
font-size: 2.5rem;
font-weight: 600;
margin-top: 20px;
margin-bottom: 0;
}
.promobox h3 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 25px;
}
@media (min-width: 768px) {
.promobox h2 {
font-weight: 400;
margin-bottom: 20px;
}
.promobox h3 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 2.5rem;
}
}
.promobox--form,
.teaser--newsletter--form {
margin-top: 1rem;
margin-bottom: 1rem;
}
promobox--wrapper {
margin: 0 -15px;
}
.promobox--text {
padding: 0 0 3px 0;
border-top: 1px solid var(--bs-white);
border-bottom: 1px solid var(--bs-white);
}
@media (min-width: 768px) {
.promobox--text {
padding: 1.5em 0 0.5em 0;
}
}
.promobox--text blockquote {
border: none;
margin-bottom: 0;
}
.promobox--text blockquote:before {
content: url("data:image/svg+xml; utf8, ");
display:block;
width:22px;
height:22px;
margin-top: 1px;
position: absolute;
left: -20px;
}
/* aus extra.css */
.trennlinie-unten:after,
.trennlinie-oben:before {
content: "";
display: block;
height: 3px;
width: 100%;
background: #403e37;
}
.trennlinie-unten:after {
margin: 2em 1em 0 0;
}
.trennlinie-oben:before {
margin: 0 1em 2em 0;
}
.newsletterForm .form-group {
margin-bottom: 0.25rem;
float: left;
width: 100%;
}
.form-group label {
margin-bottom: 0;
}
.form-inline .form-control {
width: 90%;
}
.form-control:focus {
border-color: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* floating label */
.newsletterForm label {
position: relative;
display: inline-block;
width: 100%;
}
.newsletterForm label b {
position: absolute;
left: 2px;
top: -1.25rem;
font-size: 1em;
font-weight: 400;
cursor: text;
color: ffffff;
-webkit-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;}
.teaser--newsletter--form .newsletterForm label b {
font-size: 0.875rem;
}
/*
floating-labels im newsletter-formular
fuhrten dazu, dass man manchmal nicht ins feld klicken konnte
rausgenommen 30.08.2018
.newsletterForm label.empty b {
left: .8rem;
top: 2rem;
-webkit-transform: translateY(-1rem);
-ms-transform: translateY(-1rem);
transform: translateY(-1rem);
font-size: 1.25em;
background: none;
color: var(--bs-body-color);
font-weight: 400;
z-index: 1000;
} */
small > a.datenschutz,
#datenschutz-newsletter {
font-size: 14px;
}
#datenschutz-kommentare {
margin-top: 0.5em;
}
.promobox a {
color: var(--bs-white);
text-decoration: underline;
}
.teaser--newsletter {
text-align: center;
width: 240px;
height: 240px;
border: 2px solid var(--bs-white);
border-radius: 50%;
margin-bottom: 3em;
}
.teaser--newsletter span {
height: 240px;
display: inline-block;
vertical-align: middle;
}
.teaser--newsletter p {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
font-size: 2rem;
font-weight: 100;
line-height: 2.22rem;
position: relative;
top: -10px;
}
.promobox--teaser .teaser--newsletter--archiv { /* wie teaser--kommentare--reply */
border-bottom: 1px solid var(--bs-white);
padding: 1.5em 0 2px; /* siehe .promobox--text */
margin-bottom: 3em; /* siehe .promobox--content */
}
.teaser--newsletter--archiv > p { /* wie teaser--kommentare--reply */
text-transform: uppercase;
font-size: 1.25em;
font-weight: 100;
line-height: 2em;
margin: 10px 0 0 0;
}
/* #######################################################
empfehlungen START
####################################################### */
.empfehlungen {
background-color: #d2d6d3;
margin-top: 2rem;
padding-top: 3rem; /* edit 06.2019 */
padding-bottom: 3rem;
}
/* aus extra.css */
.lesensieauch {
background-color: #d2d6d3;
color: #403e37;
margin-bottom: 2em;
}
.lesensieauchleinwand {
margin-top: 1em;
background-color: #d2d6d3;
}
.lesensieauch--header h2 {
font-size: 2em;
font-weight: 700;
padding-bottom: 3rem;
}
.lesensieauch .dachzeile > a:link,
.lesensieauch .dachzeile > a:visited,
.lesensieauch h4 > a:link,
.lesensieauch h4 > a:visited {
font-weight: 600;
text-transform: none;
color: black;
}
.lesensieauch .dachzeile > a:link,
.lesensieauch .dachzeile > a:visited {
color: #707070;
}
.lesensieauch .dachzeile > a:hover,
.lesensieauch .dachzeile > a:active,
.lesensieauch h4 > a:hover,
.lesensieauch h4 > a:active {
background: transparent;
text-decoration: underline;
}
.lesensieauch h3 {
font-weight: 700;
}
.lesensieauch h4 {
margin-top: 3px;
}
/* ende extra.css*/
.article--content a:hover h2, .article--content a:focus h2 { /* zb. Empfehlungen title */
color: #255f27;
text-decoration: none;
}
body.is-withMagicUnderlines .lesensieauch .article--content a { /* zb. Empfehlungen title */
background-size: 0;
}
.article--content a h2 { /* zb. Empfehlungen title */
text-decoration: none;
}
.article--content a:link p, .article--content a:visited p {
color: var(--bs-body-color);
}
.article--content a:hover p, .article--content a:focus p { /* zb. Empfehlungen title */
color: #255f27;
text-decoration: none;
}
.lesensieauch p {
margin-top: 1rem;
}
.lesensieauch hr {
border-color: var(--bs-primary) currentcolor currentcolor;
border-image: none;
border-style: solid none none;
border-width: 1px 0 0;
margin-bottom: 0;
}
.lesensieauch_img {
width: 300px;
overflow: hidden;
font-size: 0;
}
.lesensieauch_img img {
max-width: 100%;
/*
transition: transform 0.5s ease-in-out;
*/
}
/*
.article--content:hover .lesensieauch_img img {
transform: scale(1.111);
}
*/
/* #########################################################
hover on images https://codepen.io/nxworld/pen/ZYNOBZ
########################################################## */
img {/*
width: 300px;
height: 200px;
margin: 0;
padding: 0;
*/
max-width: 100%;
background: var(--bs-white);
overflow: hidden;
}
img.block {
width: 100%;
max-width: 100%;
}
img.tower, .article--content p > img.tower, .article--content p > em > img.tower {
width: max-content;
}
.article--content p > img + br, .article--content p > em > img + br {
/* Bilder mit br danach, z.B. fuer Bildunterschrift, in Beitraegen */
/* Bsp.: https://test.lehrerfreund.de/schule/1s/mikro-lautsprecher-unterricht/3869 */
/* https://stackoverflow.com/a/31633969 */
display: block; /* makes it have a width */
content: ""; /* clears default height */
margin-top: 0; /* change this to whatever height you want it */
line-height: 0;
}
@supports selector(:has(*)) {
.article--content p > img:has(+ br), .article--content p > em > img:has(+ br) {
/* leider: https://caniuse.com/css-has */
/* https://ishadeed.com/article/css-has-parent-selector/ */
margin-bottom: 10px;
}
}
/* #######################################################
empfehlungen END
####################################################### */
/* #######################################################
kommentare START
####################################################### */
.kommentare ul {
list-style-type: none;
padding-left: 0;
font-weight: 300;
}
.kommentare li {
padding-top: 1.5rem;
}
.kommentare h2, .kommentare h3 {
font-size: 1.5em;
}
.lesensieauch h3 {
font-size: 2em;
}
.kommentare h2,
.lesensieauch--header h2,
.teaser--content--head h2 {
border-top: 3px solid var(--bs-primary);
margin-top: 0.44em;
margin-bottom: 0;
padding-top: 0.5rem; /* wie .ueberschrift */
}
.kommentare h2 {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.teaser--content--head h2 {
padding-bottom: 1em;
}
.teaser--content--head h2 + summary {
margin-top: 0;
}
.teaser--entry .dachzeile + h2 {
padding-top: 0.44em;
}
.teaser--entry h2 {
margin-top: 0;
}
.teaser--entry a:link .ueberschrift,
.teaser--entry a:visited .ueberschrift,
.teaser--entry a:link .summary,
.teaser--entry a:visited .summary {
color: var(--bs-body-color);
}
.kommentare h2 span,
.teaser--content--head h2 span {
font-weight: 300;
}
.kommentare h3,
.teaser--content--head h3 {
font-weight: 100;
}
.kommentare dl {
float: left;
}
.kommentare dl {
border-top: 1px solid var(--bs-primary);
padding-top: 1.5rem;
width: 100%;
}
.kommentare dt {
color: var(--bs-primary);
font-size: 1.5em;
line-height: 2rem;
float: left;
font-weight: 300;
}
body.is-withMagicUnderlines .kommentar--nr a:link, body.is-withMagicUnderlines .kommentar--nr a:visited {
text-decoration: none;
background-image: none;
}
.kommentar--text {
margin-left: 4rem;
font-style: italic;
}
.admin-comment .kommentar--text,
.article--content .admin-comment dl .kommentar--autor {
font-weight: 600;
}
.kommentar--text blockquote:before {
content: '';
}
.kommentar--text blockquote {
margin-top: 0;
margin-left: 1em;
margin-bottom: 1em;
width: 88%;
padding: 0;
color: inherit;
font-style: normal;
font-size: 0.9em;
line-height: 1.5em;
border: 0;
}
.kommentare fieldset {
clear: left;
margin-bottom: 4rem;
}
.kommentare fieldset h2 {
margin-top: 4rem;
}
.formular--start {
margin-top: 2rem;
}
.form-horizontal .control-label,
.control-label.input-label,
.nsr--sockel {
font-weight: 500;
margin-bottom: 0.5rem;
line-height: 1.4;
}
#comment_form.form-horizontal .control-label {
font-size: 16px;
margin-top: 1rem;
margin-left: 0.1rem;
margin-bottom: 0.25rem;
line-height: 1;
}
.kommentare .form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.trennlinie-unten:after,
.trennlinie-oben:before {
content: "";
display: block;
height: 1px;
width: 100%;
background: #dbdbdb;
}
.trennlinie-unten:after {
margin: 2em 1em 0 0;
}
.trennlinie-oben:before {
margin: 0 1em 2em 0;
}
/* #######################################################
.kommentare END
####################################################### */
/* #######################################################
Eigene Icons
####################################################### */
/* https://fvsch.com/code/svg-icons/how-to/ */
.ownicon {
/* Lets the icon inherit the text color. */
fill: currentColor;
/* Inherit the text’s size too. Also allows sizing
the icon by changing its font-size. */
width: 1em;
height: 1em;
/* Nice visual alignment for icons alongside text.
(I got a few questions about this and: with most
fonts and styles, this works better than just
vertical-align:middle. Try it and see what you
like best. */
vertical-align: -0.15em;
/* Paths and strokes that overflow the viewBox can
show in IE. If you use normalize.css, it already
sets this. */
overflow: hidden;
}
.ownicon-excl {
/* Change the width and height */
/*
font-size: 125%;
*/
/* Change the fill color */
/* Change the vertical-align if you need more precision
(sometimes needed for pixel-perfect rendering) */
vertical-align: top;
}
.pagination--nav .ownicon--chevron {
width: 3em;
height: 3em;
vertical-align: middle;
stroke:var(--bs-primary);
}
#main--tools--teaser--content .ownicon--chevron {
width: 15em;
height: 8em;
vertical-align: middle;
stroke:var(--bs-primary);
stroke-width: 2px;
/*
transform: rotate(90deg);
*/
}
.promobox .ownicon--chevron--prev {
width: 1.5em;
height: 1.5em;
vertical-align: middle;
stroke: var(--bs-white);
baseline-shift: sup;
}
.pagination--nav a:hover .ownicon--chevron {
stroke: #255f27;
}
.pagination--nav .ownicon--chevron--prev {
transform: scaleX(-1);
}
/* Zu: Teaser Line: NSR Widget */
.nsr--widget--wrapper.collapsed .ownicon--chevron--down {
stroke: var(--bs-white);
stroke-width: 2px;
transform: rotate(90deg);
transition: transform ease 0.5s;
width: 0.75em;
height: 0.75em;
}
.nsr--widget--wrapper:hover .collapsed .ownicon--chevron--down {
stroke: var(--bs-white);
}
.nsr--widget--wrapper .ownicon--chevron--down {
stroke: var(--bs-white);
transform: rotate(270deg);
transition: transform ease 0.5s;
width: 0.75em;
height: 0.75em;
}
.nsr--widget--wrapper:hover .ownicon--chevron--down {
stroke: var(--bs-white);
}
/* https://codepen.io/kanishkkunal/pen/xgoxMw */
/*
#scrolltop {
display: block;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.5s ease-in;
position:fixed;
bottom:20px;
right:20px;
background: rgba(255, 0, 255, 0.4);
}
*/
/*
.btn-primary.back-to-top {
background-color: #e6e6e6;
border-color: var(--bs-white);
}
.btn-primary.back-to-top:hover {
background-color: var(--bs-white);
}
*/
/*
.back-to-top .ownicon--chevron--top,
*/
.gototop .ownicon--chevron--top {
stroke: var(--bs-primary);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
width: 1.2rem;
height: 1.5rem;
}
.gototop .ownicon--chevron--top {
stroke: var(--bs-white);
width: 8rem;
height: 8rem;
margin-top: 2rem;
}
/* #######################################################
footer START
####################################################### */
#footer {
margin-top: 4rem;
}
.big--line {
border-top: 3px solid var(--bs-primary);
margin-right: auto;
margin-left: auto;
margin-bottom: 0.5rem;}
.back-to-top {
cursor: pointer;
position: fixed;
bottom: 30px;
right: 20px;
display:none;
}
#facebook, #twitter {
height: 2rem;
fill: var(--bs-primary);
}
#facebook {
height: 1.9rem;
position: relative;
top: -0.1rem;
margin-right: 0.33em;
}
.grid--wrapper {
display: grid;
grid-template-columns: 300px;
grid-gap: 30px;
margin-bottom: 4rem;
}
@media (min-width: 768px) {
#footer.container {
padding-right: 0;
}
.grid--wrapper {
grid-template-columns: 300px 300px;
}
}
@media (min-width: 1170px) {
.grid--wrapper {
grid-template-columns: 300px 300px 300px;
}
}
@media (min-width: 1440px) {
.grid--wrapper {
grid-template-columns: 300px 300px 300px 300px;
}
}
@media (min-width: 1700px) {
.grid--wrapper {
grid-template-columns: 300px 300px 300px 300px 300px;
}
}
#footer .box {
margin-top: 1rem;
}
#footer h4 {
border-top: 1px solid var(--bs-primary);
padding-top: 5px;
font-size: 0.7656rem;
text-transform: uppercase;
font-weight: 700;
}
#footer li {
font-size: 0.8rem;
padding-bottom: 3px;
}
.gototop {
width: 100%;
height: 285px;
background-color: var(--bs-primary);
}
a .gototop {
display: block;
}
p.console {
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
font-size: 12px;
color: white;
margin-top: 0;
background-color: black;
padding-top: 12px;
padding-bottom: 12px;
margin-bottom: 0;
}
.pulsate {
animation: pulsate .5s ease-out;
animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulsate {
0% {
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.0;
}
}
/* #######################################################
footer END
####################################################### */
#personenbox {
font-size: 1em;
line-height: 1.5em;
font-style: italic;
border-top: 1px solid var(--lf-ruler-top);
border-bottom: 3px solid var(--bs-primary);
padding: 0.5em;
margin: 1em 0 2em 0;
}
#personenbox > img,
#personenbox > p > img,
.article--content #personenbox > p > img,
#autorenbox > img {
max-width: 200px;
/*
min-width: 200px;
*/
display: block;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
@media (min-width: 768px) {
#personenbox > img,
.article--content #personenbox > p > img,
#autorenbox > img {
/*
margin-right: 25px;
*/
background-color: var(--bs-body-bg);
/*
float: left;
*/
}
}
#personenbox + .marker {
border-bottom: 0;
padding-top: 0.5em;
margin-bottom: 1rem;
}
/* ##***##***##***##***##***##***##***##***##***##***##***##*** */
/* NSR
##***##***##***##***##***##***##***##***##***##***##***##*** */
.article--meta .nav > li > a {
margin-left: 0;
}
#article--body .notenskala > legend,
#article--body .notenschluessel > legend,
#article--body .erweiterte > legend {
margin-top: 20px; /* wie bootstrap headline */
border-bottom: 0 ;
}
.notenskala,
.notenschluessel,
#idDiagramm,
.form-horizontal .radio.abstand,
.erweiterte {
margin-bottom: 2em;
}
#idDiagramm { width: 100%; height: 300px; }
.nsr .form-horizontal .radio label, .nsr .form-horizontal .checkbox label {
padding-top: 0;
margin-left: 8px;
}
.nsr .form-horizontal .control-label,
.nsr--sockel {
margin-bottom: 0;
}
/* wegen link-problem
.nsr--sockel a {
color: var(--bs-body-color);
}
*/
.nsr .form-control {
height: 36px;
font-size: 1rem;
}
.erweiterte .radio.abstand {
margin-bottom: 1em;
}
.abstand--mobil {
margin-bottom: 10px;
}
.szr .control-label.input-label {
margin-top: 1rem;
}
.article--content .szr--btn,
.article--content .nsr--btn--gewaehr { /* edit 02.2019 */
margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
.abstand--mobil {
margin-bottom: 0;
}
.nsr .form-horizontal .control-label,
.nsr .nsr--sockel {
text-align: left;
padding-top: 10px;
}
}
@media (min-width: 992px) {
.nsr .row {
padding-top: 10px;
}
.beschreibungZumRundungsmodus--text {
margin: 1em 0;
}
.szr .control-label.input-label {
margin-top: 0;
}
}
@media screen { /* NSR Beschriftung 'Punkte und …' vertikal zentriert */
/* https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox/33049392#33049392 */
.abstand--mobil {
display: flex;
justify-content: left;
align-items: center;
height: 36px;
}
}
.links {
text-align: left;
}
.nsr--infozeile {
font-weight: 300;
margin-top: 10px; /* wie bootstrap standard h4 - neu */
}
body.is-withMagicUnderlines .article--content .nsr--infozeile a {
background-image: none;
}
/* NSR-Ergebnistabellen START */
table[class^="tabAbschnitt"], table[class*=" tabAbschnitt"] {
float: left;
max-width: 135px;
margin-right: 15px;
}
@media (min-width: 768px) {
table[class^="tabAbschnitt"], table[class*=" tabAbschnitt"] {
float: left;
max-width: 150px;
margin-right: 30px;
}
}
table[class^="tabAbschnitt"] th, table[class*=" tabAbschnitt"] th, table[class^="tabAbschnitt"] td, table[class*=" tabAbschnitt"] td, .tabZusammenfassung td, .tabSummary td { /* neu 09.2022 */
border-bottom: 1px solid #000000;
}
table[class^="tabAbschnitt"]:last-of-type, table[class*=" tabAbschnitt"]:last-of-type {
margin-right: 0;
}
.note {
text-align: right;
}
.ergebnis h4 {
display: block;
float: none;
line-height: 1.3;
}
.nsr--ergebnis dd,
.nsr--ergebnis dt {
font-size: 16.8px;
}
.article--content table[class^="tabAbschnitt"],
.article--content table[class*="tabAbschnitt"] {
margin-top: 0;
}
/* NSR-Ergebnistabellen ENDE */
/* Gruppenrechner */
/* siehe Inline CSS gruppenrechner.group/gr_formular.html
/* Gruppenrechner ENDE */
/* HOME Layout ####################################################################### */
#main--content--features--1,
#main--content--features--2 {
background-color: var(--bs-primary);
color: var(--bs-white);
min-height: 400px;
}
#main--content--features--2 {
margin-top: 2em;
margin-bottom: 2em;
}
@media (min-width: 768px) {
#main--content--features--2 {
margin-bottom: 0;
}
}
#main--content--features a,
#main--content--features h4 {
color: var(--bs-white);
}
#main--content--features--1 figcaption,
#main--content--features--2 figcaption,
.teaser--entry figcaption {
background-color: var(--bs-primary);
text-align: right;
margin-right: 3px;
font-size: .75rem;
color: var(--bs-grey-200);
}
#main--content--features--1 figcaption a,
#main--content--features--2 figcaption a,
.teaser--entry figcaption a {
color: var(--bs-white);
font-weight: 300;
}
#main--tools--teaser::before {
content: "";
display: block;
height: 3px;
width: 100%;
border-top: 1px solid var(--bs-primary);
}
@media only screen and (max-height: 575.98px) and (orientation: landscape) {
.skyscraper--smartphone--landscape {
display: none !important;
}
}
.teaser--chevron {
padding-bottom: 0.5rem ;
}
.teaser--chevron .col-xs-12::after {
content: "";
display: block;
height: 124px;
width: 100%;
}
.main--content--features--text {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.main--content--features--text {
padding-top: 15px;
}
}
#main--content--features .ueberschrift {
color: var(--bs-white);
border-top: 0;
}
.main--content--features--datum {
font-weight: 100;
margin-top: 2em;
margin-bottom: 1em;
font-size: 150%;
}
#unterbrecher {
background-color: var(--bs-grey-200);
padding: 1em 0 2em 0;
margin-top: 2em;
}
@media (min-width: 768px) {
#unterbrecher {
margin: 6em 0;
}
}
.unterbrecher--multiple {
background-color: var(--bs-grey-200);
margin: 2em 0;
padding: 0 0 2em 0;
}
/* billboard + mobilerectangle ads */
.mobilerectangle {
padding-bottom: 1em;
}
/*
@media (min-width: 350px) {
#unterbrecher--slim .anzeige,
#unterbrecher--slim div[id*='div-gpt'] {
margin-left: 15px;
}
}
*/
@media (min-width: 1022px) {
#unterbrecher--slim {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1120px) {
#unterbrecher--slim {
background-color: var(--bs-grey-200);
padding: 1em 0 2em 0;
}
}
/* billboard + mobilerectangle ads END */
/* https://github.com/verlok/lazyload#tips--tricks */
/* Prevents img without src to appear */
img:not([src]) {
visibility: hidden;
}
/* google in-article ads */
.google-auto-placed.ap_container {
margin-bottom: 2rem;
}
/* youtube embeds */
#main--content--features .embed-responsive {
margin-left: -15px;
margin-right: -15px;
}
/* mobile ads via ad manager 17.8.18 */
/*
@media (max-width: 335px) {
.hidden-sm.hidden-md.hidden-lg,
aside > .visible-xs-block {
margin-left: -15px;
}
aside > .visible-xs-block > .hidden-print > .anzeige {
margin-left: 15px;
}
}
*/
.hidden-sm.hidden-md.hidden-lg .anzeige { /* wo verwendet? Ist noch Bootstrap 3 */
margin-left: 15px;
}
.sidebar--teaser {
margin-top: 2em;
}
.sidebar--teaser a .circle:hover,
.sidebar--teaser a .circle:active {
fill: var(--bs-primary);
}
.sidebar--teaser svg:hover circle {
stroke: var(--bs-primary) !important;
}
.newsletter__box {
padding-top: 90px;
margin-top: 90px;
}
.newsletter__box.no_margin {
margin-top: 0;
}
.newsletter__image {
position: absolute;
display: flex;
top: 190px;
padding: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
background: 0;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.newsletter__image {
top: 265px;
}
}
.newsletter__box--text .form-control {
height: 44px;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
/* ########################################### */
/* app-teaser nsr-seiten */
/* ########################################### */
.phone-app {
background: linear-gradient(90deg, #b4b9bc, #fff6, #b4b9bc);
padding: 30px 0 0 0;
}
.phone-app img {
background: transparent;
}
.zum-gluck h2 {
font-weight: 700;
font-size: 44px;
line-height: 46px;
}
.zum-gluck h2 span {
color: #3f3e3e;
}
.notens-title {
position: relative;
}
.notens-title figure {
position: absolute;
right: 0;
top: 88px;
}
.zum-gluck p {
font-size: 24px;
line-height: 30px;
color: #3f3e3e;
font-weight: 600;
}
.de-facto h2 {
font-size: 20px;
line-height: 24px;
font-weight: 400;
}
.de-facto ul {
list-style: none;
padding: 0;
}
.de-facto ul li {
font-size: 15px;
line-height: 19px;
color: #3f3e3e;
font-weight: 600;
margin-bottom: 5px;
}
.phone-img figure {
padding: 0;
}
.app-store {
width: 220px;
}
.app-store h2 {
font-size: 26px;
line-height: 30px;
}
@media (min-width: 768px) {
de-facto ul li {
font-size: 18px;
line-height: 24px;
}
}
.animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*=== Optional Delays, change values here ===*/
.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.two {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.three {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 33%, 10%);
transform: translate3d(0, 33%, 10%);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 33%, 10%);
transform: translate3d(0, 33%, 10%);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/*=== FADE IN DOWN ===*/
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@media(min-width: 575px) and (max-width: 991px) {
.zum-gluck h2 {
font-size: 74px;
line-height: 74px;
}
.zum-gluck p {
font-size: 38px;
line-height: 40px;
}
.de-facto ul li {
font-size: 32px;
line-height: 32px;
}
.app-store h2 {
font-size: 38px;
line-height: 40px;
}
.notens-title {
display: inline-block;
}
.notens-title figure {
top: 70px;
right: 25px;
}
}
@media(max-width: 991px) {
.phone-app {
padding: 50px 0;
}
}
@media(max-width: 575px) {
.zum-gluck h2 {
font-size: 34px;
line-height: 34px;
}
.notens-title figure {
top: 29px;
}
}
/* ########################################### */
/* /app-teaser nsr-seiten */
/* ########################################### */
/* ############## */
/* PRINT STYLES! aus extra.css */
/* ############## */
@page {
size: 21cm 29.7cm; /*A4*/
margin: 1cm; /*webkit says no*/ /* EDIT 04-2015 */
margin-bottom: 2.25cm; /* EDIT 04-2015 */
}
@media print {
html{
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
page-break-inside:auto;
}
body {
margin: 0;
padding: 0 !important;
font-family: sans-serif !important;
width: 100% !important;
background: var(--bs-white);
}
body, .container, .article--content, .article--content h2, .article--content h3, #personenbox p { /* EDIT 04-2015 */
max-width: auto !important;
font-family: Arial, Times New Roman, sans-serif !important;
font-size: 9pt !important;
}
/* symplr */
body: first-child {
display: none !important;
}
.article--content, .article--content h2, .article--content h3 {
font-size: 14pt !important;
}
.container { /* Safari 8 */
width: auto !important;
}
.container .summary { /* EDIT 04-2015 */
font-style: italic !important;
font-weight: 700 !important;
margin-bottom: 0.5cm !important;
}
#article--body:before {
display: block !important;
width: 5cm !important;
margin-left: 0.4cm !important; /* gut in Chrome */
margin-left: 0 !important; /* gut in Firefox */
content: url(../images/_logo/LF-2018-sw-auf-weiss-361x187.png) !important;
content: url( ../images/_logo/LF-Logo-2018-blackwhite.svg) !important; /* Chrome zeigt es nicht */
/* mit Preload kombinieren für Chrome */
}
#article--body { /* EDIT 04-2015 */
margin-left: 15px !important;
}
body:after { /* tut nicht in Firefox */
position: absolute !important;
left: 0.8cm !important;
background-color: #ffffff;
content: "www.lehrerfreund.de – mit der Notenschlüssel-App (iOS) bzw. Notenschlüsselrechner-App (Android) hätten Sie umweltfreundlich ein PDF erzeugt" !important;
}
.article--content, #text, #kopf, .beitrag-liste p, .beitrag-einzel p, .beitrag-einzel dl, .container dl, dt, dd, dt > p, dd > p, .beitrag-liste ul > li, .beitrag-einzel ul > li, .beitrag-einzel ul > li, .beitrag-einzel ol > li, footer .beitrag-meta { /* EDIT 04-2015 */
width: 100% !important;
font-size: 11pt !important;
line-height: 1.33 !important;
color: black !important;
}
.ueberschrift,
.article--content .marker, #article--body h2, #article--body .article--content h3, #article--body .article--content h4, #article--body .article--content h5, #article--body .article--content legend, #article--body .notenskala > legend, #article--body .notenschluessel > legend, #article--body .erweiterte > legend, .article--topline, #personenbox {
border: none;
}
.article--content h4.dachzeile {color: #000000;}
.article--content h1.ueberschrift { padding: 0; font-size: 12pt !important; color: #000000; }
.article--content .ueberschrift em {
display: inline;
color: #000000;
font-weight: normal;
}
.article--content h1, .article--content h2, .article--content h3 {
font-size: 15pt;
}
.article--content table.tabZusammenfassung > tbody > tr > td {
padding-left: 0;
}
.article--content .emphasis-box {
padding-left: 0;
padding-right: 0;
border-top: 1px solid var(--lf-ruler-top) !important;
border-bottom: 1px solid var(--lf-ruler-bottom) !important;
}
.beitrag-einzel h4 { /* EDIT 04-2015 */
margin-top: 0 !important;
}
.article--content p { /* EDIT 04-2018 */
margin-bottom: 3px !important;
}
#personenbox img, /* EDIT 04-2015 */
#cookiescript_injected { display: none !important; }
img, .article--content img.block {
max-width: 50% !important;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
font-size: 9pt !important;
line-height: 1.2 !important;
}
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
padding: 2px !important;
}
table[class^="tabAbschnitt"], table[class*=" tabAbschnitt"],
.tabAbschnitt1, .tabAbschnitt2, .tabAbschnitt3, .tabAbschnitt4, tabAbschnitt5, .tabAbschnitt6 {
float: left !important;
max-width: 125px !important;
margin-right: 15px !important;
}
table[class^="tabAbschnitt"]:last-of-type, table[class*=" tabAbschnitt"]:last-of-type {
margin-right: 0 !important;
}
#cookieChoiceInfo {
display: none !important;
}
/* 2018 */
.article--content {
margin-top: 0;
}
.article--content .marker {
margin-bottom: 0;
}
#article--body iframe { /* youtube video */
display: none;
}
blockquote:before, .bsp:before {
content: '';
}
.gruppenrechner--ergebnis .col-md-6 {
float: left;
width: 50%;
}
.google-auto-placed {
display: none !important;
}
.spalte {
width: 100% !important;
display: block !important;
}
}
.article--content .captcha-image img{
width: 150px !important;
display: inline;
padding: 0;
margin: 0;
}
/* ############## */
/* /PRINT STYLES! */
/* ############## */
/* https://www.lehrerfreund.de/schule/1s/geschenke-lehrer/2519 */
.article--content dd iframe { /* amazon-iframes */
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#CybotCookiebotDialog {
border: 8px solid var(--bs-body-bg) !important;
font-family: "proxima-nova", sans-serif !important;
}
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline.CybotCookiebotDialogBodyButton,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection.CybotCookiebotDialogBodyButton {
background-color: var(--bs-body-bg) !important;
border-color: #333333 !important;
}
#CybotCookiebotDialogBodyContentTextShowIABVendors,
#CybotCookiebotDialogBodyContentTextToggleDetails,
#CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink {
color: inherit !important;
}
#CybotCookiebotDialogBodyContentTextToggleDetails,
#CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink {
text-decoration: underline !important;
}
/* ############## */
/* Bildvergroesserung Overlay */
/* ############## */
/* 03.10.2023 - Klick auf ein Bild im Artikel öffnet Lightboxlink. Das hier ist der Overlay-Code */
.lightbox-wrapper {
position: relative;
display: inline-block;
}
.lightbox-wrapper::after {
content: "🔗Klick für Großbild"; /* Link-Symbol */
font-size: 1em;
position: absolute;
bottom: 10px;
right: 10px;
color: white;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
padding: 5px;
border-radius: 4px;
pointer-events: none; /* damit das Overlay nicht klickbar ist */
}