/* Durchgang für Expertengespräche (/durchgang, vorlagen/durchgang.php). Große, ruhige Schrift zum Vorlesen, nur Tokens. */

*, *::before, *::after { box-sizing: border-box; }
body.dg {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text, var(--schrift));
  font-size: 1.125rem;
  line-height: 1.6;
}
.dg a { color: var(--akzent); }
.dg img { max-width: 100%; height: auto; display: block; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dg :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.dg-kopf {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem;
  background: var(--kopf-grund, var(--akzent-fl));
  color: var(--auf-kopf, var(--auf-akzent));
}
.dg-kopf a { color: inherit; }
.dg-marke { font-weight: 700; text-decoration: none; }
.dg-verein { opacity: .85; font-size: .9rem; }
.dg-kopf-link { margin-left: auto; }

.dg-haupt { max-width: 1280px; margin: 0 auto; padding: 1rem 1rem 4rem; }
.dg-start, .dg-notizen { max-width: 820px; }
.dg h1 { font-family: var(--schrift-titel, inherit); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: .4rem 0 1rem; }
.dg h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.dg-lead { font-size: 1.2rem; }
.dg-klein { font-size: .9rem; color: var(--tinte-2); }
.dg-leer { color: var(--tinte-2); font-style: italic; }

.dg-gruppe {
  display: inline-block; padding: .2rem .7rem; border-radius: var(--rad-pille, 999px);
  font-size: .95rem; border: 2px solid currentColor;
}
.dg-gruppe.dg-geschichte { color: var(--ocker); }
.dg-gruppe.dg-alltag { color: var(--akzent); }
.dg-wer-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

.dg-startform { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.2rem 0; }
.dg select, .dg input[type=text], .dg textarea {
  font: inherit; color: var(--tinte); background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--rad-s, 6px); padding: .5rem .6rem; max-width: 100%;
}
.dg textarea { width: 100%; resize: vertical; }
.dg input[type=text] { width: 100%; }
.dg label { display: block; font-weight: 600; margin: .9rem 0 .3rem; font-size: 1rem; }

.dg-knopf {
  display: inline-block; font: inherit; font-size: 1rem; cursor: pointer; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: var(--rad-m, 8px); border: 1px solid var(--linie);
  background: var(--karte); color: var(--tinte);
}
.dg-haupt-knopf { background: var(--akzent-fl); color: var(--auf-akzent); border-color: var(--akzent-fl); font-weight: 700; font-size: 1.15rem; padding: .8rem 1.6rem; }
.dg-leise { background: transparent; }

.dg-liste { padding-left: 2.2rem; }
.dg-liste li { margin: .25rem 0; }
.dg-punkt { font-size: .8rem; margin-left: .4rem; color: var(--tinte-2); }
.dg-punkt.dg-geschichte::before, .dg-punkt.dg-alltag::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.dg-punkt.dg-geschichte::before { background: var(--ocker-fl); }
.dg-punkt.dg-alltag::before { background: var(--akzent-fl); }

.dg-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.dg-nr { font-weight: 700; }
.dg-sprung { margin-left: auto; display: flex; gap: .4rem; max-width: 100%; }
.dg-sprung select { max-width: 260px; }
.dg-balken { height: 4px; background: var(--papier-2); border-radius: 2px; margin: .6rem 0 1rem; overflow: hidden; }
.dg-balken span { display: block; height: 100%; background: var(--akzent-fl); }

.dg-meldung { padding: .6rem .9rem; border-radius: var(--rad-s, 6px); }
.dg-ok { background: var(--info-bg); }
.dg-fehler { background: var(--achtung-bg); }

.dg-raster { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .dg-raster { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
}
.dg-text, .dg-karte, .dg-bilder, .dg-notiz, .dg-alt {
  background: var(--karte); border: 1px solid var(--kante); border-radius: var(--rad-l, 12px); padding: 1rem 1.2rem;
}
.dg-seite { display: grid; gap: 1rem; align-content: start; }
.dg-karte h2, .dg-bilder h2 { margin-top: 0; }
.dg-vorlesen { font-size: 1.3rem; line-height: 1.65; }
.dg-vorlesen p { margin: 0 0 1rem; }
.dg-vorlesen figure, .dg-vorlesen img { display: none; }

.dg-luftbild { position: relative; cursor: crosshair; border-radius: var(--rad-s, 6px); overflow: hidden; }
.dg-luftbild-innen { position: relative; width: 100%; height: 100%; }
.dg-luftbild-innen.nah { transform: scale(3); }
.dg-luftbild img { width: 100%; height: 100%; }
.dg-luftbild-innen.nah .dg-ort, .dg-luftbild-innen.nah .dg-vorschlag { transform: scale(calc(1 / 3)); }
.dg-ort, .dg-vorschlag {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 3px solid var(--auf-akzent); pointer-events: none;
}
.dg-ort { background: var(--rot-fl); }
.dg-vorschlag { background: var(--glanz-wasser); }
.dg-vorschlag[hidden] { display: none; }

.dg-bilder figure { margin: 0 0 1rem; }
.dg-bilder figcaption { font-size: .9rem; color: var(--tinte-2); margin-top: .3rem; }

.dg-notiz { margin-top: 1.5rem; }
.dg-notiz h2 { margin-top: 0; }
.dg-zeile { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .dg-zeile { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.dg-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }
.dg-honig { position: absolute; left: -9999px; }

.dg-alt { margin-top: 1rem; }
.dg-alt h2 { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 0; }
.dg-alt-notiz { border-top: 1px solid var(--rand); padding-top: .4rem; margin-top: .4rem; }
.dg-alt-notiz p { margin: .2rem 0; }
.dg-notizen .dg-knopf { margin: .3rem .3rem 0 0; }
.dg-haupt, .dg-raster > *, .dg-seite > * { min-width: 0; }
.dg-vorlesen { overflow-wrap: break-word; }
@media (max-width: 700px) {
  .dg-sprung { margin-left: 0; flex: 1 1 100%; }
  .dg-sprung select { flex: 1; min-width: 0; max-width: none; }
  .dg-vorlesen { font-size: 1.2rem; }
}