@import url('/assets/fonts/fonts.css');

:root{
  --cream: #F7F4EC;
  --cream-deep: #F2EFE6;
  --ink: #1A1A1A;
  --ink-muted: #4A463D;
  --grey: #6B6B6B;
  --line: #D8D3C4;
  --line-soft: #A8A296;
  --red: #B3241F;
  --gold: #D4A62A;
  --jade: #2E7D6B;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Karla', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
}

h1,h2,h3{
  font-family:'Bodoni Moda', Georgia, serif;
  font-weight:700;
  margin:0 0 .4em;
  color:var(--ink);
}

a{color:var(--red);}

.wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 24px;
}

/* header */
.site-header{
  padding:28px 0 8px;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  gap:12px;
}
.site-header img{
  width:40px;
  height:40px;
  border-radius:50%;
}
.site-header span{
  font-family:'Bodoni Moda', serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:.02em;
}

/* hero */
.hero{
  text-align:center;
  padding:56px 0 40px;
}
.hero img.seal{
  width:96px;
  height:96px;
  border-radius:50%;
  margin-bottom:24px;
}
.hero h1{
  font-size:38px;
  line-height:1.15;
}
.hero .tagline{
  font-family:'Bodoni Moda', serif;
  font-style:italic;
  color:var(--red);
  font-size:20px;
  margin:6px 0 22px;
}
.hero .kernsatz{
  font-size:19px;
  max-width:520px;
  margin:0 auto 30px;
  color:var(--ink-muted);
}

/* buttons */
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:8px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-family:'Karla', sans-serif;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:2px solid var(--ink);
  transition:transform .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{
  background:var(--red);
  border-color:var(--red);
  color:var(--cream);
}
.btn-secondary{
  background:transparent;
  color:var(--ink);
}

/* three-point list */
.punkte{
  list-style:none;
  margin:48px 0;
  padding:32px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  gap:22px;
}
.punkte li{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.punkte .num{
  font-family:'Bodoni Moda', serif;
  font-weight:700;
  font-size:22px;
  color:var(--gold);
  min-width:28px;
}
.punkte b{display:block;}
.punkte span.muted{color:var(--ink-muted); font-size:15.5px;}

/* footer */
.site-footer{
  padding:36px 0 48px;
  text-align:center;
  color:var(--grey);
  font-size:14px;
}
.site-footer nav{
  margin-bottom:10px;
}
.site-footer a{
  color:var(--ink-muted);
  text-decoration:none;
  margin:0 10px;
}
.site-footer a:hover{text-decoration:underline;}

/* legal pages */
.legal{
  padding:48px 0 64px;
}
.legal h1{font-size:28px; margin-bottom:.6em;}
.legal h2{font-size:19px; margin-top:2em;}
.legal p, .legal address{
  margin:0 0 1em;
  font-style:normal;
}
.legal a.back{
  display:inline-block;
  margin-bottom:28px;
  font-size:14px;
  color:var(--ink-muted);
  text-decoration:none;
}
.legal pre{
  white-space:pre-wrap;
  font-family:'Karla', sans-serif;
  background:var(--cream-deep);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px 22px;
  font-size:15.5px;
}

.todo{
  background:#FBEFC0;
  border:1px solid var(--gold);
  border-radius:8px;
  padding:2px 8px;
  font-weight:700;
  color:#6B4E00;
}
.todo-box{
  background:#FBEFC0;
  border:1px solid var(--gold);
  border-radius:10px;
  padding:16px 20px;
  margin:0 0 28px;
  font-size:15px;
}

@media (max-width:480px){
  .hero h1{font-size:30px;}
  .hero .kernsatz{font-size:17px;}
}