/* Eigenständige Gestaltung der gemeinsamen NADJØR Startseite */
.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;
}
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;
}
.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);
}
.startseite{
font-size:16px;
line-height:24px;
color:#000;
font-family:"Inter Tight",Arial,sans-serif;
font-weight:300;
background-color:#ece8e9;
}
.startseite a:focus-visible{
outline:2px solid #000;
outline-offset:4px;
}
.startseite .footer{
font-weight:400;
}
.visually-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.startseite-header{
width:100%;
height:78px;
position:relative;
padding:0;
}
.startseite-logo{
width:164px;
}
.startseite-main{
width:100%;
min-height:calc(100dvh - 160px);
display:flex;
align-items:center;
justify-content:center;
padding:60px 0 100px 0;
}
.bildbereich{
--bild-versatz:clamp(40px,18dvh,150px);
--drehbild-mobile-top:60%;
width:100%;
max-width:1640px;
margin:0 auto;
padding:0 50px;
display:flex;
justify-content:center;
align-items:flex-start;
gap:clamp(40px,6vw,100px);
}
.bild-box{
position:relative;
flex:1 1 0;
width:100%;
max-width:720px;
min-width:0;
}
.bild-media{
position:relative;
width:100%;
}
.bild-box img{
width:100%;
height:auto;
display:block;
object-fit:contain;
}
.bild-button{
position:absolute;
left:25px;
bottom:25px;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
min-height:44px;
background-color:#000;
color:#fff;
font-size:15px;
line-height:15px;
font-family:"Inter Tight",Arial,sans-serif;
font-weight:400;
text-decoration:none;
padding:12px 16px;
border-radius:50px;
letter-spacing:1px;
}
a.themen-link .bild-button:hover{
background-color:#333;
}
.bild-text{
height:42px;
margin:calc(var(--bild-versatz) - 42px) 0 0;
font-size:15px;
line-height:23px;
font-weight:400;
letter-spacing:2px;
}
.bild-rechts{
margin-top:var(--bild-versatz);
}
.bild-box img.drehbild{
position:absolute;
z-index:2;
width:16.67%;
max-width:120px;
aspect-ratio:1/1;
height:auto;
object-fit:contain;
transform-origin:center center;
pointer-events:none;
}
.bild-box img.drehbild-desktop{
left:27.78%;
top:-6.94%;
display:block;
animation:drehung 18s linear infinite;
}
.bild-box img.drehbild-mobile{
display:none;
animation:drehung-mobile 18s linear infinite;
}
@keyframes drehung{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@keyframes drehung-mobile{
from{
transform:translateX(-50%) rotate(0deg);
}
to{
transform:translateX(-50%) rotate(360deg);
}
}
:root{
--kopf-logo-breite:164px;
--kopf-header-hoehe:78px;
}
.startseite-header{
height:var(--kopf-header-hoehe);
}
.startseite-logo{
position:absolute;
left:50%;
top:53%;
transform:translate(-50%,-50%);
}
.startseite-logo{
width:var(--kopf-logo-breite);
height:auto;
display:block;
}
.themen-link{
display:block;
}
.themen-link .bild-button{
white-space:nowrap;
}
a.themen-link:hover .bild-button{
background-color:#333;
}
.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:1032px) and (max-height:750px){
.bildbereich{
gap:clamp(40px,6vw,70px);
}
.bild-box img.drehbild-desktop{
top:-10.94%;
width:22.67%;
}
.bild-text{
font-size:13px;
line-height:21px;
}
.bild-button{
font-size:13px;
line-height:13px;
}
}
@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;
}
.startseite-main{
min-height:auto;
display:block;
padding:80px 0 40px;
}
.bildbereich{
flex-direction:column;
align-items:center;
gap:0;
}
.bild-box{
max-width:720px;
}
.bild-button{
left:50%;
bottom:25px;
transform:translateX(-50%);
}
.bild-text{
height:auto;
margin:40px 0;
text-align:center;
}
.bild-rechts{
margin-top:0;
}
.bild-box img.drehbild-desktop{
display:none;
}
.bild-box img.drehbild-mobile{
display:block;
left:50%;
top:var(--drehbild-mobile-top);
width:16.67%;
max-width:120px;
}
}
@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;
}
body{
font-size:var(--schrift-normal);
line-height:1.5;
}
h1{
font-size:var(--schrift-ueberschrift);
}
.skip-link,
.bild-button,
.bild-text{
font-size:var(--schrift-normal);
}
.footer-nav a,
.footer-recht a,
.skip-link,
.bild-button{
line-height:1.4;
}
.footer-unten p,
.bild-text{
line-height:1.5;
}
.startseite-header{
height:68px;
}
.footer-navigation{
margin-top:65px;
}
.bild-box img.drehbild-mobile{
width:20%;
}
.bildbereich{
--drehbild-mobile-top:55%;
padding:0 20px;
gap:0;
}
.startseite-main{
padding:40px 0 40px;
}
.bild-text{
margin:35px 0;
}
:root{
--kopf-logo-breite:160px;
--kopf-header-hoehe:68px;
}
}
@media(max-width:414px){
.rahmen{
width:calc(100% - 40px);
}
.startseite-logo{
width:180px;
}
:root{
--kopf-logo-breite:180px;
}
}
@media(max-width:375px){
.startseite-logo{
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;
}
.bild-box img.drehbild-desktop,
.bild-box img.drehbild-mobile{
animation:none;
}
}