/***********************************************************
CSS Document
© 28.9.2023 BrennerMedien GmbH
www.brenner-medien.de
************************************************************
/*
======================================================================
Variablen
======================================================================
*/
:root {
--blue-light: #56DFCD;
--blue-medium: #27D4BD;
--blue-dark: #001357;
--green-light: #D6F892;
--red-cta: #FF0046;
--red-cta-bg: #FFEBF0;
--mint-cta: #56DFCD;
--mint-text: #27D4BD;
--grey-light: #F0F3F5;
/* Markierungsfarbe 08.08.: vorher --grey-light (#F0F3F5) — auf weissem
Grund praktisch unsichtbar, waehrend die Schrift trotzdem umgefaerbt
wurde ("ich sehe keine Markierung, der Text bekommt Textfarbe").
Jetzt kraeftiges Mint mit dunkelblauer Schrift: klar sichtbar auf
Weiss UND auf den hellen Flaechen, Kontrast bleibt hoch. */
--selection-bg: #27D4BD;
--selection-fg: #001357;
--grey-light-b: #f2f2f2;
--grey-dark: #d7dce1;
--fliesstext: #64748b;
}
.border-red {
border: 2px dashed var(--red-cta);
padding: 1.5rem;
background-color: #FFF;
p:last-child {
padding-bottom: 0;
margin-bottom: 0 !important;
}
}
.border-blue {
border: 2px dashed var(--blue-medium);
padding: 1.5rem;
background-color: #FFF;
margin-bottom: -2rem !important;
p:last-child {
padding-bottom: 0;
margin-bottom: 0 !important;
}
}
.sprung {
visibility: hidden;
height: 0px !important;
position: absolute;
margin: -100px;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.border-red {
margin-bottom: 2rem !important;
}
.border-blue {
margin-bottom: 1rem !important;
}
}
:root {
--site-width: 1200px;
--nav1-height: 3.5rem;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
:root {
--nav1-height: 3rem;
}
}
/*
======================================================================
Allgemein
======================================================================
*/
body {
padding: 0;
display: none;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: Geist !important;
background-color: #FFF;
}
html,
body {
scroll-behavior: smooth;
}
body.no-scroll {
overflow: hidden;
}
/* Definition Markierungsfarbe */
::selection {
background-color: var(--selection-bg);
color: var(--selection-fg);
text-shadow: none;
}
::-moz-selection {
background-color: var(--selection-bg);
color: var(--selection-fg);
text-shadow: none;
}
::-webkit-selection {
background-color: var(--selection-bg);
color: var(--selection-fg);
text-shadow: none;
}
::-webkit-scrollbar-thumb:vertical {
width: 8px;
background: var(--selection-bg);
}
::-webkit-scrollbar-thumb:horizontal {
height: 8px;
background: var(--selection-bg);
}
::-webkit-scrollbar-thumb:hover {
/* vorher --mint-cta = #56DFCD = identisch mit dem Ruhezustand,
der Hover tat also nichts. Jetzt sichtbar dunkler. */
background: #1FB9A5;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
background: var(--grey-light);
}
/*
======================================================================
Animationen
======================================================================
*/
@keyframes ring {
/* Telefonhörer */
0% {
transform: translate(1px, 1px) rotate(0deg);
}
0.5% {
transform: translate(-1px, -2px) rotate(-1deg);
}
1% {
transform: translate(-3px, 0px) rotate(1deg);
}
1.5% {
transform: translate(3px, 2px) rotate(0deg);
}
2% {
transform: translate(1px, -1px) rotate(1deg);
}
2.5% {
transform: translate(-1px, 2px) rotate(-1deg);
}
3% {
transform: translate(-3px, 1px) rotate(0deg);
}
4% {
transform: translate(3px, 1px) rotate(-1deg);
}
4.5% {
transform: translate(-1px, -1px) rotate(1deg);
}
5% {
transform: translate(1px, 2px) rotate(0deg);
}
5.5% {
transform: translate(1px, -2px) rotate(-1deg);
}
6% {
transform: translate(-1px, -2px) rotate(-1deg);
}
6.5% {
transform: translate(-3px, 0px) rotate(1deg);
}
7% {
transform: translate(3px, 2px) rotate(0deg);
}
7.5% {
transform: translate(1px, -1px) rotate(1deg);
}
8% {
transform: translate(-1px, 2px) rotate(-1deg);
}
8.5% {
transform: translate(-3px, 1px) rotate(0deg);
}
9% {
transform: translate(3px, 1px) rotate(-1deg);
}
10% {
transform: translate(-1px, -1px) rotate(1deg);
}
10.5% {
transform: translate(1px, 2px) rotate(0deg);
}
11% {
transform: translate(1px, -2px) rotate(-1deg);
}
11.5% {
transform: translate(-1px, -2px) rotate(-1deg);
}
12% {
transform: translate(-3px, 0px) rotate(1deg);
}
12.5% {
transform: translate(3px, 2px) rotate(0deg);
}
13% {
transform: translate(1px, -1px) rotate(1deg);
}
13.5% {
transform: translate(-1px, 2px) rotate(-1deg);
}
14% {
transform: translate(-3px, 1px) rotate(0deg);
}
14.5% {
transform: translate(3px, 1px) rotate(-1deg);
}
15.5% {
transform: translate(-1px, -1px) rotate(1deg);
}
16% {
transform: translate(1px, 2px) rotate(0deg);
}
16.5% {
transform: translate(1px, -2px) rotate(-1deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
@keyframes float {
/* Ki */
0% {
-webkit-filter: drop-shadow(5px 10px 0px rgba(0, 0, 0, .1));
filter: drop-shadow(5px 10px 0px rgba(0, 0, 0, .1));
transform: translatey(0px);
}
50% {
-webkit-filter: drop-shadow(5px 10px 5px rgba(0, 0, 0, .1));
filter: drop-shadow(5px 15px 5px rgba(0, 0, 0, .1));
transform: translatey(-10px);
}
100% {
-webkit-filter: drop-shadow(5px 10px 0px rgba(0, 0, 0, .1));
filter: drop-shadow(5px 10px 0px rgba(0, 0, 0, .1));
transform: translatey(0px);
}
}
@keyframes float-rakete {
/* Rakete im Alert */
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-2px);
}
100% {
transform: translatey(0px);
}
}
@keyframes leftright {
/* CTA-Pfeil */
0% {
transform: translatex(0px);
}
50% {
transform: translatex(-3px);
}
100% {
transform: translatex(0px);
}
}
@keyframes rotate {
/* Glow */
25% {
transform: rotate(90deg);
}
100% {
transform: rotate(90deg);
}
}
@keyframes gradient {
/* Keyvisual */
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes loader {
/* Ladebox Konfigurator */
from {
transform: translateX(0);
}
to {
transform: translateX(46px);
}
}
.animation-float {
animation: float 6s ease-in-out infinite;
}
/*
======================================================================
Tools
======================================================================
*/
.height-0-25rem {
height: 0.25rem !important;
}
.height-0-5rem {
height: 0.5rem !important;
}
.height-0-75rem {
height: 0.75rem !important;
}
.height-1rem {
height: 1rem !important;
}
.height-1-5rem {
height: 1.5rem !important;
}
.margin-bottom-1rem {
margin-bottom: 1rem !important;
}
.margin-top-0rem {
margin-top: 0rem !important;
}
.margin-top-0-5rem {
margin-top: 0.5rem !important;
}
.margin-top-1-5rem {
margin-top: 1.5rem !important;
}
.margin-top-1rem {
margin-top: 1rem !important;
}
.margin-top-2rem {
margin-top: 2rem !important;
}
.margin-top-3rem {
margin-top: 3rem !important;
}
.margin-top-4rem {
margin-top: 4rem !important;
}
.margin-top-2-5rem {
margin-top: 2.5rem !important;
}
.margin-top--2rem {
margin-top: -2rem !important;
}
.margin-bottom-0rem {
margin-bottom: 0rem !important;
}
.margin-bottom-0-5rem {
margin-bottom: 0.5rem !important;
}
.margin-bottom-1-5rem {
margin-bottom: 1.5rem !important;
}
.margin-bottom-2rem {
margin-bottom: 2rem !important;
}
.margin-bottom-2-5rem {
margin-bottom: 2.5rem !important;
}
.margin-bottom--1rem {
margin-bottom: -1rem !important;
}
.no-margin {
margin: 0 !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.padding-top-1-5rem {
padding-top: 1.5rem !important;
}
.padding-top-2rem {
padding-top: 2rem !important;
}
.padding-top-2-5rem {
padding-top: 2.5rem !important;
}
.padding-top-3rem {
padding-top: 3rem !important;
}
.padding-bottom-2rem {
padding-top: 2rem !important;
}
.no-padding {
padding: 0 !important;
}
.no-padding-top {
padding-top: 0 !important;
}
.no-padding-bottom {
padding-bottom: 0 !important;
}
.padding-bottom-0rem {
padding-bottom: 0 !important;
}
.clear {
clear: both !important;
width: 100%;
}
.sticky {
position: sticky !important
}
.spiegeln {
transform: scaleX(-1);
}
img {
aspect-ratio: auto 1 / 1;
}
p.center {
text-align: center;
margin-bottom: -3.5rem !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
margin-top: -1.5rem !important;
}
/*///// Responsive /////*/
.only-mobile {
display: none;
}
@media only screen and (max-device-width: 480px) {
p.center {
margin-bottom: 1rem;
}
.no-mobile {
display: none !important;
}
.only-mobile {
display: block !important;
}
}
/*
======================================================================
Popups
======================================================================
*/
.wrapper_popup {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 101;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
align-items: center;
}
.wrapper_popup .rahmen {
background: linear-gradient(135deg, var(--blue-medium) 0%, var(--mint-text) 100%);
border-radius: 16px;
padding: 3px;
box-shadow: 0 8px 32px rgba(0, 19, 87, 0.15);
}
.wrapper_popup .rahmen-paypal {
background-color: #3b7bbf;
border-radius: 1rem;
padding: 0.5rem;
}
.wrapper_popup .wrapper_popup_content {
display: grid;
grid-template-columns: 100%;
max-width: 40rem;
height: auto;
background-color: rgba(255, 255, 255, 1);
padding: 2.5rem;
grid-column-gap: 2.5rem;
border-radius: 14px;
grid-row-gap: 0;
min-width: 30rem;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wrapper_popup .wrapper_popup_content.laden {
padding: 0;
}
.wrapper_popup .wrapper_popup_content img.kilian {
display: grid;
width: 100%;
padding: 10% 15%;
justify-content: center;
align-items: center;
}
.wrapper_popup .wrapper_popup_content .wrapper-paypal {
justify-content: center;
display: flex;
align-items: center;
margin-right: 2.5rem;
padding: 0 2rem 2rem 2rem;
}
.wrapper_popup .wrapper_popup_content img.loader {
width: 10rem;
height: 10rem;
}
.wrapper_popup .wrapper_popup_content img.paypal {
width: 4rem;
margin-left: -6.75rem;
}
.wrapper_popup .wrapper_popup_content p.text {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 500;
font-size: 1rem;
text-align: center;
line-height: 1.5;
}
.wrapper_popup .wrapper_popup_content p.headline {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 400;
font-size: 0.9rem;
text-transform: uppercase;
margin: 1rem 1rem 2rem 1rem;
text-align: center;
line-height: 1.5;
letter-spacing: 2px;
}
.wrapper_popup .wrapper_popup_content a.button,
.wrapper_popup .wrapper_popup_content span.button {
display: inline-block;
background-color: var(--red-cta);
padding: 0.7rem 1.2rem;
color: #FFF;
text-transform: none;
font-weight: 600;
font-family: "Geist";
border-radius: 8px;
letter-spacing: 0.01em;
transition: all 0.2s;
border: 2px solid var(--red-cta);
font-size: 0.95rem;
text-align: center;
cursor: pointer;
}
.wrapper_popup .wrapper_popup_content p.text+a.button,
.wrapper_popup .wrapper_popup_content p.text+span.button {
margin-bottom: 1.5rem;
}
.wrapper_popup .wrapper_popup_content a.button,
.wrapper_popup .wrapper_popup_content span.button {
margin-top: 2rem;
margin-bottom: 0 !important;
}
.wrapper_popup .wrapper_popup_content a.button:hover,
.wrapper_popup .wrapper_popup_content span.button:hover {
background-color: #e6003f;
border-color: #e6003f;
color: #FFF;
}
.wrapper_popup .wrapper_popup_content .play-box.loader .loading {
height: 5rem;
text-align: center;
color: #000;
position: relative;
overflow: hidden;
padding: 1rem;
}
.wrapper_popup .wrapper_popup_content .play-box.loader .text {
z-index: 5;
background-color: #FFF;
color: var(--blue-medium);
position: absolute;
width: 15rem;
height: 2rem;
top: calc(50% - 1rem);
left: calc(50% - 7.5rem);
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
border-radius: 8px;
border: 1px solid var(--blue-medium);
font-family: Geist;
font-weight: 500;
}
.wrapper_popup .wrapper_popup_content .play-box.loader .bg {
position: absolute;
left: -46px;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
background: repeating-linear-gradient(-55deg, var(--blue-medium) 1px, #FFF 2px, #FFF 11px, var(--blue-medium) 12px, var(--blue-medium) 20px);
animation-name: loader;
animation-duration: .6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.wrapper_popup .rahmen-paypal .wrapper_popup_content .play-box.loader .loading {
height: 5rem;
text-align: center;
color: #000;
position: relative;
overflow: hidden;
padding: 1rem;
}
.wrapper_popup .rahmen-paypal .wrapper_popup_content .play-box.loader .text {
z-index: 5;
background-color: #FFF;
color: #3b7bbf;
position: absolute;
width: 15rem;
height: 2rem;
top: calc(50% - 1rem);
left: calc(50% - 7.5rem);
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
border-radius: 2rem;
border: 1px solid #3b7bbf;
font-family: Geist;
font-weight: 500;
}
.wrapper_popup .rahmen-paypal .wrapper_popup_content .play-box.loader .bg {
position: absolute;
left: -46px;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
background: repeating-linear-gradient(-55deg, #3b7bbf 1px, #FFF 2px, #FFF 11px, #3b7bbf 12px, #3b7bbf 20px);
animation-name: loader;
animation-duration: .6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_popup .rahmen,
.wrapper_popup .rahmen-paypal {
width: 90vw;
}
.wrapper_popup .wrapper_popup_content,
.wrapper_popup .wrapper_popup_content.laden {
width: auto;
min-width: auto;
}
.wrapper_popup .wrapper_popup_content {
padding: 1.5rem;
}
}
/*
======================================================================
Formularfelder
======================================================================
*/
.wrapper_global .content .modul.spalten2kontakt {
/* Kontaktformular */
grid-area: b;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "a b";
grid-column-gap: 5rem;
padding: 1.5rem 2rem 2.5rem 2rem;
}
.wrapper_formular {
display: grid;
grid-template-columns: 10rem 1fr;
grid-column-gap: 2rem;
grid-row-gap: 2rem;
padding: 0 5rem;
grid-auto-rows: auto;
flex-flow: column;
grid-auto-flow: column;
align-items: flex-start;
}
.wrapper_global .content .modul.spalten2kontakt .inhalt {
border: 1px solid var(--grey-dark);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 2px 5px 0 rgba(0, 0, 0, .03);
background: rgba(255, 255, 255, .5);
border-radius: 1rem;
padding-top: 3.25rem;
}
.wrapper_global .content .modul.spalten2kontakt .wrapper_formular {
grid-template-columns: auto 1fr;
padding: 0;
justify-content: flex-start;
}
.wrapper_global .content .modul.spalten2kontakt .bild {
padding: 0;
}
.wrapper_formular input[type="text"],
.wrapper_formular textarea,
.wrapper_formular input[type="email"],
.wrapper_formular input[type="password"],
.wrapper_formular select {
background: #FFF;
border: 1px solid var(--grey-dark);
padding: 0 0.5rem;
width: 100%;
font-family: "Geist";
color: var(--fliesstext);
margin: 0;
height: 2.7rem;
line-height: 2.7rem;
grid-column: 2;
}
.wrapper_formular textarea {
padding: 0.5rem;
width: 100%;
height: 15rem;
line-height: 1.3rem;
grid-column: 2;
}
.wrapper_formular label {
font-family: "Geist";
color: var(--blue-dark);
font-weight: 500;
font-size: 0.9rem;
text-align: right;
grid-column: 1;
line-height: 2.7rem;
grid-column: 1;
}
.wrapper_formular .wrapper_password {
position: relative;
grid-column: 2;
}
.wrapper_formular .wrapper_password i {
position: absolute;
top: 0;
right: 0.8rem;
}
.wrapper_formular .wrapper_password i:before {
content: "\f070";
font-family: "FontAwesome";
color: var(--mint-text);
font-weight: 400;
font-size: 0.95rem;
cursor: pointer;
width: 2rem;
line-height: 2.7rem;
text-align: center;
background-color: transparent;
text-align: center;
display: block;
transform: scaleX(-1);
}
.wrapper_formular .wrapper_password i.show:before {
content: "\f06e";
transform: scaleX(1);
}
a.button-formularfelder,
span.button-formularfelder {
display: inline-block;
background-color: var(--red-cta);
padding: 0.6rem 0.8rem 0.5rem 0.8rem;
color: #FFF;
text-transform: uppercase;
font-weight: 600;
font-family: "Geist";
border-radius: 2rem;
letter-spacing: 0.07rem;
transition: all 0.2s;
border: 2px solid var(--red-cta);
font-size: 0.9rem;
text-align: center;
margin: 2rem 0 0 17rem;
cursor: pointer;
}
.wrapper_formular a.button-formularfelder,
.wrapper_formular span.button-formularfelder {
margin-left: 0;
grid-column: 2;
display: inline;
width: 15rem;
margin-top: 0;
}
a.button-formularfelder:hover,
span.button-formularfelder:hover {
background-color: #FFF;
color: var(--red-cta);
}
span.datenschutz {
color: var(--fliesstext);
font-size: 0.95rem;
font-family: Geist;
padding: 0.5rem 0 1.25rem 0.1rem;
display: block;
}
.wrapper_formular span.datenschutz {
grid-column: 2;
padding: 0;
}
span.datenschutz a {
color: var(--red-cta);
}
span.datenschutz a:hover {
color: var(--red-cta);
border-bottom: 1px dotted var(--red-cta);
}
span.datenschutz i:before {
content: "\f0c8";
font-family: "FontAwesome";
color: inherit;
font-weight: 300;
cursor: pointer;
margin-right: 0.3rem;
font-size: 1rem;
}
span.datenschutz i.active:before {
content: "\f14a";
font-weight: 900;
}
form .fehlermeldung {
height: auto;
padding: 1rem;
background-color: var(--red-cta);
color: #FFF;
border: none;
font-size: 1rem;
grid-column: 1 / span 2;
font-family: Geist;
}
.wrapper_fullscreen form .fehlermeldung_wrapper {
padding-bottom: 2rem;
}
.wrapper_fullscreen form .fehlermeldung {
height: auto;
padding: 0.85rem 0.75rem 0.75rem 0.75rem;
background-color: var(--red-cta);
color: #FFF;
border: none;
font-size: 0.95rem;
grid-column: 1 / span 1;
font-family: Geist;
line-height: 1.3;
}
form .fehler-formular {
border: 1px solid var(--red-cta) !important;
background-color: var(--red-cta-bg) !important;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_formular {
grid-template-columns: 1fr;
grid-column-gap: 0rem;
grid-row-gap: 0rem;
padding: 0;
}
.wrapper_global .content .modul.spalten2kontakt .wrapper_formular {
grid-template-columns: 1fr;
}
.wrapper_global .content .modul.spalten2kontakt {
padding: 0 1.5rem;
}
.wrapper_global .content .modul.spalten2kontakt .inhalt {
border: none;
box-shadow: none;
background: rgba(255, 255, 255, 0);
padding-top: 1rem;
}
.wrapper_formular label {
text-align: left;
margin-top: 1rem;
}
.wrapper_formular input[type="text"],
.wrapper_formular textarea,
.wrapper_formular input[type="email"],
.wrapper_formular input[type="password"],
.wrapper_formular select {
grid-column: 1;
}
.wrapper_formular .wrapper_password {
grid-column: 1;
}
.wrapper_formular .fehlermeldung {
grid-column: 1 / span 1;
}
a.button-formularfelder,
span.button-formularfelder {
margin: 1.5rem 0 2.5rem 0rem;
}
.wrapper_global .content .modul.spalten2kontakt .inhalt a.button-formularfelder,
.wrapper_global .content .modul.spalten2kontakt .inhalt span.button-formularfelder {
grid-column: 1;
margin-top: 2rem;
}
.wrapper_formular span.datenschutz {
grid-column: 1;
padding-top: 2rem;
}
}
/*
======================================================================
CTA
======================================================================
*/
a.cta1,
span.cta1 {
display: inline-block;
background-color: var(--red-cta);
padding: 0.8rem 1.2rem 0.7rem 1.2rem;
color: #FFF;
text-transform: none;
font-weight: 600;
font-family: "Geist";
border-radius: 8px;
letter-spacing: 0.02rem;
transition: all 0.2s;
border: 2px solid var(--red-cta);
font-size: 1rem;
}
a.cta1:after,
span.cta1:after {
font-family: "FontAwesome";
content: "\f061";
animation: none;
display: inline-block;
width: 1.5rem;
text-align: right;
font-weight: 400;
}
a.cta1:hover,
span.cta1:hover {
background-color: #FFF;
color: var(--red-cta);
}
a.cta2 {
display: inline-block;
background-color: var(--mint-cta);
padding: 0.8rem 1.2rem 0.7rem 1.2rem;
color: #FFF;
text-transform: none;
font-weight: 600;
font-family: "Geist";
border-radius: 8px;
letter-spacing: 0.02rem;
transition: all 0.2s;
border: 2px solid var(--mint-cta);
font-size: 0.9rem;
}
a.cta2:after {
font-family: "FontAwesome";
content: "\f061";
animation: none;
display: inline-block;
width: 1.3rem;
text-align: right;
font-weight: 400;
}
a.cta2:hover {
background-color: #FFF;
color: var(--mint-cta);
}
/*
======================================================================
Container
======================================================================
*/
.wrapper_global {
width: 100%;
height: auto;
}
.wrapper_global .content {
width: 100%;
height: auto;
display: grid;
grid-template-columns: 1fr var(--site-width) 1fr;
grid-template-areas: "a b c";
align-items: flex-start;
}
.wrapper_global .content.center {
align-items: center;
}
.wrapper_global .content .modul {
grid-area: b;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content {
grid-template-columns: 1fr;
grid-template-areas: "b";
}
.modul {
padding: 0 1.5rem;
}
.modul .modul {
padding: 0;
}
}
/*
======================================================================
Navigation
======================================================================
*/
.wrapper_global .content {
top: 0;
}
.wrapper_global .content.navigation {
background-color: var(--blue-dark);
position: sticky;
z-index: 6;
}
.wrapper_global .content.navigation+.keyvisual-gradient {
position: sticky;
z-index: 5;
top: var(--nav1-height);
}
.wrapper_global .content.navigation .modul {
display: grid;
grid-template-areas: "a b c";
grid-template-columns: auto 1fr auto;
height: var(--nav1-height);
}
.wrapper_global .content.navigation .modul .logo {
grid-area: a;
background-color: var(--blue-dark);
padding: 1rem 1rem 0.5rem 1rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
z-index: 2;
width: auto;
}
.wrapper_global .content.navigation .modul .logo img {
height: 3rem;
width: auto;
}
.wrapper_global .content.navigation .modul .headline {
display: none;
}
.wrapper_global .content.navigation .modul .burger {
display: none;
}
.wrapper_global .content.navigation .modul .nav1 {
grid-area: b;
height: var(--nav1-height);
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
position: static;
}
.wrapper_global .content.navigation .modul .nav1 ul {
height: 100%;
display: flex;
align-items: center;
}
.wrapper_global .content.navigation .modul .nav1 ul li {
display: inline-block;
margin-right: 2rem;
font-family: Geist;
color: #FFF;
font-weight: 400;
transition: all 0.2s;
}
.wrapper_global .content.navigation .modul .nav1 ul li:last-child {
margin-right: 0;
}
.wrapper_global .content.navigation .modul .nav1 ul li a {
color: inherit;
padding-bottom: 1rem;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i {
border: 1px solid #FFF;
border-radius: 100%;
width: 2rem;
height: 2rem;
display: inline-flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
position: relative;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.user {
margin-left: -1rem;
transition: all 0.2s;
}
.min-height-cart {
min-height: calc(100vh - var(--nav1-height) - 0.5rem - 4.5rem) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.min-height-cart .modul.spalten2bildleft {
display: flex;
justify-content: center;
align-items: center;
margin: 0 !important;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart .badge {
position: absolute;
background-color: var(--red-cta);
width: 1rem;
height: 1rem;
font-size: 0.7rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5rem;
top: -0.3rem;
right: -0.4rem;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart:before {
font-family: 'FontAwesome';
content: "\f07a";
font-weight: 900;
line-height: var(--nav1-height);
color: #FFF;
font-size: 0.85rem;
padding-top: 0.15rem;
transition: all 0.2s;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.home:before {
font-family: 'FontAwesome';
content: "\f015";
font-weight: 400;
line-height: var(--nav1-height);
color: #FFF;
font-size: 0.85rem;
padding-top: 0.15rem;
transition: all 0.2s;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.user:before {
font-family: 'FontAwesome';
content: "\f007";
font-weight: 900;
line-height: var(--nav1-height);
color: #FFF;
font-size: 0.9rem;
transition: all 0.2s;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.user.eingeloggt:before {
font-family: 'Geist';
content: attr(data-status);
font-weight: 500;
}
.wrapper_global .content.navigation .modul .nav1 .kontoinfos {
height: var(--nav1-height);
color: #FFF;
font-family: Geist;
margin-left: 0.75rem;
display: flex;
justify-content: center;
flex-direction: column;
line-height: 1.3;
text-align: left;
}
.wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos {
font-weight: 400;
font-size: 0.7rem;
opacity: 0.8;
}
.wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos strong {
font-weight: 600;
font-size: 0.8rem;
}
.wrapper_global .content.navigation .modul .nav1 ul li:hover,
.wrapper_global .content.navigation .modul .nav1 ul li.active {
color: #FFF;
}
.wrapper_global .content.navigation .modul .nav1 ul li:hover a,
.wrapper_global .content.navigation .modul .nav1 ul li.active a {
border-bottom: 3px solid #FFF;
padding-bottom: 0.3rem;
transition: all 0.2s;
}
.wrapper_global .content.navigation .modul .nav1 ul li:hover a.icon,
.wrapper_global .content.navigation .modul .nav1 ul li.active a.icon {
border-bottom: none;
padding-bottom: 0.3rem;
transition: all 0.2s;
}
.wrapper_global .content.navigation .modul .nav1 ul li:hover a.icon i,
.wrapper_global .content.navigation .modul .nav1 ul li.active a.icon i {
background-color: #FFF;
transition: all 0.2s;
}
.wrapper_global .content.navigation .modul .nav1 ul li:hover a.icon i:before,
.wrapper_global .content.navigation .modul .nav1 ul li.active a.icon i:before {
color: var(--blue-dark);
transition: all 0.2s;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.navigation .modul {
grid-template-areas: "a c d";
grid-template-columns: auto 1fr auto;
padding-right: 0;
}
.wrapper_global .content.navigation .modul .logo {
grid-area: a;
background-color: var(--blue-dark);
padding: 1rem 1rem 0.5rem 1rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
z-index: 4;
width: 6rem;
}
.wrapper_global .content.navigation .modul .headline {
grid-area: c;
display: flex;
height: var(--nav1-height);
padding-top: 0.3rem;
}
.wrapper_global .content.navigation .modul .headline img {
width: 10rem;
height: auto;
}
.wrapper_global .content.navigation .modul .burger {
grid-area: d;
display: flex;
align-items: center;
height: var(--nav1-height);
}
.wrapper_global .content.navigation .modul .burger i {
width: 3rem;
display: flex;
justify-content: center;
}
.wrapper_global .content.navigation .modul .burger i:before {
font-family: 'FontAwesome';
content: "\f0c9";
font-weight: 900;
line-height: var(--nav1-height);
color: #FFF;
}
.wrapper_global .content.navigation.mobile-active .modul .burger i:before {
content: "\e59b";
}
.wrapper_global .content.navigation .modul .logo img {
height: auto;
width: 4rem;
}
.wrapper_global .content.navigation .modul .nav1 {
display: none;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 {
position: fixed;
height: auto;
max-height: 100vh;
width: 100vw;
text-align: left;
display: block;
z-index: 3;
background: var(--blue-dark);
top: calc(var(--nav1-height) + 0.5rem);
left: 0;
padding: 2.5rem 1rem 0.5rem 1.5rem;
overflow: scroll;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul {
height: auto;
display: block;
align-items: center;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li {
display: block;
margin-right: 0;
font-family: Geist;
font-weight: 500;
transition: all 0.2s;
line-height: 2;
font-size: 1.2rem;
margin-bottom: 1rem;
color: #fff;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 .kontoinfos {
height: auto;
color: #fff;
margin-left: 0;
line-height: 1.3;
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.35);
padding: 1rem;
border-radius: 1rem;
margin-top: 1rem;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart:before {
padding-top: 0;
}
.wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos {
font-weight: 400;
font-size: 1rem;
opacity: 1;
}
.wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos strong {
font-weight: 600;
font-size: 1rem;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:nth-last-child(2),
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:nth-last-child(1) {
display: inline-block;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.user {
margin-left: 0.75rem;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart .badge {
color: #FFF;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a.icon i {
border-color: #fff;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a.icon i:before {
color: #fff;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:last-child {
margin-right: 0;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a {
color: inherit;
padding-bottom: 1rem;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover,
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active {
color: var(--blue-light);
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover a,
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active a {
border-bottom: 3px solid var(--blue-light);
padding-bottom: 0.2rem;
transition: all 0.2s;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover a.icon,
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active a.icon {
border-bottom: none;
padding-bottom: 0.2rem;
transition: all 0.2s;
}
}
/*
======================================================================
Alert
======================================================================
*/
.alert-chatbot {
background-color: var(--red-cta);
color: #FFF;
font-family: Geist;
text-align: center;
padding: 0.4rem 0;
font-size: 0.85rem;
font-weight: 400;
padding-left: calc((100% - var(--site-width)) / 2);
padding-right: calc((100% - var(--site-width)) / 2);
position: sticky;
top: var(--nav1-height);
z-index: 5;
}
.alert-chatbot a {
color: #FFF;
border-bottom: 1px dashed rgba(255,255,255,0.6);
}
.alert-chatbot a:hover {
border-bottom: 1px solid #FFF;
}
.alert-chatbot-short { display: none; }
@media only screen and (max-device-width: 480px) {
.alert-chatbot-long { display: none; }
.alert-chatbot-short { display: inline; }
}
i.chat:before {
content: "\f075";
}
.alert {
background-color: var(--red-cta);
color: #FFF;
font-family: Geist;
text-align: center;
padding: 0.5rem 0;
font-size: 0.85rem;
font-weight: 400;
padding-left: calc((100% - var(--site-width)) / 2);
padding-right: calc((100% - var(--site-width)) / 2);
display: nne;
}
.alert span {
animation: float-rakete 2s ease-in-out infinite;
display: inline-block;
}
.alert em {
color: var(--red-cta);
background-color: #FFF;
border-radius: 100vw;
padding: 0.2rem 0.5rem;
margin: 0 0.2rem;
}
.alert a {
color: inherit;
}
.alert a:hover {
border-bottom: 1px dotted #FFF;
}
.alert span i {
transform: rotate(-45deg);
display: block;
}
@media only screen and (max-device-width: 480px) {
.alert {
padding-top: 2rem;
padding-bottom: 1rem;
line-height: 1.5;
}
.alert span {
display: none;
}
}
/*
======================================================================
Hero
======================================================================
*/
.wrapper_global .content.hero {
padding: 1rem 0 0rem 0;
background-image: url("../images/hero_background.webp");
background-size: cover;
background-position: center;
box-shadow: 0px 7px 15px 5px rgba(0, 0, 0, 0.05);
}
.wrapper_global .content.hero .modul {
display: grid;
grid-template-areas: "a b";
grid-template-columns: 40% 1fr;
}
.wrapper_global .content.hero .modul .eyecatcher {
grid-area: a;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper_global .content.hero .modul .eyecatcher img {
height: 35rem;
width: auto;
}
.wrapper_global .content.hero .modul .inhalt {
grid-area: b;
display: flex;
justify-content: flex-start;
align-items: flex-end;
align-content: flex-end;
flex-wrap: wrap;
padding-right: 0;
}
.wrapper_global .content.hero .modul .inhalt .wrapper {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 2rem;
width: 100%;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 {
font-size: 2.1rem;
font-weight: 700;
color: var(--blue-dark);
line-height: 1.2;
padding: 0 3rem 0 0;
border: none;
margin: 0;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 span.small {
font-size: 1.3rem !important;
font-weight: 400;
color: var(--blue-dark);
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 span.highlight {
background-image: url("../images/highlighter.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 span.small:before {
content: "\A";
white-space: pre;
height: 0.15rem;
display: block;
}
.hero-glow {
background: linear-gradient(135deg, rgba(16, 49, 115, 1) 20%, rgba(52, 141, 197, 1) 80%);
padding: 0 0 2px 0;
position: relative;
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
}
.wrapper_global .content.hero .modul .inhalt .hero-glow {
display: grid;
grid-template-columns: auto 1fr;
width: 100%;
flex-direction: column;
justify-content: flex-start;
}
.hero-glow:before {
content: "";
position: absolute;
width: 200%;
aspect-ratio: 1;
top: 0%;
left: 50%;
z-index: 1;
translate: -50% -15%;
rotate: 0;
transform: rotate(-90deg);
opacity: 1;
background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
transition: opacity 0.25s;
animation: rotate 3s linear infinite both;
animation-delay: 2.5s;
}
.wrapper_global .content.hero .modul .inhalt .placeholder {
background-color: rgba(255, 255, 255, 1);
font-weight: 500;
font-size: 1.2rem;
width: auto;
height: 3rem;
padding-left: 0.75rem;
font-family: Geist;
color: var(--blue-dark);
line-height: 3rem;
}
.wrapper_global .content.hero .modul .inhalt input[type="text"] {
background-color: rgba(255, 255, 255, 1);
font-weight: 500;
font-size: 1.2rem;
height: 3rem;
padding: 0.3rem;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
border: 1px solid #FFF;
font-family: Geist;
z-index: 2;
color: var(--blue-dark);
width: 100%;
}
.wrapper_global .content.hero .modul .inhalt input[type="text"]::placeholder {
color: #CCC;
}
.wrapper_global .content.hero .modul .inhalt p.input-label {
font-family: "Geist" !important;
font-size: 0.9rem;
margin: 1rem 0 0.5rem 0;
width: 100%;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.hero {
padding-top: 2.5rem;
}
.wrapper_global .content.hero .modul {
grid-template-areas: "a"
"b";
grid-template-columns: 1fr;
}
.wrapper_global .content.hero .modul .eyecatcher {
display: none;
}
.wrapper_global .content.hero .modul .inhalt .wrapper {
padding: 0 1rem;
margin-bottom: 1rem;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 {
font-size: 2rem;
padding-right: 0;
margin-top: 2rem;
line-height: 1.1;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 {
font-size: 2rem;
padding-right: 0;
margin-top: 2rem;
line-height: 1.1;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 span.small {
font-size: 1.5rem;
}
.hero-glow {
width: 100%;
}
.wrapper_global .content.hero .modul .inhalt .wrapper .cta1 {
margin-bottom: 1.5rem;
}
.wrapper_global .content.hero .modul .inhalt .hero-glow {
width: auto;
}
}
/*
======================================================================
Hero Preview
======================================================================
*/
.wrapper_global .content.hero-preview {
background: #30C9D5;
animation: gradient 6s alternate infinite;
animation-duration: 6s;
background-size: 200% 200%;
min-height: 0.3rem;
}
.wrapper_global .content.hero-preview .modul .text {
padding: 2.8rem 2.5rem 2.5rem 8.5rem;
background-color: rgba(255, 255, 255, 0.6);
position: relative;
border-radius: 2rem;
margin-top: 2rem;
}
.wrapper_global .content.hero-preview .modul .text:before {
content: "\e1e4";
font-family: FontAwesome;
top: 2rem;
left: 2rem;
color: var(--blue-light);
font-weight: 900;
font-size: 5rem;
position: absolute;
}
.wrapper_global .content.hero-preview .modul .spacer {
height: 2rem;
width: 100%;
display: block;
background-color: transparent;
}
.wrapper_global .content.hero-preview .modul .text p {
font-size: 1.7rem;
font-weight: 800;
font-family: "Geist" !important;
line-height: 1.5;
color: var(--blue-dark);
margin-bottom: 2rem;
}
.wrapper_global .content.hero-preview .modul .text p span {
background-color: #FFF;
padding: 0 0.2rem;
margin: 0 -.2rem;
border-radius: 5px;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.hero-preview .modul .text {
padding: 1.5rem;
margin: 1rem 0;
border-radius: 1rem;
}
.wrapper_global .content.hero-preview .modul .text:before {
display: none;
}
.wrapper_global .content.hero-preview .modul .text p {
font-size: 1.2rem;
font-weight: 600;
margin: 0.5rem 0 1.4rem 0;
}
.wrapper_global .content.hero-preview .modul .text p span {
background-color: #FFF;
padding: 0 0.2rem;
margin: 0 -.2rem;
border-radius: 5px;
}
}
/*
======================================================================
Contenboxen
======================================================================
*/
.wrapper_global .content.keyvisual-gradient {
background: rgb(6, 207, 241);
background: linear-gradient(135deg, rgba(16, 49, 115, 1) 20%, rgba(52, 141, 197, 1) 80%);
}
.wrapper_global .content.keyvisual-gradient.fullscreen {
display: none;
}
.wrapper_global .content.keyvisual-background {
background-image: url("../images/background-keyvisual-telefonansagen-ai.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
.wrapper_global .content.bg-grey {
background-color: var(--grey-light);
}
.wrapper_global .content.bg-blue-dark {
background-color: var(--blue-dark);
}
.wrapper_global .content.konfigurator-background {
background-image: url("../images/background-hero-telefonansagen-ki.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
.wrapper_global .content .modul.spalten2bildleft {
/* Bild links */
grid-area: b;
display: grid;
grid-template-columns: 35% 1fr;
grid-template-areas: "a b";
margin: 2rem 0 0 0;
}
.wrapper_global .content .modul.spalten2bildright {
/* Bild rechts */
grid-area: b;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "a b";
margin: 2rem 0;
}
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul.spalten2bildleft,
.wrapper_global .content .modul.spalten2bildright,
.wrapper_global .content .modul.spalten2kontakt {
grid-template-areas: "a"
"b";
grid-template-columns: 1fr;
}
}
.wrapper_global .content .modul.spalten2,
.wrapper_global .content .modul.spalten3 {
/* Boxen */
grid-area: b;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "a b c";
grid-column-gap: 2rem;
grid-row-gap: 1.5rem;
margin: 2rem;
}
.wrapper_global .content .modul.spalten2 {
/* 50 zu 50 */
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b";
margin-top: 2.5rem;
}
.wrapper_global .content .modul.spalten2 .inhalt,
.wrapper_global .content .modul.spalten3 .inhalt {
background: #FFF;
border-radius: 1rem;
padding: 2.5rem 2.5rem 1.5rem 2.5rem;
border: 1px solid var(--grey-dark);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 2px 5px 0 rgba(0, 0, 0, .03);
}
.wrapper_global .content .modul.spalten2 .inhalt {
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid #FFF;
box-shadow: none;
transition: all 1s;
}
.wrapper_global .content .modul.spalten2 .inhalt:hover {
background-color: rgba(255, 255, 255, 1);
transition: all 1s;
}
.wrapper_global .content .modul.spalten2 .inhalt p {
font-size: 1.7rem;
font-weight: 600;
color: var(--mint-text);
margin-bottom: 0.5rem;
}
.wrapper_global .content .modul.spalten3 .inhalt p {
font-size: 1rem;
}
.wrapper_global .content .modul.spalten2 .inhalt h3 {
font-size: 1rem;
line-height: 1.2;
font-weight: 600;
margin: 0;
text-transform: uppercase;
color: var(--blue-dark);
letter-spacing: 1px;
}
.wrapper_global .content .modul.spalten3 .inhalt h3 {
font-size: 1.6rem;
line-height: 1.2;
font-weight: 400;
margin: 0 0 1rem 0;
}
.wrapper_global .content .modul.spalten2 .inhalt h3 strong,
.wrapper_global .content .modul.spalten3 .inhalt h3 strong {
font-weight: 600;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul.spalten2 {
padding: 1.5rem 1.5rem 1rem 1.5rem;
margin: 0;
grid-template-columns: 1fr;
grid-template-areas: "a" "b";
text-align: center;
}
.wrapper_global .content .modul.spalten2 .inhalt p {
font-size: 1.2rem;
}
.wrapper_global .content .modul.spalten2 .inhalt h3 {
font-size: 0.8rem;
}
}
.wrapper_global .content .modul .bild {
padding: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper_global .content .modul .bild img,
.wrapper_global .content .modul .bild svg {
width: 100%;
max-height: 21.5rem;
}
.wrapper_global .content .modul .inhalt {
padding: 2.5rem;
}
.wrapper_global .content .faq .inhalt {
padding: 0 !important;
}
.wrapper_global .content .modul .inhalt.preisedisclaimer {
padding: 1rem 0 !important;
p {
text-align: center;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0 !important;
}
}
.wrapper_global .content .modul .inhalt.vertical-center {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq {
border-bottom: 1px dotted var(--grey-dark);
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq:first-of-type {
margin-top: 1.75rem;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq .frage {
margin-top: 1rem;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq .antwort {
display: none;
padding-right: 7rem;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq .frage span {
width: 100%;
height: 100%;
display: block;
position: relative;
cursor: pointer;
transition: all 0.2s;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq .frage span:after {
content: "\f078";
font-family: FontAwesome;
float: right;
height: 1.5rem;
display: block;
font-size: 1.2rem;
position: absolute;
right: 0.5rem;
top: calc(50% - 0.75rem);
transition: all 0.2s;
color: var(--fliesstext);
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq .frage:hover span:after {
padding-top: 0.3rem;
transition: all 0.2s;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq.active .frage span:after {
transform: rotate(180deg);
transition: all 0.2s;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq .frage span p {
font-weight: 500;
padding-right: 3rem;
color: var(--blue-dark);
}
.wrapper_global .content .modul .inhalt h1 {
font-size: 0.9rem;
font-weight: 500;
color: var(--blue-light);
border: 1px solid var(--blue-light);
display: inline-block;
border-radius: 2rem;
padding: 0.3rem 0.5rem;
margin-bottom: 0.8rem;
}
.wrapper_global .content .modul .inhalt h2 {
color: var(--blue-dark);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
}
.wrapper_global .content .modul .inhalt .eyebrow {
color: var(--mint-text);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
.wrapper_global .content .modul .inhalt h3 {
color: var(--mint-text);
font-size: 1.7rem;
line-height: 1.2;
font-weight: 500;
margin: 2rem 0 0.75rem 0;
}
.wrapper_global .content .modul .inhalt h3 strong {
font-weight: 700;
}
.wrapper_global .content .modul .inhalt h3+ul {
margin-top: 0;
}
.wrapper_global .content .modul .inhalt p {
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.1rem;
line-height: 1.4;
font-weight: 400;
margin-bottom: 1rem;
}
.wrapper_global .content.keyvisual-gradient .modul .inhalt p {
color: #FFF;
font-size: 1.3rem;
margin-bottom: 0;
margin-top: 2rem;
a {
color: var(--red-cta) !important;
}
}
.wrapper_global .content .modul .inhalt p.small {
font-size: 1.1rem !important;
}
.wrapper_global .content .modul .inhalt p a,
.wrapper_global .content .modul .inhalt ul a {
color: var(--mint-text);
transition: all 0.2s;
}
.wrapper_global .content .modul .inhalt p a:hover,
.wrapper_global .content .modul .inhalt ul a:hover {
border-bottom: 1px dashed var(--mint-text);
}
.wrapper_global .content.keyvisual-gradient .modul .inhalt h2 {
color: #FFF;
}
.wrapper_global .content .modul .inhalt h2 strong {
font-weight: 700;
}
.wrapper_global .content .modul.preistabelle {
/* Preisübersicht */
grid-area: b;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "h h h h"
"a a a a"
"b c d e"
;
grid-column-gap: 2rem;
grid-row-gap: 1.5rem;
margin: 2rem;
}
.wrapper_global .content .modul.preistabelle h2 {
color: #FFF;
grid-area: h;
font-size: 1.8rem;
line-height: 1.2;
margin-bottom: 0;
padding: 1.5rem 0 .5rem 0;
}
.wrapper_global .content .modul.preistabelle .business-selection {
grid-area: a;
width: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "c b a";
align-items: center;
font-family: Geist;
font-weight: 600;
border-radius: 1rem;
color: var(--mint-text);
backdrop-filter: opacity(20%);
font-size: 0.9rem;
background-color: rgba(255, 255, 255, 1);
display: none;
}
.wrapper_global .content .modul.preistabelle .business-selection .privatkunde {
grid-area: c;
opacity: 0.5;
text-align: right;
}
.wrapper_global .content .modul.preistabelle .business-selection .firmenkunde {
grid-area: a;
opacity: 0.4;
}
.wrapper_global .content .modul.preistabelle .business-selection .privatkunde.active,
.wrapper_global .content .modul.preistabelle .business-selection .firmenkunde.active {
color: var(--mint-text);
opacity: 1;
}
/* Genel stil */
.toggle-switch {
position: relative;
display: inline-block;
width: 40px;
height: 24px;
margin: 10px;
grid-area: b;
}
/* Giriş stil */
.toggle-switch .toggle-input {
display: none;
}
/* Anahtarın stilinin etrafındaki etiketin stil */
.toggle-switch .toggle-label {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 24px;
background-color: var(--mint-cta);
border-radius: 34px;
cursor: pointer;
transition: background-color 0.3s;
}
/* Anahtarın yuvarlak kısmının stil */
.toggle-switch .toggle-label::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 2px;
left: 2px;
background-color: #fff;
transition: transform 0.3s;
}
/* Anahtarın etkin hale gelmesindeki stil değişiklikleri */
.toggle-switch .toggle-input:checked+.toggle-label {
background-color: var(--mint-cta);
}
.toggle-switch .toggle-input:checked+.toggle-label::before {
transform: translateX(16px);
}
.wrapper_global .content .modul.preistabelle .inhalt {
background: #FFF;
border-radius: 1rem;
padding: 0 0 1rem 0;
overflow: hidden;
border: 0.4rem solid #FFF;
text-align: center;
position: relative;
}
.wrapper_global .content .modul.preistabelle .inhalt:nth-child(6) {
grid-column: 2;
margin-left: calc(-50% - 1.25rem);
width: 100%;
}
.wrapper_global .content .modul.preistabelle .inhalt:nth-child(7) {
grid-column: 3;
margin-left: calc(-50% - 1.25rem);
width: 100%;
}
.wrapper_global .content .modul.preistabelle .inhalt:nth-child(8) {
grid-column: 4;
margin-left: calc(-50% - 1.25rem);
width: 100%;
}
.wrapper_global .content .modul.preistabelle .inhalt .badge-wrapper {
background: var(--red-cta);
height: auto;
width: 10rem;
font-family: Geist;
color: #FFF;
font-weight: 700;
text-align: center;
padding: 0.15rem 0;
position: absolute;
transform: rotate(-45deg);
left: -2.5rem;
top: 1.5rem;
font-size: 0.9rem;
}
.wrapper_global .content .modul.preistabelle .inhalt .badge-wrapper .badge {
background: var(--red-cta);
padding: 0.4rem 0;
width: 100%;
z-index: 1;
}
/* .wrapper_global .content .modul.preistabelle .inhalt:nth-child(2) {
transform: scale(1.1)
} */
.wrapper_global .content .modul.preistabelle .inhalt .head {
height: auto;
background-color: var(--fliesstext);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem 0;
}
.wrapper_global .content .modul.preistabelle .inhalt .head p.paketname {
color: #FFF;
font-size: 2rem;
text-transform: lowercase;
font-weight: 600;
text-align: center;
margin: 0;
line-height: 1;
margin-bottom: 1.5rem;
}
.wrapper_global .content .modul.preistabelle .inhalt .preis {
background-color: #FFF;
border-radius: 2rem;
border: 2px solid #FFF;
width: 75%;
padding: 0.5rem;
}
.wrapper_global .content .modul.preistabelle .inhalt .preis p.angebot {
color: var(--fliesstext);
font-size: 1.5rem;
font-weight: 500;
text-align: center;
margin: 0;
line-height: 1;
padding: 0.2rem;
}
.wrapper_global .content .modul.preistabelle .inhalt ul {
font-size: 0.9rem;
line-height: 1.3;
font-weight: 400;
margin: 1.5rem 1rem 2rem 1rem;
}
.wrapper_global .content .modul.preistabelle .inhalt ul li {
margin: 0 0 1rem 0;
}
.wrapper_global .content .modul.preistabelle .inhalt ul li:first-child strong {
font-size: calc(100% + 0.5rem);
/* font-weight: 700 !important;
color: rgb(118, 118, 118) */
}
.wrapper_global .content .modul.preistabelle .inhalt ul li span.plus {
border: 1px solid var(--blue-light);
color: var(--blue-light);
display: inline-block;
font-family: "Geist";
padding: 0.15rem 0.5rem 0.1rem 0.5rem;
font-size: 0.7rem;
font-weight: 600;
border-radius: 1rem;
margin-bottom: 0.4rem;
}
.wrapper_global .content .modul.preistabelle .inhalt ul li span.plus.hidden {
visibility: hidden;
}
.wrapper_global .content .modul.preistabelle .inhalt span.button {
display: inline-block;
background-color: var(--red-cta);
padding: 0.6rem 0.8rem 0.5rem 0.8rem;
color: #FFF;
text-transform: uppercase;
font-weight: 600;
font-family: "Geist";
border-radius: 2rem;
letter-spacing: 0.07rem;
transition: all 0.2s;
border: 2px solid var(--red-cta);
font-size: 0.9rem;
text-align: center;
cursor: pointer;
}
.wrapper_global .content .modul.preistabelle .inhalt span.button:hover {
background-color: #FFF;
color: var(--red-cta);
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul.spalten3 {
grid-template-areas: "a"
"b"
"c";
grid-template-columns: 1fr;
margin: 0;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.wrapper_global .content .modul .inhalt {
padding: 2rem 0 0 0;
}
.wrapper_global .content .modul.spalten3 .inhalt {
padding: 2rem 2rem 1rem 2rem;
}
.wrapper_global .content .modul .bild {
padding: 0;
}
.wrapper_global .content .modul .bild img {
max-width: 80%;
max-height: 15rem;
}
.wrapper_global .content.keyvisual-gradient.fullscreen.mobile-active {
height: 100vh;
width: 100vw;
position: absolute;
left: 0;
z-index: 3;
top: calc(var(--nav1-height) + 0.5rem);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: calc(var(--nav1-height) + 0.5rem + 2rem);
}
.wrapper_global .content.keyvisual-gradient.fullscreen img {
max-width: 75%;
}
.wrapper_global .content .modul .inhalt h2 {
font-size: 1.5rem;
}
.wrapper_global .content .modul .inhalt p {
font-size: 1rem;
}
.wrapper_global .content .modul.faq .inhalt .wrapper-faq .antwort {
padding-right: 3rem;
}
.wrapper_global .content .modul.preistabelle {
/* Preisübersicht */
grid-template-columns: 1fr;
grid-template-areas: "h"
"a"
"b"
"c"
"d"
"e";
margin-left: 0;
margin-right: 0;
}
.wrapper_global .content .modul.preistabelle .inhalt:nth-child(6),
.wrapper_global .content .modul.preistabelle .inhalt:nth-child(7),
.wrapper_global .content .modul.preistabelle .inhalt:nth-child(8) {
grid-column: auto;
margin-left: 0%;
width: 100%;
}
}
/*
======================================================================
Konfigurator
======================================================================
*/
.wrapper_global .content .modul .konfigurator {
background: linear-gradient(135deg, var(--blue-medium) 0%, var(--mint-text) 100%);
padding: 3px;
border-radius: 16px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content {
background: #ffffff;
background-image: none;
padding: 2rem;
border-radius: 14px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content p.ueberschrift {
font-family: Geist;
color: var(--blue-dark);
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline {
display: grid;
grid-template-areas: "a b"
"c c";
grid-row-gap: 0.5rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline .logo {
grid-area: a;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline .logo img {
max-width: 14rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline .schriftzug {
grid-area: b;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-family: "Geist";
color: var(--blue-dark);
font-weight: 600;
font-size: 1.3rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline .keyvisual-gradient {
grid-area: c;
height: 0;
display: none;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .hero-glow {
padding-bottom: 1px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .boxen3 {
display: grid;
grid-template-areas: "a b c";
grid-column-gap: 2rem;
grid-template-columns: 23% 23% 1fr;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .boxen3 .stimme {
grid-area: a;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .boxen3 .musik {
grid-area: b;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .boxen3 .tipps {
grid-area: c;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox {
height: 13rem;
width: 100%;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.05rem;
font-weight: 400;
margin-bottom: 1rem;
overflow: hidden;
transition: all 0.2s ease;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox:hover {
border-color: #cbd5e1;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.fehler {
height: auto;
padding: 1rem;
background-color: var(--red-cta);
color: #FFF;
border: none;
font-size: 1rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in {
width: 200%;
display: grid;
grid-template-columns: 50% 50%;
margin-left: 0;
transition: all 0.2s;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in.offen {
margin-left: -100%;
transition: all 0.2s
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in .kategorien,
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in .kategorien-inhalt {
height: 13rem;
overflow-x: hidden;
overflow-y: auto;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in .kategorien {}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-tipps {
padding: 1.25rem;
border: none;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f8fafc;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-tipps p {
padding-bottom: 1rem;
font-size: 0.9rem;
line-height: 1.6;
color: var(--fliesstext);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-tipps p:last-child {
padding-bottom: 0;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-tipps span {
color: var(--blue-medium);
font-weight: 500;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content>.keyvisual-gradient {
padding: 0.3rem !important;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-ansagentext {
padding: 1.5rem;
height: 20rem;
background-color: #FFF;
margin-bottom: 1rem;
z-index: 2;
line-height: 1.5;
border: 2px solid var(--blue-medium);
border-radius: 10px;
box-shadow: 0 0 0 4px rgba(23, 198, 216, 0.1);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-ansagentext:focus {
border-color: var(--blue-dark);
outline: none;
box-shadow: 0 0 0 4px rgba(0, 19, 87, 0.1);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-ansagentext p {
padding-bottom: 1rem;
font-size: 1.2rem;
line-height: 1.5;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box {
grid-area: c;
display: grid;
grid-template-areas: "a b"
"c c";
grid-template-columns: 50% 50%;
width: 100%;
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.05rem;
font-weight: 400;
margin-top: 1.5rem;
grid-row-gap: 1rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .wrapper-left {
grid-area: a;
padding: 1.5rem;
background-color: #f8fafc;
border-radius: 10px;
margin-right: 0.5rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .wrapper-right {
grid-area: b;
padding: 1.5rem;
background-color: #f8fafc;
border-radius: 10px;
margin-left: 0.5rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box a.button,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box span.button {
display: inline-block;
background-color: var(--red-cta);
padding: 0.7rem 1.2rem;
color: #FFF;
text-transform: none;
font-weight: 600;
font-family: "Geist";
border-radius: 8px;
letter-spacing: 0.01em;
transition: all 0.2s;
border: 2px solid var(--red-cta);
font-size: 0.95rem;
cursor: pointer;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box a.button:hover,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box span.button:hover {
background-color: #e6003f;
border-color: #e6003f;
color: #FFF;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left a.button,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left span.button {
display: inline-block;
background-color: var(--blue-medium);
padding: 0.7rem 1.2rem;
color: #FFF;
text-transform: none;
font-weight: 600;
font-family: "Geist";
border-radius: 8px;
letter-spacing: 0.01em;
transition: all 0.2s;
border: 2px solid var(--blue-medium);
font-size: 0.95rem;
cursor: pointer;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left a.button:hover,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left span.button:hover {
background-color: var(--blue-dark);
border-color: var(--blue-dark);
color: #FFF;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left {
border-right: none;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .right {}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .right {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left p,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .right p {
font-size: 0.9rem;
text-align: center;
line-height: 1.5;
margin-bottom: 1rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box {
grid-area: c;
display: grid;
grid-template-areas: "a b c";
grid-template-columns: auto 1fr auto;
width: 100%;
background-color: #f8fafc;
border-radius: 10px;
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.05rem;
font-weight: 400;
justify-content: center;
align-items: center;
grid-column-gap: 1rem;
height: 4rem;
padding: 1rem 1.5rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box i.play:before {
font-family: 'FontAwesome';
content: "\f144";
font-weight: 900;
color: var(--blue-medium);
font-size: 2rem;
cursor: pointer;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box i.play:hover:before {
color: var(--blue-dark);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box i.play.active:before {
content: "\f28b";
color: var(--blue-medium);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box .progress-wrapper {
width: 100%;
height: 0.6rem;
background-color: #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box .progress-wrapper .progress {
width: 30%;
height: 0.6rem;
background-color: var(--blue-medium);
border-radius: 4px;
overflow: hidden;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box .time {
font-size: 0.85rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box .time span {
opacity: 0.7;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box.loader {
display: block;
background-color: #f8fafc;
border-radius: 10px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box.loader .loading {
height: 100%;
text-align: center;
color: #000;
position: relative;
overflow: hidden;
padding: 1rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box.loader .text {
z-index: 5;
background-color: #FFF;
color: var(--blue-medium);
position: absolute;
width: 15rem;
height: 1.5rem;
top: calc(50% - 0.75rem);
left: calc(50% - 7.5rem);
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
border-radius: 8px;
border: 1px solid var(--blue-medium);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box.loader .bg {
position: absolute;
left: -46px;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
background: repeating-linear-gradient(-55deg, var(--blue-medium) 1px, #FFF 2px, #FFF 11px, var(--blue-medium) 12px, var(--blue-medium) 20px);
animation-name: loader;
animation-duration: .6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox ul {
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.05rem;
font-weight: 400;
padding: 0.5rem 0;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox ul li {
line-height: 2;
padding: 0.2rem 0.75rem;
margin: 2px 0.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 6px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox ul li:hover,
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox ul li.active {
background-color: #e2e8f0;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox ul li.active {
color: var(--blue-dark);
font-weight: 600;
background-color: rgba(23, 198, 216, 0.1);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox ul li span {
background-color: var(--blue-medium);
border-radius: 4px;
border: 1px solid var(--blue-medium);
padding: 0.1rem 0.6rem;
color: #FFF;
font-size: 0.7rem;
transition: all 0.2s;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in .kategorien ul li span,
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in .kategorien-inhalt ul li:first-child span {
background-color: transparent;
color: var(--blue-medium);
border: none;
padding: 0;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in .kategorien ul li span:before {
font-family: "FontAwesome";
content: "\f138";
font-size: 1rem;
font-weight: 900;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox .slide-in .kategorien-inhalt ul li:first-child span:before {
font-family: "FontAwesome";
content: "\f137";
font-size: 1rem;
font-weight: 900;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox ul li span:hover {
background-color: var(--blue-dark);
color: #FFF;
transition: all 0.2s;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul .konfigurator {
margin: 0;
border-radius: 12px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content {
padding: 1.25rem;
border-radius: 10px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content p.ueberschrift {
font-size: 0.8rem;
margin-bottom: 0.5rem;
margin-top: 1rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline {
grid-template-areas: "a"
"b"
"c";
grid-row-gap: 0.3rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
grid-template-columns: 100%;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline .logo {
display: none;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline .schriftzug {
font-size: 1.1rem;
justify-content: flex-start;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .headline .keyvisual-gradient {
height: 0;
padding: 0;
display: none;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .boxen3 {
grid-template-areas: "a"
"b"
"c";
grid-template-columns: 100%;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox {
height: auto;
border-radius: 8px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .contentbox.textbox-ansagentext {
padding: 1rem;
height: auto;
border: 2px solid var(--blue-medium);
box-shadow: 0 0 0 3px rgba(23, 198, 216, 0.1);
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box {
grid-template-areas: "a" "c" "b";
grid-template-columns: 100%;
font-size: 1rem;
font-weight: 400;
padding: 0;
margin-top: 1rem;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .wrapper-left,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .wrapper-right {
padding: 1rem;
margin: 0;
margin-bottom: 0.5rem;
border-radius: 8px;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left {
border-right: none;
padding: 0;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .right {
padding: 0;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left a.button,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box .left span.button,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box a.button,
.wrapper_global .content .modul .konfigurator .konfigurator-content .cto-box span.button {
font-size: 0.9rem;
padding: 0.6rem 1rem;
width: 100%;
text-align: center;
display: block;
text-transform: none;
}
.wrapper_global .content .modul .konfigurator .konfigurator-content .play-box {
border-radius: 8px;
padding: 0.75rem 1rem;
}
}
/*
======================================================================
Sprecherprofile
======================================================================
*/
.wrapper_global .content .modul.sprecherprofil {
display: grid;
/* 5x20% + 4x2rem Gap ergab 100% + 8rem - die fuenfte Spalte ragte
exakt 128px ueber die Containerkante (Scan 08.08.). 1fr rechnet
die Gaps ein. */
grid-template-columns: repeat(5, 1fr);
grid-row-gap: 2rem;
grid-column-gap: 2rem;
margin: 1rem 2rem 2rem 2rem;
width: calc(100% - 12rem);
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil {
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.2rem;
line-height: 1.3;
font-weight: 400;
border-radius: 1rem;
text-align: center;
display: grid;
grid-template-areas: "a"
"b"
"c"
"d";
overflow: hidden;
background-color: #FFF;
border: 1px solid var(--grey-dark);
transition: all 0.2s;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 2px 5px 0 rgba(0, 0, 0, .03);
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil:last-child {
display: none;
}
/* .wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil:hover {
transform: scale(1.05);
transition: all 0.2s;
} */
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil:hover {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 4px 10px 0 rgba(0, 0, 0, .1);
transition: all 0.2s;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .bild {
grid-area: a;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1.75rem 1.75rem 1.25rem 1.75rem;
background: linear-gradient(135deg, rgba(6, 207, 241, 1) 20%, rgba(222, 250, 142, 1) 80%);
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .bild .wrapper-bild {
width: 100%;
overflow: hidden;
aspect-ratio: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-start;
border-radius: 100%;
background-color: rgba(255, 255, 255, 1);
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .bild img {
width: auto;
max-width: 120%;
padding-top: 0.5rem;
height: auto;
max-height: 120%;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .bild p.name {
font-size: 1.5rem;
padding: 0.25rem 0;
border-radius: 2rem;
margin-top: 1rem;
color: var(--blue-dark);
font-weight: 600;
background-color: rgba(255, 255, 255, 0.6);
width: 100%;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .beschreibung {
grid-area: b;
font-size: 0.9rem;
height: 7.5rem;
color: var(--blue-dark);
font-weight: 400;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0 1.3rem;
line-height: 1.3;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .beschreibung strong {
padding-bottom: 0.25rem;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .player {
grid-area: c;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .player span {
padding: 0.5rem 0;
background-color: var(--grey-light);
display: block;
cursor: pointer;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .player span i {
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
color: var(--blue-dark);
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .player span i.play:before {
font-family: 'FontAwesome';
content: "\f144";
font-weight: 300;
color: var(--blue-dark);
font-size: 1.6rem;
cursor: pointer;
transition: all 0.2s;
margin-right: 0.5rem;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .player span i.play:hover:before {
font-weight: 900;
transition: all 0.2s;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .player span i.play.active:before {
font-weight: 900;
transition: all 0.2s;
content: "\f28b";
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .cta {
grid-area: d;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem 0;
display: none;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .cta span.button {
display: inline-block;
background-color: var(--mint-cta);
padding: 0.6rem 0.8rem 0.5rem 0.8rem;
color: #FFF;
text-transform: uppercase;
font-weight: 600;
font-family: "Geist";
border-radius: 2rem;
letter-spacing: 0.07rem;
transition: all 0.2s;
border: 2px solid var(--mint-cta);
font-size: 0.9rem;
text-align: center;
cursor: pointer;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .cta span.button:hover {
background-color: #FFF;
color: var(--mint-cta);
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul.sprecherprofil {
grid-template-columns: 100%;
width: 100%;
margin: 0;
padding-bottom: 2rem;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .beschreibung {
font-size: 1.1rem;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .player span i {
font-size: 1.1rem;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .bild p.name {
font-size: 1.6rem;
}
}
/*
======================================================================
Musik
======================================================================
*/
.wrapper_global .content .inhalt .musicpool {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 2rem;
grid-column-gap: 2rem;
margin: 1.5rem 0 0 0;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik {
font-family: "Geist";
color: var(--fliesstext);
border: 1px solid #FFF;
transition: all 0.2s;
border-radius: 1rem;
overflow: hidden;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik span.headline {
width: 100%;
display: block;
color: var(--blue-dark);
line-height: 2.5rem;
padding: 0 1rem;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.2s;
background-color: rgba(255, 255, 255, 0.6);
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul {
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.05rem;
font-weight: 400;
padding: 0.5rem 0;
background-color: #FFF;
margin: 0;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li {
line-height: 2;
padding: 0.15rem 1rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s;
margin: 0;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li:hover {
background-color: #EEE;
transition: all 0.2s;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li span {
display: flex;
align-items: center;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li span span.listen,
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li span span.use {
background-color: var(--blue-light);
border-radius: 2rem;
border: 1px solid var(--blue-light);
padding: 0rem 0.6rem;
color: #FFF;
font-size: 0.75rem;
transition: all 0.2s;
display: inline-block;
width: 7rem;
text-align: center;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li span span.listen:hover,
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li span span.listen.active {
background-color: #FFF;
color: var(--mint-text);
transition: all 0.2s;
font-weight: 600;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li span span.use:hover {
background-color: #FFF;
color: var(--blue-light);
transition: all 0.2s;
font-weight: 600;
}
.wrapper_global .content .inhalt .musicpool .wrapper-musik ul li span span.listen {
margin-right: 0.5rem;
background-color: var(--mint-cta);
border-radius: 2rem;
border: 1px solid var(--mint-cta);
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .inhalt .musicpool {
grid-template-columns: 100%;
width: 100%;
margin: 0;
padding-bottom: 2rem;
}
}
/*
======================================================================
Texte
======================================================================
*/
.wrapper_global .content.texte-background {
background: #f8fafc !important;
padding: 2.5rem 2rem;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.wrapper_global .content .modul .inhalt .grid-texte {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 2rem;
grid-column-gap: 2rem;
margin: 0 0 0 1.5rem 0;
padding: 1rem 0 1.5rem 0;
}
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte {
font-family: "Geist";
color: var(--fliesstext);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 2px 5px 0 rgba(0, 0, 0, .03);
transition: all 0.2s;
background-color: rgba(255, 255, 255, 1);
position: relative;
border-radius: 0.75rem;
border-top: none;
overflow: clip;
}
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte:hover {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 2px 5px 0 rgba(0, 0, 0, .1);
transition: all 0.2s;
}
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte .section {
margin: 1rem 1rem 1rem 0.5rem;
}
.test {
display: grid;
grid-template-columns: 1fr;
}
/* .wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte .section:before {
content: "";
height: 3rem;
position: absolute;
bottom: 1rem;
display: block !important;
width: calc(100% - 2rem);
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
} */
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte h3 {
margin: 0;
display: block;
color: #FFF;
line-height: 2.5rem;
padding: 0 1.5rem;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.2s;
background: linear-gradient(135deg, rgba(6, 207, 241, 1) 20%, rgba(222, 250, 142, 1) 80%);
scroll-margin-top: 6rem;
}
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte .section {
max-height: 25rem;
overflow: auto;
}
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte .section ul {
padding: 1.5rem;
margin: 0;
}
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte .section ul li {
padding: 0 0 1rem 0;
margin: 0 0 1rem 0;
border-bottom: 1px dotted var(--mint-text);
font-size: 1.05rem;
line-height: 1.3;
}
.wrapper_global .content .modul .inhalt .grid-texte .wrapper-texte .section ul li:last-child {
padding: 0 0 1rem 0;
margin: 0 0 1rem 0;
border-bottom: none;
}
a.produkt {
color: var(--mint-text);
font-family: "Geist";
font-weight: 600;
font-size: 0.95rem;
padding: 0.45rem 1rem;
border: 1px solid var(--mint-cta);
border-radius: 5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
background-color: #FFF;
display: inline-block;
transition: all 0.2s;
}
a.produkt:hover {
color: #FFF;
border: 1px solid var(--mint-cta);
background-color: var(--mint-cta);
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul .inhalt .grid-texte {
grid-template-columns: 1fr;
}
a.produkt span {
display: none;
}
a.produkt:last-of-type {
margin-bottom: 2rem;
}
}
/*
======================================================================
Listen ALLGEMEIN
======================================================================
*/
.wrapper_global .content .modul .inhalt ul {
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.2rem;
line-height: 1.3;
font-weight: 400;
margin: 2rem 0;
}
.wrapper_global .content .modul .inhalt ul li {
margin-bottom: 0.5rem;
margin-left: 2rem;
}
.wrapper_global .content .modul .inhalt ul.mehrzeilig li {
margin-bottom: 1rem;
font-size: 1.1rem !important;
}
.wrapper_global .content .modul .inhalt ul li:before {
font-family: "FontAwesome";
display: inline-block;
margin-left: -2rem;
width: 2rem;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul .inhalt ul {
font-size: 1.1rem;
}
}
/*
======================================================================
Mein Konto
======================================================================
*/
/* Subnavigation */
.wrapper_global .content.subnav-sticky {
position: sticky;
padding: 3rem 0 3rem 0;
top: 4rem;
background-color: #FFF;
z-index: 1;
height: 5.1rem;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 2rem;
}
.wrapper_global .content .modul ul.subnav {
display: grid;
align-items: center;
font-size: 1rem;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wrapper_global .content .modul ul.subnav li {
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0;
font-family: Geist;
color: var(--blue-dark);
font-weight: 500;
transition: all 0.2s;
height: 2rem;
border-radius: 2rem;
border: 1px solid var(--blue-dark);
overflow: hidden;
}
.wrapper_global .content .modul ul.subnav li a {
color: inherit;
width: 100%;
padding: 1rem;
text-align: center;
}
.wrapper_global .content .modul ul.subnav li:hover,
.wrapper_global .content .modul ul.subnav li.current {
color: #FFF;
background-color: var(--blue-dark);
border: 1px solid var(--blue-dark);
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.subnav-sticky {
top: 3.5rem;
height: 12rem;
padding: 2rem 0 1rem 0;
overflow: auto;
}
/* .wrapper_global .content.subnav-sticky:before {
content: "";
height: 5rem;
position: fixed;
top: 10.5rem;
display: block !important;
width: 100%;
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 90%);
} */
.wrapper_global .content .modul ul.subnav {
display: grid;
align-items: center;
font-size: 1rem;
grid-template-columns: auto;
padding-bottom: 2.5rem;
}
.wrapper_global .content .modul ul.subnav li {
padding: 1rem 1rem;
text-align: center;
font-size: 0.9rem;
line-height: 1;
}
.wrapper_global .content .modul a.guthaben-kaufen {
float: none;
margin: 1rem 0;
display: inline-flex;
font-size: 0.9rem;
}
}
/* Ansagenarchiv */
.wrapper_global .content.meinkonto {
background-image: url("../images/background-keyvisual-telefonansagen-ai.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
margin: 1rem 0 0 0;
min-height: calc(100vh - var(--nav1-height) - 0.5rem - 3rem - 8.5rem);
min-height: calc(100vh - var(--nav1-height) - 0.5rem - 3rem - 8.5rem);
}
.min-height-preistabelle {
min-height: calc(100vh - var(--nav1-height) - 0.5rem - 3rem - 8.5rem + 2rem);
}
.wrapper_global .content.meinkonto h2 {
color: var(--blue-light);
font-size: 1.8rem;
line-height: 1.2;
font-weight: 500;
margin: 1.5rem 0 1.5rem 0;
}
.wrapper_global .content.meinkonto .modul h2+.inhalt {
margin: 0;
padding-top: 0;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv {
font-family: "Geist";
font-weight: 400;
font-size: 0.95rem;
line-height: 1.3;
color: var(--fliesstext);
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv .ansage {
display: grid;
grid-template-areas: "a b c";
grid-template-columns: 15% 1fr auto;
padding: 1rem;
border-bottom: 1px dotted var(--fliesstext);
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv .ansage:last-of-type {
border-bottom: none;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv p.datum {
color: var(--blue-medium);
font-size: 0.85rem;
text-align: right;
margin-right: 1rem;
grid-area: a;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv p.datum strong {
color: var(--blue-dark);
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv p.ansagentext {
grid-area: b;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv .tools {
display: flex;
justify-content: center;
align-items: center;
margin-left: 2rem;
grid-area: c;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv i {
font-family: 'FontAwesome';
content: "\f007";
font-weight: 300;
font-size: 1.5rem;
padding: 0.25rem;
color: var(--blue-light);
cursor: pointer;
transform: all 0.2s;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv i:hover {
font-weight: 900;
transform: all 0.2s;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv i.download:before {
content: "\f0ed";
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv i.vorlage:before {
content: "\f14b";
display: none;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv .ansage {
display: grid;
grid-template-areas: "a c"
"b b";
grid-template-columns: 50% 50%;
padding: 1rem;
border-bottom: 1px dotted var(--fliesstext);
grid-column-gap: 0;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv p.datum {
text-align: left;
padding: 0.75rem 0.75rem 0.5rem 0.75rem;
grid-area: a;
border-top: 1px solid var(--blue-light);
border-left: 1px solid var(--blue-light);
border-bottom: 1px solid var(--blue-light);
background-color: #FFF;
margin-right: 0;
line-height: 1.5;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv p.ansagentext {
padding-top: 0.75rem;
font-size: 0.9rem;
}
.wrapper_global .content.meinkonto .modul .inhalt-ansagenarchiv .tools {
justify-content: flex-end;
margin-left: 0;
padding: 0.75rem;
background-color: #FFF;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border-top: 1px solid var(--blue-light);
border-right: 1px solid var(--blue-light);
border-bottom: 1px solid var(--blue-light);
}
}
/* Rechnungsarchiv */
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv {
font-family: "Geist";
font-weight: 400;
font-size: 0.95rem;
line-height: 1.3;
color: var(--fliesstext);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-row-gap: 2rem;
grid-column-gap: 2rem;
margin: 1rem 0;
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung {
border: 1px dotted var(--fliesstext);
border-radius: 1rem;
background-color: #FFF;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung i.icon-rechnung {
font-family: 'FontAwesome';
content: "\f007";
font-weight: 100;
font-size: 2rem;
color: var(--blue-light);
transform: all 0.2s;
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung i.icon-rechnung:before {
content: "\f543";
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung p.betrag {
font-weight: 600;
font-size: 0.9rem;
line-height: 1.5;
padding-top: 0.5rem;
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung p.datum {
font-size: 0.9rem;
line-height: 1.3;
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung p.download {
font-size: 0.9rem;
margin-top: 1.5rem;
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung p.download a {
font-weight: 500;
background-color: #FFF;
color: var(--mint-text);
padding: 0.3rem 0.8rem;
border-radius: 2rem;
border: 1px solid var(--mint-cta);
transition: all 0.2s;
}
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv .rechnung p.download a:hover {
background-color: var(--mint-cta);
color: #FFF;
transition: all 0.2s;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.meinkonto .modul .inhalt-rechnungsarchiv {
grid-template-columns: 1fr 1fr;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
}
}
/* Inhalt History */
.wrapper_global .content.meinkonto .modul .inhalt-history {
font-family: "Geist";
font-weight: 400;
font-size: 1rem;
line-height: 1.3;
color: var(--fliesstext);
}
.wrapper_global .content.meinkonto .modul .inhalt-history .kontobewegung {
display: grid;
grid-template-areas: "a b c";
grid-template-columns: auto 1fr auto;
padding: 1rem;
border-bottom: 1px dotted var(--fliesstext);
grid-column-gap: 1.5rem;
}
.wrapper_global .content.meinkonto .modul .inhalt-history .kontobewegung p.datum {
grid-area: a;
font-weight: 600;
}
.wrapper_global .content.meinkonto .modul .inhalt-history .kontobewegung p.typ {
grid-area: b;
}
.wrapper_global .content.meinkonto .modul .inhalt-history .kontobewegung p.menge {
grid-area: c;
}
.wrapper_global .content.meinkonto .modul .inhalt-history p.current {
font-size: 1rem;
margin-bottom: 1.5rem;
text-align: end;
border-radius: 10rem;
font-weight: 500;
padding: 0.5rem 1rem;
border: 1px solid var(--mint-cta);
display: inline-block;
color: var(--mint-text);
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.meinkonto .modul .inhalt-history .kontobewegung {
grid-template-areas: "a a"
"b c";
grid-template-columns: 1fr 1fr;
padding-left: 0;
padding-right: 0;
}
.wrapper_global .content.meinkonto .modul .inhalt-history .kontobewegung p.datum {
margin-bottom: 0.2rem;
}
.wrapper_global .content.meinkonto .modul .inhalt-history .kontobewegung p.menge {
align-self: flex-end;
text-align: end;
}
}
/*
======================================================================
Listenzeichen
======================================================================
*/
.wrapper_global .content .modul .inhalt ul.li-check li:before {
content: "\f00c";
color: var(--red-cta);
}
.wrapper_global .content .modul .inhalt ul.li-info {
font-size: 1rem;
margin-bottom: 1rem;
margin-left: 0;
li {
margin-left: 1.5rem;
}
li:before {
width: 1.5rem;
content: "\f05a";
color: var(--blue-medium);
font-weight: 900;
margin-left: -1.5rem;
}
}
/*
======================================================================
Liste Nummeriert
======================================================================
*/
.wrapper_global .content .modul .inhalt ul.ul-nummern {
color: #FFF;
font-size: 1.1rem;
padding-top: 1rem;
margin: 0;
}
.wrapper_global .content .modul .inhalt ul.ul-nummern li {
margin-bottom: 1rem;
}
.wrapper_global .content .modul .inhalt ul.ul-nummern li:before {
font-weight: 900;
color: #FFF;
font-size: 1.3rem;
}
.wrapper_global .content .modul .inhalt ul li.li-nummer1:before {
content: "\e0ee";
}
.wrapper_global .content .modul .inhalt ul li.li-nummer2:before {
content: "\e0ef";
}
.wrapper_global .content .modul .inhalt ul li.li-nummer3:before {
content: "\e0f0";
}
.wrapper_global .content .modul .inhalt ul li.li-nummer4:before {
content: "\e0f1";
}
.wrapper_global .content .modul .inhalt ul li.li-nummer5:before {
content: "\e0f2";
}
/*
======================================================================
Footer
======================================================================
*/
.wrapper_global .content .modul .footer {
grid-area: b;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 0.8rem;
padding: 0 2.5rem 0 2.5rem;
height: 3rem;
}
.wrapper_global .content .modul .footer p,
.wrapper_global .content .modul .footer li {
color: #FFF;
font-family: "Geist";
font-weight: 400;
margin-bottom: 0.3rem;
}
.wrapper_global .content .modul .footer p {
opacity: 0.8;
padding-top: 0.5rem;
line-height: 1.3rem;
display: inline;
}
.wrapper_global .content .modul .footer p a.telefon:before {
content: "\e11b";
font-family: "FontAwesome";
color: #FFF;
font-weight: 400;
padding-right: 0.25rem;
line-height: 1.3rem;
}
.wrapper_global .content .modul .footer p a.email:before {
content: "\f0e0";
font-family: "FontAwesome";
color: #FFF;
font-weight: 400;
padding-right: 0.25rem;
line-height: 1.3rem;
}
.wrapper_global .content .modul .footer p a.memberof span:before {
content: "\f06d";
font-family: "FontAwesome";
color: #FFF;
font-weight: 400;
padding: 0;
line-height: 1.3rem;
}
.wrapper_global .content .modul .footer ul {
padding-top: 0.5rem;
padding-bottom: 0.3rem;
}
.wrapper_global .content .modul .footer li {
display: inline;
}
.wrapper_global .content .modul .footer li:after {
content: " | "
}
.wrapper_global .content .modul .footer li:last-child:after {
content: ""
}
.wrapper_global .content .modul .footer a {
color: #FFF;
opacity: 0.8 !important;
transition: all 0.2s;
}
.wrapper_global .content .modul .footer a:hover {
opacity: 1 !important;
transition: all 0.2s;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content .modul .footer {
padding: 1rem 0 1rem 0;
height: auto;
}
.wrapper_global .content .modul .footer p {
margin-bottom: 0;
}
.wrapper_global .content .modul .footer p {
padding-top: 0;
}
}
/*
======================================================================
Fullscreen Elemente
======================================================================
*/
.wrapper_fullscreen {
background: rgb(6, 207, 241);
background: linear-gradient(135deg, rgba(6, 207, 241, 1) 20%, rgba(222, 250, 142, 1) 80%);
min-height: calc(100vh - var(--nav1-height) - 3rem);
display: flex;
align-items: center;
justify-content: center;
animation: gradient 6s alternate infinite;
animation-duration: 6s;
background-size: 200% 200%;
}
.wrapper_fullscreen.notfound {
min-height: calc(100vh - var(--nav1-height) - 3rem);
}
.wrapper_fullscreen .wrappper_content_notfound {
display: grid;
grid-template-columns: auto 1fr;
max-width: 50rem;
height: auto;
justify-content: center;
align-items: center;
grid-column-gap: 3rem;
grid-row-gap: 3rem;
}
.wrapper_fullscreen .wrappper_content_notfound img {
max-width: 95%;
}
.wrapper_fullscreen .wrappper_content_notfound p {
font-family: "Geist";
font-weight: 700;
font-size: 1rem;
text-align: left;
line-height: 1.5;
}
.wrapper_fullscreen .wrappper_content_notfound p.headline {
font-weight: 700;
font-size: 1.3rem;
color: var(--blue-dark);
}
.wrapper_fullscreen .wrappper_content_notfound p.subline {
margin: 0.5rem 0 1.5rem 0;
font-weight: 500;
font-size: 1.1rem;
color: var(--blue-dark);
}
.wrapper_fullscreen .wrapper_content_login {
display: grid;
/* 50%+50% + 2.5rem Gap ueberlief das rechte Padding (Scan 08.08.) */
grid-template-columns: repeat(2, 1fr);
max-width: 50rem;
height: auto;
background-color: rgba(255, 255, 255, 0.75);
padding: 2.5rem;
grid-column-gap: 2.5rem;
grid-row-gap: 2rem;
border-radius: 1rem;
border: 0.6rem solid #FFF;
}
.wrapper_fullscreen.text .wrapper_content_login {
display: grid;
grid-template-columns: 100%;
max-width: 40rem;
padding: 2.5rem;
grid-row-gap: 0;
}
.wrapper_fullscreen .wrapper_content_login .user-action:first-child {
border-right: 1px solid #858585;
padding: 0 2.5rem 1rem 0;
display: flex;
flex-direction: column;
}
.wrapper_fullscreen .wrapper_content_login .user-action:last-child {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 0 2rem 1rem 0;
}
.wrapper_fullscreen.zugangsdaten .wrapper_content .user-action:last-child {
padding-bottom: 1rem
}
.wrapper_fullscreen .wrapper_content_registrieren {
max-width: 30rem;
background-color: rgba(255, 255, 255, 0.75);
padding: 2.5rem;
margin: 2rem;
border-radius: 1rem;
border: 0.6rem solid #FFF;
}
.wrapper_fullscreen input[type="text"],
.wrapper_fullscreen input[type="email"],
.wrapper_fullscreen input[type="password"] {
background: #FFF;
border: 1px solid var(--grey-dark);
padding: 0 0.5rem;
width: 100%;
font-family: "Geist";
color: var(--fliesstext);
margin: 0.3rem 0 1.5rem 0;
height: 2.7rem;
line-height: 2.7rem;
}
.wrapper_fullscreen .wrapper_password {
position: relative;
}
.wrapper_fullscreen .wrapper_password i {
position: absolute;
top: 1.3rem;
right: 0.8rem;
}
.wrapper_fullscreen .wrapper_password i:before {
content: "\f070";
font-family: "FontAwesome";
color: var(--mint-text);
font-weight: 400;
font-size: 0.95rem;
cursor: pointer;
width: 1.5rem;
line-height: 2.7rem;
text-align: center;
}
.wrapper_fullscreen .wrapper_password i.show:before {
content: "\f06e";
}
.wrapper_fullscreen label {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 500;
font-size: 0.9rem;
}
.wrapper_fullscreen p.text {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 500;
font-size: 1rem;
text-align: center;
line-height: 1.5;
}
.wrapper_fullscreen p.text-small {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 400;
font-size: 0.8rem;
text-align: left;
line-height: 1.5;
margin-bottom: 1rem;
margin-top: -0.5rem;
}
.wrapper_fullscreen p.headline {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 400;
font-size: 0.9rem;
text-transform: uppercase;
margin: 1rem 0 2rem 0;
text-align: center;
line-height: 1.5;
letter-spacing: 2px;
}
.wrapper_fullscreen .wrapper_content_login .user-action:last-child p.headline {
margin-bottom: 0;
}
.wrapper_fullscreen p.fehler {
font-family: "Geist";
color: var(--red-cta);
font-weight: 500;
font-size: 1rem;
text-align: center;
line-height: 1.5;
margin: -0.5rem 0 2rem 0;
}
.wrapper_fullscreen span.button,
.wrapper_fullscreen a.button {
display: inline-block;
background-color: var(--red-cta);
padding: 0.6rem 0.8rem 0.5rem 0.8rem;
color: #FFF;
text-transform: uppercase;
font-weight: 600;
font-family: "Geist";
border-radius: 2rem;
letter-spacing: 0.07rem;
transition: all 0.2s;
border: 2px solid var(--red-cta);
font-size: 0.9rem;
text-align: center;
width: 100%;
}
.wrapper_fullscreen p.text+span.button,
.wrapper_fullscreen p.text+a.button {
margin-bottom: 1.5rem;
}
.wrapper_fullscreen.text span.button,
.wrapper_fullscreen.text a.button {
margin-top: 2rem;
margin-bottom: 0 !important;
}
.wrapper_fullscreen span.button:hover,
.wrapper_fullscreen a.button:hover {
background-color: #FFF;
color: var(--red-cta);
}
.wrapper_fullscreen a.pswd {
color: var(--fliesstext);
height: 1.5rem;
display: flex;
justify-content: center;
align-items: flex-end;
font-weight: 400;
font-family: "Geist";
transition: all 0.2s;
font-size: 0.8rem;
text-align: center;
}
.wrapper_fullscreen a.pswd:hover {
color: var(--red-cta);
transition: all 0.2s;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_fullscreen .wrappper_content_notfound {
display: grid;
grid-template-columns: 100%;
align-items: center;
align-content: center;
justify-content: center;
margin: 0 2rem;
text-align: center;
}
.wrapper_fullscreen .wrappper_content_notfound img {
max-width: 50%;
text-align: center;
}
.wrapper_fullscreen .wrappper_content_notfound p {
text-align: center;
}
.wrapper_fullscreen .wrappper_content_notfound p.headline {
font-size: 1rem;
}
.wrapper_fullscreen .wrappper_content_notfound p.subline {
font-size: 1rem;
}
.wrapper_fullscreen .wrapper_content_login {
grid-template-columns: 100%;
height: auto;
margin: 3rem 2rem;
padding-top: 2.5rem;
}
.wrapper_fullscreen .wrapper_content_login .user-action:first-child {
border-right: none;
border-bottom: 1px solid #858585;
padding: 0 0 2rem 0;
}
.wrapper_fullscreen p.headline {
margin: 0 0 1rem 0;
}
.wrapper_fullscreen .wrapper_content_login .user-action:first-child p.headline {
margin-bottom: 1.5rem;
}
.wrapper_fullscreen .wrapper_content_login .user-action:last-child p.headline {
margin-bottom: 1rem;
margin-top: 0.3rem;
}
.wrapper_fullscreen p.text {
margin-bottom: 2rem;
}
.wrapper_fullscreen .wrapper_content_login .user-action:last-child {
padding: 0;
}
.wrapper_fullscreen.text span.button,
.wrapper_fullscreen.text a.button {
margin-top: 0;
}
.wrapper_fullscreen p.text+span.button,
.wrapper_fullscreen p.text+a.button {
margin-bottom: 0;
}
}
/*
======================================================================
Warenkorb
======================================================================
*/
.wrapper_global .content.warenkorb {
background-image: url("../images/background-keyvisual-telefonansagen-ai.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
justify-content: center;
align-items: center;
min-height: calc(100vh - var(--nav1-height) - 4rem);
}
.wrapper_global .content.warenkorb .modul .inhalt {
display: grid;
grid-template-columns: 1fr 40%;
grid-template-areas: "a b" "c d";
grid-row-gap: 2rem;
grid-column-gap: 4rem;
margin: 0;
width: 100%;
border: 1px solid var(--grey-dark);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 2px 5px 0 rgba(0, 0, 0, .03);
border-radius: 1rem;
padding: 3rem;
background-color: rgba(255, 255, 255, 0.3);
}
.wrapper_global .content.warenkorb .modul .inhalt.danke {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "a b";
grid-row-gap: 0;
grid-column-gap: 0;
margin: 0;
width: auto !important;
border: 1px solid var(--grey-dark);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05), 0 2px 5px 0 rgba(0, 0, 0, .03);
border-radius: 1rem;
padding: 3rem;
background-color: rgba(255, 255, 255, 0.3);
justify-content: center;
align-items: center;
text-align: center;
}
.wrapper_global .content.warenkorb .modul .inhalt.danke .text {
grid-area: a;
}
.wrapper_global .content.warenkorb .modul .inhalt.danke .text span.characters {
font-family: Geist;
font-weight: 900;
background: -webkit-linear-gradient(transparent, transparent), -webkit-linear-gradient(-90deg, #fef167 1%, #e8b037 8%, #ffee68 17%, #feefae 25%, #feee7d 34%, #feee7d 44%, #94600a 56%, #fdc43f 68%, #ffe560 73%, #d58419 79%, #ffe659 100%);
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
font-size: 9rem;
margin-bottom: 1rem;
display: block;
}
.wrapper_global .content.warenkorb .modul .inhalt.danke .text span.headline {
font-size: 0.9rem;
font-family: Geist;
font-weight: 700;
color: var(--fliesstext);
display: block;
position: relative;
line-height: 2rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.3rem;
margin-bottom: 0.5rem;
}
.wrapper_global .content.warenkorb .modul .inhalt.danke .text p {
font-size: 0.95rem;
margin: 0 2rem 1.5rem 2rem;
}
.wrapper_global .content.warenkorb .modul .inhalt.danke .bild {
grid-area: b;
padding: 2rem;
}
.wrapper_global .content.warenkorb .modul .inhalt h2 {
grid-area: a;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles {
color: var(--fliesstext);
font-size: 1rem;
font-family: Geist;
margin-top: -0.5rem;
grid-area: c;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid {
display: grid;
grid-template-columns: 1fr 17% 17% 17%;
width: 100%;
align-items: flex-start;
justify-content: center;
line-height: 1.5;
grid-column-gap: 1.5rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .cart-item {
grid-column: 1 / span 4;
display: grid;
grid-template-columns: 1fr 17% 17% 17%;
width: 100%;
align-items: flex-start;
justify-content: center;
line-height: 1.5;
grid-column-gap: 1.5rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .cart-item:nth-child(1) {
background-color: red;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-beschreibung.headline,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-einzelpreis.headline,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge.headline,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-gesamtpreis.headline {
font-size: 0.9rem;
font-weight: 600;
height: 2rem;
flex-direction: row;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge.headline {
justify-content: center;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-beschreibung,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-einzelpreis,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-gesamtpreis {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-gesamtpreis {
text-align: end;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-beschreibung {
justify-content: flex-start;
line-height: 1.3;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles .article-beschreibung strong.rabattcode {
hyphens: auto !important;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
background-clip: border-box;
background-clip: text;
color: transparent;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles .article-beschreibung em {
margin-top: 5rem;
font-size: 0.95rem;
opacity: 0.8;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles .article-beschreibung em:before {
content: "";
height: 0.3rem;
display: block;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-trenner {
grid-column: 1 / span 4;
background-color: #FFF;
border-bottom: 1px dotted var(--fliesstext);
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-trenner.last {
grid-column: 3 / span 2;
background-color: #FFF;
border-bottom: 1px dotted var(--fliesstext);
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge input[type="number"] {
background: #FFF;
border: 1px solid var(--grey-dark);
padding-left: 0.7rem;
width: 5rem;
font-family: "Geist";
color: var(--fliesstext);
min-height: 2.25rem;
text-align: center;
display: flex;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge label {
color: var(--red-cta);
font-size: 0.8rem;
margin-top: 0.3rem;
display: none;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge {
flex-direction: column;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview {
display: grid;
grid-template-rows: auto 1fr;
align-items: flex-end;
align-content: flex-start;
grid-row-gap: 2rem;
grid-area: d;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 1rem;
border: 1px dotted var(--mint-cta);
padding: 1.5rem 2rem 2rem 2rem;
grid-row-gap: 0;
grid-area: b;
grid-row-start: 1;
grid-row-end: 3;
display: flex;
justify-content: center;
align-items: center;
;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt input[type="text"],
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt input[type="email"],
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt input[type="password"] {
background: #FFF;
border: 1px solid var(--grey-dark);
padding: 0 0.5rem;
width: 100%;
font-family: "Geist";
color: var(--fliesstext);
margin: 0.3rem 0 1.5rem 0;
height: 2.7rem;
line-height: 2.7rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt .wrapper_password {
position: relative;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt .wrapper_password i {
position: absolute;
top: 1.3rem;
right: 0.8rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt .wrapper_password i:before {
content: "\f070";
font-family: "FontAwesome";
color: var(--mint-text);
font-weight: 400;
font-size: 0.95rem;
cursor: pointer;
width: 1.5rem;
line-height: 2.7rem;
text-align: center;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt .wrapper_password i.show:before {
content: "\f06e";
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt label {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 500;
font-size: 0.9rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt p.text {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 500;
font-size: 1rem;
text-align: center;
line-height: 1.5;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt p.headline {
font-family: "Geist";
color: var(--fliesstext);
font-weight: 400;
font-size: 0.9rem;
text-transform: uppercase;
margin: 1rem 0 0.5rem 0;
text-align: center;
line-height: 1.5;
letter-spacing: 2px;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt p.fehler {
font-family: "Geist";
color: var(--red-cta);
font-weight: 500;
font-size: 1rem;
text-align: center;
line-height: 1.5;
margin: -0.5rem 0 2rem 0;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt a.pswd {
color: var(--fliesstext);
height: 1.5rem;
display: flex;
justify-content: center;
align-items: flex-end;
font-weight: 400;
font-family: "Geist";
transition: all 0.2s;
font-size: 0.8rem;
text-align: center;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt a.pswd:hover {
color: var(--red-cta);
transition: all 0.2s;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt a.register {
color: var(--red-cta);
text-align: center;
font-weight: 500;
font-family: "Geist";
font-size: 0.8rem;
display: block;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 0.3rem;
text-decoration-thickness: 1px;
text-decoration-skip: spaces;
text-decoration-skip-ink: spaces;
margin: 0.5rem 0 2rem 0;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt a.register:hover {
color: var(--red-cta);
transition: all 0.2s;
text-decoration-style: solid;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .coupon {
border: 1px dotted var(--mint-cta);
padding: 1rem;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.5);
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .coupon input[type="text"] {
background: #FFF;
border: 1px solid var(--grey-dark);
padding: 0 0 0 0.7rem;
width: 15rem;
font-family: "Geist";
color: var(--fliesstext);
min-height: 2.25rem;
text-align: center;
display: flex;
float: left;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .coupon p.text {
font-size: 0.9rem;
font-weight: 600;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .coupon p.code {
font-weight: 500;
font-size: 1rem;
color: var(--red-cta);
margin-top: 1rem;
margin-bottom: 0;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .coupon p.code i.trash:before {
content: "\f55a";
font-family: "FontAwesome";
color: inherit;
font-weight: 300;
cursor: pointer;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .coupon p.code i.trash:hover:before {
font-weight: 900;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden {
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: column;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .disclaimer {
display: flex;
flex-direction: column;
color: var(--fliesstext);
font-weight: 400;
font-family: "Geist";
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .disclaimer.rahmen {
border: 1px solid var(--fliesstext);
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .disclaimer p {
font-size: 1rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .disclaimer p i.checkbox:before {
content: "\f0c8";
font-family: "FontAwesome";
color: inherit;
font-weight: 300;
cursor: pointer;
margin-right: 0.5rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .disclaimer p i.checkbox.active:before {
content: "\f14a";
font-weight: 900;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .disclaimer p.fehler {
color: var(--red-cta);
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .disclaimer p.agb {
margin-top: -1rem;
margin-bottom: 3rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview span.button,
.wrapper_global .content.warenkorb .modul .inhalt .overview a.button {
display: inline-block;
background-color: var(--red-cta);
padding: 0.6rem 0.8rem 0.5rem 0.8rem;
color: #FFF;
text-transform: uppercase;
font-weight: 600;
font-family: "Geist";
border-radius: 2rem;
letter-spacing: 0.07rem;
transition: all 0.2s;
border: 2px solid var(--red-cta);
font-size: 0.9rem;
text-align: center;
cursor: pointer;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt span.button,
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt a.button {
display: block;
margin-top: 0.5rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview span.button:hover,
.wrapper_global .content.warenkorb .modul .inhalt .overview a.button:hover {
background-color: #FFF;
color: var(--red-cta);
}
.wrapper_global .content.warenkorb .modul .inhalt .overview span.button.secondary,
.wrapper_global .content.warenkorb .modul .inhalt .overview a.button.secondary {
color: var(--mint-cta);
border: 1px solid var(--mint-cta);
margin-left: 1rem;
background-color: #FFF;
font-size: 0.7rem;
height: 2.25rem;
display: inline-flex;
width: auto;
align-items: center;
justify-content: center;
padding: 0.15rem 1rem 0 1rem;
border-radius: 1rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview span.button:hover,
.wrapper_global .content.warenkorb .modul .inhalt .overview a.button:hover {
background-color: #FFF;
color: var(--red-cta);
}
.wrapper_global .content.warenkorb .modul .inhalt .overview span.button.secondary:hover,
.wrapper_global .content.warenkorb .modul .inhalt .overview a.button.secondary:hover {
background-color: var(--mint-cta);
color: #FFF;
}
/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.warenkorb .modul {
padding: 0;
column-gap: 0;
margin: 0;
grid-template-columns: 100%;
}
.wrapper_global .content.warenkorb .modul .inhalt,
.wrapper_global .content.warenkorb .modul .inhalt.danke {
grid-template-columns: 1fr;
grid-row-gap: 1rem;
grid-column-gap: 0;
margin: 4rem 2rem;
width: auto;
grid-template-areas: "a" "b" "c" "d";
padding: 0;
border: none;
box-shadow: none;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0);
}
.wrapper_global .content.warenkorb .modul .inhalt.danke .text span.characters {
font-size: 23vw;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .cart-item {
grid-column-gap: 0;
grid-template-columns: 1fr 25% 30%;
align-items: center;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-trenner {
grid-column: 1 / span 3;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-trenner.last {
grid-column: 2 / span 2;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-menge input[type="number"] {
padding-left: 0;
}
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .cart-item .article-einzelpreis,
.wrapper_global .content.warenkorb .modul .inhalt .articles-grid .article-einzelpreis.headline {
display: none;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview.nicht-eingeloggt {
margin-top: 3rem;
margin-bottom: 2rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .coupon input[type="text"] {
width: 100%;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview span.button.secondary,
.wrapper_global .content.warenkorb .modul .inhalt .overview a.button.secondary {
margin-left: 0;
display: inline-flex;
clear: both;
margin-top: 1rem;
}
}
/*
======================================================================
Headlines
======================================================================
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Geist !important;
}
/*
======================================================================
Schriften
======================================================================
*/
@font-face {
font-family: "FontAwesome";
font-display: swap;
font-style: normal;
font-weight: 100;
src: url("fonts/fontawesome/fa-thin-100.woff2") format("woff2"), url("fonts/fontawesome/fa-thin-100.ttf") format("truetype");
}
@font-face {
font-family: "FontAwesome";
font-display: swap;
font-style: normal;
font-weight: 300;
src: url("fonts/fontawesome/fa-light-300.woff2") format("woff2"), url("fonts/fontawesome/fa-light-300.ttf") format("truetype");
}
@font-face {
font-family: "FontAwesome";
font-display: swap;
font-style: normal;
font-weight: 400;
src: url("fonts/fontawesome/fa-regular-400.woff2") format("woff2"), url("fonts/fontawesome/fa-regular-400.ttf") format("truetype");
}
@font-face {
font-family: "FontAwesome";
font-display: swap;
font-style: normal;
font-weight: 900;
src: url("fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("fonts/fontawesome/fa-solid-900.ttf") format("truetype");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 100;
src: url("fonts/geist/geist-100.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 200;
src: url("fonts/geist/geist-200.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 300;
src: url("fonts/geist/geist-300.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 400;
src: url("fonts/geist/geist-400.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 500;
src: url("fonts/geist/geist-500.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 600;
src: url("fonts/geist/geist-600.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 700;
src: url("fonts/geist/geist-700.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 800;
src: url("fonts/geist/geist-800.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-display: swap;
font-style: normal;
font-weight: 900;
src: url("fonts/geist/geist-900.woff2") format("woff2");
}
/*
======================================================================
NEU: B2B Trust-Sektion & Feature-Grid Styles
Hinzugefügt für die neuen B2B-Landingpage Elemente
======================================================================
*/
/*
----------------------------------------------------------------------
B2B Trust-Sektion (Kundenlogos)
----------------------------------------------------------------------
*/
.wrapper_global .content.b2b-trust {
background: #f8fafc;
padding: 2.5rem 2rem;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.b2b-trust-logos {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.b2b-trust-logos span {
opacity: 0.6;
transition: all 0.2s;
}
.b2b-trust-logos span img,
.b2b-trust-logos span svg {
max-width: 9.5rem;
max-height: 4.5rem;
height: auto;
width: auto;
}
.b2b-trust-logos span:hover {
opacity: 1;
transition: all 0.2s;
}
@media only screen and (max-device-width: 480px) {
/* Trust-Sektion Mobile */
.wrapper_global .content.b2b-trust {
padding: 1.5rem 1rem;
}
.b2b-trust-label {
font-size: 0.65rem;
margin-bottom: 1rem;
}
.b2b-trust-logos {
gap: 0.75rem 1rem;
justify-content: center;
}
.b2b-trust-logos span {
flex: 0 0 auto;
}
.b2b-trust-logos span img,
.b2b-trust-logos span svg {
max-width: 5.5rem;
max-height: 2.5rem;
}
}
/*
----------------------------------------------------------------------
B2B Feature-Grid Sektion
----------------------------------------------------------------------
*/
.wrapper_global .content.b2b-section {
padding: 3rem 2rem;
background: #ffffff;
}
.b2b-section-eyebrow {
color: var(--mint-text);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
h2.b2b-section-headline,
h1.b2b-section-headline {
color: var(--blue-dark);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
}
h1.b2b-section-headline {
font-size: 2rem;
}
/* Intro-Text unter der Headline */
p.b2b-section-intro,
.b2b-section-intro {
color: var(--fliesstext);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 2rem;
}
/* Wenn kein Intro vorhanden, mehr Abstand zur Feature-Grid */
h2.b2b-section-headline+.b2b-features {
margin-top: 2rem;
}
.b2b-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: var(--site-width);
margin: 0 auto;
}
.b2b-feature {
background: #ffffff;
padding: 1.5rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
}
.b2b-feature:hover {
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.075);
}
.b2b-feature-icon {
width: 48px;
height: 48px;
background: rgba(37, 99, 235, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.b2b-feature h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--blue-dark);
margin-bottom: 0.75rem;
line-height: 1.4;
}
.b2b-feature p {
font-size: 0.95rem;
color: var(--fliesstext);
line-height: 1.6;
margin-bottom: 0.5rem;
}
.b2b-feature p:last-child {
margin-bottom: 0;
}
/* Kleine Hinweise/Tipps in den Cards */
.b2b-feature p.small {
font-size: 0.85rem;
color: #a1a7ae;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dotted #cbcfd4;
a {
color: inherit;
}
}
/* CTA2 Buttons in Feature Cards */
.b2b-feature .cta2 {
display: inline-block;
margin-top: 1rem;
}
/* Tablet */
@media only screen and (max-width: 1024px) {
.b2b-features {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile */
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.b2b-section {
padding: 1.5rem 1rem;
}
.b2b-section-eyebrow {
font-size: 0.7rem;
margin-bottom: 0.5rem;
}
h2.b2b-section-headline,
h1.b2b-section-headline {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
h1.b2b-section-headline {
font-size: 1.4rem;
}
p.b2b-section-intro,
.b2b-section-intro {
font-size: 0.9rem;
margin-bottom: 1.25rem;
line-height: 1.6;
}
.b2b-features {
grid-template-columns: 1fr;
gap: 0.75rem;
}
/* Auch 2-spaltige Grids auf 1 Spalte */
.b2b-features[style*="grid-template-columns: repeat(2"] {
grid-template-columns: 1fr !important;
}
.b2b-feature {
padding: 1rem;
}
.b2b-feature-icon {
width: 40px;
height: 40px;
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.b2b-feature h3 {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.b2b-feature p {
font-size: 0.85rem;
line-height: 1.5;
}
.b2b-feature p.small {
font-size: 0.75rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
}
/* CTA Buttons Mobile */
.b2b-section .cta1,
.wrapper_global .content.b2b-section .cta1 {
display: block;
text-align: center;
margin-top: 1.25rem;
}
}
/*
======================================================================
ENDE: B2B Trust-Sektion & Feature-Grid Styles
======================================================================
*/
/*
======================================================================
B2B FARB-OVERRIDES
Türkis/Cyan → Business-Blau, Pink → Business-Blau
======================================================================
*/
/*
----------------------------------------------------------------------
1. "In 3 Schritten" Sektion - Gradient + Roboter
----------------------------------------------------------------------
*/
/* Roboter-Grafik ausblenden */
.wrapper_global .content.keyvisual-gradient .modul.spalten2bildright .bild {
display: none;
}
/* Inhalt zentrieren wenn Bild weg */
.wrapper_global .content.keyvisual-gradient .modul.spalten2bildright {
display: block;
max-width: 800px;
margin: 0 auto;
}
.wrapper_global .content.keyvisual-gradient .modul.spalten2bildright .inhalt {
width: 100%;
}
/*
----------------------------------------------------------------------
2. "Flexible Pakete" Sektion - Headlines + CTA + Roboter
----------------------------------------------------------------------
*/
/* Roboter/Illustration ausblenden */
.wrapper_global .content.texte-background .modul.spalten2bildleft .bild {
display: none;
}
/* Layout anpassen wenn Bild weg */
.wrapper_global .content.texte-background .modul.spalten2bildleft {
display: block;
max-width: 800px;
margin: 0 auto;
}
.wrapper_global .content.texte-background .modul.spalten2bildleft .inhalt {
width: 100%;
}
/*
----------------------------------------------------------------------
3. FAQ Sektion - Türkise Headline
----------------------------------------------------------------------
*/
.wrapper_global .content .modul.faq h2 strong {
color: #1e40af;
}
/*
----------------------------------------------------------------------
4. CTA-Buttons → Original-Rot behalten
----------------------------------------------------------------------
*/
/*
----------------------------------------------------------------------
5. Eyebrows, Headlines, Highlights → Türkis
----------------------------------------------------------------------
*/
/*
----------------------------------------------------------------------
6. Mobile Overrides für alle B2B Sektionen
----------------------------------------------------------------------
*/
@media only screen and (max-device-width: 480px) {
/* "In 3 Schritten" Sektion Mobile */
.wrapper_global .content.keyvisual-gradient {
padding: 1.5rem 1rem;
}
.wrapper_global .content.keyvisual-gradient .modul.spalten2bildright {
max-width: 100%;
}
.wrapper_global .content.keyvisual-gradient .modul.spalten2bildright .inhalt h2 {
font-size: 1.25rem;
line-height: 1.4;
}
.wrapper_global .content.keyvisual-gradient .modul.spalten2bildright .inhalt ul {
padding-left: 0;
}
.wrapper_global .content.keyvisual-gradient .modul.spalten2bildright .inhalt ul li {
font-size: 0.9rem;
margin-bottom: 1rem;
}
/* "Flexible Pakete" Sektion Mobile */
.wrapper_global .content.texte-background {
padding: 1.5rem 1rem;
}
.wrapper_global .content.texte-background .modul.spalten2bildleft {
max-width: 100%;
}
.wrapper_global .content.texte-background .modul.spalten2bildleft .inhalt h2 {
font-size: 1.2rem;
line-height: 1.4;
}
.wrapper_global .content.texte-background .modul.spalten2bildleft .inhalt h3 {
font-size: 1rem;
}
.wrapper_global .content.texte-background .modul.spalten2bildleft .inhalt p {
font-size: 0.9rem;
}
/* Allgemeine Sektions-Abstände Mobile */
.wrapper_global .content {
margin-bottom: 0;
}
.wrapper_global .content.b2b-section + .wrapper_global .content.b2b-section {
margin-top: 0;
}
}
/*
======================================================================
ENDE: B2B FARB-OVERRIDES
======================================================================
*/
/* ========================================================================
CHATBOT WIDGET
======================================================================== */
.chatbot-wrapper {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
}
.chatbot-toggle {
height: 52px;
padding: 0 18px 0 14px;
border-radius: 26px;
background: var(--blue-dark);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transition: background-color 0.2s, transform 0.2s;
position: relative;
white-space: nowrap;
animation: chatbot-pulse 3s ease-in-out 4s 3;
}
.chatbot-toggle.is-open {
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
justify-content: center;
animation: none;
}
.chatbot-toggle-inner {
display: flex;
align-items: center;
gap: 8px;
}
.chatbot-toggle-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1px;
}
.chatbot-label-short { display: none; }
.chatbot-label-long { display: inline; }
.chatbot-toggle:hover {
background: var(--red-cta);
transform: scale(1.04);
}
@keyframes chatbot-pulse {
0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.25); transform: scale(1); }
50% { box-shadow: 0 6px 28px rgba(0,19,87,0.45); transform: scale(1.06); }
}
.chatbot-unread {
position: absolute;
top: -2px;
right: -2px;
width: 14px;
height: 14px;
background: var(--red-cta);
border-radius: 50%;
border: 2px solid #fff;
}
.chatbot-window {
position: absolute;
bottom: 76px;
right: 0;
width: 380px;
height: 500px;
max-height: 70vh;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 100vw;
}
.chatbot-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--blue-dark);
color: #fff;
}
.chatbot-header-info {
display: flex;
align-items: center;
gap: 12px;
}
.chatbot-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--blue-light);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
color: #fff;
}
.chatbot-header-title {
font-weight: 600;
font-size: 15px;
}
.chatbot-header-status {
font-size: 12px;
opacity: 0.7;
}
.chatbot-close {
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 4px;
opacity: 0.7;
transition: opacity 0.2s;
}
.chatbot-close:hover {
opacity: 1;
}
.chatbot-beta-bar {
background: var(--red-cta);
color: #fff;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 4px 0;
text-transform: uppercase;
}
.chatbot-messages {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 16px;
display: block;
}
.chatbot-message {
display: flex;
max-width: 100%;
margin-bottom: 12px;
}
.chatbot-message-user {
justify-content: flex-end;
}
.chatbot-message-bot {
justify-content: flex-start;
}
.chatbot-bubble {
max-width: 85%;
padding: 10px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
word-break: break-word;
overflow-wrap: anywhere;
overflow: hidden;
}
.chatbot-bubble a {
color: var(--blue-light);
text-decoration: underline;
}
.chatbot-message-user .chatbot-bubble {
background: var(--blue-dark);
color: #fff;
border-bottom-right-radius: 4px;
}
.chatbot-message-bot .chatbot-bubble {
background: var(--grey-light);
color: var(--blue-dark);
border-bottom-left-radius: 4px;
}
.chatbot-typing {
display: flex;
align-items: center;
gap: 4px;
padding: 12px 18px;
}
.chatbot-typing span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--grey-dark);
animation: chatbot-dot 1.4s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatbot-dot {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
.chatbot-footer {
border-top: 1px solid var(--grey-dark);
}
.chatbot-input-area {
display: flex;
padding: 12px 16px;
gap: 8px;
}
.chatbot-input {
flex: 1;
border: 1px solid var(--grey-dark);
border-radius: 24px;
padding: 10px 16px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.chatbot-input:focus {
border-color: var(--blue-light);
}
.chatbot-input::placeholder {
color: var(--fliesstext);
}
.chatbot-send {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--blue-dark);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.chatbot-send:hover:not(:disabled) {
background: var(--red-cta);
}
.chatbot-send:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Handoff Form */
.chatbot-handoff {
background: #fff;
border: 1px solid var(--grey-dark);
border-radius: 12px;
padding: 16px;
margin-top: 4px;
}
.chatbot-handoff-title {
font-weight: 600;
font-size: 14px;
color: var(--blue-dark);
margin: 0 0 4px;
}
.chatbot-handoff-subtitle {
font-size: 12px;
color: var(--fliesstext);
margin: 0 0 12px;
line-height: 1.4;
}
.chatbot-handoff-input {
width: 100%;
border: 1px solid var(--grey-dark);
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
outline: none;
margin-bottom: 8px;
box-sizing: border-box;
transition: border-color 0.2s;
}
.chatbot-handoff-input:focus {
border-color: var(--blue-light);
}
.chatbot-handoff-input::placeholder {
color: var(--fliesstext);
}
.chatbot-handoff-textarea {
resize: vertical;
min-height: 44px;
max-height: 100px;
}
.chatbot-handoff-submit {
width: 100%;
padding: 10px;
border: none;
border-radius: 8px;
background: var(--blue-dark);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.chatbot-handoff-submit:hover:not(:disabled) {
background: var(--red-cta);
}
.chatbot-handoff-submit:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Feedback */
.chatbot-feedback-link {
display: block;
width: 100%;
background: none;
border: none;
color: var(--fliesstext);
font-size: 12px;
padding: 0 16px 10px;
cursor: pointer;
text-align: center;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s;
}
.chatbot-feedback-link:hover {
color: var(--blue-light);
}
/* Quick Reply Buttons */
.chatbot-quick-replies {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 16px 12px;
}
.chatbot-quick-reply {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 16px;
padding: 6px 14px;
font-size: 13px;
color: var(--blue-dark, #1a365d);
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
line-height: 1.3;
}
.chatbot-quick-reply:hover {
background: var(--blue-light, #0891c2);
color: #fff;
border-color: var(--blue-light, #0891c2);
}
.chatbot-stars {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 12px;
}
.chatbot-star {
background: none;
border: none;
cursor: pointer;
color: #ccc;
padding: 2px;
transition: color 0.15s, transform 0.15s;
}
.chatbot-star:hover {
transform: scale(1.15);
}
.chatbot-star.active {
color: #f5a623;
}
/* Slide Transition */
.chatbot-slide-enter-active,
.chatbot-slide-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.chatbot-slide-enter,
.chatbot-slide-leave-to {
opacity: 0;
transform: translateY(16px) scale(0.95);
}
/* System/Success messages */
.chatbot-message-bot .chatbot-bubble-success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
}
/* ── Mobile: Chatbot Fullscreen ── */
@media only screen and (max-device-width: 480px) {
.chatbot-wrapper {
bottom: 12px;
right: 12px;
}
.chatbot-label-long { display: none; }
.chatbot-label-short { display: inline; }
.chatbot-window {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
height: 100dvh;
border-radius: 0;
max-height: none;
max-width: none;
}
.chatbot-input {
font-size: 16px; /* verhindert iOS-Zoom */
}
.chatbot-footer {
padding-bottom: env(safe-area-inset-bottom, 8px);
}
/* Toggle ausblenden wenn Chat offen (X ist im Header) */
html.chatbot-open .chatbot-toggle {
display: none;
}
html.chatbot-open,
body.chatbot-open {
overflow: hidden;
position: fixed;
width: 100%;
}
}
/* ========================================================================
COOKIE CONSENT BANNER
======================================================================== */
#consent-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
transform: translateY(100%);
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
font-size: 14px;
color: #334155;
line-height: 1.5;
}
#consent-banner.consent-visible {
transform: translateY(0);
opacity: 1;
}
.consent-inner {
max-width: 1100px;
margin: 0 auto;
padding: 20px 24px;
}
.consent-text {
margin-bottom: 16px;
}
.consent-text strong {
font-size: 16px;
color: var(--blue-dark);
display: block;
margin-bottom: 6px;
}
.consent-text p {
margin: 0;
font-size: 13px;
color: var(--fliesstext);
}
.consent-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.consent-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
white-space: nowrap;
}
.consent-btn:active {
transform: scale(0.97);
}
.consent-btn-accept {
background: var(--blue-dark);
color: #fff;
}
.consent-btn-accept:hover {
background: var(--red-cta);
}
.consent-btn-necessary {
background: var(--grey-light);
color: var(--blue-dark);
border: 1px solid var(--grey-dark);
}
.consent-btn-necessary:hover {
background: var(--grey-dark);
}
.consent-btn-settings {
background: transparent;
color: var(--fliesstext);
border: 1px solid var(--grey-dark);
}
.consent-btn-settings:hover {
background: var(--grey-light);
}
/* Settings Panel */
.consent-settings {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--grey-dark);
}
.consent-category {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--grey-light);
}
.consent-cat-info {
flex: 1;
}
.consent-cat-info strong {
display: block;
font-size: 14px;
color: var(--blue-dark);
margin-bottom: 2px;
}
.consent-cat-info span {
font-size: 12px;
color: var(--fliesstext);
}
.consent-toggle-wrap {
flex-shrink: 0;
margin-left: 16px;
}
.consent-always {
font-size: 12px;
color: var(--mint-text);
font-weight: 600;
}
/* Toggle Switch */
.consent-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.consent-switch input {
opacity: 0;
width: 0;
height: 0;
}
.consent-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--grey-dark);
border-radius: 24px;
transition: background-color 0.2s;
}
.consent-slider::before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
.consent-switch input:checked + .consent-slider {
background: var(--mint-cta);
}
.consent-switch input:checked + .consent-slider::before {
transform: translateX(20px);
}
.consent-settings .consent-btn {
margin-top: 12px;
}
/* Mobile */
@media only screen and (max-width: 600px) {
.consent-buttons {
flex-direction: column;
}
.consent-btn {
width: 100%;
text-align: center;
}
.consent-inner {
padding: 16px;
}
}
/* Print: Banner ausblenden */
@media print {
#consent-banner {
display: none !important;
}
}
/* ============================================================
Erweiterungen 2026-04-30 (Step 1+2)
Strikt SCOPED — keine generischen .b2b-section-Regeln,
nur Selektoren via ID auf die neuen Bloecke.
============================================================ */
/* Step 1: Icon-Sizing + Markenfarbe fuer SVGs in den Karten */
.b2b-feature-icon svg {
width: 24px;
height: 24px;
display: block;
color: #001357;
}
@media only screen and (max-device-width: 480px) {
.b2b-feature-icon svg {
width: 20px;
height: 20px;
}
}
/* Step 2: Listen-Styles NUR fuer Block A (#fuer-wen) und Block B (#wann-ki) */
#fuer-wen ul,
#wann-ki ul {
list-style: disc;
padding-left: 1.5rem;
margin: 1rem 0 1.5rem;
}
#fuer-wen ul li,
#wann-ki ul li {
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 0.5rem;
}
/* Folge-Paragraph nach der Liste (NICHT der b2b-section-intro!) */
#fuer-wen p:not(.b2b-section-intro),
#wann-ki p:not(.b2b-section-intro) {
font-family: "Geist";
color: var(--fliesstext);
font-size: 1.05rem;
line-height: 1.7;
}
/* ============================================================
Erweiterung 2026-04-30 (Step 3): Modifier --alt
Optische Differenzierung von Sections (b2b) durch grauen BG.
Strikt scoped: nur wenn .b2b-section--alt zusaetzlich gesetzt.
============================================================ */
.wrapper_global .content.b2b-section.b2b-section--alt {
background: var(--grey-light);
}
/* ============================================================
Erweiterung 2026-04-30 (Phase 2.3 Preise): Helper-Klassen
Ersetzen der Inline-Styles in Article 2 (Preise).
============================================================ */
/* Tight-spacing fuer Intro-Paragraphen die direkt auf eyebrow/headline folgen */
.intro-tight { margin-top: -1rem; }
/* Center-CTA: zentrierter Wrapper fuer CTA-Buttons */
.center-cta { text-align: center; margin-top: 1.5rem; }
.center-cta--top-2rem { margin-top: 2rem; }
/* Note-Meta: kleine zentrierte Hinweis-Texte */
.note-meta {
text-align: center;
font-size: 0.85rem;
color: var(--fliesstext);
margin-bottom: 0;
}
/* Padding vertikal 1rem (Trenn-Spacing) */
.padding-vert-1rem { padding-top: 1rem; padding-bottom: 1rem; }
/* B2B-features mit 2 statt 3 Spalten */
.b2b-features.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* Highlight-Block fuer Rechnung-Hinweis (rot umrandet) */
.b2b-feature--highlight {
max-width: 800px;
margin: 0 auto;
border: 2px solid var(--red-cta);
}
/* H3 mit verkleinertem unterem Abstand */
.h3-tight { margin-bottom: 0.5rem; }
/* Preise-Tabelle (Zeichen-Pakete-Aufstellung) */
.preise-tabelle {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
max-width: 500px;
margin: 2rem auto 0;
}
.preise-tabelle tr { border-bottom: 1px solid var(--grey-dark); }
.preise-tabelle td { padding: 8px 0; }
.preise-tabelle td.preis-zahl { text-align: right; font-weight: 600; }
.preise-tabelle td.preis-zahl--mint { color: var(--mint-text); }
/* Tabellen-Wrapper (zentrierter b2b-feature mit max-width fuer kompakte Tabellen) */
.b2b-feature.tabelle-wrapper {
max-width: 500px;
margin: 2rem auto 0;
}
/* ============================================================
Erweiterung 2026-05-01 (Phase 2.4-2.10): Helper-Klassen
============================================================ */
.text-center { text-align: center; }
.center-mb-1-5rem { text-align: center; margin-bottom: 1.5rem; }
.icon-center-block { margin: 0 auto 1rem auto; }
.icon-center-block-sm { margin: 0 auto 0.5rem auto; }
.kontakt-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 700px;
margin: 0 auto;
}
.font-lg-bold { font-size: 1.2rem; font-weight: 600; }
.font-md-bold { font-size: 1.1rem; font-weight: 600; }
.b2b-feature-icon-block { margin: 0; }
.max-width-800-center { max-width: 800px; margin: 0 auto; }
.b2b-feature--mint-border {
max-width: 800px;
margin: 0 auto 1.5rem auto;
border: 2px solid var(--mint-text);
}
/* ============================================================
Erweiterung 2026-05-01 (Phase 2.4-2.10 Round 2): zusaetzliche Helper
============================================================ */
.mt-1-5rem { margin-top: 1.5rem; }
.mb-1rem { margin-bottom: 1rem; }
.col-span-2 { grid-column: span 2; }
.flex-wrap-gap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.b2b-feature--mint-border-700 {
max-width: 700px;
margin: 0 auto;
border: 2px solid var(--mint-text);
}
/* ============================================================
Erweiterung 2026-05-01: Inline-SVG-Sizing in Fliesstext
FA-Light-SVGs in oder generell inline neben Text
wuerden sonst mit voller viewBox-Groesse rendern (zu gross).
============================================================ */
p svg,
p.small svg,
.small svg,
li svg {
width: 1em;
height: 1em;
vertical-align: -0.125em;
margin-right: 0.25em;
}
/* Article 15 Weihnachten: cursor:pointer auf FAQ-Frage als CSS-Klasse */
.modul.faq .frage {
cursor: pointer;
}
/* ===========================================================
Hero-Bilder in Article-Hero-Section (Phase 1+2+3 Sweep)
=========================================================== */
.wrapper_global .content.keyvisual-gradient .modul .inhalt img.hero-img {
display: block;
width: 100%;
max-width: 100%;
height: 320px;
object-fit: cover;
margin-left: 0;
margin-right: 0;
border-radius: 12px;
}
@media only screen and (max-device-width: 480px) {
.wrapper_global .content.keyvisual-gradient .modul .inhalt img.hero-img {
height: 180px;
margin-top: -1rem;
margin-bottom: 1.25rem;
}
}
/* ===========================================================
Mustertext-Box in Phase 1+2+3 Vorlagen-/Branchen-Seiten
=========================================================== */
.b2b-feature.mustertext-box {
background: var(--grey-light);
border: 1px solid #e2e8f0;
border-left: 4px solid var(--mint-cta);
}
.b2b-feature.mustertext-box .mustertext-label {
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--blue-dark);
font-weight: 600;
margin-bottom: 0.5rem;
}
.b2b-feature.mustertext-box .mustertext-body {
font-style: normal;
font-size: 0.95rem;
line-height: 1.6;
color: var(--fliesstext);
}
/*
======================================================================
LINK-ROT — Akzent-Klasse fuer Cross-Links
NUR via Klasse anwenden, NICHT global setzen.
======================================================================
*/
.link-rot {
color: var(--red-cta);
text-decoration: underline;
text-decoration-color: rgba(255, 0, 70, 0.4);
text-underline-offset: 0.15em;
text-decoration-thickness: 1px;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.link-rot:hover,
.link-rot:focus {
color: #cc0038;
text-decoration-color: #cc0038;
}
/* In Headlines (z.B. Karten-Titel) ohne Underline, nur Farbe */
h1 .link-rot,
h2 .link-rot,
h3 .link-rot,
h4 .link-rot,
.b2b-feature h3 .link-rot {
text-decoration: none;
}
h1 .link-rot:hover,
h2 .link-rot:hover,
h3 .link-rot:hover,
h4 .link-rot:hover {
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
/*
======================================================================
POLISH 2026-05-05 — Scoped fuer /vorlagen + /ratgeber (inkl. Subs)
Greift NUR via .scope-vorlagen-template und .scope-ratgeber-template.
Andere Seiten unberuehrt.
======================================================================
*/
/* ---------- Shared base (beide Scopes) ---------- */
.scope-vorlagen-template,
.scope-ratgeber-template {
--polish-line: 1.65;
--polish-track-tight: -0.012em;
--polish-track-meta: 0.04em;
}
/* Vertikaler Rhythmus zwischen b2b-section: einheitlich, ruhig */
.scope-vorlagen-template .b2b-section,
.scope-ratgeber-template .b2b-section {
padding-top: 4.25rem;
padding-bottom: 4.25rem;
}
.scope-vorlagen-template .b2b-section.keyvisual-gradient,
.scope-ratgeber-template .b2b-section.keyvisual-gradient {
padding-top: 3rem;
}
/* Eyebrow-Polish: dezent mit leichtem Tracking, klarer Atemraum */
.scope-vorlagen-template .b2b-section-eyebrow,
.scope-ratgeber-template .b2b-section-eyebrow {
letter-spacing: var(--polish-track-meta);
font-size: 0.78rem;
text-transform: uppercase;
margin-bottom: 0.65rem;
opacity: 0.78;
}
/* Headline-Polish: Mikro-Tightening, mehr Top-Margin als Bottom (editorial) */
.scope-vorlagen-template .b2b-section-headline,
.scope-ratgeber-template .b2b-section-headline {
letter-spacing: var(--polish-track-tight);
line-height: 1.2;
margin-top: 0;
margin-bottom: 1.35rem;
max-width: 36ch;
}
.scope-vorlagen-template h1.b2b-section-headline,
.scope-ratgeber-template h1.b2b-section-headline {
max-width: 30ch;
}
/* Intro-Lesebreite ans Auge anpassen (kultivierte measure) */
.scope-vorlagen-template .b2b-section-intro,
.scope-ratgeber-template .b2b-section-intro {
max-width: 64ch;
line-height: var(--polish-line);
}
.scope-vorlagen-template .b2b-section-intro.intro-tight,
.scope-ratgeber-template .b2b-section-intro.intro-tight {
margin-top: 0.4rem;
font-size: 0.98rem;
opacity: 0.92;
}
/* Body-Paragraphen: ruhiger Durchschuss, lesbarere measure */
.scope-vorlagen-template .b2b-section .modul > p,
.scope-vorlagen-template .b2b-section .modul .inhalt > p,
.scope-ratgeber-template .b2b-section .modul > p,
.scope-ratgeber-template .b2b-section .modul .inhalt > p {
line-height: var(--polish-line);
max-width: 70ch;
}
/* ---------- Cards (.b2b-feature) ---------- */
.scope-vorlagen-template .b2b-feature,
.scope-ratgeber-template .b2b-feature {
padding: 1.6rem 1.5rem;
border-radius: 12px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.scope-vorlagen-template .b2b-features.cols-2 .b2b-feature,
.scope-ratgeber-template .b2b-features.cols-2 .b2b-feature {
display: flex;
flex-direction: column;
}
.scope-vorlagen-template .b2b-feature h3,
.scope-ratgeber-template .b2b-feature h3 {
margin-top: 0;
margin-bottom: 0.5rem;
letter-spacing: var(--polish-track-tight);
line-height: 1.3;
}
.scope-vorlagen-template .b2b-feature p,
.scope-ratgeber-template .b2b-feature p {
line-height: 1.6;
margin-top: 0;
}
/* Card-Variante: Cross-Link-Karten mit Icon + h3>a hover-Lift */
.scope-vorlagen-template .b2b-feature:has(h3 .link-rot),
.scope-ratgeber-template .b2b-feature:has(h3 .link-rot) {
cursor: default;
}
.scope-vorlagen-template .b2b-feature:has(h3 .link-rot):hover,
.scope-ratgeber-template .b2b-feature:has(h3 .link-rot):hover {
transform: translateY(-2px);
}
/* Definition fuer span-2 (ersetzt ehemaligen Inline-Style auf /vorlagen) */
.scope-vorlagen-template .b2b-feature--span-2 {
grid-column: span 2;
}
@media (max-width: 720px) {
.scope-vorlagen-template .b2b-feature--span-2 {
grid-column: span 1;
}
}
/* Mustertext-Boxen: editorial, ruhig, mit dezentem Anfuehrungszeichen-Akzent */
.scope-vorlagen-template .b2b-feature.mustertext-box {
position: relative;
padding: 1.7rem 1.6rem 1.5rem 1.6rem;
}
.scope-vorlagen-template .b2b-feature.mustertext-box .mustertext-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: var(--polish-track-meta);
margin-bottom: 0.55rem;
}
.scope-vorlagen-template .b2b-feature.mustertext-box .mustertext-body {
line-height: 1.65;
font-size: 0.97rem;
}
/* Mint-Border-CTA-Box: ruhiger gerahmt */
.scope-vorlagen-template .b2b-feature--mint-border,
.scope-ratgeber-template .b2b-feature--mint-border {
padding: 1.85rem 1.75rem;
border-radius: 14px;
}
.scope-vorlagen-template .b2b-feature--mint-border h3,
.scope-ratgeber-template .b2b-feature--mint-border h3 {
margin-bottom: 0.55rem;
}
/* ---------- FAQ ---------- */
.scope-vorlagen-template .modul.faq .wrapper-faq,
.scope-ratgeber-template .modul.faq .wrapper-faq {
padding-top: 0.9rem;
padding-bottom: 0.9rem;
}
.scope-vorlagen-template .modul.faq .wrapper-faq .frage p,
.scope-ratgeber-template .modul.faq .wrapper-faq .frage p {
font-weight: 600;
letter-spacing: -0.005em;
margin: 0;
line-height: 1.4;
}
.scope-vorlagen-template .modul.faq .wrapper-faq .antwort,
.scope-ratgeber-template .modul.faq .wrapper-faq .antwort {
padding-top: 0.55rem;
}
.scope-vorlagen-template .modul.faq .wrapper-faq .antwort p,
.scope-ratgeber-template .modul.faq .wrapper-faq .antwort p {
line-height: 1.6;
max-width: 68ch;
}
/* ---------- Hub /vorlagen Anchor-Pills (.produkt) ---------- */
.scope-vorlagen-template .flex-wrap-gap {
gap: 0.55rem 0.6rem;
margin-top: 1.1rem;
margin-bottom: 0.4rem;
}
.scope-vorlagen-template a.produkt {
letter-spacing: 0.005em;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scope-vorlagen-template a.produkt:hover {
transform: translateY(-1px);
}
/* Hub-Texte-Grid: ruhigere Spalten-Lesebreite + Abstand */
.scope-vorlagen-template .grid-texte .wrapper-texte {
margin-bottom: 1.2rem;
}
.scope-vorlagen-template .grid-texte .wrapper-texte h3 {
letter-spacing: var(--polish-track-tight);
margin-top: 0.2rem;
margin-bottom: 0.7rem;
}
.scope-vorlagen-template .grid-texte .wrapper-texte ul {
padding-left: 1.15rem;
}
.scope-vorlagen-template .grid-texte .wrapper-texte ul li {
line-height: 1.65;
margin-bottom: 0.6rem;
}
.scope-vorlagen-template .grid-texte .wrapper-texte ul li + li {
padding-top: 0.55rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* ---------- Hero-Image (Sub-Articles) ---------- */
.scope-vorlagen-template .keyvisual-gradient .hero-img,
.scope-ratgeber-template .keyvisual-gradient .hero-img {
border-radius: 14px;
margin-bottom: 1.5rem;
}
/* ---------- CTA-Center (Buttons) ---------- */
.scope-vorlagen-template .center-cta,
.scope-ratgeber-template .center-cta {
margin-top: 1.55rem;
}
.scope-vorlagen-template .center-cta--top-2rem,
.scope-ratgeber-template .center-cta--top-2rem {
margin-top: 2.1rem;
}
/* ---------- Mobile Feinheiten ---------- */
@media (max-width: 720px) {
.scope-vorlagen-template .b2b-section,
.scope-ratgeber-template .b2b-section {
padding-top: 2.85rem;
padding-bottom: 2.85rem;
}
.scope-vorlagen-template .b2b-section-headline,
.scope-ratgeber-template .b2b-section-headline {
max-width: 100%;
}
.scope-vorlagen-template .b2b-feature,
.scope-ratgeber-template .b2b-feature {
padding: 1.3rem 1.2rem;
}
}
/* ---------- Mehr Beispieltexte (Polish 2026-05-06, scope: vorlagen) ---------- */
.scope-vorlagen-template .more-examples .more-examples-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.4rem;
margin-top: 1.6rem;
}
@media (min-width: 880px) {
.scope-vorlagen-template .more-examples .more-examples-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.6rem 2.4rem;
}
}
.scope-vorlagen-template .more-examples .more-examples-group h3 {
font-size: 1.05rem;
letter-spacing: var(--polish-track-meta);
text-transform: uppercase;
margin: 0 0 0.85rem 0;
padding-bottom: 0.55rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
color: var(--blue-dark, #001357);
opacity: 0.9;
}
.scope-vorlagen-template .more-examples .more-examples-group ul {
list-style: none;
margin: 0;
padding: 0;
}
.scope-vorlagen-template .more-examples .more-examples-group ul li {
padding: 0.85rem 0;
line-height: 1.6;
font-size: 0.97rem;
color: var(--fliesstext, #333);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.scope-vorlagen-template .more-examples .more-examples-group ul li:first-child {
padding-top: 0.2rem;
}
.scope-vorlagen-template .more-examples .more-examples-group ul li:last-child {
border-bottom: 0;
padding-bottom: 0.2rem;
}
/* ===== SSOT-Overhaul 2026-06-28 — scoped helper classes ===== */
.wrapper_global .ssot-abgrenzung{
border:1px solid var(--grey-dark);
border-left:3px solid var(--mint-text);
background:rgba(39,212,189,0.06);
border-radius:10px;
padding:0.85rem 1.1rem;
margin:1rem 0;
font-weight:300;
color:var(--blue-dark);
}
.wrapper_global .ssot-abgrenzung strong{font-weight:500;}
.wrapper_global .ssot-format,.wrapper_global .ssot-recht{font-weight:300;color:var(--fliesstext);}
.wrapper_global .hero-cta-row{display:flex;gap:0.75rem;flex-wrap:wrap;margin:1.25rem 0 0.5rem;}
.wrapper_global .hero-microcopy{color:var(--fliesstext);font-weight:300;margin-top:0.4rem;}
.wrapper_global .b2b-trust-row{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;font-weight:300;}
.wrapper_global .b2b-trust-claim strong{color:var(--blue-dark);font-weight:500;}
.wrapper_global .b2b-logos{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center;margin-top:1rem;}
.wrapper_global .b2b-section--accent{background:var(--blue-dark);}
.wrapper_global .b2b-section--accent .b2b-section-headline,
.wrapper_global .b2b-section--accent p{color:#fff;}
/* Mustertext component (Vorlagen/Branchen) */
.wrapper_global .mustertext{
border:1px solid var(--grey-dark);
border-radius:12px;
padding:1.1rem 1.25rem;
margin:1rem 0;
background:#fff;
}
.wrapper_global .mustertext-title{font-weight:500;color:var(--blue-dark);margin:0 0 0.4rem;}
.wrapper_global .mustertext-text{font-weight:300;color:var(--blue-dark);white-space:pre-line;}
.wrapper_global .mustertext-actions{display:flex;gap:0.6rem;flex-wrap:wrap;margin-top:0.85rem;}
.wrapper_global .vorlage-kopieren{
cursor:pointer;border:1px solid var(--mint-text);background:#fff;color:var(--mint-text);
border-radius:8px;padding:0.5rem 0.9rem;font-weight:400;transition:all .15s;
}
.wrapper_global .vorlage-kopieren:hover{background:var(--mint-text);color:#fff;}
.wrapper_global .vorlage-kopieren.copied{background:var(--mint-cta);color:#fff;border-color:var(--mint-cta);}
.wrapper_global .mustertext-var{
display:inline-block;background:var(--grey-light);border-radius:4px;padding:0 0.3rem;
color:var(--blue-dark);font-weight:400;
}
@media (max-width:480px){
.wrapper_global .hero-cta-row{flex-direction:column;}
.wrapper_global .hero-cta-row .cta1,.wrapper_global .hero-cta-row .cta2{width:100%;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
.wrapper_global *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}
/* SSOT END */
/* SSOT card-link color fix 2026-06-29 (v2): nur echte Text-Links, NICHT cta-Buttons */
.wrapper_global .b2b-feature h3 a:not(.cta1):not(.cta2),
.wrapper_global .b2b-feature h3 a:not(.cta1):not(.cta2):visited{
color:var(--blue-dark);
text-decoration:none;
transition:color .15s;
}
.wrapper_global .b2b-feature h3 a:not(.cta1):not(.cta2):hover,
.wrapper_global .b2b-feature h3 a:not(.cta1):not(.cta2):focus{
color:var(--mint-text);
text-decoration:none;
}
.wrapper_global .b2b-feature p a:not(.cta1):not(.cta2):not(.button),
.wrapper_global .b2b-feature p a:not(.cta1):not(.cta2):not(.button):visited{ color:var(--mint-text); }
/* cta-Buttons in Karten behalten ihre weisse Schrift */
.wrapper_global .b2b-feature a.cta1,
.wrapper_global .b2b-feature a.cta1:visited,
.wrapper_global .b2b-feature a.cta1:hover{ color:#fff; }
.wrapper_global .b2b-feature a.cta2,
.wrapper_global .b2b-feature a.cta2:visited{ color:var(--blue-dark); }
/* SSOT card-link END */
/* SSOT preis-tabelle color fix 2026-06-29 (v2): beide Spalten Navy, mint-Werte bleiben teal */
.wrapper_global .preise-tabelle td{ color:var(--blue-dark); }
.wrapper_global .preise-tabelle .preis-zahl{ color:var(--blue-dark); font-weight:600; }
.wrapper_global .preise-tabelle .preis-zahl.preis-zahl--mint{ color:var(--mint-text); }
/* SSOT preis-tabelle END */
/* SSOT content-link color 2026-06-29: Fliesstext-Links Teal, kein visited-Lila, scoped */
.wrapper_global .b2b-section p a:not(.cta1):not(.cta2):not(.button):not(.telefon),
.wrapper_global .b2b-section p a:not(.cta1):not(.cta2):not(.button):not(.telefon):visited,
.wrapper_global .b2b-section li a:not(.cta1):not(.cta2):not(.button),
.wrapper_global .b2b-section li a:not(.cta1):not(.cta2):not(.button):visited,
.wrapper_global .b2b-section-intro a:not(.cta1):not(.cta2),
.wrapper_global .b2b-section-intro a:not(.cta1):not(.cta2):visited{
color:var(--mint-text);
text-decoration:none;
border-bottom:1px solid rgba(39,212,189,0.35);
transition:all .15s;
}
.wrapper_global .b2b-section p a:not(.cta1):not(.cta2):not(.button):not(.telefon):hover,
.wrapper_global .b2b-section li a:not(.cta1):not(.cta2):not(.button):hover,
.wrapper_global .b2b-section-intro a:not(.cta1):not(.cta2):hover{
color:var(--blue-dark);
border-bottom-color:var(--blue-dark);
}
/* SSOT content-link END */
/* SSOT overflow-x guard 2026-06-29: kein horizontales Scrollen; clip statt hidden (iOS-safe) */
html, body { overflow-x: clip; max-width: 100%; }
.wrapper_global { overflow-x: clip; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }
/* SSOT overflow-x END */
/* ============================================================
POLISH 2026-06-29 — Money-Pages (Startseite / Preise / Generator)
Strikt scoped via .scope-money-Wrapper im Article-Body.
Analog zu .scope-vorlagen-template / .scope-ratgeber-template.
Andere Seiten bleiben vollstaendig unberuehrt.
Ziel: editorial-ruhiger vertikaler Rhythmus, getightetes Satzbild,
kultivierte Lesebreiten, gleichmaessige Card-Hoehen, dezente Eyebrows.
============================================================ */
.scope-money {
--money-line: 1.65;
--money-track-tight: -0.014em;
--money-track-meta: 0.045em;
--money-measure: 62ch;
}
/* ---------- Vertikaler Sektionsrhythmus ----------
Gleichmaessiger, grosszuegiger Takt statt fix 3rem.
--alt-Sektionen (grauer BG) bekommen denselben Rhythmus,
sodass Farbwechsel die einzige Differenzierung bleibt. */
.scope-money .content.b2b-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
/* Nur ECHT gleichfarbige weiss-auf-weiss-Naht zusammenziehen.
Schritt 1: jede weisse Sektion nach einer weissen Sektion straffen ... */
.scope-money .content.b2b-section + .content.b2b-section:not(.b2b-section--alt):not(.b2b-section--accent) {
padding-top: 1rem;
}
/* ... Schritt 2: aber vollen Atemraum WIEDERHERSTELLEN, sobald die
vorherige Sektion grau (--alt), navy (--accent) oder ein Zwischen-
Block (keyvisual/leer) war -> kein Ankleben mehr bei Farbwechsel.
:not()-Guards angeglichen, damit die Spezifitaet die Collapse-Regel
ueberschreibt (gleiche Klassenzahl, spaeter im Stylesheet). */
.scope-money .content.b2b-section--alt + .content.b2b-section:not(.x):not(.y),
.scope-money .content.b2b-section--accent + .content.b2b-section:not(.x):not(.y),
.scope-money .content.keyvisual-gradient + .content.b2b-section:not(.x):not(.y),
.scope-money .content:not(.b2b-section) + .content.b2b-section:not(.y) {
padding-top: 4.5rem;
}
/* ---------- Eyebrow: dezent, kultiviert ---------- */
.scope-money .b2b-section-eyebrow {
font-size: 0.76rem;
font-weight: 600;
letter-spacing: var(--money-track-meta);
text-transform: uppercase;
margin-bottom: 0.7rem;
opacity: 0.85;
}
/* ---------- Headlines: Autoritaet durch ruhiges, getightetes Satzbild ----------
line-height fehlte komplett -> mehrzeilige H2 fielen auseinander.
max-width begrenzt die measure, text-wrap:balance vermeidet Waisen. */
.scope-money h1.b2b-section-headline,
.scope-money h2.b2b-section-headline {
letter-spacing: var(--money-track-tight);
line-height: 1.18;
margin-top: 0;
margin-bottom: 1.25rem;
max-width: 22ch;
text-wrap: balance;
}
.scope-money h2.b2b-section-headline { max-width: 26ch; }
/* Headlines auf farbigem Accent-Block duerfen breiter atmen (zentriert) */
.scope-money .b2b-section--accent .b2b-section-headline {
max-width: 30ch;
margin-left: auto;
margin-right: auto;
}
/* ---------- Intro: kultivierte Lesebreite + ruhiger Durchschuss ---------- */
.scope-money .b2b-section-intro,
.scope-money p.b2b-section-intro {
max-width: var(--money-measure);
line-height: var(--money-line);
margin-bottom: 2.25rem;
}
/* ---------- Feature-Grid: gleichmaessige Card-Hoehen ----------
Cards als Flex-Column -> Unterkanten/CTAs fluchten, egal wie lang der Text. */
.scope-money .b2b-features {
gap: 1.6rem;
align-items: stretch;
}
.scope-money .b2b-feature {
display: flex;
flex-direction: column;
padding: 1.65rem 1.55rem;
border-radius: 14px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.scope-money .b2b-feature:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 19, 87, 0.07);
}
/* Letzter Absatz/CTA an die Card-Unterkante schieben -> Buttons auf einer Linie */
.scope-money .b2b-feature p:last-of-type { margin-bottom: 0; }
.scope-money .b2b-feature .cta1,
.scope-money .b2b-feature .cta2 { margin-top: auto; align-self: flex-start; }
/* Card-Headline: kompakter Abstand, getightet, klare Hierarchie zum Body */
.scope-money .b2b-feature h3 {
margin-top: 0;
margin-bottom: 0.6rem;
letter-spacing: -0.008em;
line-height: 1.32;
}
.scope-money .b2b-feature p {
line-height: 1.6;
margin-top: 0;
}
/* Icon-Tile: ruhigerer Abstand zur Headline */
.scope-money .b2b-feature-icon { margin-bottom: 1.1rem; }
/* ---------- Preis-Plugin Atemraum ---------- */
.scope-money .content.keyvisual-gradient.animated {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* ---------- FAQ: editorial gesetzt ---------- */
.scope-money .modul.faq .wrapper-faq {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
}
.scope-money .modul.faq .wrapper-faq .frage p {
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.4;
margin: 0;
}
.scope-money .modul.faq .wrapper-faq .antwort { padding-top: 0.55rem; }
.scope-money .modul.faq .wrapper-faq .antwort p {
line-height: 1.62;
max-width: 70ch;
}
/* ---------- Accent-Schluss-CTA: ruhiger, zentrierter Block ---------- */
.scope-money .content.b2b-section--accent {
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
.scope-money .content.b2b-section--accent .center-cta,
.scope-money .content.b2b-section--accent .hero-cta-row {
justify-content: center;
}
/* ---------- Preis-Tabelle: ruhigeres Satzbild ---------- */
.scope-money .preise-tabelle { font-size: 0.97rem; }
.scope-money .preise-tabelle td { padding: 10px 0; }
/* ---------- Mobile: Rhythmus straffen ---------- */
@media (max-width: 720px) {
.scope-money .content.b2b-section {
padding-top: 3rem;
padding-bottom: 3rem;
}
.scope-money .content.b2b-section + .content.b2b-section:not(.b2b-section--alt):not(.b2b-section--accent) {
padding-top: 0.75rem;
}
/* Atemraum bei Farbwechsel/Zwischenblock wiederherstellen (s.o.) */
.scope-money .content.b2b-section--alt + .content.b2b-section:not(.x):not(.y),
.scope-money .content.b2b-section--accent + .content.b2b-section:not(.x):not(.y),
.scope-money .content.keyvisual-gradient + .content.b2b-section:not(.x):not(.y),
.scope-money .content:not(.b2b-section) + .content.b2b-section:not(.y) {
padding-top: 3rem;
}
.scope-money h1.b2b-section-headline,
.scope-money h2.b2b-section-headline { max-width: 100%; }
.scope-money .b2b-feature { padding: 1.3rem 1.25rem; }
.scope-money .content.b2b-section--accent {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
}
}
/* POLISH 2026-06-29 Money-Pages END */
/* ============================================================
2026-06-29 — Mustertext-Buttons gleich gross
Beide Buttons (.vorlage-kopieren + .cta2/.vorlage-uebernehmen)
in der .mustertext-actions-Zeile teilen sich die Breite zu
gleichen Teilen, gleiche Hoehe/Padding/Schriftgroesse.
Strikt auf .mustertext-actions gescopt -> kein Bleed.
============================================================ */
.wrapper_global .mustertext-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.85rem;
align-items: stretch;
justify-content: flex-start;
}
.wrapper_global .mustertext-actions > .vorlage-kopieren,
.wrapper_global .mustertext-actions > .cta2,
.wrapper_global .mustertext-actions > .vorlage-uebernehmen {
flex: 0 0 auto; /* NICHT strecken — kompakt nach Inhalt */
min-width: 11rem; /* gemeinsame Mindestbreite -> gleich gross */
box-sizing: border-box;
margin-top: 0; /* .cta2 hat sonst margin-top:1rem */
min-height: 2.6rem;
padding: 0.55rem 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: 0.9rem;
line-height: 1.2;
border-radius: 8px;
text-align: center;
}
/* Pfeil im Generator-Button mittig statt rechtsbuendig ausrichten */
.wrapper_global .mustertext-actions > .cta2:after,
.wrapper_global .mustertext-actions > .vorlage-uebernehmen:after {
width: auto;
text-align: center;
margin-left: 0.1rem;
}
/* Mobil: untereinander, volle Breite, gleiche Hoehe bleibt */
@media (max-width: 480px) {
.wrapper_global .mustertext-actions > .vorlage-kopieren,
.wrapper_global .mustertext-actions > .cta2,
.wrapper_global .mustertext-actions > .vorlage-uebernehmen {
flex: 1 1 100%;
min-width: 0;
}
}
/* Mustertext-Buttons gleich gross END */
/* FIX 2026-06-30: Abschluss-CTA-Section (b2b-section--accent) war weiss-auf-weiss,
weil reset.css NACH style.css laedt und Hintergrund/Farbe killt.
Gezielter Override mit hoher Spezifitaet, betrifft nur diesen Block. */
html body .wrapper_global .b2b-section--accent,
html body .wrapper_global .content.b2b-section--accent {
background: var(--blue-dark) !important;
}
html body .wrapper_global .b2b-section--accent .b2b-section-headline,
html body .wrapper_global .b2b-section--accent h2.b2b-section-headline,
html body .wrapper_global .b2b-section--accent p {
color: #fff !important;
}
/* FIX 2026-06-30 END */
/* ============================================================
DESIGN 2026-08-03 — Startseite (Stufe 1)
Strikt gescopt via .scope-design26 (zusaetzlicher Wrapper-Klasse
am Article-Body der Startseite, neben .scope-money).
Beruehrt NICHT: Navigation, Hero, Preistabelle (.tai-pt*), Footer.
Andere Seiten bleiben vollstaendig unberuehrt.
Bildsprache: ruhige Karten mit einer einzigen Signatur
(Radius 1rem / Hairline / weicher Navy-Schatten), Mint-Icons in
getoenten Kreisen, Split-Layout fuer Sektionen mit Intro,
Zeilen-Layout fuer die beiden Anbieter-Sektionen.
============================================================ */
.scope-design26 {
--d26-navy: #001357;
--d26-mint: #27D4BD;
--d26-mint-soft: rgba(39, 212, 189, 0.10);
--d26-mint-line: rgba(39, 212, 189, 0.28);
--d26-hairline: #e7ecf1;
--d26-card-radius: 1rem;
--d26-shadow: 0 10px 30px rgba(0, 19, 87, 0.06);
--d26-shadow-hi: 0 16px 40px rgba(0, 19, 87, 0.11);
--d26-gap: 1.5rem;
}
/* ------------------------------------------------------------
1. Trust-Leiste — ruhiger, gleiche optische Logohoehe
------------------------------------------------------------ */
.scope-design26 .content.b2b-trust {
background: #fbfcfd;
}
.scope-design26 .b2b-trust-logos {
gap: 1.5rem 2.5rem;
}
.scope-design26 .b2b-trust-logos span {
opacity: 0.6;
filter: grayscale(100%);
transition: opacity 0.25s ease, filter 0.25s ease;
}
.scope-design26 .b2b-trust-logos span:hover {
opacity: 1;
filter: grayscale(0%);
}
/* ------------------------------------------------------------
2. Karten-Signatur — eine fuer die ganze Seite
------------------------------------------------------------ */
.scope-design26 .b2b-features {
gap: var(--d26-gap);
align-items: stretch;
}
.scope-design26 .b2b-feature {
background: #fff;
border: 1px solid var(--d26-hairline);
border-radius: var(--d26-card-radius);
box-shadow: var(--d26-shadow);
padding: 1.75rem 1.6rem;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.scope-design26 .b2b-feature:hover {
transform: translateY(-3px);
box-shadow: var(--d26-shadow-hi);
border-color: var(--d26-mint-line);
}
.scope-design26 .b2b-feature h3 {
font-size: 1.1rem;
line-height: 1.35;
letter-spacing: -0.008em;
margin-bottom: 0.55rem;
}
.scope-design26 .b2b-feature h3 a {
color: var(--d26-navy);
transition: color 0.2s ease;
}
.scope-design26 .b2b-feature:hover h3 a {
color: var(--d26-mint);
}
.scope-design26 .b2b-feature p {
font-size: 0.96rem;
line-height: 1.68;
}
/* Icon-Kreis */
.scope-design26 .d26-ico {
flex: 0 0 auto;
width: 2.85rem;
height: 2.85rem;
border-radius: 50%;
background: var(--d26-mint-soft);
color: var(--d26-mint);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.15rem;
transition: background-color 0.2s ease;
}
.scope-design26 .d26-ico svg {
width: 1.35rem;
height: 1.35rem;
display: block;
}
.scope-design26 .b2b-feature:hover .d26-ico {
background: rgba(39, 212, 189, 0.18);
}
/* Verlinkte Karten: Affordance direkt an der Headline statt in der Ecke —
sonst kaempft der Pfeil oben rechts optisch mit dem Icon oben links. */
.scope-design26 .b2b-feature h3 a::after {
/* geschuetztes Leerzeichen: der Pfeil darf nie allein auf eine
neue Zeile rutschen (passiert sonst schmal auf dem Handy) */
content: "\00a0\2192";
display: inline-block;
color: var(--d26-mint);
font-weight: 400;
opacity: 0.35;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.scope-design26 .b2b-feature:hover h3 a::after {
opacity: 1;
transform: translateX(3px);
}
/* ------------------------------------------------------------
3. Ordnungszahlen statt Icon (Sektion "Vier gute Gruende")
Gleicher Kreis wie die Icons, damit die Seite eine Sprache
spricht — nur eben mit Ziffer.
Die Ziffer kommt aus einem CSS-Zaehler, nicht aus dem Markup — so bleibt
der Textbestand der Seite nachweisbar unveraendert.
------------------------------------------------------------ */
.scope-design26 .d26-cards-row .b2b-features {
counter-reset: d26num;
}
.scope-design26 .d26-num {
font-variant-numeric: tabular-nums;
font-size: 1.15rem;
font-weight: 600;
line-height: 1;
color: var(--d26-navy);
letter-spacing: -0.02em;
}
.scope-design26 .d26-num::before {
counter-increment: d26num;
content: counter(d26num);
}
/* (Das Split-Layout fuer "So funktioniert es" ist am 03.08. wieder
entfallen — in drei schmalen Spalten wirkte der Satz gequetscht.
Die Sektion laeuft wieder klassisch: Text oben, Karten darunter.) */
/* ------------------------------------------------------------
4. Zeilen-Karten — Icon links, Text rechts
(Sektionen "Stimme und Musik", "Vier gute Gruende")
------------------------------------------------------------ */
.scope-design26 .d26-cards-row .b2b-feature {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1.25rem;
align-items: start;
}
.scope-design26 .d26-cards-row .d26-ico {
grid-row: 1 / span 2;
margin-bottom: 0;
margin-top: 0.15rem;
}
.scope-design26 .d26-cards-row .b2b-feature h3 {
align-self: center;
margin-bottom: 0.4rem;
}
.scope-design26 .d26-cards-row .b2b-feature:has(h3 a) h3 {
align-self: start;
}
/* ------------------------------------------------------------
5. Anbieter-Zeilen — grosses Icon | Text | CTA
(Sektionen "Erfahrung seit 2003" und "Stand 2026")
------------------------------------------------------------ */
/* Aus dem Icon-Kachel wird eine Foto-Kachel: dieselbe Stelle im Markup,
aber ein Bild statt eines Symbols — das lockert die beiden Textzeilen
auf, ohne dass neue Elemente in den Artikel muessen. Die beiden
Sektionen bekommen unterschiedliche Motive und wechselnde Seiten. */
.scope-design26 .d26-feature-row .d26-ico-xl {
width: 21rem;
height: 13.5rem;
border-radius: 1rem;
background-color: #0b1c3f;
background-size: cover;
background-position: center;
box-shadow: 0 14px 36px rgba(0, 19, 87, 0.16);
display: block;
overflow: hidden;
}
.scope-design26 .d26-feature-row .d26-ico-xl svg {
display: none;
}
.scope-design26 .d26-feature-row:not(.stand-2026) .d26-ico-xl {
background-image: url("../../../images/hero-1497366858526-0766cadbe8fa.webp");
}
.scope-design26 .d26-feature-row.stand-2026 .d26-ico-xl {
background-image: url("../../../images/hero-1486312338219-ce68d2c6f44d.webp");
}
@media only screen and (min-width: 1000px) {
/* 03.08. Korrektur: der CTA hatte eine eigene Spalte — dadurch klemmte
der Text in der Mitte und rechts unten blieb ein Loch. Jetzt zwei
Spalten (Icon | Text) und der Button sitzt unter dem Text. */
.scope-design26 .d26-feature-row .modul {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 3rem;
align-items: start;
}
.scope-design26 .d26-feature-row .d26-ico-xl {
grid-column: 1;
grid-row: 1 / span 4;
margin-top: 0.25rem;
}
.scope-design26 .d26-feature-row .b2b-section-eyebrow,
.scope-design26 .d26-feature-row .b2b-section-headline,
.scope-design26 .d26-feature-row .b2b-section-intro {
grid-column: 2;
}
.scope-design26 .d26-feature-row .b2b-section-eyebrow {
grid-row: 1;
align-self: end;
}
.scope-design26 .d26-feature-row .b2b-section-headline {
grid-row: 2;
margin-bottom: 0.65rem;
max-width: 30ch;
}
.scope-design26 .d26-feature-row .b2b-section-intro {
grid-row: 3;
align-self: start;
margin-bottom: 0;
max-width: 78ch;
}
.scope-design26 .d26-feature-row .center-cta {
grid-column: 2;
grid-row: 4;
margin: 1.6rem 0 0;
text-align: left;
}
.scope-design26 .d26-feature-row .center-cta .cta1 {
white-space: nowrap;
}
/* Zweite Zeile spiegelverkehrt: Foto rechts, Text links —
dadurch bekommt die Seite einen Wechsel statt einer Reihe. */
.scope-design26 .d26-feature-row.stand-2026 .modul {
grid-template-columns: minmax(0, 1fr) auto;
}
.scope-design26 .d26-feature-row.stand-2026 .d26-ico-xl {
grid-column: 2;
}
.scope-design26 .d26-feature-row.stand-2026 .b2b-section-eyebrow,
.scope-design26 .d26-feature-row.stand-2026 .b2b-section-headline,
.scope-design26 .d26-feature-row.stand-2026 .b2b-section-intro,
.scope-design26 .d26-feature-row.stand-2026 .center-cta {
grid-column: 1;
}
}
@media only screen and (max-width: 999px) {
.scope-design26 .d26-feature-row .d26-ico-xl {
width: 100%;
height: 11rem;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
}
}
/* ------------------------------------------------------------
6. FAQ — als Karte, Hairlines statt Punktlinien
(JS-Mechanik .wrapper-faq.active bleibt unangetastet)
ACHTUNG Spezifitaet: die Basis-Regeln stehen als
`.wrapper_global .content .modul.faq .inhalt .wrapper-faq …`
(6 Klassen) im Stylesheet. Kuerzere Selektoren verlieren —
u. a. bliebe sonst der FontAwesome-Chevron als Tofu stehen.
Deshalb hier durchgaengig mit voller Kette + .d26-faq-card.
------------------------------------------------------------ */
.scope-design26 .d26-faq-card {
background: #fff;
border: 1px solid var(--d26-hairline);
border-radius: var(--d26-card-radius);
box-shadow: var(--d26-shadow);
overflow: hidden;
margin-top: 1.75rem;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .wrapper-faq {
border-bottom: 1px solid var(--d26-hairline);
padding: 0 1.6rem;
transition: background-color 0.18s ease;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .wrapper-faq:last-child {
border-bottom: 0;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .wrapper-faq:hover,
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .wrapper-faq.active {
background: #fbfdfe;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .wrapper-faq:first-of-type {
margin-top: 0;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .frage {
margin-top: 0;
padding: 1.15rem 0;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .frage span p {
font-size: 1.02rem;
font-weight: 500;
margin-bottom: 0;
padding-right: 3rem;
}
/* Chevron: eigener CSS-Pfeil statt FontAwesome-Glyph */
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .frage span:after {
content: "";
font-family: inherit;
width: 1.6rem;
height: 1.6rem;
right: 0;
top: calc(50% - 0.8rem);
border: 1px solid var(--d26-mint-line);
border-radius: 50%;
background-image: linear-gradient(var(--d26-mint), var(--d26-mint)), linear-gradient(var(--d26-mint), var(--d26-mint));
background-size: 0.6rem 1.5px, 1.5px 0.6rem;
background-position: center, center;
background-repeat: no-repeat;
transition: transform 0.22s ease, background-color 0.22s ease;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .frage:hover span:after {
padding-top: 0;
background-color: var(--d26-mint-soft);
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .wrapper-faq.active .frage span:after {
transform: rotate(45deg);
background-color: var(--d26-mint-soft);
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .antwort {
padding-right: 4rem;
padding-bottom: 1.2rem;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .antwort p {
font-size: 0.98rem;
line-height: 1.72;
margin-bottom: 0;
max-width: 74ch;
}
/* ------------------------------------------------------------
7. Rhythmus um die (unveraenderte) Preistabelle
Das Verlaufsband hatte aus dem Juni-Polish nur 0.5rem Innenabstand —
die Tabelle klebte oben und unten an der Kante. Die Tabelle selbst
wird nicht angefasst, nur das Band bekommt Luft.
Spezifitaet: Basisregel ist `.scope-money .content.keyvisual-gradient
.animated` (3 Klassen), daher hier die laengere Kette.
------------------------------------------------------------ */
/* Das Band traegt jetzt ZWEI Kinder (Ueberschrift + Tabelle). `.content`
ist im Template ein Grid mit `grid-template-areas: "a b c"` und `.modul`
liegt fest in Spalte b — zwei Kinder landen dadurch uebereinander bzw.
in den Randspalten. Fuer dieses eine Band deshalb Block-Fluss, die
Zentrierung uebernehmen max-width + auto-Margins. */
/* 🚨 `:has(.tai-pt)` ist hier NICHT Kosmetik, sondern Pflicht:
`content keyvisual-gradient animated` heisst auf JEDER Unterseite der
HERO. Ohne die Einschraenkung haetten alle Unterseiten beim Rollout
den Preisband-Innenabstand und `display:block` statt des Hero-Grids
bekommen. Der Preisblock (`.modul.tai-pt`) kommt nur im Preisband vor —
auf der Startseite und auf /preise. */
.wrapper_global .scope-design26 .content.keyvisual-gradient.animated:has(.tai-pt) {
display: block;
padding-top: 4.5rem;
padding-bottom: 4.5rem;
padding-left: 2rem;
padding-right: 2rem;
}
.wrapper_global .scope-design26 .content.keyvisual-gradient.animated:has(.tai-pt) > .modul {
max-width: var(--site-width);
margin-left: auto;
margin-right: auto;
}
/* ------------------------------------------------------------
7b. Preistabelle — optischer Feinschliff (nur Darstellung)
Pakete, Zeichen, Preise, Reihenfolge und Buttons bleiben unveraendert.
Befund: die Spalten liefen auseinander (Paketname bekam ein Drittel,
die Zahlen standen weit rechts und waren schlecht vergleichbar), der
Preis hatte kein Gewicht, die Bestseller-Zeile war kaum markiert.
------------------------------------------------------------ */
.scope-design26 .tai-pt-scroll {
border-radius: 1.25rem;
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 26px 60px rgba(0, 19, 87, 0.28);
}
/* Feste Spaltenbreiten: Zahlen ruecken zusammen und werden vergleichbar */
.scope-design26 .tai-pt-table {
table-layout: fixed;
}
.scope-design26 .tai-pt-table th:nth-child(1),
.scope-design26 .tai-pt-table td:nth-child(1) { width: 25%; }
.scope-design26 .tai-pt-table th:nth-child(2),
.scope-design26 .tai-pt-table td:nth-child(2) { width: 13%; }
.scope-design26 .tai-pt-table th:nth-child(3),
.scope-design26 .tai-pt-table td:nth-child(3) { width: 15%; }
.scope-design26 .tai-pt-table th:nth-child(4),
.scope-design26 .tai-pt-table td:nth-child(4) { width: 14%; }
.scope-design26 .tai-pt-table th:nth-child(5),
.scope-design26 .tai-pt-table td:nth-child(5) { width: 14%; }
.scope-design26 .tai-pt-table th:nth-child(6),
.scope-design26 .tai-pt-table td.tai-pt-buy { width: 19%; }
/* Kopfzeile ruhiger: keine graue Wanne, nur eine Haarlinie */
.scope-design26 .tai-pt-table thead th {
background: transparent;
color: #8b97a8;
font-weight: 600;
font-size: 0.68rem;
letter-spacing: 0.1em;
padding: 1.1rem 1rem 0.75rem;
border-bottom: 1px solid var(--d26-hairline);
}
/* Zeilen kompakter — die Karte war unnoetig hoch */
.scope-design26 .tai-pt-table td,
.scope-design26 .tai-pt-table tbody th {
padding: 0.8rem 1rem;
}
.scope-design26 .tai-pt-table tbody tr {
border-bottom: 1px solid #f1f4f7;
}
/* Der Preis ist die Hauptinformation und bekommt endlich Gewicht */
.scope-design26 .tai-pt-num strong {
font-size: 1.32rem;
letter-spacing: -0.015em;
line-height: 1.2;
}
.scope-design26 .tai-pt-name {
font-size: 1.05rem;
padding-left: 1.4rem;
}
.scope-design26 .tai-pt-per {
font-size: 0.86rem;
color: #94a2b3;
}
/* Bestseller-Zeile: Mint-Kante links + kraeftigerer Verlauf */
.scope-design26 .tai-pt-best {
background: linear-gradient(90deg, rgba(86, 223, 205, 0.20) 0%, rgba(86, 223, 205, 0.05) 60%, transparent 100%);
}
.scope-design26 .tai-pt-best:hover {
background: linear-gradient(90deg, rgba(86, 223, 205, 0.28) 0%, rgba(86, 223, 205, 0.09) 60%, transparent 100%);
}
.scope-design26 .tai-pt-best .tai-pt-name {
border-left: 3px solid var(--d26-mint);
padding-left: 1.15rem;
}
.scope-design26 .tai-pt-badge {
font-size: 0.6rem;
padding: 0.22rem 0.6rem;
letter-spacing: 0.08em;
vertical-align: 0.12em;
}
/* Kauf-Buttons etwas kompakter, damit die Zeile ruhiger wirkt */
.scope-design26 .tai-pt-cart {
padding: 0.5rem 1rem;
font-size: 0.72rem;
}
/* Vorteilsliste als 2x2-Raster statt 3+1-Umbruch */
.scope-design26 .tai-pt-incl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem 3rem;
justify-items: start;
max-width: 58rem;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 720px) {
.scope-design26 .tai-pt-incl {
grid-template-columns: 1fr;
gap: 0.7rem;
}
}
/* Vorteilsliste und Kleingedrucktes klebten an der Tabellenkante.
Nur Abstaende — Inhalt, Reihenfolge und Preise bleiben unberuehrt.
(Basis steht im Inline-Block `tai-preise-css` mit 1 Klasse, die
zwei Klassen hier gewinnen unabhaengig von der Reihenfolge.) */
.scope-design26 .tai-pt-incl {
margin-top: 3.1rem;
gap: 0.9rem 2.25rem;
}
.scope-design26 .tai-pt-note {
margin-top: 2.25rem;
line-height: 1.75;
}
/* Die Preis-Ueberschrift sitzt jetzt IM Verlaufsband (per Markup dorthin
verschoben, kein neuer Text). Sie ist damit eine .content in einer
.content — deshalb die seitliche Polsterung zuruecknehmen, sonst
waere sie gegenueber der Tabelle eingerueckt. */
.wrapper_global .scope-design26 .content.b2b-section.d26-price-head {
display: block;
padding: 0 0 2.5rem 0;
background: transparent;
max-width: var(--site-width);
margin-left: auto;
margin-right: auto;
}
/* Typografie auf dem Band. Der Preisblock selbst ist im Haus-Stil auf
`font-weight: 300` mit fetter Betonung angelegt (`.tai-pt-h2`) — die
Sektion erbte aber das 700er-Headline-Styling der b2b-Sektionen und
wirkte dadurch klotzig. Hier auf den Haus-Stil gezogen. */
.scope-design26 .d26-price-head .b2b-section-eyebrow {
color: var(--mint-cta);
opacity: 1;
font-size: 0.72rem;
letter-spacing: 0.14em;
margin-bottom: 1rem;
}
.scope-design26 .d26-price-head .b2b-section-headline {
color: #fff;
font-weight: 300;
font-size: 2.4rem;
line-height: 1.16;
letter-spacing: -0.022em;
max-width: 20ch;
margin-bottom: 1.15rem;
}
.scope-design26 .d26-price-head .b2b-section-headline strong {
font-weight: 600;
}
.scope-design26 .d26-price-head .b2b-section-intro {
color: rgba(255, 255, 255, 0.88);
font-size: 1.08rem;
line-height: 1.75;
max-width: 60ch;
margin-bottom: 0;
}
/* Vorteile und Kleingedrucktes: ruhiger gestuft statt gleich laut */
.scope-design26 .tai-pt-incl li {
font-size: 0.93rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.94);
padding-left: 1.6rem;
}
.scope-design26 .tai-pt-incl li::before {
width: 0.8rem;
height: 0.42rem;
border-left-width: 2px;
border-bottom-width: 2px;
top: 0.4em;
}
.scope-design26 .tai-pt-note {
font-size: 0.79rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.62);
max-width: 58rem;
letter-spacing: 0.004em;
}
.scope-design26 .d26-tight-bottom {
padding-bottom: 2rem;
}
/* Der CTA sitzt jetzt IM Band, direkt unter der Tabelle (per Markup dorthin
verschoben). Wieder eine .content in einer .content — Polsterung und
Hintergrund zuruecknehmen, Block-Fluss statt Grid. */
.wrapper_global .scope-design26 .content.keyvisual-gradient.animated .d26-tight-top {
display: block;
padding: 2.25rem 0 0;
background: transparent;
max-width: none;
}
.scope-design26 .content.keyvisual-gradient.animated .d26-tight-top .modul,
.scope-design26 .content.keyvisual-gradient.animated .d26-tight-top .center-cta {
text-align: center;
margin: 0;
max-width: none;
}
@media only screen and (max-width: 720px) {
.wrapper_global .scope-design26 .content.keyvisual-gradient.animated:has(.tai-pt) {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
/* ------------------------------------------------------------
8. Abschluss-Band
------------------------------------------------------------ */
.scope-design26 .b2b-section--accent .b2b-section-headline {
max-width: 26ch;
}
/* ------------------------------------------------------------
9. Mobil / Tablet
WICHTIG: die Basis-Mobilregeln des Templates haengen an
`max-device-width: 480px` — das ist die GERAETE-Breite, nicht die
Viewport-Breite. Ein schmales Fenster am Desktop (und jede Vorschau)
faellt damit durchs Raster und behaelt das mehrspaltige Grid.
Deshalb hier eigene, viewport-basierte Breakpoints; gescopt, also
ohne Wirkung auf andere Seiten.
------------------------------------------------------------ */
@media only screen and (max-width: 999px) {
.scope-design26 .b2b-features {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 720px) {
.scope-design26 .b2b-features {
grid-template-columns: 1fr;
gap: 1rem;
}
.scope-design26 .b2b-section-headline {
max-width: 100%;
}
.scope-design26 .b2b-trust-logos {
justify-content: center;
gap: 1rem 1.5rem;
}
}
@media only screen and (max-width: 720px) {
.scope-design26 .b2b-feature {
padding: 1.35rem 1.25rem;
}
.scope-design26 .d26-ico {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.9rem;
}
.scope-design26 .d26-ico svg {
width: 1.2rem;
height: 1.2rem;
}
.scope-design26 .d26-cards-row .b2b-feature {
column-gap: 1rem;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .wrapper-faq {
padding: 0 1.15rem;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .d26-faq-card .antwort {
padding-right: 1rem;
}
}
/* ============================================================
PEPP-PAKET 03.08. — Abend
Kritik war: sauber, aber alles gleich; es gibt nichts zu entdecken.
Antwort: nicht mehr Deko, sondern RHYTHMUS. Jede Sektion bekommt
eine eigene Oberflaeche, dazu zwei Marken-Signale (Punktraster,
Wellenform) und eine Mikro-Interaktion an den Karten.
============================================================ */
/* ---------- Punktraster (Sektion "Typische Einsatzfaelle") ----------
Nach oben ausgeblendet, damit die Kante zur Nachbarsektion weich bleibt. */
/* Spezifitaet: .wrapper_global .content.b2b-section setzt `background`
als Kurzform (3 Klassen) und wuerde jedes Hintergrundbild wieder
ausknipsen — daher die volle Kette. */
.wrapper_global .scope-design26 .content.b2b-section.d26-dots {
position: relative;
background-color: var(--grey-light);
background-image: radial-gradient(rgba(0, 19, 87, 0.13) 1px, transparent 1px);
background-size: 22px 22px;
background-position: 0 0;
animation: d26-dots-drift 34s linear infinite;
}
/* Sehr langsamer Versatz um genau eine Rasterzelle — dadurch ist der
Loop nahtlos und faellt nur unterbewusst auf. */
@keyframes d26-dots-drift {
from { background-position: 0 0; }
to { background-position: 22px 22px; }
}
.scope-design26 .d26-dots > .modul {
position: relative;
z-index: 1;
}
/* ---------- Mint-Oberflaeche (Sektion "Stimme und Musik") ----------
Dritte Flaechenfarbe neben Weiss und Grau. Traegt die Wellenform. */
.wrapper_global .scope-design26 .content.b2b-section.d26-surface-mint {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #eafaf7 0%, #ddf3ef 100%);
}
/* ---------- Wellenform: echtes Inline-SVG, Balken animiert ----------
Als background-image ginge das nicht — SVG-Animationen laufen dort
in keinem Browser. Sehr langsam und flach gehalten: es soll atmen,
nicht blinken. Bei prefers-reduced-motion steht sie still. */
.scope-design26 .d26-wave {
position: absolute;
right: 1.5rem;
bottom: 1.25rem;
width: 26rem;
max-width: 42%;
pointer-events: none;
opacity: 0.55;
}
.scope-design26 .d26-wave svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.scope-design26 .d26-wave rect {
fill: var(--d26-mint);
transform-box: fill-box;
transform-origin: center;
animation: d26-bar 3.4s ease-in-out infinite;
}
@keyframes d26-bar {
0%, 100% { transform: scaleY(0.55); }
50% { transform: scaleY(1); }
}
.scope-design26 .d26-wave rect:nth-child(3n) { animation-duration: 4.6s; }
.scope-design26 .d26-wave rect:nth-child(3n+1) { animation-duration: 3.9s; }
.scope-design26 .d26-wave rect:nth-child(1) { animation-delay: -0.1s; }
.scope-design26 .d26-wave rect:nth-child(2) { animation-delay: -0.5s; }
.scope-design26 .d26-wave rect:nth-child(3) { animation-delay: -0.9s; }
.scope-design26 .d26-wave rect:nth-child(4) { animation-delay: -1.4s; }
.scope-design26 .d26-wave rect:nth-child(5) { animation-delay: -0.3s; }
.scope-design26 .d26-wave rect:nth-child(6) { animation-delay: -1.8s; }
.scope-design26 .d26-wave rect:nth-child(7) { animation-delay: -0.7s; }
.scope-design26 .d26-wave rect:nth-child(8) { animation-delay: -2.2s; }
.scope-design26 .d26-wave rect:nth-child(9) { animation-delay: -1.1s; }
.scope-design26 .d26-wave rect:nth-child(10) { animation-delay: -2.6s; }
.scope-design26 .d26-wave rect:nth-child(11) { animation-delay: -0.2s; }
.scope-design26 .d26-wave rect:nth-child(12) { animation-delay: -1.6s; }
.scope-design26 .d26-wave rect:nth-child(13) { animation-delay: -3.0s; }
.scope-design26 .d26-wave rect:nth-child(14) { animation-delay: -0.6s; }
.scope-design26 .d26-wave rect:nth-child(15) { animation-delay: -2.0s; }
.scope-design26 .d26-wave rect:nth-child(16) { animation-delay: -1.2s; }
.scope-design26 .d26-wave rect:nth-child(17) { animation-delay: -2.8s; }
.scope-design26 .d26-wave rect:nth-child(18) { animation-delay: -0.4s; }
.scope-design26 .d26-wave rect:nth-child(19) { animation-delay: -1.9s; }
.scope-design26 .d26-wave rect:nth-child(20) { animation-delay: -1.0s; }
.scope-design26 .d26-wave rect:nth-child(21) { animation-delay: -2.4s; }
/* ---------- Mikro-Interaktion: Mint-Kante faehrt an der Kartenoberkante ein ---------- */
.scope-design26 .b2b-feature {
position: relative;
overflow: hidden;
}
.scope-design26 .b2b-feature::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--d26-mint), var(--d26-mint-cta, #56DFCD));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.28s ease;
}
.scope-design26 .b2b-feature:hover::before {
transform: scaleX(1);
}
/* ---------- Icon-Kreis fuellt sich beim Hover ---------- */
.scope-design26 .b2b-feature:hover .d26-ico {
background: var(--d26-mint);
color: #fff;
}
.scope-design26 .b2b-feature:hover .d26-num {
color: #fff;
}
/* ---------- Abschluss-Band: Studiomikrofon als Hintergrund ----------
Das Band war die langweiligste Flaeche der Seite: nur Navy und zwei
Zeilen Text. Jetzt liegt ein Studiomikrofon darunter (vorhandenes
Motiv aus /images), abgedunkelt mit einem Navy-Verlauf, der nach
rechts aufmacht — dort steht das Mikrofon im Bild.
Spezifitaet wieder mit voller Kette, sonst gewinnt die
`background`-Kurzform aus .wrapper_global .content.b2b-section. */
.wrapper_global .scope-design26 .content.b2b-section.b2b-section--accent {
position: relative;
overflow: hidden;
padding-top: 7rem;
padding-bottom: 7rem;
min-height: 30rem;
background-color: var(--blue-dark);
}
/* Das Motiv als Panel rechts, nach links in die Flaeche ausgeblendet.
Vollflaechig ging nicht: das Bild ist fast schwarz und verschwand
unter dem Navy-Verlauf komplett. */
.scope-design26 .b2b-section--accent::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
/* Breite gedeckelt: waechst das Panel mit dem Fenster, schneidet
`cover` bei fester Bandhoehe immer mehr vom Motiv weg. So bleibt
der Ausschnitt ab 1000px konstant. */
width: 34%;
max-width: 30rem;
background-image: url("../../../images/hero-1590602847861-f357a9332bbc.webp");
background-size: cover;
background-position: 50% 58%;
/* Motiv gespiegelt: das Mikrofon zeigt jetzt in die Seite hinein
statt hinaus. Die Maske ist deshalb ebenfalls umgedreht — sie wird
von der Spiegelung miterfasst und wuerde sonst in die falsche
Richtung ausblenden. */
transform: scaleX(-1);
-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
pointer-events: none;
}
.scope-design26 .b2b-section--accent .modul {
position: relative;
z-index: 1;
text-align: left;
max-width: var(--site-width);
}
.scope-design26 .b2b-section--accent .b2b-section-headline {
margin-left: 0;
margin-right: 0;
max-width: 22ch;
text-wrap: balance;
}
.scope-design26 .b2b-section--accent .center-cta {
text-align: left;
margin-top: 1.75rem;
}
/* Schmal: das Motiv traegt nicht mehr, dann wieder ruhiges Navy */
@media only screen and (max-width: 900px) {
.scope-design26 .b2b-section--accent::after { display: none; }
.scope-design26 .b2b-section--accent .modul,
.scope-design26 .b2b-section--accent .center-cta { text-align: center; }
.scope-design26 .b2b-section--accent .b2b-section-headline {
max-width: 26ch; margin-left: auto; margin-right: auto;
}
.wrapper_global .scope-design26 .content.b2b-section.b2b-section--accent {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.scope-design26 .d26-surface-mint::after {
display: none;
}
}
/* ------------------------------------------------------------
10. Footer-Hinweis — Luft nach unten
ACHTUNG: der Footer liegt AUSSERHALB von .scope-design26 (er kommt
nicht aus dem Article-Body). Diese Regel wirkt daher auf ALLEN Seiten.
Bewusst so, und bewusst nur an der eigenen Klasse .tai-b2b-hinweis
festgemacht — kein nackter Element-Selektor.
------------------------------------------------------------ */
.wrapper_global .content.bg-blue-dark .footer .tai-b2b-hinweis {
margin-top: 0.6rem;
padding-bottom: 0.45rem;
}
.wrapper_global .content.bg-blue-dark .footer {
padding-bottom: 0.8rem;
}
/* ============================================================
ENDE DESIGN 2026-08-03
============================================================ */
/* ---------- Bewegung nur, wenn der Nutzer sie zulaesst ---------- */
@media (prefers-reduced-motion: reduce) {
.scope-design26 .d26-wave rect,
.wrapper_global .scope-design26 .content.b2b-section.d26-dots {
animation: none;
}
}
/* ============================================================
DESIGN 2026-08-03 — STUFE 2: Rollout auf alle Seiten
------------------------------------------------------------
Die Startseite ist die Vorlage. Uebertragen wird NICHT ihr
Aufbau, sondern ihr System:
1 Kartensignatur Radius 1rem, Hairline, weicher Navy-Schatten,
beim Hover 3px anheben + Mint-Kante oben
1 Icon-Form Kreis, Mint auf Mint-Tint, fuellt sich beim Hover
1 Listenzeichen Mint-Haken (dasselbe wie in der Preisliste)
1 Textmass ~72 Zeichen Zeilenlaenge, Durchschuss 1.8
1 Flaechenwechsel weiss / Punktraster-Grau — nie zwei gleiche
Flaechen hintereinander
Alles rein optisch. Kein Markup, kein Text, kein Artikel wird
angefasst — der Scope kommt aus dem Template-Override
(html/com_content/article/default.php).
============================================================ */
/* ------------------------------------------------------------
0. Fliesstext und Listen im b2b-Bereich
BEFUND: die Absaetze und Listen der Unterseiten haengen direkt
unter `.modul` — die Basisregeln des Templates greifen aber nur
unter `.modul .inhalt`. Ergebnis: Absaetze ueber die volle
Bandbreite (~150 Zeichen je Zeile) und Listen voellig ohne
Aufzaehlungszeichen, ohne Einzug, ohne Abstand.
Das ist der groesste optische Mangel ausserhalb der Startseite.
------------------------------------------------------------ */
.scope-design26 .b2b-section .modul > p {
font-size: 1.02rem;
line-height: 1.8;
max-width: 72ch;
margin: 0 0 1.15rem;
}
/* Absaetze, die im Markup ausdruecklich zentriert sind, sollen zentriert
bleiben — dann muss auch der Kasten mittig stehen, nicht nur der Text. */
.scope-design26 .b2b-section .modul > p[style*="text-align"] {
margin-left: auto;
margin-right: auto;
}
.scope-design26 .b2b-section .modul > p:last-child {
margin-bottom: 0;
}
/* zentrierte Buttonzeilen und der Intro-Absatz behalten ihre eigenen Masse */
.scope-design26 .b2b-section .modul > p.center-cta {
max-width: none;
margin-top: 1.75rem;
}
.scope-design26 .b2b-section .modul > p.b2b-section-intro {
max-width: 72ch;
}
.scope-design26 .b2b-section .modul > ul,
.scope-design26 .b2b-section .modul > ol {
list-style: none;
max-width: 72ch;
margin: 1.4rem 0 0;
padding-left: 0;
}
.scope-design26 .b2b-section .modul > ul > li,
.scope-design26 .b2b-section .modul > ol > li {
position: relative;
padding-left: 1.85rem;
margin: 0 0 0.75rem;
font-size: 1.02rem;
line-height: 1.7;
}
/* Mint-Haken — dasselbe Zeichen wie in der Vorteilsliste am Preisband,
damit die Seite EIN Listenzeichen hat und nicht drei. */
.scope-design26 .b2b-section .modul > ul > li::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.6em;
width: 0.72rem;
height: 0.38rem;
border-left: 2px solid var(--d26-mint);
border-bottom: 2px solid var(--d26-mint);
transform: rotate(-45deg);
}
/* Nummerierte Listen behalten die Ziffer, im gleichen Mint */
.scope-design26 .b2b-section .modul > ol {
counter-reset: d26ol;
}
.scope-design26 .b2b-section .modul > ol > li::before {
counter-increment: d26ol;
content: counter(d26ol) ".";
position: absolute;
left: 0;
top: 0;
color: var(--d26-mint);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------
1. Ueberschriften — nur Feinschliff, Groesse bleibt
------------------------------------------------------------ */
.scope-design26 h2.b2b-section-headline,
.scope-design26 h1.b2b-section-headline {
line-height: 1.25;
letter-spacing: -0.015em;
max-width: 34ch;
text-wrap: balance;
}
.scope-design26 .b2b-section-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.14em;
}
/* h3-Zwischenueberschriften direkt im Fliesstext */
.scope-design26 .b2b-section .modul > h3 {
font-size: 1.15rem;
line-height: 1.35;
margin: 2.25rem 0 0.75rem;
letter-spacing: -0.008em;
}
/* ------------------------------------------------------------
2. Icons, die schon im Markup stehen (158 Stueck auf der Seite)
Sie lagen bisher als blau getoentes Quadrat mit 10px Radius vor.
Gleiche Form wie auf der Startseite: Mint-Kreis, der sich beim
Hover fuellt. Damit sind die vorhandenen Icons ohne eine einzige
Markup-Aenderung Teil derselben Bildsprache.
------------------------------------------------------------ */
.scope-design26 .b2b-feature-icon {
width: 2.85rem;
height: 2.85rem;
border-radius: 50%;
background: var(--d26-mint-soft);
color: var(--d26-mint);
margin-bottom: 1.15rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
.scope-design26 .b2b-feature-icon svg {
width: 1.3rem;
height: 1.3rem;
display: block;
/* `.b2b-feature-icon svg` setzt hart `color: #001357` — ohne `inherit`
bleiben die Symbole navy und der Mint-Kreis wirkt wie ein Fehler. */
color: inherit;
}
.scope-design26 .b2b-feature:hover .b2b-feature-icon {
background: var(--d26-mint);
color: #fff;
}
/* ------------------------------------------------------------
3. Mustertext-Karten
Die Kartensignatur zieht sie auf Weiss — die Mint-Kante links
bleibt aber als Typmarke stehen ("hier steht ein Text zum
Uebernehmen"). Dieselbe Idee wie die Mint-Kante an der
Bestseller-Zeile der Preistabelle.
Spezifitaet: Basis ist `.b2b-feature.mustertext-box` (2 Klassen),
diese Regel hat 3 und gewinnt unabhaengig von der Reihenfolge.
------------------------------------------------------------ */
.scope-design26 .b2b-feature.mustertext-box {
background: #fff;
border: 1px solid var(--d26-hairline);
border-left: 3px solid var(--d26-mint);
}
.scope-design26 .b2b-feature.mustertext-box .mustertext-label {
font-size: 0.72rem;
letter-spacing: 0.1em;
color: #8b97a8;
margin-bottom: 0.7rem;
}
.scope-design26 .b2b-feature.mustertext-box .mustertext-body {
font-size: 0.99rem;
line-height: 1.72;
color: var(--blue-dark);
}
.scope-design26 .b2b-feature.mustertext-box .mustertext-actions {
margin-top: 1.1rem;
}
/* Die Mint-Kante links und die Hover-Kante oben duerfen sich nicht
in die Quere kommen — die Hover-Kante startet hinter der Kante. */
.scope-design26 .b2b-feature.mustertext-box::before {
left: 0;
}
/* ------------------------------------------------------------
4. Die Zwischen-CTA-Box behaelt ihre Mint-Identitaet
------------------------------------------------------------ */
.scope-design26 .b2b-feature.b2b-feature--mint-border {
border: 1px solid var(--d26-mint-line);
box-shadow: 0 14px 38px rgba(0, 19, 87, 0.08);
max-width: 46rem;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 2.25rem 2rem;
}
.scope-design26 .b2b-feature.b2b-feature--mint-border:hover {
transform: none;
border-color: var(--d26-mint);
}
/* Die Box ist als Ganzes zentriert — dann gehoert das Icon in die Mitte
und nicht in die linke Ecke. */
.scope-design26 .b2b-feature.b2b-feature--mint-border .b2b-feature-icon {
margin-left: auto;
margin-right: auto;
}
.scope-design26 .b2b-feature.b2b-feature--mint-border h3 {
font-size: 1.25rem;
margin-bottom: 0.6rem;
}
.scope-design26 .b2b-feature.b2b-feature--mint-border > p {
max-width: 52ch;
margin-left: auto;
margin-right: auto;
}
.scope-design26 .b2b-feature.b2b-feature--mint-border .center-cta {
margin-top: 1.6rem;
margin-bottom: 0;
}
/* ------------------------------------------------------------
5. FAQ als Karte — ohne eine Zeile Markup
Auf der Startseite fasst ein zusaetzliches `.d26-faq-card` die
Zeilen zusammen. Auf den Unterseiten gibt es das nicht, also
wird die Karte aus den Zeilen selbst gebaut: alle `.wrapper-faq`
sind direkt aufeinanderfolgende Geschwister, die erste bekommt
den oberen Radius, die letzte den unteren und den Abschluss.
Der Schatten liegt auf jeder Zeile — weil die naechste Zeile
weiss deckt und spaeter gezeichnet wird, sieht man nur den
Schatten der Gruppe.
ACHTUNG Spezifitaet: die Basisregeln stehen mit 6 Klassen
(`.wrapper_global .content .modul.faq .inhalt .wrapper-faq …`).
Kuerzere Selektoren verlieren — u. a. bliebe der FontAwesome-
Chevron als Tofu stehen.
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content .modul.faq .inhalt .wrapper-faq {
background: #fff;
border: 1px solid var(--d26-hairline);
border-bottom: 0;
border-radius: 0;
padding: 0 1.6rem;
margin: 0;
box-shadow: var(--d26-shadow);
transition: background-color 0.18s ease;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .wrapper-faq:first-of-type {
border-radius: var(--d26-card-radius) var(--d26-card-radius) 0 0;
margin-top: 1.75rem;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .wrapper-faq:last-of-type {
border-bottom: 1px solid var(--d26-hairline);
border-radius: 0 0 var(--d26-card-radius) var(--d26-card-radius);
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .wrapper-faq:hover,
.wrapper_global .scope-design26 .content .modul.faq .inhalt .wrapper-faq.active {
background: #fbfdfe;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .frage {
margin-top: 0;
padding: 1.15rem 0;
border: 0;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .frage span p {
font-size: 1.02rem;
font-weight: 500;
margin-bottom: 0;
padding-right: 3rem;
}
/* Chevron: eigener CSS-Pfeil statt FontAwesome-Glyph */
.wrapper_global .scope-design26 .content .modul.faq .inhalt .frage span:after {
content: "";
font-family: inherit;
width: 1.6rem;
height: 1.6rem;
right: 0;
top: calc(50% - 0.8rem);
border: 1px solid var(--d26-mint-line);
border-radius: 50%;
background-image: linear-gradient(var(--d26-mint), var(--d26-mint)), linear-gradient(var(--d26-mint), var(--d26-mint));
background-size: 0.6rem 1.5px, 1.5px 0.6rem;
background-position: center, center;
background-repeat: no-repeat;
transition: transform 0.22s ease, background-color 0.22s ease;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .frage:hover span:after {
padding-top: 0;
background-color: var(--d26-mint-soft);
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .wrapper-faq.active .frage span:after {
transform: rotate(45deg);
background-color: var(--d26-mint-soft);
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .antwort {
padding-right: 4rem;
padding-bottom: 1.2rem;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .antwort p {
font-size: 0.98rem;
line-height: 1.72;
margin-bottom: 0;
max-width: 74ch;
}
@media only screen and (max-width: 720px) {
.wrapper_global .scope-design26 .content .modul.faq .inhalt .wrapper-faq {
padding: 0 1.15rem;
}
.wrapper_global .scope-design26 .content .modul.faq .inhalt .antwort {
padding-right: 1rem;
}
}
/* ------------------------------------------------------------
6. Flaechenwechsel
Die Unterseiten wechseln bereits weiss / grau (`--alt`). Der
graue Streifen bekommt dasselbe Punktraster wie die Einsatzfaelle
auf der Startseite — leiser (0.09 statt 0.13), weil er auf einer
Unterseite zwei- bis dreimal vorkommt und sonst laut wuerde.
Er driftet ebenfalls um genau eine Rasterzelle, also nahtlos.
Spezifitaet: `.wrapper_global .content.b2b-section` setzt
`background` als Kurzform und wuerde jedes Hintergrundbild
ausknipsen — daher die volle Kette. (Das war in dieser
Umbauserie vier Mal die Fehlerursache.)
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content.b2b-section.b2b-section--alt {
background-color: var(--grey-light);
background-image: radial-gradient(rgba(0, 19, 87, 0.09) 1px, transparent 1px);
background-size: 22px 22px;
background-position: 0 0;
animation: d26-dots-drift 34s linear infinite;
}
/* ------------------------------------------------------------
7. Rhythmus: Sektionen atmen, aber nicht alle gleich
Baender ohne Karten (nur Text/Liste) duerfen kompakter sein als
Baender mit Kartenraster — sonst wirkt eine dreizeilige Liste
verloren in 6rem Luft.
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content.b2b-section {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
.wrapper_global .scope-design26 .content.b2b-section:has(.b2b-features) {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
/* 🚨 Zwei `.modul` in EINEM `.content`: das Template gibt `.modul` fest
`grid-area: b` — beide Kinder landen damit UEBEREINANDER. Auf /kontakt
verschwand so der Satz „Viele Fragen beantworten wir bereits auf unserer
Preise-Seite" hinter dem Formular. Derselbe Fehler hatte auf der
Startseite das Preisband zerlegt. Fuer solche Baender Block-Fluss,
die Zentrierung uebernehmen max-width + auto-Margins. */
.wrapper_global .scope-design26 .content.b2b-section:has(> .modul + .modul) {
display: block;
}
.wrapper_global .scope-design26 .content.b2b-section:has(> .modul + .modul) > .modul {
max-width: var(--site-width);
margin-left: auto;
margin-right: auto;
}
/* Ein Band, das nur aus Augenbraue und Ueberschrift besteht, ist die
Ueberschrift des FOLGENDEN Bandes (kommt u. a. auf /generator und
/vorlagen vor). Es darf deshalb nicht so viel Luft nach unten haben
wie ein Band mit eigenem Inhalt — sonst steht die Ueberschrift
alleine in einem leeren Streifen. */
.wrapper_global .scope-design26 .content.b2b-section:not(:has(.b2b-features)):not(:has(p)):not(:has(ul)):not(:has(table)) {
padding-bottom: 1.5rem;
}
/* 🚨 Querueberlauf auf schmalen Fenstern (BESTAND, nicht neu):
`.content` ist ein Grid mit `grid-template-columns: 1fr var(--site-width) 1fr` —
die mittlere Spalte ist eine FESTE Pixelbreite. Die Mobilregeln des
Templates haengen an `max-device-width: 480px` und fangen das nur auf
echten Handys ab; jedes schmale Fenster darueber (und jedes Tablet)
schiebt den Inhalt rechts aus dem Bild. Im b2b-Bereich deshalb
Block-Fluss, sobald der Platz nicht mehr reicht. */
@media only screen and (max-width: 999px) {
.wrapper_global .scope-design26 .content.b2b-section {
display: block;
}
.wrapper_global .scope-design26 .content.b2b-section > .modul {
max-width: 100%;
width: auto;
}
/* Raster-Kinder duerfen standardmaessig nicht unter ihre Mindestbreite
schrumpfen (`min-width: auto`) — genau daran schob sich der Kartenrand
rechts aus dem Bild. `min-width: 0` ist der Standardgriff dagegen. */
.scope-design26 .b2b-features {
max-width: 100%;
}
.scope-design26 .b2b-features > * {
min-width: 0;
}
.scope-design26 .b2b-feature {
overflow-wrap: break-word;
}
}
@media only screen and (max-width: 720px) {
.wrapper_global .scope-design26 .content.b2b-section,
.wrapper_global .scope-design26 .content.b2b-section:has(.b2b-features) {
padding: 2.25rem 1.15rem;
}
}
/* ------------------------------------------------------------
8. Buttons INNERHALB einer Karte
`.center-cta` zentriert — was in einer linksbuendigen Karte wie ein
Versehen aussieht (Titel und Text links, Button in der Mitte).
Ausgenommen die Zwischen-CTA-Box, die als Ganzes zentriert ist.
------------------------------------------------------------ */
.scope-design26 .b2b-feature:not(.b2b-feature--mint-border) .center-cta {
text-align: left;
margin-top: 1.15rem;
margin-bottom: 0;
}
.scope-design26 .b2b-feature p:last-child {
margin-bottom: 0;
}
/* ============================================================
ENDE STUFE 2
============================================================ */
/* ============================================================
ITERATION 2026-08-04
Wird an style.NEU.css (Stufe 1 + 2) angehaengt.
ROLLBACK: alles ab dieser Zeile abschneiden.
============================================================ */
/* ------------------------------------------------------------
1. FAQ-Karte — obere Ecken auf den Unterseiten
Die Rollout-Regel haengt an `.wrapper-faq:first-of-type`.
`:first-of-type` meint den ersten seines ELEMENTTYPS unter den
Geschwistern, nicht den ersten mit dieser Klasse. In `.inhalt` steht
ueberall zuerst `
` — also ist keine
`.wrapper-faq` je `:first-of-type`, und die Karte blieb oben eckig.
Unten stimmte es, weil die letzte Zeile tatsaechlich das letzte div ist.
Betrifft 25 Unterseiten (alle mit FAQ ausser der Startseite).
Zwei Feinheiten:
- `>` ab `.inhalt` grenzt die Startseite aus. Dort liegen die Zeilen in
`.d26-faq-card` (mit `overflow: hidden`, deshalb dort auch nie kaputt).
Ohne das `>` bekaeme die erste Zeile INNERHALB der Karte den
`margin-top` und wuerde nach unten wegrutschen.
- Einzelne Ecken statt der `border-radius`-Kurzform: die bestehende
Regel `…:last-of-type { border-radius: 0 0 r r }` setzt als Kurzform
auch die oberen Ecken auf 0. Bei einer FAQ mit nur EINER Zeile wuerde
sie sonst gewinnen (gleiche Spezifitaet, steht aber frueher).
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content .modul.faq .inhalt > :not(.wrapper-faq) + .wrapper-faq {
border-top-left-radius: var(--d26-card-radius);
border-top-right-radius: var(--d26-card-radius);
margin-top: 1.75rem;
}
/* ------------------------------------------------------------
2. Generator-Ergebnisblock `.hero-preview`
Kommt aus `js/script.js` (Vue-Komponente `herogenerator`) und wird
sichtbar, sobald jemand eine Ansage erzeugt hat. Markup gehoert Tim,
deshalb alles ueber CSS.
Was den Block plump wirken liess:
- Flaeche `#30C9D5`, ein hartes Cyan ausserhalb der Palette
- Textkarte `rgba(255,255,255,.6)` darauf → milchiges Hellcyan
- Text `1.7rem` bei `font-weight: 800` — das Haus arbeitet mit 300
und betonter `strong`; das war der Hauptgrund
- FontAwesome-Anfuehrungszeichen bei `5rem`
- dauerhaft laufende Farbanimation (6 s)
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content.hero-preview {
/* derselbe Verlauf wie das Preisband — ein Farbsystem statt zwei */
background: linear-gradient(103deg, #103173 0%, #348dc5 100%);
background-size: auto;
animation: none;
padding: 2.75rem 0 3.25rem;
}
/* Das Band darf es nur geben, solange der Vorschautext darin steht.
Der Block steht immer im DOM; bis zur ersten erzeugten Ansage ist der
Inhalt eingeklappt (`slide-up-down`, `active: false` → `.modul` mit
`hidden` und `height: 0`). Uebrig blieb allein das Padding: ein leeres
blaues Band unter dem Hero. `active` wird nur ein einziges Mal auf true
gesetzt und nie zurueck — der Block klappt also nie wieder zu.
`aria-expanded="true"` setzt die Komponente exakt mit `active`; im
zugeklappten Zustand fehlt das Attribut ganz (Vue entfernt `false`). */
.wrapper_global .content.hero-preview:has(> .modul:not([aria-expanded="true"])),
.wrapper_global .scope-design26 .content.hero-preview:has(> .modul:not([aria-expanded="true"])) {
background: none;
padding: 0;
min-height: 0;
}
.wrapper_global .scope-design26 .content.hero-preview .modul .text {
background: #fff;
border: 1px solid var(--d26-hairline);
border-radius: var(--d26-card-radius);
/* kraeftiger als die Standard-Kartensignatur: die Karte liegt auf
dunklem Grund und braucht mehr Abhebung als eine auf Weiss */
box-shadow: 0 18px 44px rgba(0, 19, 87, 0.22);
padding: 2.25rem 2.75rem 2rem 4.75rem;
margin-top: 0;
/* Ohne Begrenzung ist die Karte 1200 px breit, der Satz endet aber nach
rund 60 Zeichen — rechts bleibt eine leere Haelfte stehen. */
max-width: 58rem;
margin-left: auto;
margin-right: auto;
}
/* Anfuehrungszeichen als Schriftglyph statt FontAwesome-Icon.
`\201C` (hoch stehend) statt des deutschen `\201E` (auf der Grundlinie):
bei `line-height: 1` sitzt ein tiefes Zeichen am unteren Rand seiner Box
und rutscht dadurch neben die zweite Textzeile. */
.wrapper_global .scope-design26 .content.hero-preview .modul .text:before {
content: "\201C";
font-family: "Geist", sans-serif;
font-size: 3.4rem;
font-weight: 500;
line-height: 1;
color: var(--d26-mint);
opacity: 0.55;
top: 1.6rem;
left: 1.9rem;
}
.wrapper_global .scope-design26 .content.hero-preview .modul .text p {
font-size: 1.32rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: -0.012em;
color: var(--d26-navy);
margin-bottom: 1.65rem;
}
.wrapper_global .scope-design26 .content.hero-preview .modul .text p strong {
font-weight: 600;
}
/* Wort-Hervorhebung beim Abspielen. Vorher `background: #FFF` — auf der
jetzt weissen Karte waere das unsichtbar. Bewusst kraeftiger als
`--d26-mint-soft` (10 %): das Wort wandert im Sprechtempo mit und muss
im Vorbeilaufen erkennbar sein, nicht nur beim Hinsehen. */
.wrapper_global .scope-design26 .content.hero-preview .modul .text p span {
background-color: rgba(39, 212, 189, 0.26);
box-shadow: inset 0 -1px 0 var(--d26-mint);
border-radius: 4px;
}
.wrapper_global .scope-design26 .content.hero-preview .modul .spacer {
height: 0;
}
/* ------------------------------------------------------------
3. CTA „Eigene Ansage entwerfen"
War `a.cta2`: `--mint-cta` `#56DFCD` mit WEISSER Schrift bei 0,9 rem —
heller Knopf, helle Schrift, ging auf der Flaeche unter. Bekommt die
Gestalt der roten Haupt-CTAs der Seite (`a.cta1`), damit er als die
Handlung gelesen wird, die er ist. Kein neues Muster, nur das
vorhandene an der richtigen Stelle.
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content.hero-preview .modul .text a.cta2 {
/* `background`-Shorthand noetig: das Button-System (Teil 2) legt auf
a.cta2 einen Mint-Verlauf als background-image — eine blosse
background-color wuerde uebermalt (Mint-Knopf mit rotem Ring). */
background: linear-gradient(180deg, #ff2e63 0%, #ff0046 100%);
border-color: #ff0046;
box-shadow: 0 10px 24px rgba(255, 0, 70, 0.18);
color: #fff;
font-size: 1rem;
padding: 0.8rem 1.35rem 0.7rem 1.35rem;
}
.wrapper_global .scope-design26 .content.hero-preview .modul .text a.cta2:hover,
.wrapper_global .scope-design26 .content.hero-preview .modul .text a.cta2:focus-visible {
background: linear-gradient(180deg, #ff4373 0%, #ff1a57 100%);
color: #fff;
border-color: #ff1a57;
}
/* Tablet/schmales Fenster: `.content` ist ein Grid mit fester Mittelspalte
(1200 px). Der Rollout hat das nur fuer `.b2b-section` aufgehoben —
`.hero-preview` lief weiter ueber den Rand. */
@media only screen and (max-width: 999px) {
.wrapper_global .scope-design26 .content.hero-preview {
display: block;
padding: 2.25rem 1.15rem 2.5rem;
}
.wrapper_global .scope-design26 .content.hero-preview > .modul {
max-width: 100%;
width: auto;
}
}
@media only screen and (max-device-width: 480px) {
.wrapper_global .scope-design26 .content.hero-preview .modul .text {
padding: 1.5rem 1.4rem 1.4rem;
margin: 0;
}
.wrapper_global .scope-design26 .content.hero-preview .modul .text:before {
display: none;
}
.wrapper_global .scope-design26 .content.hero-preview .modul .text p {
font-size: 1.1rem;
line-height: 1.58;
margin: 0.25rem 0 1.3rem;
}
}
/* ------------------------------------------------------------
4. Panorama-Band hinter der allein stehenden Hinweis-Karte
Auf `/musik` und `/preise` steht je eine einzelne Hinweis-Karte in einer
sonst leeren weissen Sektion — viel Flaeche, ein kleiner Kasten. Die
Sektion bekommt ein Foto als Hintergrund, die Karte liegt darauf.
Der Treffer ist strukturell eingegrenzt (`:has(> .modul >
.b2b-feature--highlight)`), nicht ueber die Seite: `--highlight` gibt es
site-weit genau 2x, und beide Male ist es dieser Fall. Das Motiv kommt
ueber die Seitenklasse aus dem Template-Wrapper.
Helle Waesche statt dunkler: die Seite ist durchgehend hell angelegt.
------------------------------------------------------------ */
.scope-design26 .content.b2b-section:has(> .modul > .b2b-feature--highlight) {
background-repeat: no-repeat;
background-position: center 38%;
background-size: cover;
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
.scope-design26 .content.b2b-section:has(> .modul > .b2b-feature--highlight) > .modul {
max-width: 54rem;
margin-left: auto;
margin-right: auto;
}
/* Die Karte liegt jetzt auf einem Foto und braucht mehr Abhebung als eine
auf weissem Grund. */
.scope-design26 .content.b2b-section:has(> .modul > .b2b-feature--highlight) .b2b-feature--highlight {
box-shadow: 0 20px 48px rgba(0, 19, 87, 0.16);
background: #fff;
}
/* Motive je Seite. Die Waesche liegt als Verlauf ueber dem Foto — sonst
traegt der Text der Karte nicht und das Bild wird zum Laerm. */
.seite-musik .content.b2b-section:has(> .modul > .b2b-feature--highlight) {
background-image:
linear-gradient(rgba(240, 245, 249, 0.82), rgba(240, 245, 249, 0.88)),
url("../../../images/hero-1498038432885-c6f3f1b912ee.webp");
}
.seite-preise .content.b2b-section:has(> .modul > .b2b-feature--highlight) {
background-image:
linear-gradient(rgba(240, 245, 249, 0.84), rgba(240, 245, 249, 0.9)),
url("../../../images/hero-1554224155-6726b3ff858f.webp");
}
@media only screen and (max-width: 720px) {
.scope-design26 .content.b2b-section:has(> .modul > .b2b-feature--highlight) {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
}
}
/* ------------------------------------------------------------
5. Foto-Baender auf den bildlosen Money-Pages
`/stimmen`, `/vorlagen` und `/reseller` hatten im Artikelbereich KEIN
einziges Bild. Statt irgendwo eins hineinzusetzen bekommt je Seite die
eine graue Wechselsektion mit Kartenreihe ein Foto — der Flaechenwechsel
war ohnehin schon da, er traegt jetzt ein Motiv statt des Punktrasters.
Eingegrenzt auf `:has(.b2b-features)` UND `:not(:has(.modul.faq))`:
`/vorlagen` und `/reseller` haben eine ZWEITE `--alt`-Sektion, und das
ist jeweils die FAQ. Geprueft mit `zielsektionen.py` (HTML-Parser, nicht
Regex — `.content` ist verschachtelt): je Seite genau ein Treffer.
Die Branchenseiten bleiben aussen vor, die haben bereits ein zum Fach
passendes Hero-Bild.
Waesche als Verlauf von oben nach unten: oben steht Fliesstext direkt auf
der Flaeche und braucht Deckung, unten stehen weisse Karten — dort darf
das Motiv durchkommen.
------------------------------------------------------------ */
.seite-stimmen .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)),
.seite-vorlagen .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)),
.seite-reseller .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)),
/* 04.08. dazu: die beiden uebrigen Seiten mit genau EINER grauen
Kartensektion. Startseite und /generator haben je zwei bzw. drei —
dort ist ohne Eingriff in den Artikel nicht entscheidbar, welche das
Motiv bekommen soll, das bleibt offen. */
.seite-branchen .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)),
.seite-ratgeber-hub .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-color: #eef3f7;
background-repeat: no-repeat;
background-position: center 42%;
background-size: cover;
/* das driftende Punktraster der Basisregel abschalten */
animation: none;
padding-top: 4rem;
padding-bottom: 4rem;
}
/* 04.08.: Motiv getauscht. Vorher `hero-1590602847861` — ein schwarzes
Studiomikrofon auf dunkelgrauem Grund: thematisch passend, aber mit
einem Graumittel von 44 (von 255) und 84 % dunklen Pixeln das mit
Abstand dunkelste Bild im Pool. Unter der hellen Waesche blieb davon
nur ein dunkler Fleck. Ersatz ist ein helles, freundliches Motiv
(Graumittel 152, 12 % dunkle Pixel), gemessen ueber den ganzen Pool. */
.seite-stimmen .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-image:
linear-gradient(180deg, rgba(240, 245, 249, 0.95) 0%, rgba(240, 245, 249, 0.94) 32%, rgba(240, 245, 249, 0.82) 100%),
url("../../../images/hero-1572021335469-31706a17aaef.webp");
}
.seite-vorlagen .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-image:
linear-gradient(180deg, rgba(240, 245, 249, 0.95) 0%, rgba(240, 245, 249, 0.94) 32%, rgba(240, 245, 249, 0.82) 100%),
url("../../../images/hero-1450101499163-c8848c66ca85.webp");
}
.seite-reseller .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-image:
linear-gradient(180deg, rgba(240, 245, 249, 0.95) 0%, rgba(240, 245, 249, 0.94) 32%, rgba(240, 245, 249, 0.82) 100%),
url("../../../images/hero-1521791136064-7986c2920216.webp");
}
/* Beide Motive aus dem hellen Drittel des Pools ausgewaehlt (Graumittel
167 bzw. 145 von 255, 15 % bzw. 11 % dunkle Pixel). */
.seite-branchen .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-image:
linear-gradient(180deg, rgba(240, 245, 249, 0.95) 0%, rgba(240, 245, 249, 0.94) 32%, rgba(240, 245, 249, 0.82) 100%),
url("../../../images/hero-1551434678-e076c223a692.webp");
}
.seite-ratgeber-hub .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-image:
linear-gradient(180deg, rgba(240, 245, 249, 0.95) 0%, rgba(240, 245, 249, 0.94) 32%, rgba(240, 245, 249, 0.82) 100%),
url("../../../images/hero-1556761175-5973dc0f32e7.webp");
}
/* ------------------------------------------------------------
Startseite und /generator: Motiv nur auf das ERSTE Kartenband
Beide Seiten haben ZWEI graue Kartenbaender. CSS kennt kein „erstes
passendes Geschwister", und `:has()` darf nicht in `:has()`
verschachtelt werden — ein `:has(~ …)`-Test scheidet damit aus.
Deshalb umgekehrt: erst bekommen alle das Motiv, danach nimmt es
`A ~ A` jedem Band wieder ab, dem ein gleichartiges vorausgeht.
Uebrig bleibt genau das erste.
------------------------------------------------------------ */
.seite-startseite .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)),
.seite-generator .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) ~ .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-color: #eef3f7;
background-repeat: no-repeat;
background-position: center 42%;
background-size: cover;
animation: none;
padding-top: 4rem;
padding-bottom: 4rem;
}
.seite-startseite .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-image:
linear-gradient(180deg, rgba(240, 245, 249, 0.95) 0%, rgba(240, 245, 249, 0.94) 32%, rgba(240, 245, 249, 0.82) 100%),
url("../../../images/hero-1556656793-08538906a9f8.webp");
}
/* 05.08.2026: Das Motiv sitzt auf /generator nicht mehr auf dem ersten
Kartenband („So funktioniert der Generator"), sondern auf dem zweiten
(„Zusatzservices"). Deshalb hier die `A ~ A`-Form: sie trifft jedes
Kartenband, dem ein gleichartiges vorausgeht — auf dieser Seite genau
das zweite (das FAQ-Band faellt durch `:not(:has(.modul.faq))` heraus).
Der Vollton-Trick fuer das Ueberschriftenband ist damit hinfaellig und
entfernt: die Zusatzservices fuehren ihre Ueberschrift INNERHALB des
Bandes, es gibt keine Naht ueber zwei gestapelte Elemente mehr. Erstes
Kartenband und sein Ueberschriftenband fallen zurueck auf grau +
Punktraster — der Stand, der vor dem Motiv-Umzug bei 22,0 px
nachgemessen war. */
.seite-generator .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) ~ .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-image:
linear-gradient(180deg, rgba(240, 245, 249, 0.95) 0%, rgba(240, 245, 249, 0.94) 32%, rgba(240, 245, 249, 0.82) 100%),
url("../../../images/hero-1586281380349-632531db7ed4.webp");
}
/* Jedes weitere Kartenband der STARTSEITE zurueck aufs Punktraster (dort
traegt das erste Band das Motiv). /generator steht bewusst nicht mehr
hier: da ist es seit dem 05.08. genau andersherum, siehe oben. */
.seite-startseite .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) ~ .content.b2b-section--alt:has(.b2b-features):not(:has(.modul.faq)) {
background-color: var(--grey-light);
background-image: radial-gradient(rgba(0, 19, 87, 0.09) 1px, transparent 1px);
background-size: 22px 22px;
background-position: 0 0;
animation: d26-dots-drift 34s linear infinite;
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
/* ------------------------------------------------------------
Abbinder direkt vor einem zentrierten CTA (05.08.2026)
Design26 setzt Fliesstext bewusst linksbuendig auf 72ch
(, (0,3,1)). Drei Absaetze
site-weit sind aber keine Fliesstextspalte, sondern der Abbinder
unmittelbar vor einem zentrierten CTA-Block: sie stehen zwischen
mittigen Karten und einem mittigen Button und wirken dort verrutscht.
Selektor-Kollisionsscan ueber alle 39 Seiten: genau 3 Treffer
(Startseite 2x, /preise 1x), alle gewollt.
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content.b2b-section .modul > p.b2b-section-intro:has(+ .center-cta) {
max-width: 46rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* ------------------------------------------------------------
/generator: Luft um den Generator neu verteilt (05.08.2026)
Gemessen war: 16 px ueber dem Generatorkasten (2rem margin-top gegen
-1rem margin-bottom des Intros) und 0 px darunter. Oben zu eng, unten
klebte die naechste Sektion am Kasten. Jetzt 0 px netto oben und 2rem
zusaetzlich unten.
------------------------------------------------------------ */
.wrapper_global .scope-design26.seite-generator .content.keyvisual-background {
/* Die Utility-Klasse .margin-top-2rem am Element setzt !important; ohne
Gegenstueck bleibt der Wert oben stehen (live nachgemessen: 32 px trotz
dieser Regel). Deshalb hier ausnahmsweise ebenfalls !important. */
margin-top: 1rem !important;
margin-bottom: 2rem;
}
@media (prefers-reduced-motion: reduce) {
.seite-stimmen .content.b2b-section--alt,
.seite-vorlagen .content.b2b-section--alt,
.seite-reseller .content.b2b-section--alt,
.seite-branchen .content.b2b-section--alt,
.seite-ratgeber-hub .content.b2b-section--alt {
animation: none;
}
}
/* ============================================================
Design 2026 — Nachtrag 04.08.
9. Ein Ueberschriftenband gehoert zu der Flaeche, die es ankuendigt
Auf `/ki-telefonansagen-generator` steht „In 3 Schritten / So
funktioniert der Generator" in einer eigenen `.b2b-section` auf Weiss,
die Kartenreihe darunter in einer grauen `--alt`-Sektion. Die
Ueberschrift stand damit optisch beim Block DAVOR statt bei ihren
eigenen Karten.
Statt den Artikel umzubauen: das Ueberschriftenband uebernimmt die
Flaeche des Bandes, das direkt darauf folgt. Der Artikel bleibt
unangetastet.
Eingegrenzt auf genau diesen Fall — Eyebrow + H2 und sonst NICHTS im
Band. `:not(:has(p))` ist der entscheidende Ausschluss: die grossen
Seitenkoepfe (/preise, /stimmen, /musik, /kontakt) stehen ebenfalls
direkt vor einem grauen Band, haben aber H1 plus Intro-Absatz und
sollen weiss bleiben. Mit soupsieve gegen alle 39 Seiten geprueft
(echte Selektor-Auswertung, nicht Regex): genau 1 Treffer.
============================================================ */
.wrapper_global .scope-design26 .content.b2b-section:not(.b2b-section--alt):has(h2.b2b-section-headline):not(:has(p)):not(:has(h1)):not(:has(ul)):not(:has(ol)):not(:has(.b2b-features)):not(:has(.modul.faq)):has(+ .content.b2b-section--alt) {
background-color: var(--grey-light);
background-image: radial-gradient(rgba(0, 19, 87, 0.09) 1px, transparent 1px);
background-size: 22px 22px;
/* 🚨 Nicht dieselbe Animation wie unten: `d26-dots-drift` verankert das
Raster am OBEREN Rand des jeweiligen Elements. Zwei gestapelte
Elemente haben dann nur dann durchlaufende Punktreihen, wenn das obere
zufaellig ein Vielfaches von 22 px hoch ist — gemessen waren es 150 px,
an der Naht sass ein Reihenabstand von 18 statt 22 px. Dieses Band
verankert sein Raster deshalb am UNTEREN Rand, also an der Naht
selbst; das Band darunter verankert oben. Beide driften gleich weit,
die Naht bleibt bei jedem Animationsstand exakt eine Rasterzelle. */
background-position: 0 100%;
animation: d26-dots-drift-bottom 34s linear infinite;
/* Die beiden Baender lesen sich als eines: unten keine Luft, der
Abstand zur Kartenreihe kommt komplett aus dem Band darunter. */
padding-bottom: 0;
}
@keyframes d26-dots-drift-bottom {
from { background-position: 0 100%; }
to { background-position: 22px calc(100% + 22px); }
}
/* Das graue Band darunter braucht oben keine zweite volle Sektionsluft
mehr — sonst stehen zwischen Headline und Karten 4,5 rem + 3,75 rem. */
.wrapper_global .scope-design26 .content.b2b-section:not(.b2b-section--alt):has(h2.b2b-section-headline):not(:has(p)):not(:has(h1)):not(:has(ul)):not(:has(ol)):not(:has(.b2b-features)):not(:has(.modul.faq)) + .content.b2b-section--alt {
padding-top: 2.25rem;
}
/* Derselbe Selektor noch einmal in voller Laenge — eine gekuerzte Fassung
haette weniger Spezifitaet als die Regel oben und wuerde nicht greifen. */
@media (prefers-reduced-motion: reduce) {
.wrapper_global .scope-design26 .content.b2b-section:not(.b2b-section--alt):has(h2.b2b-section-headline):not(:has(p)):not(:has(h1)):not(:has(ul)):not(:has(ol)):not(:has(.b2b-features)):not(:has(.modul.faq)):has(+ .content.b2b-section--alt) {
animation: none;
}
}
/* ------------------------------------------------------------
10. Beispielpaare „geschrieben → gesprochen" (`.d26-say`)
Fuer die Aussprache-Tipps ueber dem Generator. Ohne eigene Regel
stehen die Paare als enge Aufzaehlung untereinander und lassen sich
nicht mehr als Zeilen lesen, sobald eine umbricht (Rufnummern tun
das immer). Haarlinien zwischen den Zeilen sind dieselbe Signatur,
die die Karten ohnehin tragen — kein neues Muster.
Eigene Klasse statt `.b2b-feature ul`, damit bestehende Listen in
Karten unberuehrt bleiben.
------------------------------------------------------------ */
.wrapper_global .scope-design26 .b2b-feature ul.d26-say {
list-style: none;
margin: 0.7rem 0 0;
padding: 0;
}
.wrapper_global .scope-design26 .b2b-feature ul.d26-say li {
margin: 0;
padding: 0.5rem 0;
border-top: 1px solid var(--d26-hairline);
line-height: 1.5;
}
.wrapper_global .scope-design26 .b2b-feature ul.d26-say li:first-child {
border-top: 0;
padding-top: 0.15rem;
}
.wrapper_global .scope-design26 .b2b-feature ul.d26-say strong {
font-weight: 600;
color: var(--d26-navy);
}
/* Schlusssatz unter der Kartenreihe */
.wrapper_global .scope-design26 .content.b2b-section .modul > p.d26-tipps-schluss {
margin-top: 1.9rem;
margin-bottom: 0;
}
/* ------------------------------------------------------------
11. Zahlhinweis unter dem Kauf-Button (`/cart`)
„Auch mit Kreditkarte moeglich" stand seit 28.07. unter dem Button
„Jetzt mit PayPal bezahlen" und war am 04.08. aus der Live-Datei
verschwunden — die Datei liegt im Repo, ein fremder Deploy hat sie
ueberschrieben. Zeile und Stil liegen jetzt BEIDE im Repo, damit das
nicht noch einmal passiert.
Bewusst leise: der Satz nimmt eine Sorge, er wirbt nicht.
------------------------------------------------------------ */
/* Der Hinweis steht als Flex-Kind neben dem Kauf-Button, in einer Spalte
mit `align-items: flex-end`. Zwei Dinge waren schief:
— (0,3,0) verliert gegen `.wrapper_global .content .modul .inhalt p`
(0,4,0): die 0.88rem kamen nie an, der Satz stand in voller
Fliesstextgroesse unter dem Button.
— mittig gesetzt, waehrend der Button rechts sitzt — zwei Achsen.
Jetzt rechtsbuendig unter dem Button und auf Hinweisgroesse. */
/* Der Warenkorbkasten endete bisher direkt ueber dem Footer: .modul setzt
padding und margin auf 0, .inhalt ebenfalls margin: 0. Der Hinweis unter
dem Kauf-Button klebte damit an der Unterkante. Gleiche Kette wie die
Basisregel, nur spaeter in der Datei. */
.wrapper_global .content.warenkorb .modul .inhalt {
margin-bottom: 4rem;
}
.wrapper_global .content.warenkorb .modul .inhalt .overview .absenden .zahlhinweis {
max-width: 28rem;
margin: 0.6rem 0 0;
font-size: 0.88rem;
line-height: 1.45;
font-weight: 300;
color: var(--fliesstext);
text-align: right;
}
/* 2026-08-08: /preise — mehr Luft zwischen "Was ist kostenlos"-Tabelle und Abschluss-Absatz/CTA */
.seite-preise .tabelle-wrapper + .b2b-section-intro { margin-top: 4rem; }
/* ------------------------------------------------------------
2026-08-08: Musikpool modernisiert, v2 Icon-Pills (Andreas)
Kette bewusst LAENGER als die Basisregeln (6 Klassen) -> gewinnt
ohne !important. Karten in design26-Signatur.
Interaktion (nur Desktop mit Maus, @media hover+900px):
- Initial zeigt jede Zeile NUR die Play-Pill (Icon, rechtsbuendig).
- Zeilen-Hover ODER laufende Wiedergabe (li:has(.listen.active))
blendet ausprobieren + kaufen DIESER Zeile ein.
- Pill-Hover: Label klappt rechts vom Icon aus, die Pill waechst
nach links (rechtsbuendig verankert) -> Icon "faehrt nach links".
Touch/Mobil: alle drei Pills dauerhaft MIT Label sichtbar.
.lbl ist ein (entgeht der alten "ul li span"-Flex-Regel),
font-style normal (no-italic-Regel).
------------------------------------------------------------ */
.wrapper_global .seite-musik .content .inhalt .musicpool {
grid-column-gap: 1.75rem;
grid-row-gap: 1.75rem;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik {
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f2f9fc 100%);
box-shadow: 0 18px 44px rgba(0, 19, 87, 0.22);
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik span.headline {
background: none;
color: #001357;
font-size: 1.15rem;
font-weight: 600;
line-height: 1.3;
padding: 1.2rem 1.5rem 0.55rem;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik span.headline::after {
content: "";
display: block;
width: 2.4rem;
height: 3px;
border-radius: 3px;
margin-top: 0.45rem;
background: linear-gradient(90deg, #27d4bd, rgba(39, 212, 189, 0.25));
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul {
background: none;
padding: 0.35rem 0.75rem 1.1rem;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li {
padding: 0.28rem 0.75rem;
border-radius: 10px;
color: #33415c;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li:hover {
background-color: rgba(39, 212, 189, 0.08);
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li > span {
gap: 0.4rem;
justify-content: flex-end;
}
/* ---------- Pill-Grundform (alle drei) ---------- */
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.listen,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 2.05rem;
margin: 0;
padding: 0 0.68rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
text-align: center;
box-shadow: none;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li .ic {
width: 0.85rem;
height: 0.85rem;
flex: none;
display: block;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li .lbl {
font-style: normal;
white-space: nowrap;
margin-left: 0.4rem;
}
/* Play/Stop-Icon-Wechsel ueber die bestehende .active-Klasse */
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li .listen .ic-stop { display: none; }
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li .listen.active .ic-play { display: none; }
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li .listen.active .ic-stop { display: block; }
/* ---------- Farben: Ghost-Pills, Fuellung erst beim Hover ---------- */
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.listen,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use {
background: #fff;
border: 1px solid rgba(39, 212, 189, 0.65);
color: #0d7a6b;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.listen:hover,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.listen.active {
background: linear-gradient(180deg, #3ee0c8 0%, #27d4bd 100%);
border-color: #27d4bd;
color: #fff;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use:hover {
background: linear-gradient(180deg, #3ee0c8 0%, #27d4bd 100%);
border-color: #27d4bd;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 9px 18px rgba(39, 212, 189, 0.34);
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy {
background: #fff;
border: 1px solid rgba(255, 0, 70, 0.45);
color: #d40045 !important;
text-decoration: none !important;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy:hover {
background: linear-gradient(180deg, #ff2e63 0%, #ff0046 100%);
border-color: #ff0046;
transform: translateY(-1px);
box-shadow: 0 9px 18px rgba(255, 0, 70, 0.3);
color: #fff !important;
}
/* ---------- Desktop mit Maus: STABILE Geometrie (v3) ----------
Andreas 08.08.: Buttons huepften unterm Cursor und waren schwer
klickbar. Deshalb bewegt sich beim Hover NICHTS mehr: alle drei
Pills stehen permanent als Kreis im Layout (Platz reserviert),
use/buy sind initial nur unsichtbar (opacity) und blenden beim
Zeilen-Hover bzw. waehrend der Wiedergabe ein. Labels lebt im
title-Attribut; die Label-Expansion ist bewusst entfernt.
Farben eingeblendet: ausprobieren = Mint gefuellt, kaufen = Rot
gefuellt (pro Zeile nur 1x sichtbar, darf tragen). */
@media (hover: hover) and (min-width: 900px) {
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li .lbl { display: none; }
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li > span { gap: 0.4rem; }
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.listen,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy {
width: 2.05rem;
padding: 0;
margin: 0;
justify-content: center;
transition: opacity 0.15s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use { order: 1; }
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy { order: 2; }
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.listen { order: 3; }
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy {
opacity: 0;
pointer-events: none;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li:hover span span.use,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li:hover span a.buy,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li:has(.listen.active) span span.use,
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li:has(.listen.active) span a.buy {
opacity: 1;
pointer-events: auto;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use {
background: linear-gradient(180deg, #3ee0c8 0%, #27d4bd 100%);
border-color: #27d4bd;
color: #fff;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span span.use:hover {
background: linear-gradient(180deg, #4ae6cf 0%, #31dcc5 100%);
transform: none;
box-shadow: none;
color: #fff;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy {
background: linear-gradient(180deg, #ff2e63 0%, #ff0046 100%);
border-color: #ff0046;
color: #fff !important;
}
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li span a.buy:hover {
background: linear-gradient(180deg, #ff4373 0%, #ff1a57 100%);
transform: none;
box-shadow: none;
color: #fff !important;
}
}
/* ---------- Schmale Viewports: Zeile stapelt ---------- */
@media only screen and (max-width: 600px) {
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li {
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
padding-bottom: 0.7rem;
}
}
/* ============================================================
V9-Gesamtpass 2026-08-08 — konsolidierte Klasse-A-Fixes
(39 Seiten, 6 Audit-Batches; Befunde je Batch im Memory)
============================================================ */
/* (1) Impressum: Inline-800px-Wrapper im Artikel hebelt die
Direktkind-Typo-Regeln des design26-Systems aus -> Absatzabstand,
72ch-Satzspiegel und h3-Hierarchie hier eine Ebene tiefer
nachziehen. !important nur gegen die Inline-Margins der h3. */
.wrapper_global .scope-design26.seite-impressum .modul p {
font-size: 1.02rem;
line-height: 1.8;
max-width: 72ch;
margin: 0 0 1.15rem;
}
.wrapper_global .scope-design26.seite-impressum .modul h3 {
font-size: 1.15rem;
font-weight: 600;
color: #001357;
margin: 2.25rem 0 0.75rem !important;
}
/* (2) Mustertext-Karten: Buttonzeile auf gemeinsame Unterkante
(Grid streckt die Karten, der Text nicht — Buttons hingen je nach
Textlaenge auf verschiedenen Hoehen; Inventur 2). */
.wrapper_global .scope-design26 .b2b-feature.mustertext-box {
display: flex;
flex-direction: column;
}
.wrapper_global .scope-design26 .b2b-feature.mustertext-box .mustertext-actions {
margin-top: auto;
padding-top: 1.1rem;
}
/* (3) 2er-Grid mit ungerader Kartenzahl: die Solo-Karte der letzten
Reihe spannt beide Spalten statt ein Loch zu lassen (Inventur 5;
Muster existierte schon auf /vorlagen, Karte 5). */
.wrapper_global .scope-design26 .b2b-features.cols-2 > .b2b-feature:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
/* (4) Doppel-Rot in CTA-Zeilen: der ZWEITE cta1 wird zum Sekundaer-
Button in cta2-Gestalt (Farb-Rolle: Rot = EIN Conversion-Ziel).
Dazu Flex-Abstand statt fragilem zwischen den Buttons. */
.wrapper_global .scope-design26 .center-cta:has(> a.cta1 + a.cta1) {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.wrapper_global .scope-design26 .center-cta a.cta1 + a.cta1 {
background: linear-gradient(180deg, #5fe3d2 0%, #27d4bd 100%);
border-color: var(--mint-cta);
color: #FFF;
box-shadow: 0 10px 24px rgba(39, 212, 189, 0.2);
}
.wrapper_global .scope-design26 .center-cta a.cta1 + a.cta1:hover {
background: linear-gradient(180deg, #6ee9d9 0%, #31dcc5 100%);
color: #FFF;
}
/* (5) Hub-Kartenraster /vorlagen + /branchen: 10x bzw. 7x rotes
"Ansehen" entwertete die Conversion-Farbe -> Sekundaerstil,
Rot bleibt dem Seiten-CTA vorbehalten (Inventur 0.3). */
.wrapper_global .seite-vorlagen .b2b-features .b2b-feature .center-cta a.cta1,
.wrapper_global .seite-branchen .b2b-features .b2b-feature .center-cta a.cta1 {
background: linear-gradient(180deg, #5fe3d2 0%, #27d4bd 100%);
border-color: var(--mint-cta);
color: #FFF;
box-shadow: none;
}
.wrapper_global .seite-vorlagen .b2b-features .b2b-feature .center-cta a.cta1:hover,
.wrapper_global .seite-branchen .b2b-features .b2b-feature .center-cta a.cta1:hover {
background: linear-gradient(180deg, #6ee9d9 0%, #31dcc5 100%);
color: #FFF;
}
/* (6) Hub-Heros: Intro lief 85-90 Zeichen je Zeile (Korridor 60-75). */
.wrapper_global .scope-design26 .modul > h1.b2b-section-headline + p.b2b-section-intro {
max-width: 72ch;
}
/* (7) Startseite Feature-Rows: der "Abbinder vor zentriertem CTA"
(Regel v. 05.08.) traf auch die linksbuendigen d26-Sektionen ->
zentrierter Absatz zwischen linker H2 und linkem CTA. Achse
wiederhergestellt. */
.wrapper_global .scope-design26 .content.b2b-section.d26-feature-row .modul > p.b2b-section-intro:has(+ .center-cta) {
text-align: left;
margin-left: 0;
margin-right: auto;
max-width: 72ch;
}
/* (8) Doppel-Grau: zwei --alt-Sektionen direkt hintereinander lasen
sich als EIN Band mit 7,5rem Innenloch -> Naht kollabiert. */
.wrapper_global .scope-design26 .content.b2b-section--alt + .content.b2b-section--alt {
padding-top: 0;
}
/* (9) Seitenende: FAQ (weiss) + letztes Band (weiss) verschmolzen ->
das Abschlussband bekommt die Punktraster-Flaeche. Nur wenn es
wirklich das letzte Band ist (sonst entstuende neues Doppel-Grau). */
.wrapper_global .scope-design26 .content.b2b-section:not(.b2b-section--alt):has(.modul.faq) + .content.b2b-section:not(.b2b-section--alt):last-of-type {
background-color: var(--grey-light);
background-image: radial-gradient(rgba(0, 19, 87, 0.09) 1px, transparent 1px);
background-size: 22px 22px;
background-position: 0 0;
}
/* (10) /stimmen: Profil-Beschreibungen oben ausrichten — zentrierte
Einzeiler brachen die gemeinsame Hoehe der Namens-Labels. */
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .beschreibung {
justify-content: flex-start;
padding-top: 1.1rem;
}
/* (11) /kontakt: Formularfelder ins Radius-System der Site (einzige
eckige Elemente); Datenschutz-Link raus aus CTA-Rot (Farb-Rolle). */
.wrapper_global .content .wrapper_formular input,
.wrapper_global .content .wrapper_formular textarea {
border-radius: 8px;
}
.wrapper_global .content .wrapper_formular span.datenschutz a,
.wrapper_global .content span.datenschutz a {
color: var(--mint-text);
}
/* (12) /generator Zusatzservices: Utility .margin-top-1rem (!important)
schlug margin-top:auto der Karten-CTAs — drei Karten, drei
Button-Hoehen. Gegen-!important stellt die Unterkante wieder her. */
.wrapper_global .scope-money .b2b-feature .cta2.margin-top-1rem {
margin-top: auto !important;
}
/* (13) /preise Flatrate: Button linksbuendig unter zentriertem Absatz
-> CTA-Zeile zentrieren (Utility setzte nur margin-top). */
.wrapper_global .seite-preise div.center-cta--top-2rem {
text-align: center;
}
/* (14) Startseite d26-cards-row: 1-zeiliger Absatz riss eine Luecke
zwischen H3 und Text (Icon-Ueberhoehe verteilte sich auf beide
Grid-Zeilen); Accent-Headline mit konkavem Zeilenfall. */
.wrapper_global .scope-design26 .d26-cards-row .b2b-feature {
grid-template-rows: auto 1fr;
}
.wrapper_global .scope-design26 .d26-cards-row .b2b-feature p {
align-self: start;
}
.wrapper_global .scope-design26 .content.b2b-section--accent h2 {
text-wrap: balance;
}
/* (15) Haekchen-Listen zurueck in die Beweis-Rolle: Mint statt
CTA-Rot (Rot-Haekchen lasen sich fast als Kreuze; /weihnachten
zeigte beide Farben auf einer Seite). */
.wrapper_global .scope-design26 .content .modul .inhalt ul.li-check li:before {
color: var(--mint-text);
}
/* (16) /weihnachten: max-height schneidet Mustertexte mitten im Satz —
die (auskommentierte) Fade-Kante reaktiviert als Scroll-Affordance. */
.wrapper_global .scope-design26 .grid-texte .wrapper-texte .section {
position: relative;
}
.wrapper_global .scope-design26 .grid-texte .wrapper-texte .section:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3rem;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
pointer-events: none;
}
/* (17) /weihnachten Foto-Hero: Text stand ohne Waesche auf dem hellen
Buerofoto (H1/Labels nahe unlesbar). Navy-Scrim, rechts (Textspalte)
dichter; H1-Pill bekommt lesbare Flaeche, Pattern selbst bleibt. */
.wrapper_global .scope-design26[class*="seite-telefonansagen-weihnachten"] .content.hero,
.wrapper_global .seite-telefonansagen-weihnachten .content.hero {
background-image:
linear-gradient(90deg, rgba(0, 19, 87, 0.12) 0%, rgba(0, 19, 87, 0.45) 45%, rgba(0, 19, 87, 0.78) 100%),
url("../images/hero_background.webp");
}
.wrapper_global .seite-telefonansagen-weihnachten .content.hero .inhalt h1 {
color: #FFF;
border-color: rgba(255, 255, 255, 0.55);
background: rgba(0, 19, 87, 0.45);
}
/* (18) Hub-H1 /ratgeber + /branchen: H1 rendert als 0,9rem-Pill,
waehrend die 5 anderen Hubs grosse H1 zeigen — Geschwister-
Inkonsistenz + Hierarchie-Inversion. Auf diesen beiden Hubs wird
die H1 zur echten Headline. (Site-weites Pill-Pattern der
Unterseiten bleibt unangetastet -> Klasse-C-Entscheidung.) */
.wrapper_global .scope-design26.seite-ratgeber-hub .content.keyvisual-gradient .inhalt h1,
.wrapper_global .scope-design26.seite-branchen .content.keyvisual-gradient .inhalt h1 {
font-size: 2.1rem;
font-weight: 600;
color: #FFF;
border: 0;
border-radius: 0;
padding: 0;
max-width: 28ch;
text-wrap: balance;
letter-spacing: -0.01em;
line-height: 1.25;
}
/* ============================================================
V9-Gesamtpass Teil 2 — 2026-08-08 (Andreas-Freigaben 1/2/3/7 +
neue Befunde: Musik-Buttons, Hub-Heros)
============================================================ */
/* (E) Button-System vereinheitlicht — Freigabe 3 ("such die beste
aus"): Die Verlaufs-Pill (Design-Regel: CTA subtil, Pill, nie
Flat-Color) fuehrt. cta1/cta2/Formular-Button ziehen nach; die
Preistabellen-Buttons (.tai-pt-cart) bleiben als dokumentierte
Ausnahme (Gewinner eingefroren). */
.wrapper_global a.cta1,
.wrapper_global a.cta1:visited {
border-radius: 999px;
background: linear-gradient(180deg, #ff2e63 0%, #ff0046 100%);
border-color: #ff0046;
padding: 0.8rem 1.7rem 0.7rem;
box-shadow: 0 10px 24px rgba(255, 0, 70, 0.18);
}
.wrapper_global a.cta1:hover {
background: linear-gradient(180deg, #ff4373 0%, #ff1a57 100%);
border-color: #ff1a57;
color: #FFF;
}
.wrapper_global a.cta2,
.wrapper_global a.cta2:visited {
border-radius: 999px;
background: linear-gradient(180deg, #5fe3d2 0%, #27d4bd 100%);
border-color: #27d4bd;
padding: 0.8rem 1.5rem 0.7rem;
color: #FFF;
}
.wrapper_global a.cta2:hover {
background: linear-gradient(180deg, #6ee9d9 0%, #31dcc5 100%);
color: #FFF;
}
.wrapper_global .button-formularfelder {
border-radius: 999px;
background: linear-gradient(180deg, #ff2e63 0%, #ff0046 100%);
border-color: #ff0046;
text-transform: none;
letter-spacing: 0.02rem;
font-size: 0.9rem;
box-shadow: 0 10px 24px rgba(255, 0, 70, 0.18);
}
.wrapper_global .button-formularfelder:hover {
background: linear-gradient(180deg, #ff4373 0%, #ff1a57 100%);
color: #FFF;
}
/* (C1) H1 site-weit als echte Headline — Freigabe 1. Die 0,9rem-Pill
wich auf allen Navy-Heros (Vorlagen-/Branchen-Subs, Ratgeber) der
Hierarchie: H1 war das leiseste Element. Pill-Pattern ausserhalb
der Navy-Heros bleibt. */
.wrapper_global .scope-design26 .content.keyvisual-gradient .inhalt h1 {
font-size: 2.1rem;
font-weight: 600;
color: #FFF;
border: 0;
border-radius: 0;
padding: 0;
max-width: 28ch;
text-wrap: balance;
letter-spacing: -0.01em;
line-height: 1.25;
}
/* (Neu) Hub-Heros /ratgeber + /branchen: "Bild auf Blau ist ned
schoen" — das Foto traegt jetzt die ganze Sektion (cover) mit
Navy-Scrim (links dichter, dort steht der Text); das Inline-Bild
verschwindet. */
.wrapper_global .scope-design26.seite-ratgeber-hub .content.keyvisual-gradient.animated {
background: linear-gradient(90deg, rgba(0, 19, 87, 0.85) 0%, rgba(0, 19, 87, 0.6) 45%, rgba(0, 19, 87, 0.25) 100%),
url("../../../images/hero-1455390582262-044cdead277a.webp") center 40% / cover no-repeat;
}
.wrapper_global .scope-design26.seite-branchen .content.keyvisual-gradient.animated {
background: linear-gradient(90deg, rgba(0, 19, 87, 0.85) 0%, rgba(0, 19, 87, 0.6) 45%, rgba(0, 19, 87, 0.25) 100%),
url("../../../images/hero-1497366216548-37526070297c.webp") center 40% / cover no-repeat;
}
.wrapper_global .scope-design26.seite-ratgeber-hub .content.keyvisual-gradient.animated img.hero-img,
.wrapper_global .scope-design26.seite-branchen .content.keyvisual-gradient.animated img.hero-img {
display: none;
}
/* FA-7-Icons zeichnen teils oberhalb der viewBox (Grid-Shift: cart
y-16, star y-18.9, wand y-27) — FontAwesomes eigenes CSS setzt
deshalb overflow:visible auf seine SVGs. Unsere roh eingebetteten
Inline-SVGs brauchen das ebenso, sonst clippt die Icon-Oberkante
(Andreas' "cart-clip" auf /musik; Sterne in Preistabellen). */
.wrapper_global .seite-musik .content .inhalt .musicpool .wrapper-musik ul li .ic,
.wrapper_global .tai-pt-cart svg,
.wrapper_global .b2b-feature-icon svg {
overflow: visible;
}
/* ============================================================
Audit-Umsetzung 2026-08-08 (Freigaben Andreas: T1/T4/T5 + /stimmen)
============================================================ */
/* /stimmen: Sprecherkarten strecken sich auf Reihenhoehe; die
Extra-Hoehe verteilte sich auf ALLE Auto-Rows, dadurch stand unter
dem grauen "Muster anhoeren"-Band ein weisser Streifen. Explizites
Row-Template: Ueberschuss geht in die (weisse) Beschreibungs-Row,
das Band schliesst buendig mit der Kartenunterkante ab. */
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil {
grid-template-rows: auto 1fr auto auto;
}
/* Ratgeber-End-CTAs: leise Preiszeile unter dem Button (Audit T4).
Kein eigener Kasten, kein Rot — nur die Information. */
.wrapper_global .scope-design26 .content .modul .tai-cta-preiszeile {
text-align: center;
font-size: 0.85rem;
color: rgba(0, 19, 87, 0.55);
/* 🚨 12.08.2026: war `margin: 0.85rem 0 0`. Die Kurzschreibweise
ueberschreibt das `margin-left/right: auto` der Regel
`.b2b-feature--mint-border > p {max-width:52ch; margin:auto}`
mit 0 — die Zeile klebte dadurch am linken Rand der CTA-Box
(gemessen L=33 / R=234), obwohl `text-align:center` griff.
Betraf ALLE Seiten mit CTA-Box (mp3-wav, fritzbox, …). */
margin: 0.85rem auto 0;
}
/* /kontakt: Erreichbarkeit unter der Nummer + Rechnungskauf-Hinweis
unter den Kontakt-Karten (Audit T5). */
.wrapper_global .scope-design26 .content .modul .kontakt-zeiten {
font-size: 0.9rem;
color: rgba(0, 19, 87, 0.6);
margin: 0.3rem 0 0;
}
.wrapper_global .scope-design26 .content .modul .kontakt-rechnung {
text-align: center;
font-size: 0.95rem;
line-height: 1.7;
color: rgba(0, 19, 87, 0.75);
max-width: 62ch;
margin: 2.25rem auto 0;
}
/* ============================================================
/stimmen — "Ausprobieren" freigeschaltet, 2026-08-08
------------------------------------------------------------
Der Button war im Voicepool-Template komplett verdrahtet
(tryDemo -> generator.tryDemo&type=voice&val=.,
serverseitig live verifiziert: setzt voice=1018/voiceCat=f),
aber per `display:none` unsichtbar. Analog zum Musikpool wird
er jetzt gezeigt: die Karte endet mit "anhören" UND "im
Generator ausprobieren" — Hörprobe fuehrt zur Handlung.
Gestalt: Mint-Verlaufs-Pill wie das uebrige Button-System,
keine Versalien (Hausregel), kein zweites Rot neben dem CTA.
============================================================ */
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .cta {
display: flex;
padding: 1.15rem 0.9rem 1.1rem;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .cta span.button {
background: linear-gradient(180deg, #5fe3d2 0%, #27d4bd 100%);
border: 1px solid #27d4bd;
border-radius: 999px;
padding: 0.55rem 1.15rem 0.5rem;
font-size: 0.82rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
color: #fff;
width: 100%;
text-align: center;
transition: background 0.18s ease, color 0.18s ease;
}
.wrapper_global .content .modul.sprecherprofil .wrapper-sprecherprofil .cta span.button:hover {
background: linear-gradient(180deg, #6ee9d9 0%, #31dcc5 100%);
color: #fff;
}
/* ------------------------------------------------------------
/stimmen — "Welche Stimme passt wozu?" (08.08.2026)
Orientierungstabelle statt Katalog: beantwortet die Frage, mit
der Besucher kommen ("welche passt zu meiner Praxis"), und
fuehrt in die vorhandenen Branchen-/Vorlagenseiten.
Auf schmalen Viewports bricht die Tabelle in Karten um — eine
dreispaltige Tabelle ist auf dem Telefon unlesbar.
------------------------------------------------------------ */
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung {
width: 100%;
border-collapse: collapse;
margin-top: 2rem;
font-size: 0.95rem;
line-height: 1.6;
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung thead th {
text-align: left;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0, 19, 87, 0.55);
padding: 0 1rem 0.7rem;
border-bottom: 1px solid rgba(0, 19, 87, 0.12);
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung tbody th,
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung tbody td {
text-align: left;
vertical-align: top;
padding: 1.05rem 1rem;
border-bottom: 1px solid rgba(0, 19, 87, 0.08);
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung tbody th {
font-weight: 600;
color: var(--blue-dark);
width: 30%;
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung tbody tr:hover {
background-color: rgba(39, 212, 189, 0.06);
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung .stimmen-warum {
color: rgba(0, 19, 87, 0.6);
font-size: 0.88rem;
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung .stimmen-links {
width: 26%;
font-size: 0.88rem;
}
@media only screen and (max-width: 780px) {
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung thead {
display: none;
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung tbody tr {
display: block;
padding: 0.9rem 0;
border-bottom: 1px solid rgba(0, 19, 87, 0.1);
}
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung tbody th,
.wrapper_global .scope-design26 .content .modul .stimmen-empfehlung tbody td {
display: block;
width: auto;
border: 0;
padding: 0.15rem 0;
}
}
/* ============================================================
KI-Kennzeichnungs-Hinweisleiste (12.08.2026)
Nur Startseite ($ssotIsHome), sitzt VOR #mainWrapper — sonst
frisst die Vue-App den Knoten. Farben: Haus-Navy #001357 auf
hellem Mint-Verlauf (NICHT der ansagen.ai-Blauton).
Kein Flex: Satz, Link und Dismiss sollen als EIN Textfluss
umbrechen. Dismiss deutlich leiser als der Inhaltslink —
der Hinweis soll zum Lesen einladen, nicht zum Wegklicken.
============================================================ */
.bmg-ki-leiste {
position: relative;
z-index: 100000;
width: 100%;
background: linear-gradient(180deg, #f4fdfb 0%, #e2f8f4 100%);
border-bottom: 1px solid rgba(39, 212, 189, 0.45);
color: #001357;
text-align: center;
text-wrap: balance;
font-size: 0.85rem;
font-weight: 500;
line-height: 1.5;
padding: 0.5rem 1.25rem;
}
.bmg-ki-leiste strong { font-weight: 600; }
.bmg-ki-leiste a {
color: #001357;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.bmg-ki-leiste a:hover { color: #12907f; }
.bmg-ki-close {
background: none;
border: 0;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
color: #001357;
padding: 0;
margin-left: 0.85rem;
opacity: 0.5;
font-weight: 400;
text-decoration: underline;
text-underline-offset: 2px;
}
.bmg-ki-close:hover { opacity: 0.85; }
@media only screen and (max-width: 600px) {
.bmg-ki-leiste { font-size: 0.78rem; padding: 0.45rem 0.9rem; }
.bmg-ki-leiste a { white-space: normal; }
}
/* ------------------------------------------------------------
Metadaten-Tabelle auf /ki-kennzeichnung (12.08.2026)
Eigene Klasse statt generischer table-Regel: nackte Element-
Selektoren sind hier verboten, und einen Haus-Stil fuer
Fliesstext-Tabellen gibt es nicht (tabelle-wrapper setzt nur
max-width). Muster uebernommen von .stimmen-empfehlung.
Auf schmalen Viewports Umbruch in Karten.
------------------------------------------------------------ */
.wrapper_global .content .modul .tai-meta-tabelle {
width: 100%;
border-collapse: collapse;
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
}
.wrapper_global .content .modul .tai-meta-tabelle thead th {
text-align: left;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0, 19, 87, 0.55);
padding: 0 1rem 0.7rem;
border-bottom: 1px solid rgba(0, 19, 87, 0.12);
}
.wrapper_global .content .modul .tai-meta-tabelle tbody th,
.wrapper_global .content .modul .tai-meta-tabelle tbody td {
text-align: left;
vertical-align: top;
padding: 0.9rem 1rem;
border-bottom: 1px solid rgba(0, 19, 87, 0.08);
}
.wrapper_global .content .modul .tai-meta-tabelle tbody th {
font-weight: 600;
color: var(--blue-dark);
width: 38%;
white-space: nowrap;
}
.wrapper_global .content .modul .tai-meta-tabelle tbody td {
color: var(--fliesstext);
word-break: break-word;
}
/* Der 500px-Deckel des tabelle-wrapper ist fuer zwei Textspalten
zu eng — hier breiter, aber weiterhin zentriert. */
.wrapper_global .content .modul .b2b-feature.tabelle-wrapper.tai-meta-box {
max-width: 760px;
margin: 2rem auto 0;
}
@media only screen and (max-width: 640px) {
.wrapper_global .content .modul .tai-meta-tabelle thead { display: none; }
.wrapper_global .content .modul .tai-meta-tabelle tbody tr {
display: block;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(0, 19, 87, 0.1);
}
.wrapper_global .content .modul .tai-meta-tabelle tbody th,
.wrapper_global .content .modul .tai-meta-tabelle tbody td {
display: block;
width: auto;
border: 0;
padding: 0.15rem 0;
white-space: normal;
}
}
/* ------------------------------------------------------------
Abschliessender Fliesstext NACH einem Kartenraster / einer
Tabelle (12.08.2026, /ki-kennzeichnung)
.b2b-features traegt `margin: 0 auto` und .tabelle-wrapper nur
margin-top — im Bestand folgt darauf nie Text, deshalb fiel es
nie auf. Hier klebte der zusammenfassende Absatz direkt an der
letzten Kartenzeile (gemessen 0px).
Bewusst auf .seite-ki-kennzeichnung gescoped: Startseite (28px),
/preise (28px/0px) und /kontakt (36px) setzen an derselben Stelle
eigene, gewollte Abstaende - eine globale Regel haette die
ueberschrieben (vor dem Deploy gemessen).
------------------------------------------------------------ */
.wrapper_global .seite-ki-kennzeichnung .content .modul .b2b-features + p,
.wrapper_global .seite-ki-kennzeichnung .content .modul .b2b-features + ul,
.wrapper_global .seite-ki-kennzeichnung .content .modul .tabelle-wrapper + p,
.wrapper_global .seite-ki-kennzeichnung .content .modul .tabelle-wrapper + ul {
margin-top: 2.25rem;
}
/* Fliesstext, der einem Kartenraster VORANGEHT, steht mit 18px
ebenfalls zu eng am Raster. */
.wrapper_global .seite-ki-kennzeichnung .content .modul p + .b2b-features,
.wrapper_global .seite-ki-kennzeichnung .content .modul ul + .b2b-features {
margin-top: 2.25rem;
}
/* ------------------------------------------------------------
Fliesstext-Farbe fuer Absaetze/Listen direkt im .modul
(12.08.2026)
🚨 URSACHE: `reset.css` setzt `html, button, input, select,
textarea { color: #222 }` (Zeile 289) und wird NACH der
style.css geladen. Ueberall, wo keine eigene color-Regel
greift, erbt der Text deshalb #222 statt --fliesstext.
In Karten (.b2b-feature) ist die Farbe gesetzt, beim
Fliesstext direkt im .modul nicht — site-weit gemessen:
43x #222 gegen 245x #64748b. #64748b ist der Standard.
🚨 AUSNAHMEN, vor dem Deploy auf 13 Seiten simuliert:
- dunkle/farbige Baender (--accent, keyvisual-gradient,
d26-surface-mint, d26-price-head) tragen WEISSEN Text
- .hinweis/.zahlhinweis u. a. setzen bewusst Navy
Alles, was bereits eine eigene color-Regel hat, bleibt
unberuehrt; diese Regel faengt nur den #222-Durchgriff ab.
------------------------------------------------------------ */
.wrapper_global .content.b2b-section:not(.b2b-section--accent):not(.keyvisual-gradient):not(.d26-surface-mint):not(.d26-price-head) .modul > p:not([class]),
.wrapper_global .content.b2b-section:not(.b2b-section--accent):not(.keyvisual-gradient):not(.d26-surface-mint):not(.d26-price-head) .modul > ul > li:not([class]),
.wrapper_global .content.b2b-section:not(.b2b-section--accent):not(.keyvisual-gradient):not(.d26-surface-mint):not(.d26-price-head) .modul > ol > li:not([class]),
.wrapper_global .content.b2b-section:not(.b2b-section--accent):not(.keyvisual-gradient):not(.d26-surface-mint):not(.d26-price-head) .modul > .inhalt > p:not([class]),
.wrapper_global .content.b2b-section:not(.b2b-section--accent):not(.keyvisual-gradient):not(.d26-surface-mint):not(.d26-price-head) .modul > .inhalt > ul > li:not([class]),
.wrapper_global .content.b2b-section:not(.b2b-section--accent):not(.keyvisual-gradient):not(.d26-surface-mint):not(.d26-price-head) .modul > .inhalt > ol > li:not([class]) {
color: var(--fliesstext);
}
/* Rechtshinweis am Seitenende (/ki-kennzeichnung): traegt eine
eigene Klasse und faellt damit aus der :not([class])-Regel
oben heraus. Bewusst etwas kleiner als der Fliesstext. */
.wrapper_global .content .modul > p.tai-rechtshinweis {
color: var(--fliesstext);
font-size: 0.92rem;
line-height: 1.7;
}
/* ============================================================================
telefonansagen.ai - Tablet-/Zwischenbreiten-Korrektur
Eingespielt 08.09.2026 nach Freigabe durch Andreas. Cache-Bust dazu: i36 -> i37.
Derselbe Stand laeuft seit 07.09.2026 im Staging (/_neu/assets/staging.css).
BEFUND: Inhalt und Navigation liefen zwischen 500 und 1160 px Fensterbreite aus dem
Bild - auf ALLEN 39 Seiten, auf Live und Staging gleichermassen. Auf einem iPad fehlten
die halbe H1, das Eingabefeld, der primaere CTA und sechs Menuepunkte. Sichtbar wurde es
nicht als Scrollbalken, weil `.wrapper_global` `overflow-x: clip` traegt - der Ueberhang
wird abgeschnitten statt scrollbar, jeder Ueberlauf-Test meldet deshalb 0.
URSACHE: 35 Stellen in style.css haengen an `@media (max-device-width: 480px)`.
`device-width` ist die physische Geraetebreite, nicht die Fensterbreite - auf Tablets
und in verkleinerten Fenstern greift keine dieser Regeln.
🚨 Diese Datei liegt in Tims Gitea-Repo unter _domains/telefonansagen.ai/ und wird
bei jedem Push per rsync --checksum auf den Server gespiegelt. Aenderungen daher NIE
nur per FTP - sonst raeumt der naechste fremde Push sie ab (passiert am 04.08.2026).
Siehe Memory [[feedback_immer_auch_ins_gitea]].
GEPRUEFT: 39 Seiten x 5 Breiten (375/768/1024/1440/1920) = 195 Messungen ohne Befund;
Menue oeffnet UND schliesst auf 600/768/900/1024/1160 px, Logo 259 px wie Desktop.
============================================================================ */
/* ===== Tablet-/Zwischenbreiten-Fix: Inhalt lief von 500-1160px aus dem Bild =====
BEFUND (gemessen 07.09.2026, Live UND Staging gleichermassen betroffen, 39/39 Seiten):
`.wrapper_global .content` ist ein Grid mit `1fr var(--site-width) 1fr`, die Mittelspalte
also STARR 1200px. Unter 1200px Fensterbreite schrumpfen die 1fr-Spalten auf 0, die
Mittelspalte bleibt 1200px und laeuft ueber. Sichtbar wird das nicht als Scrollbalken,
weil `.wrapper_global` `overflow-x: clip` traegt -> der Ueberhang wird ABGESCHNITTEN
statt scrollbar. Auf einem iPad (768px) fehlten dadurch die rechte Haelfte der H1, das
Eingabefeld und der primaere CTA - unerreichbar, nicht nur unsichtbar.
URSACHE: Die einzige Regel, die auf eine Spalte umstellt, haengt in style.css an
`@media only screen and (max-device-width: 480px)`. `device-width` ist die PHYSISCHE
Geraetebreite (seit Media Queries L4 veraltet), nicht die Fensterbreite: ein iPad meldet
768/1024px, ein verkleinertes Desktop-Fenster die volle Bildschirmbreite. Die Regel
greift dort also nie. Betrifft in style.css 35 Stellen - deshalb wird sie hier NICHT
angefasst, sondern nur die eine Grid-Zeile additiv ueberschrieben.
FIX: unterhalb der Inhaltsbreite auf eine Spalte, `minmax(0,1fr)` statt `1fr`, damit
lange Inhalte (Tabellen, Code, Bilder) die Spalte nicht wieder aufblaehen.
GEMESSEN nachher: 600/768/900/1024px von 21/12/6/4 abgeschnittenen Elementen auf 0;
375px und ab 1200px unveraendert. */
@media (max-width: 1199px){
/* :not(.navigation) ist Pflicht: die Kopfleiste traegt ein EIGENES Raster
(`.content.navigation .modul { grid-template-columns: auto 1fr auto }` fuer
Logo | Menue | Icons). Ohne den Ausschluss beschneidet die Ein-Spalten-Regel
dessen Elternspalte und das Logo wird von 259px auf 14px gequetscht
(gemessen, bevor der Ausschluss drin war). */
.wrapper_global .content:not(.navigation){
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "b";
}
}
/* ===== Mobilnavigation ab 480px bis zur Desktopbreite (Tablets, schmale Fenster) =====
BEFUND (gemessen 07.09.2026): Die Kopfleiste hatte zwischen 481 und 1199px WEDER das
Desktop-Menue vollstaendig (es lief rechts aus dem Bild: 14 Eintraege bei 600px, 10 bei
768px) NOCH den Burger (`display:none`) - die Navigation war dort schlicht nicht
bedienbar. Auf einem iPad waren Musik, Vorlagen, Ratgeber, Kontakt, Warenkorb und Konto
nicht erreichbar.
URSACHE: dieselbe wie beim Inhalt weiter oben - der komplette Mobil-Nav-Block in
style.css haengt an `@media only screen and (max-device-width: 480px)`. `device-width`
ist die physische Geraetebreite, nicht die Fensterbreite; ein iPad meldet 768/1024px,
die Regel greift nie.
FIX: exakt DIESELBEN 27 Regeln (1:1 aus style.css uebernommen, nicht nachgebaut - der
Block ist vollstaendig auf `.content.navigation` beschraenkt, keine Fremdselektoren),
nur unter `max-width: 1199px` statt `max-device-width: 480px`. Dazu die eine Zeile, die
das AEUSSERE Raster der Kopfleiste fliessend macht (`.content.navigation` selbst stand
auf `0px 1200px 0px`); das INNERE `auto 1fr auto` des `.modul` bleibt unangetastet,
sonst wird das Logo von 259px auf 14px gequetscht.
GEMESSEN nachher: Burger sichtbar und klickbar 480-1199px, Menue oeffnet mit 9 Links,
Logo 259px wie auf dem Desktop, 0 Nav-Elemente ausserhalb; ab 1200px unveraendert. */
@media (max-width: 1199px){
/* Aussenraster fliessend - das innere Raster des .modul bleibt wie es ist */
.wrapper_global .content.navigation{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "b"; }
.wrapper_global .content.navigation .modul{ grid-area: b; }
.wrapper_global .content.navigation .modul {
grid-template-areas: "a c d";
grid-template-columns: auto 1fr auto;
padding-right: 0;
}
.wrapper_global .content.navigation .modul .logo {
grid-area: a;
background-color: var(--blue-dark);
padding: 1rem 1rem 0.5rem 1rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
z-index: 4;
width: 6rem;
}
.wrapper_global .content.navigation .modul .headline {
grid-area: c;
display: flex;
height: var(--nav1-height);
padding-top: 0.3rem;
}
.wrapper_global .content.navigation .modul .headline img {
width: 10rem;
height: auto;
}
.wrapper_global .content.navigation .modul .burger {
grid-area: d;
display: flex;
align-items: center;
height: var(--nav1-height);
}
.wrapper_global .content.navigation .modul .burger i {
width: 3rem;
display: flex;
justify-content: center;
}
.wrapper_global .content.navigation .modul .burger i:before {
font-family: 'FontAwesome';
content: "\f0c9";
font-weight: 900;
line-height: var(--nav1-height);
color: #FFF;
}
.wrapper_global .content.navigation.mobile-active .modul .burger i:before {
content: "\e59b";
}
.wrapper_global .content.navigation .modul .logo img {
height: auto;
width: 4rem;
}
.wrapper_global .content.navigation .modul .nav1 {
display: none;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 {
position: fixed;
height: auto;
max-height: 100vh;
width: 100vw;
text-align: left;
display: block;
z-index: 3;
background: var(--blue-dark);
top: calc(var(--nav1-height) + 0.5rem);
left: 0;
padding: 2.5rem 1rem 0.5rem 1.5rem;
overflow: scroll;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul {
height: auto;
display: block;
align-items: center;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li {
display: block;
margin-right: 0;
font-family: Geist;
font-weight: 500;
transition: all 0.2s;
line-height: 2;
font-size: 1.2rem;
margin-bottom: 1rem;
color: #fff;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 .kontoinfos {
height: auto;
color: #fff;
margin-left: 0;
line-height: 1.3;
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.35);
padding: 1rem;
border-radius: 1rem;
margin-top: 1rem;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart:before {
padding-top: 0;
}
.wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos {
font-weight: 400;
font-size: 1rem;
opacity: 1;
}
.wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos strong {
font-weight: 600;
font-size: 1rem;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:nth-last-child(2),
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:nth-last-child(1) {
display: inline-block;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.user {
margin-left: 0.75rem;
}
.wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart .badge {
color: #FFF;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a.icon i {
border-color: #fff;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a.icon i:before {
color: #fff;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:last-child {
margin-right: 0;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a {
color: inherit;
padding-bottom: 1rem;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover,
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active {
color: var(--blue-light);
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover a,
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active a {
border-bottom: 3px solid var(--blue-light);
padding-bottom: 0.2rem;
transition: all 0.2s;
}
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover a.icon,
.wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active a.icon {
border-bottom: none;
padding-bottom: 0.2rem;
transition: all 0.2s;
}
}
/* Logo-Groesse zwischen Handy und Desktop: die uebernommene Mobilregel setzt
`.logo img { width: 4rem }` (64px) — auf einem Handy richtig, auf einem Tablet zu klein
(das Logo verliert sich in einer 768px breiten Leiste). Ab 600px daher die Wortmarke in
Desktop-Groesse wie ab 1200px; darunter bleibt es bei Bildmarke + Schriftzug.
Reichweite bewusst eng: nur .logo img in der Kopfleiste, nur 600-1199px. */
@media (min-width: 600px) and (max-width: 1199px){
.wrapper_global .content.navigation .modul .logo{
background-color: transparent; padding: 0; width: auto;
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.wrapper_global .content.navigation .modul .logo img.no-mobile{ display: inline; width: auto; height: 3rem; }
.wrapper_global .content.navigation .modul .logo img.only-mobile,
.wrapper_global .content.navigation .modul .headline{ display: none; }
}
/* Zwei Korrekturen am geoeffneten Menue zwischen 600 und 1199px (gemessen 07.09.2026):
1) SACKGASSE: Das Overlay `.nav1` (z-index 3) legte sich UEBER den Burger (z-index auto)
— elementFromPoint an der Burger-Mitte lieferte `DIV.nav1`. Das Menue liess sich also
oeffnen, aber nicht wieder schliessen. Der Burger bekommt einen hoeheren z-index als
das Overlay; das X-Icon (`content:"\e59b"` im mobile-active-Zustand) ist damit auch
wirklich klickbar.
2) UEBERLAPPUNG: Das Logo (z-index 4, unten bei y=114) ragte 4px in den ersten
Menuepunkt (oben bei y=110), weil das Overlay auf `top: calc(var(--nav1-height) +
0.5rem)` sitzt, die Leiste hier aber niedriger beginnt. Das Overlay startet jetzt
buendig unter der Leiste — gemessen statt geraten, per Positionierung am Elternteil.
Zusaetzlich Innenabstand oben, damit der erste Punkt nicht an der Kante klebt. */
@media (min-width: 600px) and (max-width: 1199px){
.wrapper_global .content.navigation .modul .burger{ position: relative; z-index: 6; }
/* Das Overlay hing als `position:fixed` an `top: var(--nav1-height)` — also an einem
FESTEN Wert, gemessen vom Fensterrand. Die Kopfleiste beginnt aber nicht dort: darueber
sitzt die KI-Hinweisleiste, deren Hoehe mit der Breite umbricht. Gemessen: Unterkante
der Leiste 109px (600), 114px (768), 93px (1024) — und 56px, sobald gescrollt und die
Hinweisleiste weg ist. Ein fester Wert trifft keinen dieser Faelle; bei 768px ragte das
Logo dadurch 28px in den ersten Menuepunkt.
Loesung: das Overlay am ELTERNTEIL ausrichten (`absolute` zu `.modul`, `top:100%`)
statt am Fenster — dann folgt es der Leiste in jedem Zustand von selbst, ohne dass
irgendwo eine Hoehe gepflegt werden muss. */
.wrapper_global .content.navigation .modul{ position: relative; }
.wrapper_global .content.navigation.mobile-active .modul .nav1{
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: calc(100vh - 100%);
padding-top: 1.5rem;
}
}
/* ===========================================================================
ANHANG fuer templates/telefonansagenai/css/style.css — 08.09.2026
Zwischenbreiten-Nachtrag zu Commit d43ba17b (Tablet-Fix vom selben Tag).
Alle Bloecke unten beheben Fehler, die auf der LIVE-Seite BESTEHEN und nicht
durch die Arbeit an /_neu entstanden sind — jeder gegen LIVE UND /_neu gemessen
(Puppeteer, isMobile gesetzt, echte Fensterbreiten):
- Hero zweispaltig 481-768 px: bei 540 px waren halbe H1, Eingabefeld und
CTA abgeschnitten (H1 288..598 in einem 540er Fenster).
- .inhalt trug 40 px Innenabstand links, 0 rechts -> Inhalt bis an den Rand.
- /telefonansagen-weihnachten bei 600 px: dreispaltige Karten (672 px in
600 px, dritte Karte abgeschnitten) + zweispaltiges .grid-texte.
Gemessen 15 ueberstehende Elemente -> nach dem Fix 0.
- Hinweiszeile ueber dem Namensfeld: Grauton direkt auf dem Hero-Foto, weil
dort der weisse .wrapper der Startseite im Markup fehlt.
Ursache jedes Mal `max-device-width: 480px` (Geraetebreite, nicht Fensterbreite).
Einspielen: ans Ende von style.css anhaengen, Cache-Bust in
templates/telefonansagenai/index.php mitziehen (aktuell i37 -> i38).
In /_neu live und gemessen: 200 Messungen (20 Seiten x 10 Breiten 375-1920 px)
-> 0 Overflow, 0 Konsolenfehler, 0 fehlende H1, 0 HTTP-Fehler.
=========================================================================== */
/* ============================================================================
HERO AUF ZWISCHENBREITEN — Nachtrag zum Tablet-Fix vom 08.09.2026 (d43ba17b)
============================================================================
BEFUND (gemessen 08.09.2026, Puppeteer mit isMobile, echte Fensterbreiten):
Der Hero blieb zwischen 481 und 768 px zweispaltig und lief rechts aus dem Bild.
Breite H1 links..rechts Ueberstand
480px 40 .. 440 keiner
540px 288 .. 598 +58 px
600px 312 .. 622 +22 px
660px 336 .. 646 keiner
Sichtbar abgeschnitten waren bei 540/600 px die halbe H1, das Eingabefeld
("Willkommen bei der Schreinere…") und der primaere CTA ("…erst der Downloa").
Das Elterngrid stand dort auf `216px 413.5px` = 629,5 px in einem 540er Fenster.
URSACHE: dieselbe wie beim Inhalt und der Navigation in d43ba17b — der
Hero-Block haengt an `@media only screen and (max-device-width: 480px)`.
`device-width` ist die physische Geraetebreite, nicht die Fensterbreite:
auf einem Tablet oder in einem schmalen Desktop-Fenster greift die Regel nie.
Der Fix vom 08.09. hat Inhalt und Navigation umgestellt, den Hero-Block aber
ausgelassen — diese Luecke schliesst der Nachtrag hier.
FIX: dieselben Hero-Regeln wie im 480er-Block, 1:1 uebernommen und nicht
nachgebaut, nur unter `max-width: 768px` statt `max-device-width: 480px`.
Schwelle 768 px, weil der Hero ab 660 px von selbst wieder passt und 768 px
die etablierte Mobil-Grenze des Projekts ist.
BEWUSST NICHT UEBERNOMMEN: die nackte Regel `.hero-glow { width: 100% }` aus
dem 480er-Block. `.hero-glow` steht auf 28 Seiten auch ausserhalb des Heros
(`content keyvisual-gradient hero-glow`); die Regel wuerde also weit ueber den
Hero hinaus wirken. Die spezifische Variante
`.content.hero .modul .inhalt .hero-glow` ist enthalten und genuegt.
GEMESSEN NACHHER: siehe Bericht — H1, Eingabefeld und CTA vollstaendig
sichtbar 375-1920 px, kein Ueberstand mehr bei 540/600 px, ab 769 px unveraendert.
============================================================================ */
@media (max-width: 768px) {
.wrapper_global .content.hero {
padding-top: 2.5rem;
}
.wrapper_global .content.hero .modul {
grid-template-areas: "a"
"b";
grid-template-columns: 1fr;
}
.wrapper_global .content.hero .modul .eyecatcher {
display: none;
}
.wrapper_global .content.hero .modul .inhalt .wrapper {
padding: 0 1rem;
margin-bottom: 1rem;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 {
font-size: 2rem;
padding-right: 0;
margin-top: 2rem;
line-height: 1.1;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 span.small {
font-size: 1.5rem;
}
.wrapper_global .content.hero .modul .inhalt .wrapper .cta1 {
margin-bottom: 1.5rem;
}
.wrapper_global .content.hero .modul .inhalt .hero-glow {
width: auto;
}
}
/* Hero-Innenabstand rechts (08.09.2026)
.inhalt trug 40px links / 0 rechts und lief damit bis an den Fensterrand.
Nur im Zwischenbereich, in dem der Hero einspaltig ist; ab 769 px unveraendert. */
@media (max-width: 768px) {
.wrapper_global .content.hero .modul .inhalt {
padding-right: 40px;
}
}
/* Hinweiszeile ueber dem Namensfeld ohne weissen Wrapper (08.09.2026)
Betrifft nur Heroes, in denen der .wrapper fehlt (Weihnachtsseite) - auf der
Startseite traegt der vorhandene .wrapper den Grund und diese Regel greift nicht. */
.wrapper_global .content.hero .modul .inhalt > .input-label {
display: inline-block;
background: rgba(255, 255, 255, .85);
color: #001357;
padding: .35rem .7rem;
border-radius: .35rem;
max-width: 100%;
}
/* DREISPALTIGE KARTENREIHEN auf Zwischenbreiten (08.09.2026)
spalten3 brach nur unter max-device-width:480px um und stand bei 600 px
dreispaltig (672 px Inhalt in 600 px Fenster). Siehe Befund oben. */
@media (max-width: 767px) {
.wrapper_global .content .modul.spalten3 {
grid-template-areas: "a"
"b"
"c";
grid-template-columns: 1fr;
margin: 0;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.wrapper_global .content .modul.spalten3 .inhalt {
padding: 2rem 2rem 1rem 2rem;
}
.wrapper_global .content .modul.spalten2 {
padding: 1.5rem 1.5rem 1rem 1.5rem;
margin: 0;
grid-template-columns: 1fr;
grid-template-areas: "a" "b";
text-align: center;
}
}
/* Textraster .grid-texte auf Zwischenbreiten (08.09.2026)
Gleiche Ursache wie spalten3: bricht nur unter max-device-width:480px um und
stand bei 600 px zweispaltig (242 + 261 px, rechte Spalte ueberstand um 7 px).
Regel 1:1 aus dem 480er-Block uebernommen. Reichweite: `.grid-texte` kommt in
genau einer Inhaltsdatei vor (telefonansagen-weihnachten). */
@media (max-width: 767px) {
.wrapper_global .content .modul .inhalt .grid-texte {
grid-template-columns: 1fr;
}
}
/* Renovierung 2026-09-12: bestehende Marke, klarere Lesehierarchie. */
.wrapper_global .content.hero .modul .inhalt .wrapper {
background:rgba(255,255,255,.93);
box-shadow:0 8px 28px rgba(0,19,87,.08);
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 {
line-height:1.16;
letter-spacing:-.018em;
padding-right:0;
}
.wrapper_global .content.hero .modul .inhalt .wrapper h1 span.highlight {
background-position:center bottom;
background-size:100% .32em;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
.wrapper_global .content.hero .modul .inhalt .wrapper .input-label {
color:#42536e;
line-height:1.55;
}
.wrapper_global .content.hero .modul .inhalt .wrapper p a[style*="--mint-text"] {
color:#006d70 !important;
line-height:1.5;
}
.wrapper_global .content.hero .modul .inhalt .wrapper .hero-glow {
border:1px solid #9caabe;
border-bottom:2px solid var(--blue-dark);
border-radius:4px;
}
.wrapper_global .content.hero .modul .inhalt .wrapper input {border:0;}
.wrapper_global .content.hero .modul .inhalt .wrapper .hero-glow:focus-within {
outline:3px solid #00848a;outline-offset:3px;
}
.wrapper_global .content.b2b-section:not(.b2b-section--accent) .b2b-section-eyebrow {color:#006d70;}
.wrapper_global .b2b-feature {
box-shadow:0 2px 5px rgba(0,19,87,.035);
border-color:#dce2e9;
}
.wrapper_global .b2b-feature:hover {
transform:none;
box-shadow:0 3px 10px rgba(0,19,87,.06);
}
.wrapper_global .b2b-feature h3 {line-height:1.35;letter-spacing:-.01em;}
.wrapper_global .b2b-feature p.small {color:#53647b;font-size:.9rem;line-height:1.55;}
.wrapper_global .d26-faq-card {box-shadow:0 2px 8px rgba(0,19,87,.04);}
/* Ratgeber, Branchen und Vorlagen: Bild und Titel bilden eine Gruppe. */
.wrapper_global .content.keyvisual-gradient .modul .inhalt img.hero-img {
height:clamp(180px,20vw,280px);margin-bottom:1.75rem;
}
.wrapper_global .content.keyvisual-gradient .modul .inhalt:has(> img.hero-img) h1 {
margin-bottom:1.25rem;line-height:1.2;letter-spacing:-.015em;
}
.wrapper_global .content.keyvisual-gradient .modul .inhalt:has(> img.hero-img) .b2b-section-intro {
font-size:1.125rem;line-height:1.65;max-width:72ch;
}
.wrapper_global .content.keyvisual-gradient .modul .inhalt:has(> img.hero-img) .ssot-abgrenzung {
font-size:1rem;line-height:1.6;max-width:82ch;
}
.wrapper_global :is(a,button,input,textarea,select,[tabindex]):focus-visible {
outline:3px solid #00848a;outline-offset:4px;
}
.wrapper_global .seite-kontakt .wrapper_formular > button.button-formularfelder {
grid-column:2;grid-row:auto;justify-self:start;max-width:100%;min-height:44px;padding:.7rem 1.5rem;
}
@media(max-width:768px) {
.wrapper_global .seite-kontakt .wrapper_formular {
grid-template-columns:minmax(0,1fr);gap:.6rem;padding-inline:0;
}
.wrapper_global .seite-kontakt .wrapper_formular > :is(label,input,textarea,.datenschutz,button.button-formularfelder) {
grid-column:1;min-width:0;
}
.wrapper_global .seite-kontakt .wrapper_formular > label {text-align:left;margin-top:1rem;}
.wrapper_global .seite-kontakt .wrapper_formular > button.button-formularfelder {margin-top:1rem;}
}
@media(max-width:768px) {
:root .wrapper_global .content.hero .modul .inhalt {padding-left:24px;padding-right:24px;}
:root .wrapper_global .content.hero .modul .inhalt .wrapper {padding:1.5rem;}
:root .wrapper_global .content.hero .modul .inhalt .wrapper h1 {margin-top:0;font-size:clamp(1.7rem,6.8vw,2.25rem);line-height:1.16;}
:root .wrapper_global .content.hero .modul .inhalt .wrapper .cta1 {margin-bottom:.75rem;line-height:1.3;}
}
@media(prefers-reduced-motion:reduce) {
.wrapper_global .b2b-feature {transition:none;}
}
/* 2026-09-13: anchor the hero brush to the emphasized word. */
.wrapper_global .content.hero .modul .inhalt .wrapper h1 span.highlight-word {
display: inline-block;
white-space: nowrap;
background-image: url("../images/highlighter-word.svg");
background-position: center bottom;
background-size: 100% .22em;
}