/*
  Inhaltstypografie (Ratgeber-/Hilfetexte)
  Nutzung: <div class="content"> ... </div>
*/

.content{
  font-family: var(--sans);
  color: var(--text);
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}

.content::after{
  content: "";
  display: block;
  clear: both;
}

.content p{ margin: 0 0 1rem 0; }
.content a{ color: #0b4f95; font-weight: 700; text-decoration: none; }
.content a:hover{ text-decoration: underline; }

.content h1,
.content h2,
.content h3{
  color: var(--label);
  letter-spacing: .1px;
}
.content h1{ font-size: 2.05rem; line-height: 1.15; margin: 0 0 .85rem 0; }
.content h2{ font-size: 1.55rem; line-height: 1.2; margin: 1.5rem 0 .75rem 0; }
.content h3{ font-size: 1.2rem; line-height: 1.25; margin: 1.25rem 0 .5rem 0; }

.content hr{
  border: none;
  border-top: 1px solid rgba(15,23,42,0.12);
  margin: 1.25rem 0;
}

/* Lead / kleine Textvarianten */
.content-lead{ font-size: 1.08rem; color: rgba(15,23,42,0.82); }
.content-small{ font-size: .95rem; color: rgba(15,23,42,0.70); }

/* Listen */
.content ul,
.content ol{ margin: 0 0 1rem 0; padding-left: 1.2rem; }
.content li{ margin: .35rem 0; }

.list-compact li{ margin: .22rem 0; }

.list-check{
  list-style: none;
  padding-left: 0;
}
.list-check li{
  position: relative;
  padding-left: 1.6rem;
}
.list-check li::before{
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: rgba(11,79,149,0.90);
}

.list-boxed{
  list-style: none;
  padding-left: 0;
}
.list-boxed li{
  padding: .55rem .7rem;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}
.list-boxed li + li{ margin-top: .6rem; }

/* Schritt-für-Schritt */
.steps{
  counter-reset: step;
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem 0;
}
.steps li{
  position: relative;
  padding: .65rem .75rem .65rem 3rem;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  background: rgba(31,182,255,0.06);
}
.steps li + li{ margin-top: .7rem; }
.steps li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: .75rem;
  top: .65rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(11,79,149,0.12);
  color: #0b4f95;
}

/* Bilder */
.content img{ max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 14px 30px rgba(15,23,42,0.10); }

.img-left{
  float: left;
  width: min(360px, 48%);
  margin: .2rem 1.2rem .9rem 0;
}
.img-right{
  float: right;
  width: min(360px, 48%);
  margin: .2rem 0 .9rem 1.2rem;
}
.img-full{
  display: block;
  width: 100%;
  margin: 1.1rem 0;
}

.figure{ margin: 1.1rem 0; }
.figure figcaption{
  margin-top: .55rem;
  font-size: .95rem;
  color: rgba(15,23,42,0.70);
}

/* Callouts */
.callout{
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 18px;
  padding: .9rem 1rem;
  margin: 1rem 0;
  background: rgba(15,23,42,0.02);
}
.callout--info{ background: rgba(31,182,255,0.08); border-color: rgba(31,182,255,0.25); }
.callout--warn{ background: rgba(255,138,0,0.10); border-color: rgba(255,138,0,0.30); }
.callout--success{ background: rgba(45,212,191,0.10); border-color: rgba(45,212,191,0.30); }

.callout__title{ font-weight: 900; margin: 0 0 .35rem 0; color: var(--label); }

/* Code / Tastenkürzel */
.content code{
  font-family: var(--mono);
  font-size: .95em;
  padding: .1rem .35rem;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}
.content pre{
  padding: .9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  overflow: auto;
}
.content pre code{ padding: 0; border: none; background: transparent; }

.kbd{
  display: inline-block;
  font-family: var(--mono);
  font-size: .9em;
  padding: .1rem .45rem;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.18);
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,0.10);
}

/* Tabellen */
.content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .98rem;
}
.content th,
.content td{
  border: 1px solid rgba(15,23,42,0.10);
  padding: .55rem .65rem;
  vertical-align: top;
}
.content th{ background: rgba(15,23,42,0.02); text-align: left; }

/* Mini-UI */
.badge{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .15rem .55rem;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.02);
  font-size: .92rem;
  font-weight: 800;
}

.toc{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: .9rem 1rem;
  background: rgba(15,23,42,0.02);
  margin: 1rem 0;
}
.toc__title{ font-weight: 900; margin: 0 0 .5rem 0; color: var(--label); }
.toc ul{ margin: 0; }

@media (max-width: 860px){
  .img-left,
  .img-right{
    float: none;
    width: 100%;
    margin: .8rem 0;
  }
}