.elementor-kit-5{--e-global-color-primary:#2F52A0;--e-global-color-secondary:#132E69;--e-global-color-text:#525250;--e-global-color-accent:#EC6726;--e-global-color-schriftdunkel:#0B0B0B;--e-global-color-weiss:#FFFFFF;--e-global-color-flaechehell:#F5F4F1;--e-global-color-liniehell:#EDECEB;--e-global-color-linie:#D8D8D6;--e-global-color-grauhell:#BEBEBC;--e-global-color-grau:#70706E;--e-global-color-graudunkel:#2E2E2C;--e-global-color-orangedunkel:#D45A1E;--e-global-color-blauhell:#1A3576;--e-global-color-weisshalb:rgba(255,255,255,0.5);--e-global-color-weissleicht:rgba(255,255,255,0.08);--e-global-color-weissmild:rgba(255,255,255,0.72);--e-global-color-weissschwach:rgba(255,255,255,0.4);--e-global-color-weissstark:rgba(255,255,255,0.8);--e-global-color-blauleicht:rgba(47,82,160,0.09);--e-global-typography-primary-font-family:"Urbanist";--e-global-typography-primary-font-size:clamp(2.25rem, 4.4vw, 3.5rem);--e-global-typography-primary-font-weight:300;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-line-height:1.06em;--e-global-typography-primary-letter-spacing:-0.015em;--e-global-typography-secondary-font-family:"Urbanist";--e-global-typography-secondary-font-size:clamp(1.75rem, 3.4vw, 2.75rem);--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-line-height:1.12em;--e-global-typography-secondary-letter-spacing:-0.01em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.75em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:0.6875rem;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.12em;--e-global-typography-ueberschriftm-font-family:"Urbanist";--e-global-typography-ueberschriftm-font-size:clamp(1.25rem, 2vw, 1.5rem);--e-global-typography-ueberschriftm-font-weight:300;--e-global-typography-ueberschriftm-text-transform:none;--e-global-typography-ueberschriftm-line-height:1.2em;--e-global-typography-ueberschriftm-letter-spacing:0em;--e-global-typography-unterzeile-font-family:"Urbanist";--e-global-typography-unterzeile-font-size:clamp(1.125rem, 2vw, 1.5rem);--e-global-typography-unterzeile-font-weight:200;--e-global-typography-unterzeile-text-transform:none;--e-global-typography-unterzeile-line-height:1.3em;--e-global-typography-unterzeile-letter-spacing:-0.01em;--e-global-typography-ueberschrifts-font-family:"Urbanist";--e-global-typography-ueberschrifts-font-size:1.25rem;--e-global-typography-ueberschrifts-font-weight:300;--e-global-typography-ueberschrifts-text-transform:none;--e-global-typography-ueberschrifts-line-height:1.25em;--e-global-typography-ueberschrifts-letter-spacing:0em;--e-global-typography-lead-font-family:"Inter";--e-global-typography-lead-font-size:clamp(1rem, 1.8vw, 1.125rem);--e-global-typography-lead-font-weight:400;--e-global-typography-lead-text-transform:none;--e-global-typography-lead-line-height:1.75em;--e-global-typography-lead-letter-spacing:0em;--e-global-typography-zitat-font-family:"Urbanist";--e-global-typography-zitat-font-size:clamp(1rem, 1.35vw, 1.125rem);--e-global-typography-zitat-font-weight:300;--e-global-typography-zitat-text-transform:none;--e-global-typography-zitat-line-height:1.7em;--e-global-typography-zitat-letter-spacing:0em;--e-global-typography-namezeile-font-family:"Inter";--e-global-typography-namezeile-font-size:0.8125rem;--e-global-typography-namezeile-font-weight:600;--e-global-typography-namezeile-text-transform:none;--e-global-typography-namezeile-line-height:1.4em;--e-global-typography-namezeile-letter-spacing:0em;--e-global-typography-zahlgross-font-family:"Urbanist";--e-global-typography-zahlgross-font-size:clamp(2.75rem, 6vw, 5rem);--e-global-typography-zahlgross-font-weight:100;--e-global-typography-zahlgross-text-transform:none;--e-global-typography-zahlgross-line-height:1em;--e-global-typography-zahlgross-letter-spacing:-0.06em;--e-global-typography-zitatzeichen-font-family:"Urbanist";--e-global-typography-zitatzeichen-font-size:5rem;--e-global-typography-zitatzeichen-font-weight:300;--e-global-typography-zitatzeichen-text-transform:none;--e-global-typography-zitatzeichen-line-height:0.7em;--e-global-typography-zitatzeichen-letter-spacing:0em;--e-global-typography-seotitel-font-family:"Urbanist";--e-global-typography-seotitel-font-size:clamp(1.5rem, 2.8vw, 2.125rem);--e-global-typography-seotitel-font-weight:300;--e-global-typography-seotitel-text-transform:none;--e-global-typography-seotitel-line-height:1.2em;--e-global-typography-seotitel-letter-spacing:-0.02em;--e-global-typography-anker-font-family:"Inter";--e-global-typography-anker-font-size:clamp(0.95rem, 1.3vw, 1.0625rem);--e-global-typography-anker-font-weight:600;--e-global-typography-anker-text-transform:none;--e-global-typography-anker-line-height:1.7em;--e-global-typography-anker-letter-spacing:0em;--e-global-typography-kleinlang-font-family:"Inter";--e-global-typography-kleinlang-font-size:0.8125rem;--e-global-typography-kleinlang-font-weight:400;--e-global-typography-kleinlang-text-transform:none;--e-global-typography-kleinlang-line-height:1.9em;--e-global-typography-kleinlang-letter-spacing:0em;--e-global-typography-buttongross-font-family:"Inter";--e-global-typography-buttongross-font-size:0.8125rem;--e-global-typography-buttongross-font-weight:600;--e-global-typography-buttongross-text-transform:uppercase;--e-global-typography-buttongross-line-height:1em;--e-global-typography-buttongross-letter-spacing:0.12em;--e-global-typography-mini-font-family:"Inter";--e-global-typography-mini-font-size:0.6875rem;--e-global-typography-mini-font-weight:400;--e-global-typography-mini-text-transform:none;--e-global-typography-mini-line-height:1.65em;--e-global-typography-mini-letter-spacing:0em;--e-global-typography-kopfzeile-font-family:"Inter";--e-global-typography-kopfzeile-font-size:1.25rem;--e-global-typography-kopfzeile-font-weight:600;--e-global-typography-kopfzeile-text-transform:none;--e-global-typography-kopfzeile-line-height:1.3em;--e-global-typography-kopfzeile-letter-spacing:0em;--e-global-typography-faqfrage-font-family:"Inter";--e-global-typography-faqfrage-font-size:1rem;--e-global-typography-faqfrage-font-weight:500;--e-global-typography-faqfrage-text-transform:none;--e-global-typography-faqfrage-line-height:1.5em;--e-global-typography-faqfrage-letter-spacing:0em;--e-global-typography-klein-font-family:"Inter";--e-global-typography-klein-font-size:0.8125rem;--e-global-typography-klein-font-weight:400;--e-global-typography-klein-text-transform:none;--e-global-typography-klein-line-height:1.7em;--e-global-typography-klein-letter-spacing:0em;--e-global-typography-label-font-family:"Inter";--e-global-typography-label-font-size:0.6875rem;--e-global-typography-label-font-weight:500;--e-global-typography-label-text-transform:uppercase;--e-global-typography-label-line-height:1.4em;--e-global-typography-label-letter-spacing:0.15em;--e-global-typography-kicker-font-family:"Inter";--e-global-typography-kicker-font-size:0.6875rem;--e-global-typography-kicker-font-weight:600;--e-global-typography-kicker-text-transform:uppercase;--e-global-typography-kicker-line-height:1.4em;--e-global-typography-kicker-letter-spacing:0.16em;--e-global-typography-navigation-font-family:"Inter";--e-global-typography-navigation-font-size:0.6875rem;--e-global-typography-navigation-font-weight:500;--e-global-typography-navigation-text-transform:uppercase;--e-global-typography-navigation-line-height:1.4em;--e-global-typography-navigation-letter-spacing:0.08em;--e-global-typography-zahlmittel-font-family:"Urbanist";--e-global-typography-zahlmittel-font-size:clamp(2.5rem, 5vw, 3.75rem);--e-global-typography-zahlmittel-font-weight:100;--e-global-typography-zahlmittel-text-transform:none;--e-global-typography-zahlmittel-line-height:1em;--e-global-typography-zahlmittel-letter-spacing:-0.04em;--e-global-typography-wertzahl-font-family:"Urbanist";--e-global-typography-wertzahl-font-size:2.5rem;--e-global-typography-wertzahl-font-weight:300;--e-global-typography-wertzahl-text-transform:none;--e-global-typography-wertzahl-line-height:1em;--e-global-typography-wertzahl-letter-spacing:-0.02em;--e-global-typography-ueberschriftxs-font-family:"Urbanist";--e-global-typography-ueberschriftxs-font-size:1.125rem;--e-global-typography-ueberschriftxs-font-weight:300;--e-global-typography-ueberschriftxs-text-transform:none;--e-global-typography-ueberschriftxs-line-height:1.2em;--e-global-typography-ueberschriftxs-letter-spacing:0em;--e-global-typography-kartentitel-font-family:"Urbanist";--e-global-typography-kartentitel-font-size:1rem;--e-global-typography-kartentitel-font-weight:300;--e-global-typography-kartentitel-text-transform:none;--e-global-typography-kartentitel-line-height:1.3em;--e-global-typography-kartentitel-letter-spacing:0em;--e-global-typography-reiter-font-family:"Inter";--e-global-typography-reiter-font-size:0.8125rem;--e-global-typography-reiter-font-weight:500;--e-global-typography-reiter-text-transform:none;--e-global-typography-reiter-line-height:1.4em;--e-global-typography-reiter-letter-spacing:0em;--e-global-typography-bandzahl-font-family:"Urbanist";--e-global-typography-bandzahl-font-size:clamp(1.75rem, 3vw, 2.25rem);--e-global-typography-bandzahl-font-weight:300;--e-global-typography-bandzahl-text-transform:none;--e-global-typography-bandzahl-line-height:1em;--e-global-typography-bandzahl-letter-spacing:-0.02em;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-weiss );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:22px 22px 22px 22px;padding:14px 32px 14px 32px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-orangedunkel );color:var( --e-global-color-weiss );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-orangedunkel );border-radius:22px 22px 22px 22px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 p{margin-block-end:1rem;}.elementor-kit-5 a{color:var( --e-global-color-primary );}.elementor-kit-5 a:hover{color:var( --e-global-color-accent );}.elementor-kit-5 h1{color:var( --e-global-color-schriftdunkel );font-family:var( --e-global-typography-primary-font-family ), sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-5 h2{color:var( --e-global-color-schriftdunkel );font-family:var( --e-global-typography-secondary-font-family ), sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-5 h3{color:var( --e-global-color-schriftdunkel );font-family:var( --e-global-typography-ueberschriftm-font-family ), sans-serif;font-size:var( --e-global-typography-ueberschriftm-font-size );font-weight:var( --e-global-typography-ueberschriftm-font-weight );text-transform:var( --e-global-typography-ueberschriftm-text-transform );line-height:var( --e-global-typography-ueberschriftm-line-height );letter-spacing:var( --e-global-typography-ueberschriftm-letter-spacing );}.elementor-kit-5 h4{color:var( --e-global-color-schriftdunkel );font-family:var( --e-global-typography-ueberschrifts-font-family ), sans-serif;font-size:var( --e-global-typography-ueberschrifts-font-size );font-weight:var( --e-global-typography-ueberschrifts-font-weight );text-transform:var( --e-global-typography-ueberschrifts-text-transform );line-height:var( --e-global-typography-ueberschrifts-line-height );letter-spacing:var( --e-global-typography-ueberschrifts-letter-spacing );}.elementor-kit-5 h5{color:var( --e-global-color-schriftdunkel );font-family:var( --e-global-typography-lead-font-family ), sans-serif;font-size:var( --e-global-typography-lead-font-size );font-weight:var( --e-global-typography-lead-font-weight );text-transform:var( --e-global-typography-lead-text-transform );line-height:var( --e-global-typography-lead-line-height );letter-spacing:var( --e-global-typography-lead-letter-spacing );}.elementor-kit-5 h6{color:var( --e-global-color-schriftdunkel );font-family:var( --e-global-typography-kicker-font-family ), sans-serif;font-size:var( --e-global-typography-kicker-font-size );font-weight:var( --e-global-typography-kicker-font-weight );text-transform:var( --e-global-typography-kicker-text-transform );line-height:var( --e-global-typography-kicker-line-height );letter-spacing:var( --e-global-typography-kicker-letter-spacing );}.elementor-kit-5 label{color:var( --e-global-color-text );font-family:var( --e-global-typography-label-font-family ), sans-serif;font-size:var( --e-global-typography-label-font-size );font-weight:var( --e-global-typography-label-font-weight );text-transform:var( --e-global-typography-label-text-transform );line-height:var( --e-global-typography-label-line-height );letter-spacing:var( --e-global-typography-label-letter-spacing );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:var( --e-global-typography-klein-font-family ), sans-serif;font-size:var( --e-global-typography-klein-font-size );font-weight:var( --e-global-typography-klein-font-weight );text-transform:var( --e-global-typography-klein-text-transform );line-height:var( --e-global-typography-klein-line-height );letter-spacing:var( --e-global-typography-klein-letter-spacing );color:var( --e-global-color-schriftdunkel );background-color:var( --e-global-color-weiss );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-linie );border-radius:4px 4px 4px 4px;transition:150ms;padding:13px 16px 13px 16px;}.elementor-kit-5 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea:focus,.elementor-kit-5 .elementor-field-textual:focus{color:var( --e-global-color-schriftdunkel );background-color:var( --e-global-color-weiss );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:4px 4px 4px 4px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1224px;}.e-con{--container-max-width:1224px;--container-default-padding-top:0;--container-default-padding-right:clamp(1.5rem, 5vw, 3rem);--container-default-padding-bottom:0;--container-default-padding-left:clamp(1.5rem, 5vw, 3rem);}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:960px){.elementor-kit-5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-5 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-5 h3{font-size:var( --e-global-typography-ueberschriftm-font-size );line-height:var( --e-global-typography-ueberschriftm-line-height );letter-spacing:var( --e-global-typography-ueberschriftm-letter-spacing );}.elementor-kit-5 h4{font-size:var( --e-global-typography-ueberschrifts-font-size );line-height:var( --e-global-typography-ueberschrifts-line-height );letter-spacing:var( --e-global-typography-ueberschrifts-letter-spacing );}.elementor-kit-5 h5{font-size:var( --e-global-typography-lead-font-size );line-height:var( --e-global-typography-lead-line-height );letter-spacing:var( --e-global-typography-lead-letter-spacing );}.elementor-kit-5 h6{font-size:var( --e-global-typography-kicker-font-size );line-height:var( --e-global-typography-kicker-line-height );letter-spacing:var( --e-global-typography-kicker-letter-spacing );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-5 label{font-size:var( --e-global-typography-label-font-size );line-height:var( --e-global-typography-label-line-height );letter-spacing:var( --e-global-typography-label-letter-spacing );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var( --e-global-typography-klein-font-size );line-height:var( --e-global-typography-klein-line-height );letter-spacing:var( --e-global-typography-klein-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-wertzahl-font-size:2rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-5 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-5 h3{font-size:var( --e-global-typography-ueberschriftm-font-size );line-height:var( --e-global-typography-ueberschriftm-line-height );letter-spacing:var( --e-global-typography-ueberschriftm-letter-spacing );}.elementor-kit-5 h4{font-size:var( --e-global-typography-ueberschrifts-font-size );line-height:var( --e-global-typography-ueberschrifts-line-height );letter-spacing:var( --e-global-typography-ueberschrifts-letter-spacing );}.elementor-kit-5 h5{font-size:var( --e-global-typography-lead-font-size );line-height:var( --e-global-typography-lead-line-height );letter-spacing:var( --e-global-typography-lead-letter-spacing );}.elementor-kit-5 h6{font-size:var( --e-global-typography-kicker-font-size );line-height:var( --e-global-typography-kicker-line-height );letter-spacing:var( --e-global-typography-kicker-letter-spacing );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-5 label{font-size:var( --e-global-typography-label-font-size );line-height:var( --e-global-typography-label-line-height );letter-spacing:var( --e-global-typography-label-letter-spacing );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var( --e-global-typography-klein-font-size );line-height:var( --e-global-typography-klein-line-height );letter-spacing:var( --e-global-typography-klein-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================================== TheraPlus - Hilfsklassen Das Abstands-Klassenset (.section-xxl bis .section-xxs, .section-narrow, .zeile-halb) steht bewusst NICHT hier, sondern im Custom-Code-Snippet "CSS -- Section Abstaende". Ein Rhythmus, der an zwei Stellen gepflegt wird, ist kein System. ========================================================================== */ /* Farbig hervorgehobener Textteil innerhalb einer Ueberschrift. Als Klasse statt als Inline-Farbe, damit die Farbe an den globalen Wert gebunden bleibt und einer spaeteren Aenderung folgt. */ .akzent { color: var(--e-global-color-accent); } .blau { color: var(--e-global-color-primary); } .weiss { color: var(--e-global-color-weiss); } /* Wiederkehrende Flaechen und Linien des Entwurfs. */ .flaeche-hell { background-color: var(--e-global-color-flaechehell); } .flaeche-blau { background-color: var(--e-global-color-secondary); } .linie-oben { border-top: 1px solid var(--e-global-color-liniehell); } /* Ein Bedienelement, das auf schmalen Schirmen zum reinen Symbol wird, darf seine Beschriftung nicht verlieren, sondern nur optisch verstecken. display: none nimmt den Text aus dem Zugaenglichkeitsbaum, der Link heisst dann nur noch "Link". Das umgebende Element braucht position: relative, sonst wandert der versteckte Text irgendwohin. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Sternebewertung ------------------------------------------------------ Ein Verlauf, der genau am Bruchteil der Bewertung umschlaegt, durch eine Sternmaske gesehen. Halbe Sterne ohne zweite Grafik. Der Wert kommt als Inline-Variable am Element: Steht hier statt im Widget-CSS, weil das Kit auf jeder Seite laedt. */ .sterne { --stern-wert: 5; --stern-an: #f5a623; --stern-aus: var(--e-global-color-linie); display: inline-block; vertical-align: -0.125em; width: 5em; height: 1em; background: linear-gradient(90deg, var(--stern-an) 0 calc(var(--stern-wert) / 5 * 100%), var(--stern-aus) calc(var(--stern-wert) / 5 * 100%) 100%); -webkit-mask: url("data:image/svg+xml,") left center / 1em 1em repeat-x; mask: url("data:image/svg+xml,") left center / 1em 1em repeat-x; } /* --- Kicker mit kurzer Linie davor --------------------------------------- */ .label-linie .elementor-heading-title { display: flex; align-items: center; gap: 1rem; } .label-linie .elementor-heading-title::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--e-global-color-accent); flex-shrink: 0; } /* --- Zitat --------------------------------------------------------------- */ .zitat-block { border-left: 1px solid var(--e-global-color-linie); padding-left: 1.5rem; } .zitat-autor { border-top: 1px solid var(--e-global-color-linie); padding-top: 1.25rem; } /* --- Nummernkreis (Schritte) --------------------------------------------- Nur die Form. Schrift und Farbe kommen ueber die Bindungen des Widgets. */ .zahlkreis .elementor-heading-title { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--e-global-color-primary); } /* --- Wertezeile: Nummer, Titel, Text --------------------------------------- Titel und Text stehen in EINEM Absatz, der Titel als Block. Zwei Absaetze erbten den Absatzabstand von 16px; im Entwurf sind es 4px. Der Titel ist eine Stufe groesser als der Text (16 zu 13px) und dunkel. */ .wert-zeile { border-bottom: 1px solid var(--e-global-color-liniehell); } .wert-zeile p { margin: 0; } .wert-zeile strong { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 600; line-height: 1.65; color: var(--e-global-color-schriftdunkel); } /* --- Bildergalerie: erstes Bild hoch, Beschriftung beim Ueberfahren ----- Feste Bildhoehen stehen hier und nicht am Widget: Das erste Bild muss die Hoehe zweier Zeilen fuellen, und eine Regel am Widget wuerde die Ausnahme fuer das erste Kind ueberstimmen. */ .galerie-hoch > .e-con-inner > :first-child, .galerie-hoch > :first-child { grid-row: span 2; } .galerie-kachel, .galerie-kachel .elementor-widget-container, .galerie-kachel figure { height: 100%; } .galerie-kachel figure { position: relative; margin: 0; overflow: hidden; border-radius: 8px; } .galerie-kachel img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform 700ms ease; } .galerie-hoch .galerie-kachel:first-child img { height: 100%; } .galerie-kachel figcaption { position: absolute; inset: 0; margin: 0; display: flex; align-items: flex-end; padding: 1.25rem; background: rgba(11, 11, 11, 0.5); color: var(--e-global-color-weiss); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; opacity: 0; transition: opacity 250ms; } @media (hover: hover) { .galerie-kachel:hover figcaption { opacity: 1; } .galerie-kachel:hover img { transform: scale(1.03); } } /* Auf Touch gibt es kein Ueberfahren: Beschriftung dauerhaft, als sanfter Verlauf statt Vollflaeche. */ @media (hover: none) { .galerie-kachel figcaption { opacity: 1; background: linear-gradient(transparent 40%, rgba(11, 11, 11, 0.6)); } } @media (max-width: 767px) { .galerie-hoch > .e-con-inner > :first-child, .galerie-hoch > :first-child { grid-row: auto; } .galerie-kachel img, .galerie-hoch .galerie-kachel:first-child img { height: 220px; } } /* --- Vertrauensband ------------------------------------------------------- Auf dem Desktop eine Zeile ueber die volle Breite, die Eintraege gleichmaessig verteilt, mit Trennstrichen. Auf dem Handy stehen sie untereinander; die Striche haetten dort nichts mehr zu trennen. */ @media (min-width: 768px) { /* Gleich breite Spalten statt space-between: So steht jeder Trennstrich genau an der Spaltengrenze. Bei space-between klebte er am Text des linken Eintrags, weil Elementor ihn im halben Randabstand positioniert. */ .merkmale .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { flex: 1 1 0; min-width: 0; } .merkmale .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:first-child { margin-left: 0; } .merkmale .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:last-child { margin-right: 0; } .merkmale .elementor-icon-list-item:last-child::after { display: none; } } /* --- Ueberschriften-Widget als Absatz ------------------------------------- Kicker, Labels und Zahlen laufen ueber das Ueberschriften-Widget mit header_size p (korrekte Semantik). Der Theme Style gibt jedem p einen Absatzabstand von 1rem - und diese Regel (Klasse plus Element) wiegt mehr als Elementors eigene .elementor-heading-title. Jedes dieser Elemente war dadurch 16px hoeher als sein Text, und in einer zentrierten Zeile stand der Text 8px ueber der Mitte. Gemessen an der Google-Note. */ .elementor-widget-heading p.elementor-heading-title { margin-block-end: 0; } /* --- SEO-Titel mit kurzem Strich darunter ------------------------------- */ .seo-titel .elementor-heading-title::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: 1rem; border-radius: 2px; background: var(--e-global-color-accent); } /* --- Breites Inhaltsbild --------------------------------------------------- Seitenverhaeltnis statt fester Hoehe: 21:8 auf dem Desktop, 16:9 darunter. Eine feste Hoehe waere bei jeder Breite ein anderer Ausschnitt. */ .bild-breit img { width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; display: block; } @media (max-width: 960px) { .bild-breit img { aspect-ratio: 16 / 9; } } /* --- FAQ: Plus im gefuellten Kreis ---------------------------------------- Das SVG ist ein Kreis mit ausgestanztem Plus; die Flaeche kommt von fill, das Plus zeigt den Untergrund. Geoeffnet dreht der Kreis um 45 Grad und wird zum Mal-Zeichen - deshalb braucht es kein zweites Icon. */ /* Drei Klassen plus Element: Elementors eigene Groessenregel wiegt zwei Klassen und laedt spaeter als das Kit - mit gleichem Gewicht gaebe es keine Chance. Die Farbe kommt aus den Steuerungen des Widgets. */ .faq-plus .elementor-accordion .elementor-accordion-icon svg { width: 1.75rem; height: 1.75rem; transition: fill 150ms, transform 250ms; } .faq-plus .elementor-tab-title.elementor-active .elementor-accordion-icon svg { transform: rotate( 45deg ); } .faq-plus .elementor-accordion-icon-closed, .faq-plus .elementor-accordion-icon-opened { line-height: 0; } @media (prefers-reduced-motion: reduce) { .faq-plus .elementor-accordion-icon svg { transition: none; } } /* --- Bildergalerie: Beschriftung beim Ueberfahren -------------------------- Drei Klassen plus Element: Elementors Regel fuer Bildunterschriften (.elementor-widget-image .widget-image-caption) wiegt zwei Klassen und laedt spaeter - mit gleichem Gewicht bliebe die Schrift grau und waere auf der dunklen Flaeche nicht zu lesen. */ .galerie-kachel .elementor-widget-container figure figcaption { color: var(--e-global-color-weiss); } /* --- Symbol neben einer Versalien-Beschriftung ---------------------------- Zwei Dinge schieben ein Button-Symbol aus der Linie: 1. Elementors Symbolhuelle ist so hoch wie die Zeile (Schriftgroesse mal Zeilenhoehe); ein Symbol, das groesser ist als diese Huelle, haengt unten heraus. inline-flex mit align-items: center legt es in die Mitte. 2. Versalien fuellen ihre Zeilenbox nicht symmetrisch - unter der Grundlinie bleibt Platz fuer Unterlaengen. Die sichtbare Wortmitte liegt dadurch ueber der Boxmitte, ein exakt zentriertes Symbol wirkt zu tief. Der kleine negative Abstand gleicht das aus. Gemessen am Google-Knopf: Symbol stand 3px unter der Wortmitte. */ .elementor-widget-button .elementor-button-content-wrapper { align-items: center; } .elementor-widget-button .elementor-button-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; /* Verschieben statt Abstand: In einem Flex-Behaelter mit align-items: center wird ein negativer Aussenabstand zur Haelfte wieder eingerechnet, die Verschiebung bleibt also wirkungslos. position/top verschiebt exakt. */ position: relative; top: -0.04em; } /* --- Schlusszeile einer Kachel -------------------------------------------- Beschriftung und Symbol auf einer Linie. Die Farbe des Symbols kommt ueber fill; der Text daneben bleibt grau, wie im Entwurf. */ .cta-zeile { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; transition: gap 150ms; } .cta-zeile svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; fill: var(--e-global-color-primary); transition: fill 150ms; } @media (hover: hover) { a:hover .cta-zeile { gap: 0.75rem; } a:hover .cta-zeile svg { fill: var(--e-global-color-accent); } } /* --- Symbol in einem Textbutton ------------------------------------------- Elementors Button rechnet die Symbolgroesse aus seiner Schriftgroesse; bei 11px Beschriftung bleibt das Plus winzig. Groesse und Farbe deshalb hier, getrennt von der Beschriftung - im Entwurf ist der Text grau und das Plus blau. */ .cta-plus .elementor-button-icon svg { width: 1.125rem; height: 1.125rem; fill: var(--e-global-color-primary); transition: fill 150ms; } .cta-plus .elementor-button:hover .elementor-button-icon svg, .cta-plus .elementor-button:focus .elementor-button-icon svg { fill: var(--e-global-color-accent); } /* Mehrfarbiges Logo in einem Button: nur die Groesse, die Farben stehen als Attribute an den Pfaden. */ .knopf-logo .elementor-button-icon svg { width: 1rem; height: 1rem; } /* --- Google-Abzeichen ------------------------------------------------------ Das Icon-Widget legt um das SVG eine Zeilenbox mit Grundlinienabstand; das Logo stand dadurch 4px unter der Mitte der Note. Ohne Zeilenbox misst die Box genau das SVG, und align-items: center trifft die Mitte. */ .abzeichen .elementor-icon-wrapper, .abzeichen .elementor-icon { display: flex; align-items: center; line-height: 0; } @media (max-width: 767px) { .merkmale .elementor-icon-list-items.elementor-inline-items { flex-direction: column; align-items: flex-start; gap: 0.6rem; } .merkmale .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin: 0; padding: 0; } .merkmale .elementor-icon-list-item::after { display: none; } } /* Button-Varianten stehen bewusst NICHT hier. Das Button-Widget bindet seine Flaeche ab Werk an die globale Akzentfarbe und schreibt sie mit der Element-Kennung ins CSS. Diese Regel wiegt eine Klasse mehr als eine Hilfsklasse - eine Klasse wie ".knopf-umriss" saehe im Panel richtig aus und bliebe wirkungslos. Varianten gehoeren deshalb an das Widget selbst (siehe el_button_umriss im Aufbau-Skript). *//* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 100; font-display: swap; src: url('https://thera-plus.com/wp-content/uploads/urbanist-latin.woff2') format('woff2'); } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 200; font-display: swap; src: url('https://thera-plus.com/wp-content/uploads/urbanist-latin.woff2') format('woff2'); } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 300; font-display: swap; src: url('https://thera-plus.com/wp-content/uploads/urbanist-latin.woff2') format('woff2'); } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://thera-plus.com/wp-content/uploads/urbanist-latin.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://thera-plus.com/wp-content/uploads/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('https://thera-plus.com/wp-content/uploads/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('https://thera-plus.com/wp-content/uploads/inter-latin.woff2') format('woff2'); } /* End Custom Fonts CSS */