@font-face{font-family:'Baloo 2';src:url('fonts/Baloo2-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Caveat';src:url('fonts/Caveat-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('fonts/NunitoSans-latin.woff2') format('woff2');font-weight:300 800;font-display:swap}

:root{
  --creme:#FAF3E3;--papier:#F4E9D2;--navy:#16323F;--petrol:#1E4B44;
  --wasser:#2C6F66;--gruen:#7FA65B;--gold:#D9A441;
  --display:'Baloo 2','Nunito Sans',sans-serif;
  --hand:'Caveat',cursive;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--navy);line-height:1.65;
  background:radial-gradient(110% 60% at 50% 0%,#FFFBF0 0%,var(--creme) 50%,var(--papier) 100%);
  min-height:100vh;display:flex;flex-direction:column;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.wrap{width:min(760px,92vw);margin-inline:auto}
header.kopf{padding:clamp(24px,5vw,48px) 0 0}
.zurueck{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  color:var(--petrol);text-decoration:none;
  background:rgba(255,255,255,.6);border:1px solid rgba(30,75,68,.18);
  padding:9px 18px;border-radius:999px;
}
.zurueck:hover{background:#fff}
main{flex:1;padding:clamp(26px,4vw,40px) 0 clamp(50px,8vw,90px)}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;
  margin:.3em 0 .1em;color:var(--navy);
}
.unter{font-family:var(--hand);font-size:1.4rem;color:var(--wasser);margin:0 0 1.8em}
h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,2.6vw,1.45rem);
  margin:2em 0 .4em;color:var(--petrol);
  padding-bottom:.25em;border-bottom:2px solid rgba(127,166,91,.35);
}
h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:1.5em 0 .3em}
p,li{font-size:1rem}
ul{padding-left:1.25em}
li{margin-bottom:.35em}
a{color:var(--wasser)}
a:hover{color:var(--petrol)}
.box{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(30,75,68,.16);
  border-left:4px solid var(--gold);
  border-radius:14px;padding:18px 22px;margin:1.4em 0;
}
.box p{margin:.3em 0}
.fuss{background:#12312C;color:rgba(234,243,236,.72);padding:22px 0;font-size:.9rem}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between}
.fuss a{color:rgba(234,243,236,.9);text-decoration:none;border-bottom:1px solid rgba(234,243,236,.3)}
.fuss a:hover{color:#fff;border-color:#fff}
.fuss nav{display:flex;gap:22px;flex-wrap:wrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}