/* ============================================================
   Gemeinsame Hülle aller Unterseiten:
   Impressum, Datenschutz, AGB, News-Übersicht und Blogartikel.

   Die Tokens sind aus rechnungen-neu/index.html übernommen. Sie stehen
   dort inline, weil die Startseite eine einzelne Datei ist; hier liegen
   sie in einer Datei, weil alle Unterseiten dieselbe Hülle benutzen und
   eine Korrektur sonst in jeder Datei einzeln gemacht werden müsste.
   Ändert sich ein Token auf der Startseite, muss es hier mitwandern.
   ============================================================ */
:root {
  /* Sand / Warmweiß */
  --bg:          #FAF9F7;
  --bg-tinted:   #F1EEE8;
  --bg-card:     #FFFFFF;
  --border:      #E4DFD6;
  --border-strong:#D3CCBF;

  /* Text (warm, fast-schwarz) */
  --text:        #211E1A;
  --text-soft:   #4A453D;
  --text-muted:  #6E685D;

  /* EINE Akzentfarbe: tiefes, warmes Grün */
  --accent:      #2E5D46;
  --accent-deep: #223F31;
  --accent-ink:  #F4F2EC;

  --radius:      7px;
  --shadow:      0 1px 2px rgba(33, 30, 26, 0.06);
  --maxw-text:   720px;
  --maxw-wide:   1100px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 6.5vw, 2.85rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 4vw, 1.6rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1rem; color: var(--text-soft); }
a  { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; color: var(--text); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #9bbcab; outline-offset: 2px; border-radius: 4px;
}

/* ------- Buttons ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0 1.6rem;
  background: var(--accent); color: #fff;
  font-family: "IBM Plex Sans", sans-serif; font-size: 1.02rem; font-weight: 600;
  border: 1px solid var(--accent); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, transform .06s ease;
}
.btn:hover { background: #274f3b; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); }
.btn--ghost:hover { background: #fff; border-color: var(--accent); }

/* ------- Sticky Header (identisch zur Startseite) ------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 247, 0.92);
  border-bottom: 1px solid var(--border);
}
.site-inner {
  max-width: var(--maxw-wide); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 20px; gap: 1rem;
}
.logo {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.1rem; color: var(--text); text-decoration: none; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.logo:hover { text-decoration: none; }
.logo-mark { height: 26px; width: auto; display: block; }
/* Ab hier braucht die Nav den Platz: der Wortteil des Logos weicht,
   die WS-Marke allein bleibt erkennbar und verlinkt weiterhin nach Hause. */
@media (max-width: 620px) { .logo-word { display: none; } }
@media (max-width: 430px) { .site-inner { gap: 0.5rem; padding-left: 14px; padding-right: 14px; } }
.header-cta { font-size: 0.95rem; min-height: 46px; padding: 0 1.1rem; white-space: nowrap; }
.header-cta .cta-kurz { display: none; }
/* Mit der Nav daneben passt der lange Text unter ~620px nicht mehr
   in eine Zeile — dann übernimmt die Kurzfassung. */
@media (max-width: 620px) {
  .header-cta .cta-lang { display: none; }
  .header-cta .cta-kurz { display: inline; }
}
.header-cta .cta-mini { display: none; }
/* Dritte Stufe: unter 430px reicht auch die Kurzfassung nicht mehr neben
   der Nav. Getestet bis 320px (iPhone SE). */
@media (max-width: 430px) {
  .header-cta { padding: 0 0.85rem; }
  .header-cta .cta-kurz { display: none; }
  .header-cta .cta-mini { display: inline; }
}

/* ------- Seitenkopf ------- */
.section { padding: clamp(2.5rem, 7vw, 4rem) 20px; }
.wrap { max-width: var(--maxw-text); margin: 0 auto; }
.eyebrow {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.75rem;
}
.page-head { padding-bottom: 0; }
.page-head h1 { margin-bottom: 0.6rem; }
.page-head .lead { font-size: 1.1rem; color: var(--text-soft); max-width: 52ch; margin-bottom: 0; }
.stand { margin-top: 1.25rem; font-size: 0.92rem; color: var(--text-muted); }

/* ------- Rechtstext ------- */
.prose { padding-top: clamp(1.75rem, 4vw, 2.5rem); }
.prose section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.3rem, 4vw, 1.9rem);
  margin-bottom: 1rem;
}
.prose section > :last-child { margin-bottom: 0; }
.prose h2 { margin-bottom: 0.7rem; }
.prose h3 { margin: 1.5rem 0 0.4rem; color: var(--text); }
.prose h3:first-of-type { margin-top: 0; }
.prose ul { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--text-soft); }
.prose li { margin-bottom: 0.4rem; }
.prose .adresse { font-style: normal; color: var(--text-soft); line-height: 1.8; }
.prose .adresse strong { display: block; color: var(--text); }

/* Hinweiskasten (z. B. „kurz gesagt") */
.hint {
  border-left: 3px solid var(--accent);
  background: var(--bg-tinted);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0 0 1rem;
  font-size: 0.98rem;
  color: var(--text-soft);
}
.hint p:last-child { margin-bottom: 0; }
.hint strong { color: var(--accent-deep); }

/* Inhaltsverzeichnis */
.toc { margin: 0 0 1rem; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
@media (max-width: 560px) { .toc { columns: 1; } }
.toc li { margin-bottom: 0.35rem; font-size: 0.97rem; break-inside: avoid; }

/* ------- Zurück-Zeile ------- */
.backrow { padding-top: 0; }
.backrow .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------- Footer (identisch zur Startseite) ------- */
footer.site {
  background: var(--bg-tinted); border-top: 1px solid var(--border);
  padding: 2.5rem 20px; font-size: 0.92rem; color: var(--text-muted);
}
footer .fwrap { max-width: var(--maxw-wide); margin: 0 auto; }
footer .footer-logo { height: 30px; width: auto; display: block; margin-bottom: 1.15rem; opacity: 0.9; }
footer .links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
footer .imp { color: var(--text-muted); line-height: 1.7; }
footer .imp strong { color: var(--text-soft); }
footer [aria-current="page"] { color: var(--text-soft); text-decoration: none; font-weight: 600; }

/* ------- Navigation im Header -------
   Grau gehalten: die Nav soll neben dem grünen CTA nicht um Aufmerksamkeit
   konkurrieren. Identisch in der Startseite inline gepflegt. */
.site-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; margin-right: 1.5rem; }
.site-nav a {
  color: var(--text-muted); text-decoration: none;
  font-size: 0.97rem; font-weight: 500; white-space: nowrap;
}
.site-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
@media (max-width: 720px) {
  .site-nav { gap: 1rem; margin-right: 1rem; }
  .site-nav a { font-size: 0.92rem; }
}
@media (max-width: 400px) { .site-nav { gap: 0.75rem; margin-right: 0.75rem; } }

/* ------- News-Übersicht ------- */
.postlist { display: grid; gap: 1rem; margin-top: 2rem; }
.post-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1.3rem, 4vw, 1.8rem);
  box-shadow: var(--shadow); text-decoration: none;
  transition: border-color .16s ease, transform .06s ease;
}
.post-card:hover { border-color: var(--accent); text-decoration: none; }
.post-card:active { transform: translateY(1px); }
.post-card h2 { font-size: 1.28rem; margin-bottom: 0.45rem; }
.post-card p { margin: 0 0 0.8rem; }
.post-card .more { color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.post-meta {
  font-size: 0.88rem; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; margin-bottom: 0.5rem;
}
.post-meta .sep { color: var(--border-strong); }

/* ------- Artikel ------- */
.article { padding-top: clamp(1.5rem, 4vw, 2.25rem); }
.article h2 { margin: 2.25rem 0 0.6rem; }
.article > .wrap > h2:first-child { margin-top: 0; }
.article h3 { margin: 1.6rem 0 0.4rem; }
.article ul, .article ol { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--text-soft); }
.article li { margin-bottom: 0.45rem; }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.95rem; }
.article th, .article td { border: 1px solid var(--border); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.article th { background: var(--bg-tinted); color: var(--text); font-weight: 600; }
.tablewrap { overflow-x: auto; margin-bottom: 1.25rem; }
.tablewrap table { margin-bottom: 0; }
.breadcrumb { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.9rem; }
.breadcrumb a { color: var(--text-muted); }
.disclaimer {
  font-size: 0.92rem; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 2.5rem;
}

/* CTA am Artikelende, abgesetzt wie der finale CTA der Startseite */
.cta-box {
  background: var(--accent-deep); color: var(--accent-ink);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2rem); margin-top: 2.5rem;
}
.cta-box h2 { color: #fff; margin-top: 0; font-size: clamp(1.25rem, 3.5vw, 1.55rem); }
.cta-box p { color: #D9E2DB; }
.cta-box > :last-child { margin-bottom: 0; }
.cta-box .btn { background: var(--accent-ink); color: var(--accent-deep); border-color: var(--accent-ink); }
.cta-box .btn:hover { background: #fff; }

.related { margin-top: 2.75rem; }
.related h2 { font-size: 1.25rem; margin-bottom: 1rem; }