/* pgfakt.de – Entwurf Umstellung auf minifakt (Stand 29.10.2026)
   Erscheinungsbild wie das alte PGfakt: dunkelgrauer Rahmen, Düne im Kopf, helle Inhaltsfläche,
   Orange #c25300 für Links. Schrift aber mit kräftigem Kontrast (keine graue Schrift auf Hell). */
:root {
  --rahmen: #333333;      /* alter .dklbg */
  --mittel: #666666;      /* alter .mittelbg */
  --hell: #f0f0f0;        /* alter .hellbg / .text */
  --flaeche: #f0f0f0; --karte: #ffffff;
  --ink: #1a1a1a; --ink2: #262626; --auf-dunkel: #f4f4f4;
  --line: #bdbdbd; --orange: #b34d00; --orange-hell: #ffb36b; --orange-soft: #fbe6d4;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rahmen: #1e1e1e; --flaeche: #2b2b2b; --karte: #333333;
    --ink: #f2f2f2; --ink2: #e6e6e6; --line: #555555;
    --orange: #ff9d4d; --orange-soft: #3d2614;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --rahmen: #1e1e1e; --flaeche: #2b2b2b; --karte: #333333;
  --ink: #f2f2f2; --ink2: #e6e6e6; --line: #555555;
  --orange: #ff9d4d; --orange-soft: #3d2614;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--rahmen); color: var(--ink);
  font: 16px/1.6 Verdana, "DejaVu Sans", "Lucida Grande", Tahoma, Arial, sans-serif; }
a { color: var(--orange); font-weight: 600; }
a:hover { text-decoration-thickness: 2px; }
p, li { max-width: 72ch; }

/* Seite als Kasten auf dunklem Grund, wie die alte 75-%-Tabelle */
.seite { max-width: 980px; margin: 32px auto; background: var(--flaeche); }

/* Kopf: Düne links, Schriftzug rechts – zwei Bänder hell/mittel wie früher */
.kopf { display: grid; grid-template-columns: 400px 1fr; }
.kopf img { display: block; width: 400px; height: auto; }
.kopf .oben { background: var(--hell); display: flex; align-items: flex-end; padding: 0 0 6px 10px; }
.kopf .unten { background: var(--mittel); display: flex; align-items: center; padding: 0 0 0 14px; }
.kopf .name { font-size: 56px; font-weight: bold; color: #4a4a4a; line-height: 1; text-decoration: none; }
.kopf .wort { font-size: 24px; font-weight: bold; color: #ffffff; line-height: 1.35; }
.kopf .wort span { color: var(--orange-hell); }

nav.haupt { background: var(--rahmen); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
nav.haupt a { color: var(--auf-dunkel); text-decoration: none; }
nav.haupt a:hover, nav.haupt a[aria-current] { color: var(--orange-hell); text-decoration: underline; }

.hinweis { background: var(--orange-soft); border-left: 6px solid var(--orange); padding: 12px 20px;
  font-weight: bold; color: var(--ink); }

main { padding: 8px 24px 24px; }

.held { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px;
  align-items: center; padding: 20px 0 8px; }
.held h1 { font-size: 30px; line-height: 1.2; margin: 0 0 12px; }
.held .lead { font-size: 17px; color: var(--ink2); margin: 0 0 18px; }
.held img { width: 100%; height: auto; border: 1px solid var(--line); }
.held figcaption { font-size: 14px; color: var(--ink2); margin-top: 4px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf { display: inline-block; padding: 10px 16px; font-weight: bold; text-decoration: none;
  border: 2px solid var(--orange); }
.knopf.voll { background: var(--orange); color: #ffffff; }
.knopf.leer { color: var(--orange); background: transparent; }
:root[data-theme="dark"] .knopf.voll { color: #1a1a1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knopf.voll { color: #1a1a1a; } }

/* Abschnittsköpfe als dunkle Bänder wie die alten Zwischenzeilen */
section { padding: 0 0 12px; }
h2 { font-size: 20px; margin: 28px -24px 14px; padding: 10px 24px; background: var(--rahmen);
  color: var(--auf-dunkel); }
h3 { font-size: 17px; margin: 20px 0 6px; }

.zeitleiste { list-style: none; padding: 0; margin: 0 0 0 6px; border-left: 3px solid var(--orange); }
.zeitleiste li { position: relative; padding: 0 0 14px 20px; max-width: none; }
.zeitleiste li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px;
  background: var(--flaeche); border: 3px solid var(--orange); }
.zeitleiste b { display: block; }

table.vergleich { width: 100%; border-collapse: collapse; background: var(--karte); font-size: 15px; }
table.vergleich th, table.vergleich td { border: 1px solid var(--line); padding: 7px 10px;
  text-align: left; vertical-align: top; }
table.vergleich thead th { background: var(--mittel); color: #ffffff; }
table.vergleich td.ja { font-weight: bold; }
.tabelle { overflow-x: auto; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.karte { background: var(--karte); border: 1px solid var(--line); border-top: 4px solid var(--orange);
  padding: 14px 16px; }
.karte h3 { margin-top: 0; }
.karte p { margin: 0 0 8px; }

/* Pfeil-Liste wie das alte .liste mit drot_pfeil.gif */
ol.schritte li { margin: 0 0 10px; }
ul.pfeile { list-style: none; padding-left: 0; }
ul.pfeile li { padding-left: 22px; position: relative; margin: 0 0 6px; }
ul.pfeile li::before { content: "»"; position: absolute; left: 4px; color: var(--orange); font-weight: bold; }

.kasten { background: var(--karte); border-left: 4px solid var(--orange); padding: 12px 16px; margin: 16px 0; }
.kasten p { margin: 0 0 6px; }
code { background: var(--orange-soft); padding: 1px 5px; font-size: .9em; }
pre { overflow-x: auto; }

.downloads { list-style: none; padding: 0; }
.downloads li { background: var(--karte); border: 1px solid var(--line); padding: 10px 14px;
  margin: 0 0 8px; max-width: none; }
.downloads b { display: block; }

.unterschrift { display: flex; gap: 12px; align-items: center; }

footer { background: var(--rahmen); color: var(--auf-dunkel); font-size: 14px; padding: 14px 24px 18px; }
footer p { margin: 4px 0; max-width: none; }
footer a { color: var(--orange-hell); margin-right: 14px; }

@media (max-width: 760px) {
  .seite { margin: 0; }
  .kopf { grid-template-columns: 1fr; }
  .kopf img { width: 100%; }
  .kopf .oben, .kopf .unten { padding: 10px 16px; }
  .kopf .name { font-size: 42px; }
  .held { grid-template-columns: 1fr; }
  main { padding: 8px 16px 20px; }
  h2 { margin-left: -16px; margin-right: -16px; padding-left: 16px; }
}
.kopf .b1 { background: var(--hell); }
.kopf .b2 { background: var(--mittel); }
.kopf .wort span { color: #ffd2a6; }

/* Herkunft: Logo der Ralf Burger AG neben dem Text, wie im alten Block „Projektleitung“ */
.herkunft { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start;
  background: var(--karte); border: 1px solid var(--line); padding: 14px 16px; margin: 0 0 16px; }
.herkunft img { flex: 0 0 auto; background: #ffffff; padding: 4px; }
.herkunft p { margin: 0; flex: 1 1 280px; }