/* Redaktionelle Inhalte: was Redakteure im Editor setzen – Überschriften,
   Absätze, Zitate, Tabellen, Bilder. Listen, Termine, Galerien und die
   Bausteine im Text bekommen ihre Darstellung mit Phase 6.3. */

.inhalt {
  display: flow-root;
  overflow-wrap: anywhere;
}

.inhalt h1,
.inhalt h2,
.inhalt h3,
.inhalt h4 {
  margin: 1.2em 0 0.65em;
  color: var(--dunkel);
  font-family: var(--schrift-ui);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* Seitentitel und Zwischenüberschriften in der Titelschrift des Themes
   (beim CDU-Theme dieselbe wie die der Oberfläche) */
.inhalt h1,
.inhalt h2 {
  font-family: var(--schrift-titel);
}

.inhalt h1 {
  margin-top: 0;
  font-size: 2.35em;
  font-weight: 800;
}

.inhalt h2 {
  font-size: 1.8em;
}

.inhalt h3 {
  font-size: 1.35em;
}

.inhalt p {
  margin: 0 0 1.2em;
}

/* Absatzformat „Anmerkung“ (6.5e) für Bildquellen und Hinweise, wie live .representatives-credits */
.inhalt p.anmerkung {
  margin-top: 2em;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Anschriften aufrecht wie live (.contact-card address), nicht kursiv wie im Browser vorgegeben */
.inhalt address {
  margin: 0 0 1.2em;
  font-style: normal;
}

/* Redaktioneller Text etwas enger gesetzt (bisher .itemtext) */
.fliesstext {
  line-height: 1.5;
}

.inhalt hr {
  clear: both;
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--linie);
}

.inhalt blockquote {
  margin: var(--luft-3) 0;
  padding: 12px 24px;
  border-left: 4px solid var(--flaeche);
  background: var(--hell);
}

/* :where hält die Spezifität bei einer Klasse – Listen mit eigener Klasse
   (Fotoraster, Downloads, Bausteine) setzen sich so durch */
.inhalt :where(ul, ol) {
  padding-left: 1.4em;
}

.inhalt pre {
  max-width: 100%;
  overflow: auto;
  padding: 16px;
  background: var(--hell);
}

.inhalt figure {
  margin: 0 0 var(--luft-3);
}

/* Kleine graue Zeile unter dem Bild wie live (#page figcaption), ohne Kasten (6.5d) */
.inhalt figcaption {
  padding: 0.65em 0 0;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.82em;
  line-height: 1.55;
}

/* Bildnachweis aus dem Medienbrowser (55g): klein und leise am Bild, in einer
   Bildunterschrift hinten angefügt, sonst als eigene Zeile darunter */
.bildnachweis {
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.75rem;
  line-height: 1.5;
}

figcaption.bildnachweis {
  padding: 0.5em 0 0;
}

.bild-mit-nachweis {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.bild-mit-nachweis > .bildnachweis {
  display: block;
  padding-top: 0.35em;
}

/* Auf Bildern über die ganze Fläche (Bühne, Kacheln): oben rechts in der Ecke */
.bildnachweis-auf-bild {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  max-width: 70%;
  padding: 2px 8px;
  background: var(--dunkel);
  color: var(--papier);
  font-size: 0.6875rem;
  pointer-events: none;
}

/* Tabellen aus dem Editor: bei Bedarf in sich waagerecht scrollbar statt
   die Seite zu verbreitern (bisher per Skript in einen Rahmen gehüllt) */
.inhalt table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  overscroll-behavior-x: contain;
}

.inhalt th,
.inhalt td {
  padding: 10px;
  vertical-align: top;
}

.inhalt th {
  background: var(--hell);
  color: var(--dunkel);
  text-align: left;
}

.inhalt tr + tr > * {
  border-top: 1px solid var(--linie);
}

/* Knöpfe und Felder, wie sie in Seiteninhalten vorkommen */
.inhalt input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]),
.inhalt textarea,
.inhalt select {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--feld-rahmen);
  background: var(--papier);
  color: var(--text);
}

.inhalt button,
.inhalt input[type="submit"] {
  min-height: var(--treffer);
  padding: 12px 18px;
  border: 0;
  background: var(--schmuck-verlauf) bottom / 100% 4px no-repeat, var(--knopf);   /* Schmuckverlauf (JU, 73a) */
  color: var(--knopf-text);
}

@media (max-width: 540px) {
  .inhalt h1 {
    font-size: 1.9em;
  }

  .inhalt [align="left"],
  .inhalt [align="right"] {
    float: none;
  }
}