/* Analog TYPEALIAS – eigenständige Seite, Farben wie screenfox.de (Kontraste WCAG AA) */
:root {
  color-scheme: light dark;
  --bg: #ffffff; --text: #444444; --heading: #313538; --muted: #65686d; --link: #9c2416; --link-hover: #c4321f;
  --accent: #c8331f; --border: #e4e4e4; --code-bg: #f7f7f7; --new-bg: #fdf0ee; --new-border: #e34735; --focus: #9c2416;
  --top: #2f3338;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1f22; --text: #c9cccf; --heading: #eef0f1; --muted: #a3a7aa; --link: #f08a7e; --link-hover: #ff9c90;
    --border: #33373c; --code-bg: #25282c; --new-bg: #3a2522; --focus: #ffb3a9;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.6 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, .ta-list:focus-visible, main:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus:not(:focus-visible) { outline: none; }
.ta-skip { position: absolute; left: -9999px; top: .5rem; padding: .5rem 1rem; background: var(--bg); z-index: 10; }
.ta-skip:focus { left: .5rem; }
.ta-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ta-header { border-top: 6px solid var(--top); border-bottom: 1px solid var(--border); padding: 1rem; }
.ta-header, main, .ta-footer { max-width: 60rem; margin-inline: auto; }
.ta-logo img { display: block; width: 187px; height: auto; }
main { padding: 1.5rem 1rem 2rem; }
h1, h2 { color: var(--heading); font-family: "PT Sans", Arial, sans-serif; line-height: 1.2; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin: 0 0 1rem; }
h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
code { background: var(--code-bg); padding: .1em .3em; border-radius: 3px; }
.ta-meta { padding-left: 1.2rem; }
.ta-meta li { margin: .35rem 0; }
.ta-meta span { color: var(--muted); }
.ta-button { display: inline-block; padding: .35rem .9rem; background: var(--accent); color: #ffffff; border-radius: 3px; font-weight: 600; text-decoration: none; }
.ta-button:hover { background: #a92a19; color: #ffffff; }
.ta-list { margin: 0; padding: 1rem; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--border); border-radius: 3px;
  font: .875rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
.ta-line, .ta-comment { display: inline-block; min-width: 100%; }
.ta-line.is-new { background: var(--new-bg); box-shadow: inset 3px 0 0 var(--new-border); padding-left: .5rem; margin-left: -.5rem; }
.ta-comment { color: var(--muted); font-style: italic; }
.ta-error { padding: 1rem; border-left: 4px solid var(--accent); background: var(--new-bg); }
.ta-footer { padding: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .875rem; }