/* =========================================================
   ANTHRAZIT-ABSCHNITTE (alle Seiten)
   Alle hellen Inhaltsabschnitte werden anthrazit, Schrift weiß.
   Ausgenommen: Startbild/Seitenkopf (.hero, .page-hero), graue
   Bereiche (.bg-ink, z. B. Team, Kontakt) und die Fußzeile.
   Wird in allen HTML-Seiten nach css/schrift.css geladen.
   ========================================================= */

:root {
  --dark-1: #2f3134;                  /* Anthrazit */
  --dark-2: #383a3e;                  /* Anthrazit etwas heller, für Wechsel */
  --dark-card: rgba(255, 255, 255, .04);
  --dark-card-hover: rgba(255, 255, 255, .08);
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, .78);
  --line-on-dark-color: rgba(255, 255, 255, .18);
}

/* Abschnitte */
main > section:not(.bg-ink):not(.hero):not(.page-hero) { background: var(--dark-1); color: var(--on-dark); }
main > section.bg-mist { background: var(--dark-2); }

/* ---------- Überschriften & Texte ---------- */
main > section:not(.bg-ink):not(.hero):not(.page-hero) h1,
main > section:not(.bg-ink):not(.hero):not(.page-hero) h2,
main > section:not(.bg-ink):not(.hero):not(.page-hero) h3,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .lead-p,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .faq-list summary,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .step-num,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .quote-block blockquote p,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .strip-label,
main > section:not(.bg-ink):not(.hero):not(.page-hero) td { color: var(--on-dark); }

main > section:not(.bg-ink):not(.hero):not(.page-hero) p,
main > section:not(.bg-ink):not(.hero):not(.page-hero) li,
main > section:not(.bg-ink):not(.hero):not(.page-hero) address,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .prose,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .intro,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .dash-list li,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .faq-list .answer,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .consent { color: var(--on-dark-2); }

/* Labels, Unterzeilen, Nummern, Tabellenköpfe */
main > section:not(.bg-ink):not(.hero):not(.page-hero) .crest,
main > section:not(.bg-ink):not(.hero):not(.page-hero) [style*="color:var(--graphite)"],
main > section:not(.bg-ink):not(.hero):not(.page-hero) .crest-sep span,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .num,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .meta,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .meta em,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .quote-block figcaption,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .marquee-track li,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field label,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .office .row span:first-child,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .data-table th,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .facts-table th,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .faq-list summary .plus,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .trio .icon,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .form-note { color: var(--on-dark-2) !important; }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .quote-mark { color: rgba(255, 255, 255, .35); }

/* ---------- Linien ---------- */
main > section:not(.bg-ink):not(.hero):not(.page-hero) .crest-sep::before,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .crest-sep::after,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .dash-list li::before,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .prose ul li::before { background: rgba(255, 255, 255, .45); }

main > section:not(.bg-ink):not(.hero):not(.page-hero) .service-list,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .service,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .process,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .process li,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .faq-list,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .faq-list details,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .step-num,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .principle,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .strip,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .card,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .project-card,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .project-img,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .facts li,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .office,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .map-ph,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .areas,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .area,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .chips li,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .trio,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .trio > div,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .split-img,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .form-box,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field input,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field select,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field textarea,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .table-wrap,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .data-table th,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .data-table td,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .facts-table th,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .facts-table td { border-color: var(--line-on-dark-color); }

/* ---------- Karten & Boxen: dunkel statt weiß ---------- */
main > section:not(.bg-ink):not(.hero):not(.page-hero) .card:not(.card-feature),
main > section:not(.bg-ink):not(.hero):not(.page-hero) .project-card,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .office,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .areas,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .trio > div,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .form-box,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .table-wrap { background: var(--dark-card); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .card:not(.card-feature):hover,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .project-card:hover,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .trio > div:hover,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .faq-list summary:hover { background: var(--dark-card-hover); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .facts li,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .chips li { background: transparent; color: var(--on-dark-2); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .data-table th { background: rgba(255, 255, 255, .06); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .map-ph {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .08) .5px, transparent .5px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .08) .5px, transparent .5px) 0 0 / 28px 28px,
    rgba(255, 255, 255, .03);
}
main > section:not(.bg-ink):not(.hero):not(.page-hero) .map-ph::before,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .map-ph::after { background: rgba(255, 255, 255, .08); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .map-ph .pin { background: var(--on-dark); color: var(--dark-1); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .img-ph { background: rgba(255, 255, 255, .04); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .project-img:has(.img-ph),
main > section:not(.bg-ink):not(.hero):not(.page-hero) .split-img:has(.img-ph) { background: rgba(255, 255, 255, .05); }

/* Hauptkarte (Kernleistung auf der Startseite): hervorgehoben, aber im Anthrazit-Ton */
main > section:not(.bg-ink):not(.hero):not(.page-hero) .card-feature {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
  color: var(--on-dark);
}
main > section:not(.bg-ink):not(.hero):not(.page-hero) .card-feature:hover { background: rgba(255, 255, 255, .11); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .card-feature h3 { color: var(--on-dark); }

/* Team-Karten auf Anthrazit */
main > section:not(.bg-ink):not(.hero):not(.page-hero) .team-card { border-color: var(--line-on-dark-color); background: var(--dark-card); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .team-card:hover { background: var(--dark-card-hover); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .team-photo {
  background: linear-gradient(145deg, #3e4145 0%, #45484d 55%, #4d5055 100%);
  border-color: var(--line-on-dark-color);
}
main > section:not(.bg-ink):not(.hero):not(.page-hero) .team-photo .mono { color: rgba(255, 255, 255, .28); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .team-photo .tag,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .team-role { color: var(--on-dark-2) !important; }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .team-body h3 { color: var(--on-dark); }

/* Formularfelder */
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field input,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field select,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field textarea { color: var(--on-dark); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field select option { color: #2f3134; }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field input:focus,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field select:focus,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .field textarea:focus { border-bottom: 1px solid var(--on-dark); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .consent input { accent-color: var(--on-dark); }

/* ---------- Links & Buttons auf Anthrazit: weiß ---------- */
main > section:not(.bg-ink):not(.hero):not(.page-hero) .link-arrow,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .prose a,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .office .row a,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .consent a { color: var(--on-dark); border-color: var(--on-dark); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .btn-ghost,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .btn-primary { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
main > section:not(.bg-ink):not(.hero):not(.page-hero) .btn-ghost:hover,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .btn-primary:hover { background: var(--on-dark); color: var(--dark-1); }

/* ---------- Gelbe Hinweise & Platzhalter bleiben gelb mit dunkler Schrift ---------- */
main > section:not(.bg-ink):not(.hero):not(.page-hero) mark.ph,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .draft-note,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .draft-note *,
main > section:not(.bg-ink):not(.hero):not(.page-hero) .form-status { color: #2f3134; }