/* Unterseiten (Themenseiten und Blog). Gleiche Schrift und Farben wie die Startseite,
   main.css liefert Grundlagen, Kopfzeile und Knöpfe. */

.seite .kopf--einfach { justify-content: space-between; gap: 24px; }
.seite__nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; font-size: .95rem; font-weight: 500; }
.seite__nav a { color: var(--grau-hell); text-decoration: none; transition: color .2s; white-space: nowrap; }
.seite .kopf__name { white-space: nowrap; }
/* 761–860 px: Name neben dem Kürzel weglassen, sonst brechen Name und Menüpunkte zweizeilig um */
@media (max-width: 860px) { .seite .kopf__name { display: none; } }
.seite__nav a:hover, .seite__nav a[aria-current="page"] { color: var(--papier); }

.artikel { padding: clamp(36px, 6vw, 96px) var(--rand) 0; }
.artikel__spalte { max-width: 70ch; margin: 0 auto; }
/* Lange deutsche Wörter (Fixkostenreduzierer®) und Adressen dürfen am Handy umbrechen. Überschriften
   trennen nur am Handy und nur lange Wörter, breiter brechen sie ausgeglichen ohne Trennstrich um. */
.artikel__text, .blogliste { overflow-wrap: break-word; }
.artikel__text h1, .artikel__text h2, .blogliste h2 { -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
@media (max-width: 480px) {
  .artikel__text h1, .artikel__text h2, .blogliste h2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
}
.artikel__text a { overflow-wrap: anywhere; }
.pfad { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 clamp(28px, 4vw, 48px); font-size: .9rem; color: var(--grau); }
.pfad a { color: var(--grau-hell); text-decoration: none; }
.pfad a:hover { color: var(--papier); }

.artikel__text h1 {
  font-family: var(--t-display); font-weight: 800; letter-spacing: -.04em; line-height: .98;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem); margin-bottom: 22px;
}
.artikel__meta { margin: 0 0 clamp(28px, 4vw, 44px); font-size: .9rem; color: var(--grau); }
.artikel__text .einstieg { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.45; font-weight: 500; color: var(--papier); margin-bottom: 2em; }
.artikel__text h2 {
  font-family: var(--t-display); font-weight: 750; letter-spacing: -.03em; line-height: 1.08;
  font-size: clamp(1.55rem, 2.8vw, 2.3rem); margin: 2.1em 0 .7em;
}
.artikel__text h3 { font-weight: 700; letter-spacing: -.015em; font-size: 1.2rem; line-height: 1.25; margin: 1.8em 0 .5em; }
.artikel__text p, .artikel__text li { color: rgba(244, 244, 244, .8); }
.artikel__text ul, .artikel__text ol { padding-left: 1.15em; margin: 0 0 1.2em; }
.artikel__text li { margin-bottom: .45em; }
.artikel__text li::marker { color: var(--akzent); }
.artikel__text a { color: var(--papier); text-decoration-color: var(--akzent); text-underline-offset: 3px; }
.artikel__text strong { color: var(--papier); font-weight: 650; }
.artikel__text blockquote {
  margin: 2em 0; padding: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--papier);
}
.artikel__text blockquote p { color: inherit; margin-bottom: .5em; }
.artikel__text blockquote footer, .artikel__text blockquote cite { display: block; font-size: .9rem; font-weight: 500; font-style: normal; letter-spacing: 0; color: var(--grau); }
.artikel__text table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; }
.artikel__text th, .artikel__text td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.artikel__text th { color: var(--papier); font-weight: 650; }

.faq { margin-top: 3em; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-of-type { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 18px 0; font-weight: 650; font-size: 1.1rem; letter-spacing: -.01em; color: var(--papier);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--akzent); transition: transform .3s var(--weich); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; }
.quellen { margin-top: 3em; font-size: .9rem; }
.quellen h2 { font-size: 1rem !important; letter-spacing: 0 !important; font-weight: 650 !important; margin-bottom: .6em !important; }
.quellen li, .quellen p { color: var(--grau-hell); }

.weiter { max-width: 70ch; margin: clamp(56px, 8vw, 110px) auto 0; }
.weiter h2 { font-size: 1rem; font-weight: 650; letter-spacing: 0; color: var(--grau-hell); margin-bottom: 10px; }
.weiter ul { list-style: none; margin: 0; padding: 0; }
.weiter a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 0;
  border-top: 1px solid var(--linie); text-decoration: none;
  font-weight: 650; font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -.015em;
}
.weiter li:last-child a { border-bottom: 1px solid var(--linie); }
.weiter a span { flex: none; color: var(--akzent); transition: transform .3s var(--weich); }
.weiter a:hover span { transform: translateX(6px); }

.aufruf {
  margin: clamp(64px, 9vw, 130px) calc(var(--rand) * -1) 0; padding: clamp(56px, 8vw, 110px) var(--rand);
  background: var(--akzent); color: var(--schwarz);
}
.aufruf__innen { max-width: 70ch; margin: 0 auto; }
.aufruf h2 { font-family: var(--t-display); font-weight: 800; letter-spacing: -.04em; line-height: .98; font-size: clamp(2.2rem, 5vw, 4.2rem); margin-bottom: 18px; }
.aufruf p { max-width: 52ch; font-size: 1.1rem; }
.aufruf__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.aufruf .knopf--dunkel { background: var(--schwarz); color: var(--papier); }
.aufruf .knopf--rand { border: 1px solid rgba(10, 10, 10, .4); color: var(--schwarz); background: transparent; }

.blogliste { list-style: none; margin: 0; padding: 0; }
.blogliste li { border-top: 1px solid var(--linie); }
.blogliste li:last-child { border-bottom: 1px solid var(--linie); }
.blogliste a { display: block; padding: clamp(22px, 3vw, 34px) 0; text-decoration: none; }
.blogliste h2 { font-family: var(--t-display); font-weight: 750; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.45rem, 2.6vw, 2.2rem); margin: 0 0 10px; transition: color .25s; }
.blogliste a:hover h2 { color: var(--akzent); }
.blogliste p { margin: 0 0 8px; color: var(--grau-hell); }
.blogliste small { color: var(--grau); font-size: .85rem; }

/* Fuß: alle Seiten und alle Artikel, darunter Copyright und Rechtliches */
.seite__fuss {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px clamp(32px, 5vw, 80px);
  padding: clamp(40px, 5vw, 64px) var(--rand) 36px; font-size: .9rem; color: var(--grau); background: var(--schwarz);
}
.seite__fuss h2 { font-family: var(--t-text); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--grau-hell); margin: 0 0 12px; }
.seite__fusslinks div, .seite__fusszeile nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.seite__fusszeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-top: 22px; border-top: 1px solid var(--linie); }
.seite__fuss a { color: var(--grau-hell); text-decoration: none; }
.seite__fuss a:hover { color: var(--papier); }

@media (max-width: 760px) {
  .seite__nav { display: none; }
  .aufruf__knoepfe .knopf { width: 100%; justify-content: center; }
  .seite__fuss { grid-template-columns: minmax(0, 1fr); }
}

/* Touch: Tippflächen mindestens 44 px */
@media (pointer: coarse) {
  .seite__nav a, .pfad a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .pfad { align-items: center; row-gap: 0; }
  .seite__fusslinks div, .seite__fusszeile nav { row-gap: 0; }
  .seite__fuss a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}