@font-face{
  font-family:'Schibsted Grotesk';
  src:url('fonts/schibsted-latin.woff2') format('woff2');
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('fonts/schibsted-latin-ext.woff2') format('woff2');
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#fbfbfa;
  --stone:#edeeeb;
  --ink:#17191a;
  --ink-2:#3e4447;
  --muted:#63696d;
  --line:#e2e3e0;
  --line-2:#cdcfcb;
  --accent:#0f6e7b;
  --gut:clamp(1.25rem,4vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,ul,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.shell{max-width:44rem;margin-inline:auto;padding-inline:var(--gut)}

.mast{border-bottom:1px solid var(--line)}
.mast .shell{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:1.15rem;
  flex-wrap:wrap;
}
.mast a{color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.015em;font-size:1rem}
.mast a:hover{color:var(--accent)}
.mast p{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

main{padding-block:clamp(3rem,7vw,5rem)}
h1{
  font-size:clamp(1.4rem,2.3vw,1.85rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.03em;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line-2);
  margin-bottom:2.75rem;
}
h2{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:2.75rem;
  margin-bottom:.6rem;
}
p + p{margin-top:1rem}
a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
  transition:color .2s,border-color .2s;
}
a:hover{color:var(--accent);border-color:var(--accent)}
.addr{
  font-style:normal;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line);
  padding-block:1rem;
  line-height:1.7;
}
.todo{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  padding-block:1rem;
  margin-top:1.75rem;
  font-size:.95rem;
}
.todo b{display:block;margin-bottom:.3rem}
.muted{color:var(--muted);font-size:.95rem;margin-top:3rem}

footer{background:var(--stone);color:var(--muted);font-size:.95rem}
footer .shell{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 2rem;
  justify-content:space-between;
  padding-block:1.6rem;
  max-width:44rem;
  border-top:1px solid var(--line-2);
}
footer a{
  display:inline-block;
  padding-block:.55rem;
  color:var(--ink-2);
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
}
footer a:hover{color:var(--accent);border-color:var(--accent)}

/* Offene Angaben duerfen nie wie fertige Angaben aussehen */
[data-placeholder]{
  color:var(--muted);
  border-bottom:1px dashed var(--muted);
  padding-bottom:1px;
}
[data-placeholder]::before{content:"◻ "}
