/* Eigenständige Gestaltung der Info-Seiten im Hauptverzeichnis */
.seitenstart{
display:none;
}
html.seitenstart-aktiv:not(.seitenstart-fertig),
html.seitenstart-aktiv:not(.seitenstart-fertig) body{
overflow:hidden;
}
html.seitenstart-aktiv .seitenstart{
position:fixed;
inset:0;
z-index:100000;
display:flex;
align-items:center;
justify-content:center;
background:#ece8e9;
opacity:1;
visibility:visible;
transition:opacity .22s ease,visibility 0s linear .22s;
}
html.seitenstart-aktiv .seitenstart img{
width:164px;
height:auto;
display:block;
}
html.seitenstart-fertig .seitenstart{
opacity:0;
visibility:hidden;
pointer-events:none;
}
*{
box-sizing:border-box;
}
:root{
--schrift-normal:16px;
}
@font-face{
font-display:swap;
font-family:"Inter Tight";
font-style:normal;
font-weight:300;
src:url("../font/inter-tight-v9-latin-300.woff2") format("woff2");
}
@font-face{
font-display:swap;
font-family:"Inter Tight";
font-style:normal;
font-weight:400;
src:url("../font/inter-tight-v9-latin-regular.woff2") format("woff2");
}
@font-face{
font-display:swap;
font-family:"Inter Tight";
font-style:normal;
font-weight:700;
src:url("../font/inter-tight-v9-latin-700.woff2") format("woff2");
}
html{
scroll-behavior:smooth;
scroll-padding-top:110px;
}
body{
margin:0;
background:#ece8e9;
color:#141414;
font:400 var(--schrift-normal)/1.4 "Inter Tight",Arial,sans-serif;
}
button,
a{
font:inherit;
}
button{
color:inherit;
}
a{
color:inherit;
text-decoration:none;
}
img{
display:block;
max-width:100%;
}
main{
padding-top:78px;
}
.footer{
width:100%;
margin-top:30px;
background:#fff;
color:#111;
}
.footer-innen{
padding-top:55px;
padding-bottom:35px;
}
.footer-logo{
width:100%;
display:block;
}
.footer-logo img{
width:100%;
height:auto;
display:block;
}
.footer-navigation{
width:100%;
margin-top:135px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:start;
}
.footer-nav{
width:auto;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
grid-row:1;
}
.footer-nav:nth-child(1){
grid-column:1;
justify-self:start;
}
.footer-nav:nth-child(2){
grid-column:2;
justify-self:start;
}
.footer-nav:nth-child(3){
grid-column:3;
justify-self:start;
}
.footer-nav:nth-child(4){
grid-column:3;
justify-self:end;
text-align:right;
}
.footer-nav a{
display:inline-flex;
align-items:center;
gap:8px;
color:#111;
font-size:var(--schrift-normal);
line-height:1.2;
text-decoration:none;
}
.footer-nav a:hover{
text-decoration:underline;
text-underline-offset:4px;
}
.footer-nav a:focus-visible{
outline:2px solid #111;
outline-offset:4px;
}
.footer-nav-social a img{
width:10px;
height:10px;
display:block;
}
.footer-unten{
margin-top:170px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:140px;
}
.footer-unten p{
margin:0;
font-size:var(--schrift-normal);
line-height:1.3;
}
.footer-recht{
display:flex;
align-items:center;
justify-content:flex-end;
gap:28px;
}
.footer-recht a{
color:#111;
font-size:var(--schrift-normal);
line-height:1.3;
text-decoration:none;
}
.footer-recht a:hover{
text-decoration:underline;
text-underline-offset:4px;
}
.footer-recht a:focus-visible{
outline:2px solid #111;
outline-offset:4px;
}
.rahmen{
width:calc(100% - 60px);
margin:auto;
}
.kopf{
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
background:#fff;
}
.kopf .kopf-innen{
width:100%;
max-width:none;
height:78px;
margin:0;
padding:0 30px;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
box-shadow:0 0px 3px rgba(0,0,0,.06);
}
.logo{
position:absolute;
left:50%;
top:53%;
transform:translate(-50%,-50%);
}
.logo img{
width:164px;
height:auto;
}
h1{
margin:0;
font-size:var(--schrift-normal);
line-height:1.3;
font-weight:400;
letter-spacing:1px;
}
.nach-oben{
width:50px;
height:50px;
padding:0;
position:fixed;
right:30px;
bottom:90px;
z-index:90;
display:flex;
align-items:center;
justify-content:center;
border:0;
background:#fff;
border-radius:50%;
box-shadow:0 0px 6px rgba(0,0,0,.08);
opacity:0;
visibility:hidden;
transform:translateY(12px);
pointer-events:none;
cursor:pointer;
transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
}
.nach-oben.sichtbar{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
transition:opacity .35s ease,transform .35s ease,visibility 0s;
}
.nach-oben img{
width:14px;
height:auto;
display:block;
transform:rotate(180deg);
}
.nach-oben:focus-visible{
outline:2px solid #141414;
outline-offset:4px;
}
.rechtlich{
font-size:var(--schrift-normal);
line-height:1.625;
color:#141414;
font-family:"Inter Tight",Arial,sans-serif;
font-weight:300;
background:#ece8e9;
}
.rechtlich .footer{
font-weight:400;
}
.rechtlich a:focus-visible,
.skip-link:focus-visible{
outline:2px solid #141414;
outline-offset:4px;
}
.skip-link{
position:absolute;
left:20px;
top:20px;
z-index:9999;
padding:12px 16px;
background:#141414;
color:#fff;
border-radius:50px;
font-size:15px;
line-height:15px;
font-family:"Inter Tight",Arial,sans-serif;
font-weight:400;
text-decoration:none;
transform:translateY(-120px);
transition:transform .2s ease;
}
.skip-link:focus{
transform:translateY(0);
}
.rechtlich-header{
width:100%;
height:78px;
position:relative;
padding:0;
}
.rechtlich-logo-link{
width:164px;
display:block;
position:absolute;
left:50%;
top:53%;
transform:translate(-50%,-50%);
}
.rechtlich-logo{
width:100%;
height:auto;
display:block;
}
.rechtlich-main{
width:100%;
min-height:auto;
display:block;
padding:calc(100px + var(--kopf-header-hoehe)) 0 80px;
}
.rechtlich-content{
width:100%;
max-width:1032px;
margin:0 auto;
padding:0 50px;
}
.rechtlich-content h1{
margin:0 0 54px;
font-size:40px;
line-height:46px;
font-weight:500;
letter-spacing:1px;
}
.rechtlich-content h2{
margin:58px 0 18px;
font-size:24px;
line-height:31px;
font-weight:500;
letter-spacing:.5px;
}
.rechtlich-content h3{
margin:36px 0 14px;
font-size:18px;
line-height:25px;
font-weight:500;
letter-spacing:.3px;
}
.rechtlich-content p{
margin:0 0 24px;
}
.rechtlich-content ul{
margin:0 0 30px;
padding:0 0 0 22px;
}
.rechtlich-content li{
margin:0 0 10px;
padding-left:4px;
}
.rechtlich-content a{
color:#141414;
text-decoration:underline;
text-underline-offset:4px;
text-decoration-thickness:1px;
overflow-wrap:anywhere;
}
.rechtlich-shop .rechtlich-shop-main{
width:calc(100% - 60px);
max-width:1032px;
margin:0 auto;
padding:128px 0 90px;
}
.rechtlich-shop .kopf{
font-weight:400;
}
.rechtlich-seite{
width:100%;
}
.rechtlich-seite-kopf{
width:100%;
margin-bottom:35px;
}
.rechtlich-seite-kopf h1{
margin:0;
font-size:30px;
line-height:1.2;
font-weight:400;
letter-spacing:0;
}
.rechtlich-shop .rechtlich-content-box{
width:100%;
max-width:none;
margin:0;
padding:50px;
background:#fff;
border-radius:20px;
}
.rechtlich-shop .rechtlich-content-box>:first-child{
margin-top:0;
}
.rechtlich-shop .rechtlich-content-box>:last-child{
margin-bottom:0;
}
:root{
--kopf-logo-breite:164px;
--kopf-header-hoehe:78px;
}
.kopf .kopf-innen,
.rechtlich-header{
height:var(--kopf-header-hoehe);
}
.logo,
.rechtlich-logo-link{
position:absolute;
left:50%;
top:53%;
transform:translate(-50%,-50%);
}
.logo,
.rechtlich-logo-link{
width:var(--kopf-logo-breite);
display:block;
}
.logo img,
.rechtlich-logo{
width:100%;
height:auto;
display:block;
}
.footer-nav .artikel-navigation-inaktiv{
display:inline-flex;
align-items:center;
position:relative;
color:#aaa;
font-size:var(--schrift-normal);
line-height:1.2;
cursor:default;
}
.footer-nav .artikel-navigation-inaktiv:before,
.footer-nav .artikel-navigation-inaktiv:after{
content:"";
width:calc(100% + 10px);
height:1px;
position:absolute;
left:-5px;
top:50%;
background:#aaa;
transform-origin:center;
pointer-events:none;
}
.footer-nav .artikel-navigation-inaktiv:before{
transform:rotate(10deg);
}
.footer-nav .artikel-navigation-inaktiv:after{
transform:rotate(-10deg);
}
@media(min-width:1921px){
.rahmen{
max-width:1920px;
}
}
@media(max-width:1032px){
h1{
font-size:var(--schrift-normal);
line-height:1.5;
font-weight:400;
}
}
@media(max-width:900px){
.rechtlich-main{
padding:calc(90px + var(--kopf-header-hoehe)) 0 70px;
}
.rechtlich-content{
max-width:760px;
padding:0 32px;
}
.rechtlich-content h1{
margin-bottom:46px;
font-size:34px;
line-height:40px;
}
.rechtlich-content h2{
margin-top:52px;
font-size:22px;
line-height:29px;
}
}
@media(max-width:834px){
.footer-navigation{
grid-template-columns:repeat(2,minmax(0,1fr));
row-gap:70px;
}
.footer-nav:nth-child(1){
grid-column:1;
grid-row:1;
justify-self:start;
align-items:flex-start;
text-align:left;
}
.footer-nav:nth-child(2){
grid-column:2;
grid-row:1;
justify-self:start;
align-items:flex-start;
text-align:left;
}
.footer-nav:nth-child(3){
grid-column:1;
grid-row:2;
justify-self:start;
align-items:flex-start;
text-align:left;
}
.footer-nav:nth-child(4){
grid-column:2;
grid-row:2;
justify-self:start;
align-items:flex-start;
text-align:left;
}
}
@media(max-width:600px){
main{
padding-top:68px;
}
.footer{
margin-top:60px;
}
.nach-oben{
bottom:130px;
}
.footer-navigation{
grid-template-columns:1fr;
row-gap:0;
}
.footer-nav:nth-child(1),
.footer-nav:nth-child(2),
.footer-nav:nth-child(3),
.footer-nav:nth-child(4){
grid-column:1;
justify-self:stretch;
align-items:flex-start;
text-align:left;
}
.footer-nav:nth-child(1){
grid-row:1;
}
.footer-nav:nth-child(2){
grid-row:2;
margin-top:25px;
padding-top:25px;
border-top:1px solid #e5e5e5;
}
.footer-nav:nth-child(3){
grid-row:3;
margin-top:25px;
padding-top:25px;
border-top:1px solid #e5e5e5;
}
.footer-nav:nth-child(4){
grid-row:4;
margin-top:25px;
padding-top:25px;
border-top:1px solid #e5e5e5;
}
.footer-unten{
margin-top:25px;
flex-direction:column-reverse;
align-items:stretch;
gap:35px;
}
.footer-recht{
width:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:12px;
padding-top:25px;
border-top:1px solid #e5e5e5;
}
.footer-unten p{
width:100%;
margin:0;
padding-top:135px;
border-top:1px solid #e5e5e5;
text-align:center;
line-height:1.6;
}
:root{
--schrift-normal:16px;
--schrift-ueberschrift:18px;
--schrift-label:16px;
}
.logo img{
width:160px;
}
body{
font-size:var(--schrift-normal);
line-height:1.5;
}
h1{
font-size:var(--schrift-ueberschrift);
}
.skip-link{
font-size:var(--schrift-normal);
}
.footer-nav a,
.footer-recht a,
.skip-link{
line-height:1.4;
}
.footer-unten p{
line-height:1.5;
}
.kopf .kopf-innen{
height:68px;
}
.rechtlich{
line-height:1.5;
}
.rechtlich-header{
height:68px;
}
.rechtlich-logo-link{
width:160px;
}
.rechtlich-logo{
width:100%;
}
.rechtlich-main{
padding:calc(70px + var(--kopf-header-hoehe)) 0 60px;
}
.rechtlich-content{
padding:0 30px;
}
.rechtlich-content h1{
margin-bottom:38px;
font-size:30px;
line-height:36px;
}
.rechtlich-content h2{
margin:44px 0 16px;
font-size:21px;
line-height:27px;
}
.rechtlich-content h3{
margin:30px 0 12px;
font-size:18px;
line-height:24px;
}
.rechtlich-content ul{
padding-left:18px;
}
.rechtlich-shop .rechtlich-shop-main{
width:100%;
padding:103px 0 60px;
}
.rechtlich-seite-kopf{
margin-bottom:35px;
padding:0 30px;
}
.rechtlich-seite-kopf h1{
font-size:26px;
line-height:1.2;
}
.rechtlich-shop .rechtlich-content-box{
padding:40px 30px;
border-radius:20px;
}
.footer-navigation{
margin-top:65px;
}
:root{
--kopf-logo-breite:160px;
--kopf-header-hoehe:68px;
}
}
@media(max-width:414px){
.rahmen{
width:calc(100% - 40px);
}
.kopf .kopf-innen{
padding:0 20px;
}
.logo img{
width:180px;
}
.rechtlich-shop{
--schrift-normal:16px;
--schrift-ueberschrift:16px;
--schrift-label:16px;
}
.rechtlich-content{
padding:0 20px;
}
.rechtlich-logo-link{
width:180px;
}
.rechtlich-seite-kopf{
padding:0 20px;
}
.rechtlich-shop .rechtlich-content-box{
padding:35px 20px;
}
.logo img,
.rechtlich-logo-link{
width:180px;
}
:root{
--kopf-logo-breite:180px;
}
}
@media(max-width:375px){
.logo img,
.rechtlich-logo-link{
width:160px;
}
:root{
--kopf-logo-breite:160px;
}
}
@media(prefers-reduced-motion:reduce){
html.seitenstart-aktiv .seitenstart{
transition:none;
}
.nach-oben{
transition:none;
}
.skip-link{
transition:none;
}
}