:root{
  --navy:#1E2A38;
  --deep-blue:#34495E;
  --orange:#F5A623;
  --sand:#F7F2E9;
  --white:#FFFFFF;
  --max:760px;
}

@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/playfair-600.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/playfair-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/montserrat-400.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/montserrat-500.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/montserrat-600.woff2') format('woff2');
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  color:var(--navy);
  background:var(--white);
  line-height:1.7;
}
h1,h2,h3{font-family:'Playfair Display',serif; margin:1.6em 0 .5em; font-weight:700; line-height:1.25;}
h1{font-size:clamp(1.8rem,4vw,2.4rem); margin-top:0;}
h2{font-size:1.3rem;}
h3{font-size:1.08rem; font-family:'Poppins',sans-serif; font-weight:600;}
p{margin:0 0 1em;}
a{color:var(--orange);}
ul{margin:0 0 1em; padding-left:1.2em;}
li{margin-bottom:.4em;}

header{background:var(--white); border-bottom:1px solid #EFEAE0;}
.nav{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:16px 24px; max-width:960px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none;}
.brand img{height:32px; display:block;}
.brand span{font-family:'Playfair Display',serif; font-weight:700; font-size:1.15rem; color:var(--navy);}
.brand span b{color:var(--orange); font-weight:700;}
.back-link{font-family:'Poppins',sans-serif; font-size:.88rem; font-weight:500; color:var(--navy); text-decoration:none; opacity:.75;}
.back-link:hover{opacity:1;}

main{max-width:var(--max); margin:0 auto; padding:56px 24px 80px;}
.updated{font-family:'Poppins',sans-serif; font-size:.82rem; color:var(--deep-blue); opacity:.7; margin-bottom:2.4em;}

footer{background:var(--navy); color:var(--sand); padding:32px 0; font-family:'Poppins',sans-serif; font-size:.82rem;}
.foot-row{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; max-width:960px; margin:0 auto; padding:0 24px; text-align:center;}
.foot-row a{color:var(--sand); text-decoration:none; opacity:.85; margin:0 10px; white-space:nowrap;}
.foot-row a:hover{opacity:1;}
/* Social-Symbole und Cookie-Verweis im Fussbereich. currentColor sorgt
   dafuer, dass die Symbole die Schriftfarbe des Fusses erben. */
.foot-social{display:inline-flex; align-items:center; gap:13px; vertical-align:middle;}
.foot-social a{display:inline-flex; margin:0!important; opacity:.72; transition:opacity .2s;}
.foot-social a:hover{opacity:1;}
.foot-social svg{width:19px; height:19px; display:block;}
.cookie-link{cursor:pointer;}

@media (max-width:600px){
  main{padding:40px 20px 60px;}
  .back-link{font-size:.82rem;}
  .brand span{font-size:1.05rem;}
}