/* toc.css - Inhaltsverzeichnis "On this page" fuer /432hz-converter/
   Betrifft nur: <nav class="toc"> sowie Sprungziele (h2[id]).
   Der Praefix #container sorgt dafuer, dass allgemeine ul/li/p-Regeln aus style.css das Layout nicht ueberschreiben. */

#container nav.toc{
  box-sizing:border-box;
  clear:both;
  margin:22px 0 26px;
  padding:18px 22px 16px;
  background:#f5f8f9;
  border:1px solid #d7d7d7;
  border-left:5px solid #16b27e;
  border-radius:14px;
}

#container nav.toc p{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.3;
  color:#2a3238;
  text-transform:uppercase;
  letter-spacing:.06em;
}
#container nav.toc p strong{font-weight:800;}

#container nav.toc ul{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:toc;
  column-count:2;
  column-gap:34px;
}

#container nav.toc li{
  counter-increment:toc;
  break-inside:avoid;
  margin:0;
  padding:0;
  list-style:none;
}

#container nav.toc li a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:7px 8px;
  border-radius:8px;
  color:#0b6b4a;
  font-size:15px;
  line-height:1.35;
  text-decoration:none;
}

#container nav.toc li a::before{
  content:counter(toc);
  flex:0 0 auto;
  min-width:24px;
  height:24px;
  line-height:24px;
  text-align:center;
  border-radius:50%;
  background:#16b27e;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

#container nav.toc li a:hover,
#container nav.toc li a:focus-visible{
  background:#e3f3ec;
  color:#084d36;
  text-decoration:underline;
}

#container nav.toc li a:focus-visible{
  outline:2px solid #16b27e;
  outline-offset:1px;
}

/* Beim Klick auf einen Eintrag bleibt oben etwas Luft */
#container h2[id]{scroll-margin-top:18px;}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}

@media (max-width:720px){
  #container nav.toc{padding:14px 14px 12px;border-radius:12px;}
  #container nav.toc ul{column-count:1;}
  #container nav.toc li a{padding:9px 6px;font-size:16px;}
}