/* Gemeinsames Aussehen für ppwr-autopilot.de.
   Gleiche Farben wie die Bedienoberfläche des Programms, Systemschriften,
   keine externen Schriften und keine externen Skripte. */
:root{
  --grund:#f6f6f3;
  --karte:#ffffff;
  --strich:#e2e1da;
  --strich-stark:#cfcec5;
  --text:#1c1c1a;
  --leise:#63635c;
  --gruen:#2f5d3f;
  --gruen-tief:#254b33;
  --gruen-hell:#eaf1ec;
  --sand:#f0eee7;
  --warn-hell:#fbf3e3;
  --warn-strich:#ecdcbb;
  --warn-text:#5f4a20;
  --radius:14px;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen-tief)}
.huelle{max-width:1120px;margin:0 auto;padding:0 24px}
.eng{max-width:820px}

header.kopf{position:sticky;top:0;z-index:40;background:rgba(246,246,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--strich)}
.kopf .reihe{display:flex;align-items:center;gap:24px;height:68px}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-weight:700;letter-spacing:-.01em}
.marke img{width:30px;height:30px;border-radius:7px}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.kopf nav a{color:var(--leise);text-decoration:none;font-size:15px}
.kopf nav a.knopf{color:#fff}
.kopf nav a:hover{color:var(--text)}

.knopf{display:inline-block;background:var(--gruen);color:#fff;text-decoration:none;padding:11px 20px;border-radius:9px;font-weight:600;font-size:15px;border:1px solid var(--gruen);cursor:pointer;font-family:inherit;transition:background .15s}
.knopf:hover{background:var(--gruen-tief)}
.knopf:disabled{opacity:.4;cursor:not-allowed}
.knopf.leer{background:transparent;color:var(--text);border-color:var(--strich-stark)}
.knopf.leer:hover{background:var(--sand)}
.knopf.gross{padding:14px 26px;font-size:16px}

h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.12;letter-spacing:-.025em;font-weight:700;margin:0}
h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.02em;font-weight:700;margin:0}
h3{font-size:1.1rem;font-weight:650;margin:0 0 10px}
.lauf{margin-top:16px;max-width:66ch;color:var(--leise);font-size:1.05rem}
.karte{background:var(--karte);border:1px solid var(--strich);border-radius:var(--radius);padding:28px}
.hinweis{display:inline-block;background:var(--gruen-hell);color:var(--gruen-tief);border:1px solid #cfe0d5;border-radius:999px;padding:6px 15px;font-size:13.5px;font-weight:600}
.merk{background:var(--warn-hell);border:1px solid var(--warn-strich);border-radius:var(--radius);padding:26px;color:var(--warn-text)}
.merk h3{color:#4a3814}

footer{border-top:1px solid var(--strich);padding:40px 0;font-size:14px;color:var(--leise);margin-top:80px}
footer .reihe{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
footer nav{margin-left:auto;display:flex;gap:20px}
footer a{color:var(--leise)}

@media(max-width:900px){
  /* Kopfzeile darf umbrechen, sonst ist auf dem Telefon kein Navigationspunkt
     sichtbar und der Besucher kommt vom Fragebogen nicht mehr weiter. */
  /* 24 px seitlich mit angeben: .huelle wird sonst von dieser Regel überschrieben
     und die ganze Kopfzeile klebte auf dem Telefon am linken Rand. */
  .kopf .reihe{height:auto;padding:12px 24px;flex-wrap:wrap;gap:10px 16px}
  .kopf nav{margin-left:0;order:3;width:100%;gap:10px 16px;font-size:14px;flex-wrap:wrap}
  .kopf nav a.knopf{order:2;margin-left:auto;padding:9px 15px;font-size:14.5px}
  /* Auf schmalen Geräten nur die zwei Punkte, die der Besucher wirklich
     braucht. "Die Pflicht" und "So läuft es" brachen sonst zweizeilig um. */
  .kopf nav a.nurbreit{display:none}
  .nurgross{display:none}
  .marke{font-size:15.5px}
}

/* ---- Wissensseiten (ab 28.08.2026) ---------------------------------- */
.beitrag{max-width:72ch}
.beitrag p{margin:0 0 15px}
.beitrag h2{font-size:1.35rem;margin:38px 0 12px;letter-spacing:-.015em}
.beitrag h3{font-size:1.05rem;margin:26px 0 8px}
.beitrag ul,.beitrag ol{margin:0 0 16px;padding-left:22px}
.beitrag li{margin-bottom:8px}
.stand{color:var(--leise);font-size:13px;letter-spacing:.07em;text-transform:uppercase;margin:0 0 12px}
.antwort{background:var(--gruen-hell);border:1px solid #cfe0d5;border-left:4px solid var(--gruen);
  border-radius:10px;padding:18px 20px;margin:24px 0 8px;color:var(--gruen-tief)}
.antwort strong{color:var(--gruen-tief)}
blockquote.zitat{margin:0 0 16px;padding:14px 18px;background:var(--sand);
  border-left:3px solid var(--strich-stark);border-radius:0 8px 8px 0;font-size:.97rem}
blockquote.zitat p:last-child{margin-bottom:0}
blockquote.zitat cite{display:block;margin-top:8px;font-style:normal;font-size:.86rem;color:var(--leise)}
.tabhuelle{overflow-x:auto;margin:0 0 18px}
table.tab{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--karte)}
table.tab th,table.tab td{border-bottom:1px solid var(--strich);padding:10px 12px;text-align:left;vertical-align:top}
table.tab th{font-weight:650;background:var(--sand)}
.quellen{margin-top:44px;border-top:1px solid var(--strich);padding-top:22px;font-size:.92rem;color:var(--leise)}
.quellen h2{font-size:1.05rem;margin:0 0 10px;color:var(--text)}
.quellen ol{padding-left:20px}
.quellen a{word-break:break-word}
.weiter{margin-top:36px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
a.kachel{display:block;background:var(--karte);border:1px solid var(--strich);border-radius:var(--radius);
  padding:18px 20px;text-decoration:none;color:var(--text);transition:border-color .15s,background .15s}
a.kachel:hover{border-color:var(--strich-stark);background:var(--sand)}
a.kachel .art{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);margin-bottom:5px}
a.kachel .titel{display:block;font-weight:650;line-height:1.35}
a.kachel .dazu{display:block;margin-top:6px;font-size:.9rem;color:var(--leise)}
.fussnote{margin-top:34px;font-size:.9rem;color:var(--leise);border-top:1px solid var(--strich);padding-top:16px}