/* Exe AI — the frame every page shares: tokens, header with its three lists (menu, language,
   download), page head and footer. The site pages load it before stil.css; Help and Docs load it before their own CSS.
   One source, so the frame is identical everywhere. */

/* Tokens from the Figma Baukasten (Knopf: inhalt #1c1c1a, feld #2d2d2a, text #ecebe6, leise #b1aea6, radius 9).
   Type: two faces only — the system face of the device (SF Pro on Apple, Segoe UI on Windows) and one monospace face
   (SF Mono where it exists). Nothing is shipped. One appearance, no switch. */
:root {
  color-scheme: dark;
  --bg: #1c1c1a; --bg-tief: #151514; --feld: #2d2d2a; --feld-hell: #3b3a36;
  --linie: rgba(236, 235, 230, 0.10); --linie-stark: rgba(236, 235, 230, 0.18);
  --text: #ecebe6; --leise: #b1aea6; --still: #8a877c;
  --radius: 9px; --radius-gross: 16px;
  --schrift: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --fest: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --buehne: min(1600px, 100% - 96px);
  --kopf: 56px;
}
.buehne { width: var(--buehne); margin-inline: auto; }

/* ---- header ---- */
header { position: sticky; top: 0; z-index: 30; height: var(--kopf); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--linie); font-family: var(--schrift); line-height: 1.55; -webkit-font-smoothing: antialiased; }
header a, footer a, .titelkopf a { color: inherit; text-decoration: none; }
header svg, footer svg { display: block; }
header summary { list-style: none; }
header summary::-webkit-details-marker { display: none; }
.kopf { height: 100%; display: flex; align-items: center; gap: 24px; }
.marke { display: flex; align-items: center; }
.marke img { height: 28px; width: auto; display: block; }
.kopf nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--leise); }
.kopf .links { display: flex; align-items: center; }
.kopf .links a { padding: 0 14px; line-height: 16px; }
.kopf .links a + a { border-left: 1px solid var(--linie-stark); }
.kopf nav a:hover, .kopf .links a[aria-current] { color: var(--text); }

/* ---- buttons: the Baukasten Knopf (radius 9, 13 px medium, 8/14 padding) ---- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; line-height: 18px; background: var(--feld); color: var(--text); white-space: nowrap; transition: background .15s; }
.knopf:hover { background: var(--feld-hell); }
.knopf.primaer { background: var(--text); color: var(--bg); }
.knopf.primaer:hover { background: #fff; }
.knopf.gross { padding: 12px 20px; font-size: 14px; }
.knopf svg { width: 15px; height: 15px; }

/* ---- the three lists in the header: menu (narrow screens), language, download ----
   Each one is a <details>: it works without script, kopf.js only closes it on a click outside and on Escape. */
.sprache, .laden, .menue { position: relative; }
.sprache summary, .menue summary { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--radius); font-size: 13px; color: var(--leise); cursor: pointer; }
.sprache summary:hover, .sprache[open] summary, .menue summary:hover, .menue[open] summary { color: var(--text); background: var(--feld); }
.sprache summary:focus-visible, .menue summary:focus-visible, .laden summary:focus-visible { outline: 2px solid var(--leise); outline-offset: 2px; }
.sprache summary > svg:first-child, .menue summary svg { width: 16px; height: 16px; }
.sprache .pfeil, .laden .pfeil { width: 13px; height: 13px; transition: transform .15s; }
.sprache[open] .pfeil, .laden[open] .pfeil { transform: rotate(180deg); }
/* The gap to the download button is half of the usual 20 px: the summary has 10 px of padding of its own. */
.sprache { margin-right: -5px; }
.laden summary { cursor: pointer; }
.sprache ul, .laden ul, .menue ul { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; min-width: 170px; background: var(--bg-tief); border: 1px solid var(--linie-stark); border-radius: var(--radius); box-shadow: 0 20px 50px -20px #000; }
.laden ul { min-width: 210px; }
.sprache li a, .laden li a, .menue li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--leise); }
.sprache li a, .menue li a { justify-content: space-between; }
.laden li a { padding: 9px 10px; color: var(--text); }
.sprache li a:hover, .menue li a:hover { background: var(--feld); color: var(--text); }
.laden li a:hover { background: var(--feld); }
.sprache li a[aria-current], .menue li a[aria-current] { color: var(--text); }
.sprache li a > svg { width: 14px; height: 14px; }
.sprache li .name { display: flex; align-items: center; gap: 10px; }
/* Flags: the 2:1 drawings of zeichen/flag-*.svg with small rounded corners and a hairline, so the dark stripe does not melt into the list. */
.sprache .flagge { width: 22px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px var(--linie-stark); flex: none; display: block; }
.laden li a small { margin-left: auto; font-size: 12px; color: var(--still); }
/* The Apple mark is a text glyph and draws smaller than its box, so it gets a bigger font than the Windows mark has size. */
.laden li .os { width: 18px; height: 18px; text-align: center; font-size: 20px; line-height: 18px; flex: none; }
.laden li svg.os { width: 15px; height: 15px; margin-inline: 1.5px; }
/* The menu list exists only on a narrow screen; kopf.js builds it from the links and marks the page with .mit-menue. */
.menue { display: none; }

/* ---- page head: the page's own mark, then the big title, then one line ---- */
.titelkopf { padding: 36px 0 28px; display: grid; gap: 12px; justify-items: start; }
.titelkopf .titel { margin: 0; display: flex; align-items: center; gap: .2em; font-size: clamp(38px, 4vw, 56px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; color: var(--text); }
/* The marks are cropped to their drawing, so their left edge sits exactly under the left edge of the logo. */
.titelkopf .titel svg, .titelkopf .titel img { height: .78em; width: auto; flex: none; display: block; }
.titelkopf .unter { margin: 0; color: var(--leise); font-size: 18px; line-height: 1.55; max-width: 90ch; }
/* Code in the line below the title must not make the head taller than on the other pages. */
.titelkopf .unter code { line-height: 1; }

/* ---- footer ---- */
footer { flex: none; height: 72px; display: grid; align-items: center; border-top: 1px solid var(--linie); font: 13px/1.55 var(--schrift); color: var(--still); }
footer .buehne { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer nav { display: flex; gap: 20px; }
footer nav a:hover { color: var(--text); }

@media (max-width: 1100px) {
  :root { --buehne: min(1600px, 100% - 48px); }
}
/* Six links and two lists do not fit beside the logo below 900 px: the links go into the menu list. */
@media (max-width: 900px) {
  .mit-menue .kopf .links { display: none; }
  .mit-menue .menue { display: block; }
  .kopf nav { gap: 12px; }
}
@media (max-width: 720px) {
  :root { --buehne: min(1600px, 100% - 32px); --kopf: 52px; }
  .marke img { height: 26px; }
  footer { height: auto; min-height: 72px; padding: 16px 0; }
}
@media (max-width: 480px) {
  .sprache summary .name { display: none; }
}
@media print { header, footer { display: none !important; } }

/* JetBrains Mono (SIL Open Font License, schrift/OFL-jetbrains-mono.txt) for file names: the same face on every system. */
@font-face { font-family: 'JetBrains Mono'; src: url('/schrift/jetbrains-mono-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root { --mono-web: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }

/* Behind every page on screen (print keeps each page's own colours): the grey of the site with a warm light from the top left, a cool one from the bottom right and a fine grain. */
@media screen {
:root:root { background: radial-gradient(1100px 520px at 12% -6%, rgba(254, 227, 134, .11), transparent 62%), radial-gradient(900px 620px at 105% 110%, rgba(120, 130, 210, .08), transparent 60%), var(--bg); background-attachment: fixed; }
html body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
}