/* =============================================================================
   PSST! — Patrick Semmlers Software-Tools
   Stylesheet der Website. Die Farbwelt stammt aus dem Logo:
   Türkis (Klammern), Violett (Wortmarke), Orange (Semikolon).

   Aufbau
     1. Schriften
     2. Design-Tokens (dunkel als Grundlage, hell als Überschreibung)
     3. Grundlagen und Layout
     4. Kopfbereich, Logo, Navigation, Umschalter
     5. Typografie
     6. Bausteine
     7. Fußbereich
     8. Hilfsklassen, Bewegungsreduktion, Druck

   Die Klassen der Navigation (site-nav, site-nav-list-level-1, …) erzeugt der
   SiteBuilder. Sie werden hier nur gestaltet, nicht umbenannt.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Schriften

   Cascadia Code liegt selbst gehostet vor, als variable WOFF2-Datei mit der
   Gewichtsachse 200–700 und auf den lateinischen Zeichenvorrat beschnitten (47 KB).
   `local()` steht bewusst zuerst: Wer die Schrift installiert hat, lädt nichts nach.
   Kennt ein Browser kein WOFF2, greift der Monospace-Stapel des Systems.
-------------------------------------------------------------------------------- */
@font-face {
  font-family: "Cascadia Code";
  src:
    local("Cascadia Code"),
    url("/assets/fonts/CascadiaCode-VF.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Design-Tokens

   Der dunkle Modus ist die Grundlage. Hell greift, wenn das Betriebssystem es
   verlangt oder der Umschalter `data-theme="light"` gesetzt hat.
-------------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Marke */
  --psst-teal: #00d4aa;
  --psst-violet: #9d6ff0;
  --psst-orange: #ff8a3d;

  /* Flächen */
  --c-bg: #0f1117;
  --c-bg-tint: #131725;
  --c-surface: #171a24;
  --c-surface-2: #1e222e;
  --c-surface-hover: #242938;
  --c-border: #2a2f3d;
  --c-border-strong: #3a4152;

  /* Text */
  --c-text: #e6e9f0;
  --c-text-muted: #a2a9ba;
  --c-text-faint: #79808f;

  /* Akzente */
  --c-accent: var(--psst-teal);
  --c-accent-ink: #00d4aa;     /* Türkis für Text und Rahmen */
  --c-accent-on: #06231d;      /* Text auf türkiser Fläche */
  --c-accent-soft: rgba(0, 212, 170, 0.12);
  --c-brand: var(--psst-violet);
  --c-brand-ink: #b08cf5;
  --c-brand-soft: rgba(157, 111, 240, 0.16);
  --c-highlight: var(--psst-orange);
  --c-highlight-soft: rgba(255, 138, 61, 0.14);

  /* Logo (wird vom eingebetteten SVG im Kopfbereich ausgewertet) */
  --psst-logo-brace: var(--psst-teal);
  --psst-logo-word: var(--psst-violet);
  --psst-logo-accent: var(--psst-orange);

  /* Sichtbarkeit der beiden Symbole im Farbschema-Umschalter */
  --icon-sun: block;
  --icon-moon: none;

  /* Maße */
  --layout-max: 72rem;
  --layout-prose: 46rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --header-height: 4.25rem;

  --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", ui-monospace, "Cascadia Mono", Consolas,
    "SF Mono", "Liberation Mono", monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Helle Tokens. Bewusst zweimal notiert, damit sowohl die Systemvorgabe als auch
   der Umschalter greifen. */
:root[data-theme="light"] {
  color-scheme: light;

  --psst-violet: #7137c8;
  --psst-orange: #d1560a;

  --c-bg: #f6f7fb;
  --c-bg-tint: #eef1f8;
  --c-surface: #ffffff;
  --c-surface-2: #f1f3f9;
  --c-surface-hover: #e8ecf5;
  --c-border: #dde1ec;
  --c-border-strong: #c3c9da;

  --c-text: #161922;
  --c-text-muted: #545c6e;
  --c-text-faint: #737b8d;

  --c-accent-ink: #00806a;
  --c-accent-on: #04241e;
  --c-accent-soft: rgba(0, 128, 106, 0.1);
  --c-brand-ink: #5d2ba6;
  --c-brand-soft: rgba(113, 55, 200, 0.1);
  --c-highlight-soft: rgba(209, 86, 10, 0.1);

  --shadow-sm: 0 1px 2px rgba(22, 25, 34, 0.06);
  --shadow-md: 0 12px 32px rgba(22, 25, 34, 0.1);
  --shadow-lg: 0 24px 60px rgba(22, 25, 34, 0.14);

  --icon-sun: none;
  --icon-moon: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --psst-violet: #7137c8;
    --psst-orange: #d1560a;

    --c-bg: #f6f7fb;
    --c-bg-tint: #eef1f8;
    --c-surface: #ffffff;
    --c-surface-2: #f1f3f9;
    --c-surface-hover: #e8ecf5;
    --c-border: #dde1ec;
    --c-border-strong: #c3c9da;

    --c-text: #161922;
    --c-text-muted: #545c6e;
    --c-text-faint: #737b8d;

    --c-accent-ink: #00806a;
    --c-accent-on: #04241e;
    --c-accent-soft: rgba(0, 128, 106, 0.1);
    --c-brand-ink: #5d2ba6;
    --c-brand-soft: rgba(113, 55, 200, 0.1);
    --c-highlight-soft: rgba(209, 86, 10, 0.1);

    --shadow-sm: 0 1px 2px rgba(22, 25, 34, 0.06);
    --shadow-md: 0 12px 32px rgba(22, 25, 34, 0.1);
    --shadow-lg: 0 24px 60px rgba(22, 25, 34, 0.14);

    --icon-sun: none;
    --icon-moon: block;
  }
}

/* -----------------------------------------------------------------------------
   3. Grundlagen und Layout
-------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Der Farbschimmer im Hintergrund liegt in einer eigenen, fest verankerten Ebene.
   Über `background-attachment: fixed` am body zeichnet Chromium ihn zusammen mit
   dem `backdrop-filter` der Kopfleiste beim Scrollen fehlerhaft. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(58rem 30rem at 10% -14%, var(--c-brand-soft), transparent 65%),
    radial-gradient(46rem 26rem at 94% -4%, var(--c-accent-soft), transparent 62%);
  background-repeat: no-repeat;
}

main {
  flex: 1 0 auto;
  padding-block: clamp(2rem, 1rem + 4vw, 4rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}

.wrap {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-prose {
  max-width: calc(var(--layout-prose) + 2 * var(--gutter));
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--c-accent-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--c-brand-soft);
  color: var(--c-text);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 60;
  transform: translateY(-130%);
  padding: 0.625rem 1rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--c-accent);
  color: var(--c-accent-on);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   4. Kopfbereich, Logo, Navigation, Umschalter
-------------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header {
    background: var(--c-bg);
  }
}

.site-header-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-height);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-logo-mark {
  display: block;
  width: auto;
  height: 1.8rem;
  transition: transform 0.25s var(--ease);
}

.site-logo:hover .site-logo-mark {
  transform: translateY(-1px);
}

.site-logo-claim {
  display: none;
  padding-left: 0.75rem;
  border-left: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

@media (min-width: 62em) {
  .site-logo-claim {
    display: block;
  }
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Quadratische Schaltflächen im Kopfbereich: Farbschema und Menütaste. */
.header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.header-button:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-border-strong);
  color: var(--c-accent-ink);
}

.header-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.theme-toggle .icon-sun {
  display: var(--icon-sun);
}

.theme-toggle .icon-moon {
  display: var(--icon-moon);
}

/* Ohne JavaScript gibt es kein aufklappbares Menü; dann bleibt die Taste verborgen
   und die Navigation steht dauerhaft offen. */
html:not(.js) .nav-toggle {
  display: none;
}

.nav-toggle-bars {
  position: relative;
  width: 1.125rem;
  height: 0.875rem;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; margin-top: -1px; }
.nav-toggle-bars span:nth-child(3) { bottom: 0; }

.site-header.is-nav-open .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-nav-open .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.site-header.is-nav-open .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Navigation: gemeinsame Grundlagen ------------------------------------- */
.site-nav {
  border-top: 1px solid var(--c-border);
}

.site-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die erste Ebene trägt das Seitenraster, weil der Builder innerhalb von
   <nav> keinen zusätzlichen Rahmen erzeugt. Der abgezogene Betrag entspricht der
   Innenabstand der Verweise, damit der erste Eintrag bündig unter dem Logo sitzt. */
.site-nav-list-level-1 {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: max(0px, calc(var(--gutter) - 0.75rem));
}

.site-nav-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.site-nav-link:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
}

.site-nav-item-current > .site-nav-link {
  color: var(--c-accent-ink);
  font-weight: 600;
}

.site-nav-item-current-ancestor > .site-nav-link {
  color: var(--c-text);
}

/* Der Textzusatz für externe Verweise bleibt Hilfstechnologien vorbehalten;
   sichtbar wird stattdessen ein kleines Symbol. */
.nav-external-indicator {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-nav-link-external::after {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: var(--icon-external) center / contain no-repeat;
  mask: var(--icon-external) center / contain no-repeat;
}

:root {
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8h-2V5.41L5.7 11.7 4.3 10.3 10.59 4H6V2z'/%3E%3Cpath d='M2 4h3v2H4v8h8v-1h2v3H2V4z'/%3E%3C/svg%3E");
}

/* Aufklapptaste der zweiten Ebene; sie wird von site.js eingefügt. */
.site-nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-text-faint);
  cursor: pointer;
}

.site-nav-sub-toggle:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
}

.site-nav-sub-toggle svg {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform 0.2s var(--ease);
}

.site-nav-item.is-open > .site-nav-sub-toggle svg {
  transform: rotate(180deg);
}

/* --- Navigation: kleine Bildschirme (Hamburger-Menü) ---------------------- */
@media (max-width: 55.999em) {
  /* Auf- und Zuklappen über max-height. Der Umweg über `grid-template-rows: 0fr`
     scheidet aus: Die zweite Ebene besteht aus mehreren Zeilen, von denen die Angabe
     nur die erste erfassen würde. */
  html.js .site-nav {
    border-top-color: transparent;
    transition: border-color 0.25s var(--ease);
  }

  html.js .site-header.is-nav-open .site-nav {
    border-top-color: var(--c-border);
  }

  /* Der Innenabstand wird mit eingeklappt: `max-height: 0` kann die Höhe eines
     Kastens nicht unter seinen Innenabstand drücken, sonst bliebe eine Leiste
     stehen. */
  html.js .site-nav > .site-nav-list {
    max-height: 0;
    padding-block: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.28s var(--ease), padding-block 0.28s var(--ease),
      visibility 0s 0.28s;
  }

  html.js .site-header.is-nav-open .site-nav > .site-nav-list {
    max-height: min(34rem, calc(100vh - var(--header-height) - 1rem));
    padding-block: 0.5rem 0.75rem;
    overflow-y: auto;
    visibility: visible;
    transition: max-height 0.28s var(--ease), padding-block 0.28s var(--ease);
  }

  html:not(.js) .site-nav-list-level-1 {
    padding-block: 0.5rem 0.75rem;
  }

  .site-nav-list-level-1 > .site-nav-item + .site-nav-item {
    border-top: 1px solid var(--c-border);
  }

  .site-nav-list-level-1 > .site-nav-item > .site-nav-link {
    padding-block: 0.85rem;
    font-size: 1.0625rem;
  }

  /* Untermenü als Ziehharmonika. */
  .site-nav-list-level-2 {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.24s var(--ease), visibility 0s 0.24s;
  }

  .site-nav-item.is-open > .site-nav-list-level-2 {
    max-height: 22rem;
    visibility: visible;
    transition: max-height 0.24s var(--ease);
  }

  /* Eine durchgehende Linie am Rand des Untermenüs; der aktive Eintrag legt sein
     eigenes Stück in der Akzentfarbe darüber. */
  .site-nav-list-level-2 {
    margin-left: 0.75rem;
    border-left: 2px solid var(--c-border);
  }

  .site-nav-list-level-2 .site-nav-link {
    padding-left: 1rem;
    font-size: 0.95rem;
  }

  .site-nav-list-level-2 .site-nav-item-current > .site-nav-link {
    margin-left: -2px;
    border-left: 2px solid var(--c-accent);
    /* links eckig, damit das Randstück an die durchgehende Linie anschließt */
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  /* Ohne JavaScript ist die zweite Ebene dauerhaft sichtbar. */
  html:not(.js) .site-nav-list-level-2 {
    max-height: none;
    visibility: visible;
  }
}

/* --- Navigation: ab Tablet-Breite (waagerecht mit Aufklappmenü) ----------- */
@media (min-width: 56em) {
  /* Ab hier steht die Navigation dauerhaft in der Kopfleiste. */
  .nav-toggle {
    display: none;
  }

  .site-nav-list-level-1 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding-block: 0.25rem;
    padding-inline: max(0px, calc(var(--gutter) - 0.85rem));
  }

  .site-nav-list-level-1 > .site-nav-item > .site-nav-link {
    padding-inline: 0.85rem;
  }

  /* Aktive Seite und ihr Zweig bekommen eine türkise Markierung. */
  .site-nav-list-level-1 > .site-nav-item::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: -0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--c-accent);
    transform: scaleX(0);
    transition: transform 0.2s var(--ease);
  }

  .site-nav-list-level-1 > .site-nav-item-current::after,
  .site-nav-list-level-1 > .site-nav-item-current-ancestor::after,
  .site-nav-list-level-1 > .site-nav-item:hover::after,
  .site-nav-list-level-1 > .site-nav-item:focus-within::after {
    transform: scaleX(1);
  }

  .site-nav-list-level-2 {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 15rem;
    margin-top: 0.35rem;
    padding: 0.375rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.4rem);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
      visibility 0s 0.18s;
  }

  .site-nav-list-level-1 > .site-nav-item:hover > .site-nav-list-level-2,
  .site-nav-list-level-1 > .site-nav-item:focus-within > .site-nav-list-level-2,
  .site-nav-list-level-1 > .site-nav-item.is-open > .site-nav-list-level-2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .site-nav-list-level-2 .site-nav-link {
    width: 100%;
    padding: 0.55rem 0.75rem;
  }

  .site-nav-list-level-2 .site-nav-item-current > .site-nav-link {
    background: var(--c-accent-soft);
  }
}

/* -----------------------------------------------------------------------------
   5. Typografie
-------------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  /* Lange Einzelwörter wie "Geburtstagserinnerung" passen sonst auf schmalen
     Bildschirmen nicht in die Zeile. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.15rem);
}

h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
}

h4 {
  font-size: 1.05rem;
}

p {
  margin: 0;
}

a {
  color: var(--c-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--c-text);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:not(pre) > code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-brand-ink);
  /* Dateipfade haben keine natürliche Trennstelle. */
  overflow-wrap: anywhere;
}

kbd {
  padding: 0.1em 0.45em;
  border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}

pre {
  margin: 0;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  line-height: 1.6;
}

/* Kleine Vorzeile über einer Überschrift, im Code-Stil der Marke. */
.eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--c-accent-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "// ";
  color: var(--c-text-faint);
}

.lead {
  color: var(--c-text-muted);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Fließtext einer Inhaltsseite. */
.prose > * + * {
  margin-top: 1.1rem;
}

.prose > h2 {
  margin-top: 2.75rem;
}

.prose > h3 {
  margin-top: 2rem;
}

.prose ul,
.prose ol {
  /* Nur der untere Abstand wird hier festgelegt. Der obere kommt aus `.prose > * + *`;
     ein `margin-block: 0` wäre spezifischer und würde ihn stillschweigend entfernen. */
  margin-bottom: 0;
  padding-left: 1.35rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose ::marker {
  color: var(--c-accent-ink);
}

.prose strong {
  color: var(--c-text);
  font-weight: 650;
}

.prose hr {
  margin-block: 2.5rem;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.prose blockquote {
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0.25rem 0 0.25rem 1.15rem;
  border-left: 3px solid var(--c-brand);
  color: var(--c-text-muted);
}

/* -----------------------------------------------------------------------------
   6. Bausteine
-------------------------------------------------------------------------------- */

/* --- Seitenkopf einer Inhaltsseite ---------------------------------------- */
.page-header {
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.page-header .lead {
  margin-top: 1rem;
  max-width: 44rem;
}

.section + .section,
.spec-list + .section,
.faq + .section {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Abschnitte ohne .prose-Hülle: nur die tatsächlich vorkommenden Folgen von
   Fließelementen bekommen einen Abstand, Karten- und Kopfblöcke nicht. */
.section > h2 + p,
.section > h2 + ul,
.section > p + p,
.section > p + pre,
.section > pre + p,
.section > p + .note,
.section > pre + .note {
  margin-top: 1.1rem;
}

.section-header {
  margin-bottom: 1.75rem;
}

.section-header .lead {
  margin-top: 0.75rem;
  max-width: 42rem;
}

/* --- Schaltflächen -------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease), transform 0.15s var(--ease);
}

.button:hover {
  transform: translateY(-1px);
}

.button svg {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}

.button-primary {
  background: var(--c-accent);
  color: var(--c-accent-on);
}

.button-primary:hover {
  background: color-mix(in srgb, var(--c-accent) 85%, white);
  color: var(--c-accent-on);
}

.button-secondary {
  border-color: var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
}

.button-secondary:hover {
  border-color: var(--c-accent-ink);
  background: var(--c-surface-hover);
  color: var(--c-text);
}

.button-ghost {
  padding-inline: 0.5rem;
  color: var(--c-accent-ink);
}

.button-ghost:hover {
  color: var(--c-text);
}

.button-lg {
  padding: 0.9rem 1.6rem;
  font-size: 1.05rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* --- Kennzeichnungen ------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-accent {
  border-color: color-mix(in srgb, var(--c-accent-ink) 40%, transparent);
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.badge-brand {
  border-color: color-mix(in srgb, var(--c-brand) 40%, transparent);
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
}

.badge-highlight {
  border-color: color-mix(in srgb, var(--c-highlight) 40%, transparent);
  background: var(--c-highlight-soft);
  color: var(--c-highlight);
}

.badge-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

/* --- Startseite: Bühne ----------------------------------------------------- */
.hero {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

@media (min-width: 62em) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.hero-title {
  margin-bottom: 1.25rem;
}

/* Farbliche Hervorhebungen in Überschriften, abgeleitet aus den drei Logofarben.
   Bewusst ohne Bindung an .hero-title, damit sie auf jeder Seite verwendbar sind. */
.hero-brace {
  color: var(--c-accent-ink);
}

.hero-word {
  color: var(--c-brand-ink);
}

.hero-mark {
  color: var(--c-highlight);
}

.hero-lead {
  max-width: 34rem;
  margin-bottom: 2rem;
}

/* Codefenster als Bildmotiv — es enthält nur Zierwerk und keinen Inhalt. */
.code-window {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.code-window-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

.code-window-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--c-border-strong);
}

.code-window-dot:nth-child(1) { background: var(--c-highlight); }
.code-window-dot:nth-child(2) { background: var(--c-brand); }
.code-window-dot:nth-child(3) { background: var(--c-accent); }

.code-window-title {
  margin-left: 0.5rem;
  color: var(--c-text-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.code-window pre {
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.85rem;
}

.tok-key { color: var(--c-brand-ink); }
.tok-str { color: var(--c-accent-ink); }
.tok-num { color: var(--c-highlight); }
.tok-com { color: var(--c-text-faint); font-style: italic; }

/* --- Karten ---------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

.card:hover {
  border-color: var(--c-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.card-title a {
  color: var(--c-text);
  text-decoration: none;
}

.card-title a:hover {
  color: var(--c-accent-ink);
}

.card-text {
  color: var(--c-text-muted);
  flex: 1 1 auto;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.card-icon-brand {
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
}

/* Produktlogo in einer Karte. Die Dateien sind quadratisch (256 × 256) und bringen ihre
   eigenen Farben mit; sie bekommen deshalb keine Tönung, sondern nur eine feste Größe.
   Ohne diese Regel füllt das Bild die ganze Kartenbreite. */
.card-image {
  display: block;
  width: 4.5rem;
  height: auto;
}

/* Karte, die als Ganzes verlinkt ist. */
.card-link .card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-link {
  position: relative;
}

/* --- Screenshot-Rahmen ------------------------------------------------------
   .shot bekommt seine Breite (in px, entsprechend der nativen Bildgröße) als
   Inline-Style, damit Screenshots nie über ihre native Auflösung hinaus
   hochskaliert werden, auf schmalen Viewports aber trotzdem mitschrumpfen. */
.shot {
  margin: 1.5rem auto 0;
  max-width: 100%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}

.shot > a {
  display: block;
  line-height: 0;
  cursor: zoom-in;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot-caption {
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* --- Merkmalsliste --------------------------------------------------------- */
.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.feature-list li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.feature-list li::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--c-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent-ink) 25%, transparent);
}

/* Das Häkchen liegt als eigene Ebene darüber, damit es die Akzentfarbe des
   jeweiligen Farbschemas annimmt. */
.feature-list li {
  position: relative;
}

.feature-list li::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  background: var(--c-accent-ink);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

:root {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.6 3.2 8.4l1.2-1.2 2 2 5-5 1.2 1.2z'/%3E%3C/svg%3E");
}

/* --- Angabenliste (Systemvoraussetzungen, Dateiangaben) -------------------- */
.spec-list {
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
}

.spec-list > div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--c-border);
}

@media (min-width: 34em) {
  .spec-list > div {
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    align-items: baseline;
  }
}

.spec-list dt {
  color: var(--c-text-muted);
  font-size: 0.9rem;
}

.spec-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  /* Prüfsummen sind lange Zeichenketten ohne Trennstelle. */
  overflow-wrap: anywhere;
}

/* --- Fläche / Kasten ------------------------------------------------------ */
.panel {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}

.panel-tinted {
  background: var(--c-bg-tint);
}

/* --- Downloadbereich ------------------------------------------------------- */
.download-card {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 52em) {
  .download-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.download-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.download-card-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
}

.download-hint {
  margin-top: 0.85rem;
  color: var(--c-text-faint);
  font-size: 0.875rem;
}

/* --- Änderungsverlauf ------------------------------------------------------ */
.changelog {
  display: grid;
  gap: 2.5rem;
}

.release {
  position: relative;
  padding-left: 1.75rem;
  border-left: 2px solid var(--c-border);
}

.release::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.55rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--c-bg);
  border-radius: 50%;
  background: var(--c-border-strong);
}

.release-current::before {
  background: var(--c-accent);
}

.release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  margin-bottom: 1rem;
}

.release-version {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
}

.release-date {
  color: var(--c-text-faint);
  font-size: 0.9rem;
}

.change-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.change-list li {
  display: grid;
  gap: 0.35rem 0.85rem;
}

@media (min-width: 40em) {
  .change-list li {
    grid-template-columns: 6.5rem 1fr;
    align-items: baseline;
  }
}

.change-type {
  justify-self: start;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.change-new {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.change-changed {
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
}

.change-fixed {
  background: var(--c-highlight-soft);
  color: var(--c-highlight);
}

/* --- Häufige Fragen -------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--c-border-strong);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  color: var(--c-text-faint);
  transition: transform 0.2s var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item summary:hover {
  background: var(--c-surface-hover);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--c-text-muted);
}

.faq-answer > * + * {
  margin-top: 0.85rem;
}

:root {
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.3 2.3 5.6 3.7 4.2 8 8.5l4.3-4.3 1.4 1.4z'/%3E%3C/svg%3E");
}

/* --- Hinweiskasten --------------------------------------------------------- */
.note {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: 0.975rem;
}

.note-title {
  color: var(--c-text);
  font-weight: 650;
}

.note-info {
  border-left-color: var(--c-accent);
}

.note-warn {
  border-left-color: var(--c-highlight);
}

/* --- Tabellen -------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}

thead th {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* -----------------------------------------------------------------------------
   7. Fußbereich
-------------------------------------------------------------------------------- */
.site-footer {
  flex: 0 0 auto;
  margin-top: auto;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-tint);
  color: var(--c-text-muted);
  font-size: 0.925rem;
}

.site-footer-inner {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 46em) {
  .site-footer-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.site-footer-mark {
  display: block;
  width: auto;
  height: 2rem;
  margin-bottom: 1.1rem;
}

.site-footer-text {
  max-width: 32rem;
}

.site-footer-nav {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.site-footer-heading {
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer-nav a {
  color: var(--c-text-muted);
  text-decoration: none;
  width: fit-content;
}

.site-footer-nav a:hover {
  color: var(--c-accent-ink);
  text-decoration: underline;
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.15rem;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-faint);
  font-size: 0.85rem;
}

/* -----------------------------------------------------------------------------
   8. Hilfsklassen, Bewegungsreduktion, Druck
-------------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.text-muted {
  color: var(--c-text-muted);
}

.mono {
  font-family: var(--font-mono);
}

.stack-sm > * + * { margin-top: 0.75rem; }
.stack-md > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2rem; }

.mt-none { margin-top: 0; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 2.5rem; }

/* Reihe aus Kennzeichnungen, zum Beispiel unter einer Seitenüberschrift. */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .site-footer-nav,
  .skip-link,
  .button-row {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}