/* Wasserstopp – Rechtstexte
   Bewusst schlicht: das hier will gelesen werden, nicht bestaunt. */

:root{
  --papier:#E8ECE7;
  --flaeche:#FBFCFA;
  --kante:#C7D0C7;
  --tinte:#0F1714;
  --weich:#4A5B54;
  --eisen:#1E4A3B;
  --quell:#00778F;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

header{
  background:var(--eisen);
  color:#EAF2EE;
  padding:calc(env(safe-area-inset-top, 0px) + 18px) 20px 22px;
}
header h1{
  margin:10px 0 0;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.01em;
}
.zurueck{
  display:inline-block;
  color:#EAF2EE;
  opacity:.82;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.zurueck::before{content:"\2190\00a0"}
.zurueck:hover{opacity:1}

main{
  max-width:660px;
  margin:0 auto;
  padding:28px 20px 50px;
}

.fuehrung{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-left:4px solid var(--quell);
  border-radius:0 12px 12px 0;
  padding:16px 18px;
  margin:0 0 28px;
  font-size:15.5px;
}

h2{
  font-size:18px;
  font-weight:700;
  margin:32px 0 8px;
  letter-spacing:-.005em;
}
h2:first-of-type{margin-top:0}

p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:22px}
li{margin-bottom:6px}

strong{font-weight:600}
em{font-style:italic}

a{color:var(--quell)}
a:hover{color:var(--eisen)}

code{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:13.5px;
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:5px;
  padding:1px 5px;
}

footer{
  max-width:660px;
  margin:0 auto;
  padding:0 20px calc(env(safe-area-inset-bottom, 0px) + 40px);
  font-size:14px;
  color:var(--weich);
  border-top:1px solid var(--kante);
  padding-top:18px;
}

@media (min-width:760px){
  header{padding-left:calc(50vw - 330px);padding-right:calc(50vw - 330px)}
}