/* Gemeinsames Blatt-Layout der dunklen Einzelseiten: /changelog und /update.
   Seit 2026-08-31 ausgelagert - vorher lag es inline in changelog.html und
   waere fuer /update ein zweites Mal gepflegt worden. */
  :root {
    --ink: #0E1A1F;
    --petrol: #16252C;
    --paper: #F4EFE4;
    --cream: #EFE7D4;
    --line: rgba(196,165,103,0.28);
    --brass: #C4A567;
    /* Gold-Knopf auf dunklem Grund. Flaches --brass ist die Fläche (Logo,
       Aufzählungspunkte, Marken-Badge), --brass-knopf der Knopf. Wert
       identisch mit brassKnopf in den SV_TOKENS (public/index.html) und mit
       den lokalen --brass-knopf-Deklarationen der übrigen dunklen Seiten -
       bei Änderung dort mitziehen.
       Nachgetragen 28.09.2026: /update war die einzige Seite ohne diesen
       Wert und hatte deshalb als einzige einen flachen Gold-Knopf. */
    --brass-knopf: linear-gradient(180deg,#D6B470 0%,#967E4E 100%);
    /* Kaufen-CTA seit 29.08.2026 im Blau der Hero-Headline ("Fertig."),
       Gold bleibt der Demo/Sekundaer-Aktion vorbehalten. Wert identisch mit
       CTA_BLAU in landing.jsx - bei Aenderung dort mitziehen. */
    --cta: linear-gradient(180deg, #cfe1f7 0%, #a5c6ee 100%);
    --moss: #6B8F6A;
    --ember: #FF8555;
    --serif:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
    --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: "Roboto Mono", ui-monospace, monospace;
  }
  html, body { margin: 0; padding: 0; background: var(--ink); font-family: var(--sans); color: var(--paper); min-height: 100vh; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }

  .wrap { min-height: 100vh; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; padding: 48px 32px; }
  header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .brand { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.4px; }
  .brand-mark { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--brass); margin-top: 2px; }
  .topnav{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:14px 26px;flex-wrap:wrap;padding:28px 10%;border-bottom:1px solid var(--line);background:rgba(14,26,31,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .brandwrap{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
  .logo{width:28px;height:28px;border-radius:50%;background:var(--brass);color:var(--ink);display:grid;place-items:center;font-family:var(--serif);font-size:18px;font-weight:500}
  .bt{display:flex;flex-direction:column;line-height:1.1}
  .bname{font-family:var(--serif);font-size:18px;letter-spacing:-.3px;color:var(--paper)}
  .bsub{font-size:10px;letter-spacing:2px;text-transform:uppercase;opacity:.55;margin-top:2px;color:var(--paper)}
  .menu{display:flex;align-items:center;gap:32px;flex-wrap:wrap;font-size:13px}
  .menu a{color:rgba(244,239,228,.75);text-decoration:none;white-space:nowrap}
  .menu a:hover{color:var(--paper)}
  .menu a.active{color:var(--brass)}
  .menu a.navcta{background:var(--cta);color:var(--ink);padding:10px 20px;border-radius:2px;font-weight:500;letter-spacing:.3px}
  .menu a.navcta:hover{filter:brightness(1.05)}
  @media(max-width:760px){.topnav{padding:16px 20px}.menu{gap:14px 18px}.bsub{display:none}.logo{width:24px;height:24px;font-size:15px}.bname{font-size:16px}}

  main { flex: 1; padding: 56px 0 32px; }

  h1 { font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1.1; letter-spacing: -1px; margin: 0 0 20px; }
  h1 em { font-style: italic; color: var(--brass); }

  .lead { font-size: 16px; line-height: 1.6; color: rgba(244,239,228,0.78); margin-bottom: 16px; max-width: 600px; }

  .hint { font-size: 13px; line-height: 1.6; color: rgba(244,239,228,0.6); background: rgba(196,165,103,0.06); border-left: 3px solid var(--brass); padding: 14px 18px; margin-bottom: 44px; max-width: 600px; }
  .hint code { font-family: var(--mono); color: var(--brass); font-size: 12px; }

  .release { padding: 24px 0; border-top: 1px solid var(--line); }
  .release:first-of-type { border-top: none; }
  .release-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .release-ver { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.5px; }
  .release-date { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(244,239,228,0.5); }
  .release-badge { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 3px 9px; border: 1px solid rgba(196,165,103,0.35); color: var(--brass); background: rgba(196,165,103,0.1); align-self: center; }

  ul.changes { list-style: none; margin: 0; padding: 0; }
  ul.changes li { position: relative; padding: 6px 0 6px 26px; font-size: 14px; line-height: 1.55; color: rgba(244,239,228,0.86); }
  ul.changes li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
  ul.changes li .tag { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 1px 7px; margin-right: 8px; border-radius: 2px; vertical-align: middle; }
  .tag.neu { background: rgba(107,143,106,0.2); color: #a9d3a8; }
  .tag.fix { background: rgba(255,133,85,0.16); color: #ffb495; }
  .tag.verbessert { background: rgba(196,165,103,0.16); color: var(--brass); }

  /* Die frueheren footer-Regeln sind am 24.09.2026 entfallen. Sie stammen aus der Zeit,
     als changelog.html und update.html ihren eigenen Fussbereich hatten. Seit der
     Vereinheitlichung am 20.09.2026 steht dort `footer.svf` aus sv-fuss.css - und das
     hier war eine ELEMENT-Regel: `.svf` deklariert kein `display`, also gewann
     `footer{display:flex}` und legte die drei Fuss-Zeilen nebeneinander statt
     untereinander. Auf /changelog und /update sah der Fuss deshalb zerrissen aus
     (Norman, 24.09.2026: "beim log ist der footer kaputt"). Ersatzlos weg; sv-fuss.css
     bringt alles mit, was der Fussbereich braucht. */

  @media (max-width: 600px) {
    .wrap { padding: 32px 20px; }
    h1 { font-size: 34px; }
  }