/* DG-LAB App Anleitung, CMS-Seite
   Gehoert ins CSS-Feld von advancedcms. Praefix dg- ueberall, damit nichts ins Theme blutet.
   Bilder liegen unter /img/cms/dglab/ */

.dg-wrap{
  --dg-akzent:#ef0c02;
  --dg-karte:rgba(0,0,0,.6);
  --dg-linie:rgba(255,255,255,.12);
  --dg-leise:rgba(255,255,255,.62);
  max-width:860px;
  margin:0 auto;
  color:#fff;
  line-height:1.6;
}
.dg-wrap *{box-sizing:border-box}
.dg-wrap h1{font-size:28px;line-height:1.25;margin:0 0 14px}
.dg-wrap h2{font-size:22px;line-height:1.3;margin:44px 0 12px;padding-top:18px;border-top:1px solid var(--dg-linie)}
.dg-wrap h3{font-size:17px;margin:26px 0 8px}
.dg-wrap p{margin:0 0 14px}
.dg-wrap ul,.dg-wrap ol{margin:0 0 14px;padding-left:22px}
.dg-wrap li{margin:0 0 6px}
.dg-wrap a{color:var(--dg-akzent)}
.dg-wrap strong{font-weight:600}
.dg-wrap code{
  background:rgba(255,255,255,.08);
  padding:1px 5px;border-radius:3px;
  font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.dg-lead{font-size:18px;color:var(--dg-leise);margin:0 0 26px}

/* Sprungmarken */
.dg-nav{
  background:var(--dg-karte);border:1px solid var(--dg-linie);border-radius:8px;
  padding:14px 18px;margin:0 0 34px;
}
.dg-nav p{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--dg-leise)}
.dg-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.dg-nav li{margin:0}
.dg-nav a{text-decoration:none;border-bottom:1px solid transparent}
.dg-nav a:hover{border-bottom-color:var(--dg-akzent)}

/* Karten */
.dg-karte{
  background:var(--dg-karte);border:1px solid var(--dg-linie);border-radius:8px;
  padding:16px 18px;margin:0 0 16px;
}
.dg-karte h3{margin:0 0 6px}
.dg-karte p:last-child,.dg-karte ul:last-child,.dg-karte div:last-child{margin-bottom:0}

/* Raster fuer die Funktionsuebersicht */
.dg-raster{display:grid;gap:14px;grid-template-columns:1fr;margin:0 0 16px}
@media(min-width:620px){.dg-raster{grid-template-columns:1fr 1fr}}

/* Bilder: Handy-Screenshots, hochkant */
.dg-bild{margin:0 0 18px;text-align:center}
.dg-bild img{
  display:block;margin:0 auto 8px;
  max-width:100%;width:290px;height:auto;
  border:1px solid var(--dg-linie);border-radius:10px;
}
.dg-cap{font-size:14px;color:var(--dg-leise);margin:0 auto;max-width:460px}

/* Bild neben Text, ab Tablet */
@media(min-width:720px){
  .dg-bild-seite{display:flex;gap:22px;align-items:flex-start;text-align:left}
  .dg-bild-seite img{margin:0;flex:0 0 250px;width:250px}
  .dg-bild-seite .dg-cap{margin:0}
}

/* Zwei Screenshots nebeneinander */
.dg-bild-paar{display:grid;gap:16px;grid-template-columns:1fr;margin:0 0 18px}
@media(min-width:620px){.dg-bild-paar{grid-template-columns:1fr 1fr}}
.dg-bild-paar .dg-bild{margin:0}

/* Hinweisbloecke */
.dg-stop,.dg-tipp{
  border-radius:8px;padding:16px 18px;margin:0 0 20px;
  border:1px solid var(--dg-linie);border-left:3px solid var(--dg-leise);
  background:rgba(255,255,255,.04);
}
.dg-stop{border-left-color:var(--dg-akzent);background:rgba(239,12,2,.09)}
.dg-stop p:first-child{margin-top:0}
.dg-stop ul:last-child,.dg-stop p:last-child,.dg-tipp p:last-child{margin-bottom:0}
.dg-stop strong{color:#ff6a60}

/* Tabellen */
.dg-tab{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.dg-tab th,.dg-tab td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--dg-linie)}
.dg-tab th{font-weight:600;color:var(--dg-leise);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.dg-tab tr:last-child td{border-bottom:0}
.dg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Schritte */
.dg-schritte{list-style:none;counter-reset:dgs;padding:0;margin:0 0 18px}
.dg-schritte li{counter-increment:dgs;position:relative;padding:0 0 14px 42px;margin:0}
.dg-schritte li:before{
  content:counter(dgs);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;
  background:var(--dg-akzent);color:#fff;
  font-size:14px;font-weight:600;line-height:28px;text-align:center;
}

/* Anhang */
.dg-anhang{margin-top:54px;padding-top:22px;border-top:2px solid var(--dg-linie)}
.dg-anhang h2{border-top:0;padding-top:0;margin-top:30px}
.dg-wrap details{
  background:var(--dg-karte);border:1px solid var(--dg-linie);border-radius:8px;
  padding:0;margin:0 0 12px;
}
.dg-wrap summary{padding:14px 18px;cursor:pointer;font-weight:600;list-style:none}
.dg-wrap summary::-webkit-details-marker{display:none}
.dg-wrap summary:before{content:"+ ";color:var(--dg-akzent);font-weight:700}
.dg-wrap details[open] summary:before{content:"2212 "}
.dg-wrap details[open] summary{border-bottom:1px solid var(--dg-linie)}
.dg-inhalt{padding:16px 18px 4px}
.dg-inhalt>:last-child{margin-bottom:14px}