/* microgast.at · Windows-95-Desktop
   Richtungsvertrag: .impeccable/surfaces/index-html.md
   Aufbau: Variablen · Schriften · Grundlagen · Desktop · Fenster · Taskleiste · Inhalt · Bausteine · Formular · Handy */

/* ---------- Schriften (selbst gehostet, OFL) ---------- */
@font-face { font-family: "Questrial"; src: url("/assets/fonts/questrial-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Questrial"; src: url("/assets/fonts/questrial-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson"; src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson"; src: url("/assets/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson"; src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

@font-face { font-family: "W95FA"; src: url("/assets/fonts/w95fa.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- Variablen ---------- */
:root {
  /* Desktop: Verlauf der violetten Logo-Kugel */
  --desk-oben: #6A2588;
  --desk-unten: #42246F;
  /* Windows-Grau und die vier Kantenfarben */
  --grau: #C0C0C0;
  --grau-hell: #DFDFDF;
  --grau-dunkel: #808080;
  --schwarz: #0A0A0A;
  --weiss: #FFFFFF;
  /* Marke */
  --navy: #1E2B69;
  --blau: #1279BC;
  --petrol: #00262D;
  --petrol-2: #003D47;
  --lime: #BFEF4B;
  --lime-hell: #E4FFA6;
  --lime-dunkel: #6E8F1C;
  --gruen: #408967;
  --text: #00262D;
  --text-leise: #3D5257;
  --link: #1E2B69;

  --f-titel: "Questrial", "Atkinson", system-ui, sans-serif;
  --f-text: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-chrome: "W95FA", Tahoma, Verdana, "Atkinson", sans-serif;

  --groesse-text: 1.0625rem;
  --groesse-h1: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --groesse-h2: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --groesse-chrome: 1rem;

  --abstand-fenster: 14px;
  --abstand-innen: clamp(20px, 3vw, 40px);
  --breite-text: 68ch;
  --fenster-max: 1200px;

  /* 3D-Kanten wie Windows 95 */
  --kante-hoch: inset -1px -1px var(--schwarz), inset 1px 1px var(--weiss), inset -2px -2px var(--grau-dunkel), inset 2px 2px var(--grau-hell);
  --kante-tief: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel), inset -2px -2px var(--grau-hell), inset 2px 2px var(--schwarz);
  --kante-feld: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel), inset -2px -2px var(--grau-hell), inset 2px 2px var(--schwarz);
  --kante-fenster: inset -1px -1px var(--schwarz), inset 1px 1px var(--grau-hell), inset -2px -2px var(--grau-dunkel), inset 2px 2px var(--weiss);
  --schatten-fenster: 0 18px 40px -12px rgba(20, 0, 40, .55), 0 4px 10px rgba(20, 0, 40, .25);
}

/* ---------- Grundlagen ---------- */
/* W95FA nur in 16 px (1rem), Gewicht 400, ohne Kunstfett */
:root { font-synthesis-weight: none; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--groesse-text)/1.6 var(--f-text);
  color: var(--text);
  background: linear-gradient(180deg, var(--desk-oben), var(--desk-unten)) fixed var(--desk-unten);
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blau); text-decoration-thickness: 2px; }
::selection { background: var(--navy); color: var(--weiss); }
input, textarea, select, button { font: inherit; color: inherit; caret-color: var(--navy); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--grau); color: var(--petrol); padding: 8px 14px; font-weight: 700; box-shadow: var(--kante-hoch); }
.sprung:focus { top: 8px; }

/* Scrollbalken im Win95-Stil */
* { scrollbar-color: var(--grau) var(--grau-hell); }
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track { background: var(--grau-hell) repeating-conic-gradient(var(--grau) 0 25%, var(--weiss) 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb { background: var(--grau); box-shadow: var(--kante-hoch); }
::-webkit-scrollbar-corner { background: var(--grau); }

/* ---------- Desktop-Raster (ab 900 px) ---------- */
.desktop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Desktop-Icons */
.icons { grid-column: 1; grid-row: 1; padding: 10px 6px 10px 10px; min-height: 0; }
.icon { height: 78px; margin: 0; }
.icons ul {
  list-style: none; margin: 0; padding: 0; height: calc(100vh - 62px); height: calc(100dvh - 62px);
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 2px 4px;
}
.icon a, .icon button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 92px; padding: 4px 2px 2px; border: 0; background: none; cursor: pointer;
  color: var(--weiss); text-decoration: none; text-align: center;
  font: 400 1rem/1.15 var(--f-chrome);
}
.icon img { width: 32px; height: 32px; image-rendering: pixelated; }
.icon span { padding: 1px 3px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); overflow-wrap: break-word; }
.icon a:hover span { text-decoration: underline; text-underline-offset: 2px; }
.icon a:focus-visible { outline: none; }
.icon a:focus-visible span, .icon a[aria-current] span { background: var(--navy); text-shadow: none; outline: 1px dotted var(--weiss); outline-offset: -1px; }
.icon a[aria-current] img { opacity: .78; }

/* ---------- Zeitreise: leerer Desktop nach dem Schließen des Fensters ---------- */
.zeitreise { grid-column: 2; grid-row: 1; position: relative; display: grid; place-items: center; min-height: 0; padding: var(--abstand-fenster); }
.zeitreise[hidden] { display: none; }
.zeitreise-jahr {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center; pointer-events: none;
  font: 400 clamp(8rem, 24vw, 22rem)/1 var(--f-titel); color: var(--weiss); opacity: .09; letter-spacing: -.04em;
}
.zeitreise-dialog { position: relative; width: min(100%, 520px); max-width: 520px; }
.zeitreise-regler { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; margin-top: .4em; }
.zeitreise-regler[hidden] { display: none; }
.zeitreise-uhr { width: 64px; height: 64px; border-radius: 50%; background: var(--weiss); box-shadow: var(--kante-feld); position: relative; }
.zeitreise-uhr i { position: absolute; left: calc(50% - 1px); top: 50%; width: 2px; height: 26px; background: var(--navy); transform-origin: 50% 0; transform: rotate(180deg); }
.zeitreise-text { min-height: 3em; margin: 0 0 .5em; }
.zeitreise-skala input { width: 100%; accent-color: var(--navy); }
.zeitreise-jahre { display: flex; justify-content: space-between; margin: 2px 0 0; font: 400 1rem/1 var(--f-chrome); }
@media (prefers-reduced-motion: no-preference) { .zeitreise-uhr i { transition: transform .45s steps(6); } }
@media (max-width: 899px) { .zeitreise { display: none !important; } }

/* ---------- Fenster ---------- */
.fenster {
  grid-column: 2; grid-row: 1;
  justify-self: start;
  width: min(100% - 2 * var(--abstand-fenster), var(--fenster-max));
  margin: var(--abstand-fenster) var(--abstand-fenster) var(--abstand-fenster) 4px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--grau); padding: 3px;
  box-shadow: var(--kante-fenster), var(--schatten-fenster);
  position: relative;
}
.fenster.ist-maximiert { width: calc(100% - 8px); max-width: none; margin: 4px; }
.fenster.ist-minimiert { visibility: hidden; }
.titelleiste {
  display: flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 2px 3px 2px 5px;
  background: linear-gradient(90deg, var(--navy), var(--blau));
  color: var(--weiss);
  font: 400 1rem/1.2 var(--f-chrome);
  user-select: none;
}
.fenster.ist-inaktiv .titelleiste { background: linear-gradient(90deg, var(--grau-dunkel), #A9A9A9); color: var(--grau-hell); }
.titelleiste .symbol { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
.titelleiste .titel { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; color: inherit; letter-spacing: 0; text-wrap: nowrap; }
.fensterknoepfe { display: flex; gap: 2px; flex: none; }
.fensterknoepfe a, .fensterknoepfe button {
  display: grid; place-items: center; width: 22px; height: 20px; padding: 0;
  background: var(--grau); color: var(--schwarz); border: 0; box-shadow: var(--kante-hoch); cursor: pointer; text-decoration: none;
}
.fensterknoepfe > :last-child { margin-left: 2px; }
.fensterknoepfe a:active, .fensterknoepfe button:active { box-shadow: var(--kante-tief); }
.fensterknoepfe svg { width: 10px; height: 10px; }
.js .titelleiste { cursor: default; }
.js .fenster.ist-ziehbar .titelleiste { cursor: grab; }

.fenster-inhalt {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--weiss);
  margin-top: 3px;
  box-shadow: var(--kante-tief);
  scroll-behavior: smooth;
}
.fenster-inhalt > * { position: relative; }
.statusleiste { display: flex; gap: 3px; margin-top: 3px; font: 400 1rem/1 var(--f-chrome); color: var(--schwarz); }
.statusleiste > * { padding: 4px 8px; box-shadow: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusleiste > :first-child { flex: 1; }

/* ---------- Taskleiste ---------- */
.taskleiste {
  grid-column: 1 / -1; grid-row: 2;
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 3px 3px 2px;
  background: var(--grau);
  box-shadow: inset 0 1px var(--grau-hell), inset 0 2px var(--weiss);
  font: 400 1rem/1.2 var(--f-chrome);
  color: var(--schwarz);
}
.knopf-chrome, .start > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 10px 3px 6px;
  background: var(--grau); border: 0; color: var(--schwarz);
  box-shadow: var(--kante-hoch); cursor: pointer; text-decoration: none;
  font: 400 1rem/1.2 var(--f-chrome); white-space: nowrap;
}
.knopf-chrome:active, .knopf-chrome[aria-pressed="true"], .start[open] > summary { box-shadow: var(--kante-tief); }
.knopf-chrome[aria-pressed="true"] { background: var(--grau-hell) repeating-conic-gradient(var(--grau) 0 25%, var(--weiss) 0 50%) 0 0 / 2px 2px; }
.start > summary::-webkit-details-marker { display: none; }
.start > summary { list-style: none; }
.start > summary img { width: 20px; height: 20px; }
.menue-hinweis { display: none; font-weight: 400; }
.aufgabe { flex: 0 1 240px; min-width: 0; justify-content: flex-start; font-weight: 400; }
.aufgabe img { width: 16px; height: 16px; image-rendering: pixelated; }
.aufgabe span { overflow: hidden; text-overflow: ellipsis; }
.infobereich { margin-left: auto; display: flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 4px 0 2px; box-shadow: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel); }
.infobereich a { display: grid; place-items: center; width: 28px; height: 26px; }
.infobereich a img { width: 16px; height: 16px; image-rendering: pixelated; }
.infobereich a:hover { background: var(--grau-hell); }
.infobereich a.tray-assistent { width: auto; gap: 6px; display: inline-flex; align-items: center; padding: 0 10px 0 7px; margin: 0 2px; min-height: 24px; height: 24px;
  background: var(--lime); color: var(--petrol); text-decoration: none; font: 400 1rem/1 var(--f-chrome); box-shadow: var(--kante-hoch); }
.infobereich a.tray-assistent:hover { background: #CDF566; }
.infobereich a.tray-assistent:active { box-shadow: var(--kante-tief); }
.uhr { padding: 0 8px; font-variant-numeric: tabular-nums; min-width: 4.2em; text-align: right; }

/* Startmenü */
.start { position: relative; }
.startmenue {
  position: absolute; left: 0; bottom: calc(100% + 4px);
  display: flex; min-width: 260px;
  background: var(--grau); box-shadow: var(--kante-fenster), 4px 4px 0 rgba(0, 0, 0, .25);
  padding: 3px;
}
.startmenue .banner {
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: linear-gradient(0deg, var(--navy), var(--desk-oben));
  color: var(--weiss); padding: 10px 6px; font: 400 1.35rem/1 var(--f-titel); letter-spacing: .04em;
}
.startmenue .banner b { color: var(--lime); font-weight: 400; }
.startmenue ul { list-style: none; margin: 0; padding: 0; }
.startmenue > nav { flex: 1; }
.startmenue a, .startmenue summary {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px;
  color: var(--schwarz); text-decoration: none; font: 400 1rem/1.25 var(--f-chrome); cursor: pointer; white-space: nowrap;
}
.startmenue a img, .startmenue summary img { width: 24px; height: 24px; image-rendering: pixelated; }
.startmenue a:hover, .startmenue a:focus-visible, .startmenue summary:hover, .startmenue summary:focus-visible { background: var(--navy); color: var(--weiss); outline: none; }
.startmenue summary::-webkit-details-marker { display: none; }
.startmenue summary { list-style: none; }
.startmenue summary::after { content: ""; margin-left: auto; border: 5px solid transparent; border-left-color: currentColor; border-right-width: 0; }
.startmenue details[open] > summary { background: var(--navy); color: var(--weiss); }
.startmenue details > ul { padding: 2px 0 4px 26px; }
.startmenue details > ul a { padding-block: 4px; }
.startmenue hr { border: 0; height: 2px; margin: 4px 2px; box-shadow: inset 0 1px var(--grau-dunkel), inset 0 -1px var(--weiss); }

/* ---------- Kleine Fenster (Newsletter, KI-Assistent, Papierkorb): per :target, mit JS als Fenster ---------- */
.klein {
  display: none;
  position: fixed; z-index: 40; right: 24px; bottom: 52px;
  width: min(380px, calc(100vw - 32px));
  background: var(--grau); padding: 3px;
  box-shadow: var(--kante-fenster), var(--schatten-fenster);
}
.klein:target { display: block; }
.js .klein:target:not(.ist-offen) { display: none; }
.js .klein.ist-offen { display: block; }
.klein .klein-inhalt { padding: 16px 16px 14px; font-size: .9375rem; line-height: 1.5; }
.klein .klein-inhalt p { margin: 0 0 12px; }
.klein .zeile-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Inhalt im Fenster ---------- */
.brotkrumen { padding: 10px var(--abstand-innen) 0; font: 400 1rem/1.4 var(--f-chrome); color: var(--text-leise); }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.brotkrumen li + li::before { content: "\005C"; margin-right: 8px; color: var(--grau-dunkel); }
.brotkrumen a { color: inherit; }
.brotkrumen [aria-current] { color: var(--text); }

.abschnitt { padding: clamp(28px, 4vw, 52px) var(--abstand-innen); }
.abschnitt + .abschnitt { border-top: 1px solid var(--grau-hell); }
.abschnitt > * { max-width: var(--breite-text); }
.abschnitt > .breit, .abschnitt > .symbolleiste, .abschnitt > .tabelle-rahmen, .abschnitt > .kopf-raster, .abschnitt > .raster-zwei, .abschnitt > .systemsteuerung, .abschnitt > .liste-karten { max-width: none; }
.ton-grau { background: var(--grau); border-top-color: var(--grau-dunkel) !important; }
.ton-grau + .abschnitt { border-top: 1px solid var(--grau-dunkel); }
/* Gruppenrahmen wie in Win95-Dialogen statt farbiger Bänder */
.ton-setup, .ton-petrol, .ton-lime {
  margin: clamp(18px, 2.4vw, 32px) var(--abstand-innen);
  padding: clamp(22px, 3vw, 36px) clamp(18px, 2.6vw, 34px);
  border-top: 0 !important;
  box-shadow: inset 1px 1px var(--grau-dunkel), inset -1px -1px var(--weiss), inset 2px 2px var(--weiss), inset -2px -2px var(--grau-dunkel);
}
.ton-lime { background: #F7FCEB; }
.ton-setup + .abschnitt, .ton-petrol + .abschnitt, .ton-lime + .abschnitt { border-top: 1px solid var(--grau-hell); }

h1, h2, h3 { font-family: var(--f-titel); font-weight: 400; color: var(--petrol); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: var(--groesse-h1); line-height: 1.08; letter-spacing: -.012em; margin: 0 0 .35em; }
h2 { font-size: var(--groesse-h2); line-height: 1.15; margin: 0 0 .6em; }
h3 { font-size: 1.25rem; line-height: 1.25; margin: 1.6em 0 .4em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
li::marker { color: var(--blau); }
strong { font-weight: 700; }
.kopf-h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); color: var(--navy); margin: -.1em 0 .9em; line-height: 1.25; }
.unterzeile { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; color: var(--text-leise); max-width: 60ch; margin-bottom: 1.4em; }

.leise { color: var(--text-leise); font-size: .9375rem; }
.extern::after { content: " \2197"; }

/* Kopfbereich einer Seite: Titel links, Eigenschaften rechts */
.kopf { padding-top: clamp(22px, 3vw, 40px); }
.kopf-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.kopf-raster > div > :last-child { margin-bottom: 0; }

/* ---------- Bausteine ---------- */
/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 20px;
  background: var(--grau); color: var(--schwarz); border: 0; cursor: pointer;
  box-shadow: var(--kante-hoch);
  font: 400 1rem/1.2 var(--f-chrome); text-decoration: none; text-align: center;
}
.knopf:hover { color: var(--schwarz); background: #CBCBCB; }
.knopf:active { box-shadow: var(--kante-tief); padding: 9px 19px 7px 21px; }
.knopf:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -6px; box-shadow: var(--kante-hoch), 0 0 0 2px var(--navy); }
.knopf-standard { outline: 1px solid var(--schwarz); outline-offset: 0; }
.knopf-standard:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -6px; box-shadow: var(--kante-hoch), 0 0 0 1px var(--schwarz), 0 0 0 3px var(--navy); }
.knopf-primaer {
  background: var(--lime); color: var(--petrol);
  box-shadow: inset -1px -1px var(--schwarz), inset 1px 1px var(--weiss), inset -2px -2px var(--lime-dunkel), inset 2px 2px var(--lime-hell);
}
.knopf-primaer:hover { background: #CDF566; color: var(--petrol); }
.knopf-primaer:active { box-shadow: inset 1px 1px var(--schwarz), inset 2px 2px var(--lime-dunkel); }
.knopf img { width: 16px; height: 16px; image-rendering: pixelated; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 1.4em; }

/* Eigenschaften (Kurzfakten) wie ein Win95-Eigenschaften-Dialog */
.eigenschaften { background: var(--grau); padding: 3px; box-shadow: var(--kante-fenster); }
.eigenschaften .titelleiste { min-height: 22px; }
.eigenschaften .feld { padding: 14px 16px 16px; }
.eigenschaften dl { margin: 0; display: grid; grid-template-columns: minmax(7.5em, auto) 1fr; }
.eigenschaften dl > div { display: contents; }
.eigenschaften dt, .eigenschaften dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--grau-dunkel); box-shadow: 0 1px var(--weiss); font-size: .9375rem; line-height: 1.4; }
.eigenschaften dt { padding-right: 14px; color: #2B3A3E; }
.eigenschaften dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.eigenschaften dl > div:last-child > * { border-bottom: 0; box-shadow: none; }
.eigenschaften .knopfreihe { margin-top: 14px; }
.eigenschaften .knopf { flex: 1; }
.eigenschaften ul.kurz { margin: 0; padding-left: 1.1em; font-size: .9375rem; }
.markiert { background: var(--lime); padding: 1px 5px; }

/* Explorer-Detailansicht (Tabellen) */
.tabelle-rahmen { background: var(--weiss); box-shadow: var(--kante-feld); padding: 2px; overflow-x: auto; }
table.explorer { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 .9375rem/1.35 var(--f-text); }
.explorer th {
  position: sticky; top: 0; z-index: 1;
  padding: 5px 10px; text-align: left; white-space: nowrap;
  background: var(--grau); box-shadow: var(--kante-hoch);
  font: 400 1rem/1.2 var(--f-chrome); color: var(--schwarz);
}
.explorer td { padding: 7px 10px; vertical-align: top; border-bottom: 1px dotted #C9CED0; }
.explorer td.zahl, .explorer th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.explorer td.name a { display: inline-flex; gap: 8px; align-items: flex-start; font-weight: 700; color: var(--petrol); text-decoration: none; }
.explorer td.name img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; margin-top: -4px; }
.explorer td.name small { display: block; font-weight: 400; color: var(--text-leise); font-size: .875rem; line-height: 1.35; margin-top: 2px; }
.explorer tbody tr:hover td { background: #EEF1F6; }
.explorer tbody tr:focus-within td { background: var(--navy); color: var(--weiss); }
.explorer tbody tr:focus-within td a, .explorer tbody tr:focus-within td small { color: var(--weiss); }
.explorer td.name a:focus-visible { outline: 1px dotted var(--weiss); outline-offset: 2px; }
.explorer .termin-fix { background: var(--lime); padding: 1px 6px; font-weight: 700; white-space: nowrap; color: var(--petrol); }
.explorer tr[hidden] { display: none; }

.kompakt h1 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); margin-bottom: .25em; }
.kopf.kompakt { padding-top: 16px; padding-bottom: 12px; }
.faktenzeile { font: 400 1rem/1.5 var(--f-text); color: var(--text-leise); margin: 0; max-width: none; }
.liste-oben { padding-top: 12px; }
.liste-oben .explorer td { padding-block: 4px; }
.liste-oben .explorer td.name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.explorer.kompakt td { padding: 5px 8px; font-size: .9375rem; }
.explorer.kompakt td.name img { width: 24px; height: 24px; margin-top: -2px; }
.naechste .tabelle-rahmen { margin: 6px 8px 0; }
.naechste .titelleiste h2.titel { font: inherit; }

/* Symbolleiste über Listen (Filter) */
.symbolleiste { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 6px 10px; margin-bottom: 10px; background: var(--grau); box-shadow: var(--kante-hoch); font: 400 1rem/1.2 var(--f-chrome); color: var(--schwarz); }
.symbolleiste label { display: flex; align-items: center; gap: 8px; }
.symbolleiste .anzahl { margin-left: auto; align-self: center; }

/* Systemsteuerung: die vier Leistungen */
/* Explorer-Ansicht „Große Symbole“ */
.systemsteuerung { display: flex; flex-wrap: wrap; gap: 6px 10px; background: var(--weiss); padding: 14px 10px; box-shadow: var(--kante-feld); }
.systemsteuerung a { flex: 1 1 200px; max-width: 260px; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 10px 8px 12px; color: var(--text); text-decoration: none; }
.systemsteuerung img { width: 48px; height: 48px; image-rendering: pixelated; }
.systemsteuerung b { font: 400 1rem/1.2 var(--f-chrome); color: var(--schwarz); padding: 1px 4px;  }
.systemsteuerung span { font-size: .875rem; line-height: 1.45; color: var(--text-leise); }
.systemsteuerung a:hover b, .systemsteuerung a:focus-visible b { background: var(--navy); color: var(--weiss); outline: 1px dotted var(--weiss); outline-offset: -1px; }
.systemsteuerung a:focus-visible { outline: none; }

/* Ablauf als Setup-Assistent mit Fortschrittsbalken */
.setup { background: var(--grau); padding: 3px; box-shadow: var(--kante-fenster); max-width: 820px; }
.setup .titelleiste { min-height: 22px; }
.setup-raster { display: grid; grid-template-columns: 150px 1fr; gap: 0; }
.setup-bild { background: linear-gradient(180deg, var(--blau), var(--navy)); display: grid; place-items: center; padding: 18px; margin: 12px 0 12px 12px; box-shadow: var(--kante-tief); }
.setup-bild img { width: 96px; height: 96px; image-rendering: pixelated; }
.setup-text { padding: 14px 18px 16px; }
.setup-text h2 { font-size: 1.375rem; margin-bottom: .5em; color: var(--petrol); }
.setup ol { list-style: none; counter-reset: schritt; margin: 0 0 14px; padding: 0; }
.setup li { counter-increment: schritt; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; margin: 0; padding: 7px 0; font-size: .9375rem; line-height: 1.45; }
.setup li::before {
  content: counter(schritt); display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px;
  background: var(--weiss); box-shadow: var(--kante-feld); font: 400 1rem/1 var(--f-chrome); color: var(--navy);
}
.setup li.ist-erledigt::before { content: ""; background: var(--weiss) url("/assets/img/icons/haken.svg") center / 14px no-repeat; }
.fortschritt { height: 22px; padding: 3px; background: var(--weiss); box-shadow: var(--kante-feld); }
.fortschritt i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--navy) 0 10px, transparent 10px 12px); clip-path: inset(0 calc(100% - var(--fortschritt, 100%)) 0 0); transition: clip-path .45s steps(6, end); }
.fortschritt-text { font: 400 1rem/1.3 var(--f-chrome); margin: 6px 0 0; color: var(--schwarz); }

/* FAQ als Explorer-Baum */
.faq-liste { max-width: var(--breite-text); border-top: 1px solid var(--grau-hell); }
.faq { border-bottom: 1px solid var(--grau-hell); }
.faq > summary {
  display: grid; grid-template-columns: 13px 1fr; gap: 12px; align-items: baseline;
  padding: 12px 0; cursor: pointer; list-style: none;
  font: 700 1.0625rem/1.4 var(--f-text); color: var(--petrol);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before {
  content: "+"; display: grid; place-items: center; width: 11px; height: 11px; transform: translateY(1px);
  border: 1px solid var(--grau-dunkel); background: var(--weiss); font: 400 11px/1 var(--f-chrome); color: var(--schwarz);
}
.faq[open] > summary::before { content: "\2212"; }
.faq > summary:hover { color: var(--blau); }
.faq > div { padding: 0 0 14px 25px; margin-left: 5px; border-left: 1px dotted var(--grau-dunkel); }
.faq > div > :last-child { margin-bottom: 0; }

/* Dialog (Meldungen, Bestätigungen, 404) */
.dialog { background: var(--grau); padding: 3px; box-shadow: var(--kante-fenster), var(--schatten-fenster); max-width: 480px; }
.dialog .dialog-inhalt { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 18px 18px 8px; font-size: .9375rem; line-height: 1.5; color: var(--schwarz); }
.dialog .dialog-inhalt img { width: 32px; height: 32px; image-rendering: pixelated; }
.dialog .dialog-inhalt p { margin: 0 0 .7em; }
.dialog .zeile-knoepfe { display: flex; justify-content: center; gap: 8px; padding: 6px 12px 14px; flex-wrap: wrap; }
.dialog .knopf { min-width: 92px; min-height: 36px; padding: 5px 14px; }

/* Bild in vertiefter Fläche */
.bildrahmen { margin: 0; padding: 6px; background: var(--grau); box-shadow: var(--kante-fenster); }
.bildrahmen img { display: block; width: 100%; box-shadow: var(--kante-tief); }
.bildrahmen figcaption { font: 400 1rem/1.35 var(--f-chrome); padding: 6px 2px 0; color: var(--schwarz); }

/* Zwei Spalten */
.raster-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.raster-zwei > div > :last-child { margin-bottom: 0; }
.raster-zwei.breit-links { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }

/* Haltung: drei Punkte als Liste mit Win95-Häkchen */
.haken-liste { list-style: none; padding: 0; }
.haken-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-bottom: .9em; }
.haken-liste li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; background: var(--weiss) url("/assets/img/icons/haken.svg") center / 12px no-repeat; box-shadow: var(--kante-feld); }

/* Liste von Karten (Blog, verwandte Seminare): Explorer-Kacheln */
.liste-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.liste-karten li { margin: 0; }
.karte { display: flex; flex-direction: column; height: 100%; background: var(--weiss); box-shadow: var(--kante-feld); padding: 4px; color: var(--text); text-decoration: none; }
.karte:hover { background: #EEF1F6; }
.karte:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.karte img.vorschau { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grau-hell); }
.karte .karte-text { padding: 12px 10px 10px; display: grid; gap: 6px; }
.karte b { font: 400 1.125rem/1.3 var(--f-titel); color: var(--petrol); }
.karte .meta { font: 400 1rem/1.3 var(--f-chrome); color: var(--text-leise); }
.karte .anriss { font-size: .9375rem; line-height: 1.45; color: var(--text-leise); }
.karte-seminar { flex-direction: row; gap: 12px; align-items: flex-start; padding: 14px; }
.karte-seminar img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }

/* Blogbeitrag */
.beitrag { max-width: var(--breite-text); }
.beitrag figure { margin: 1.4em 0; }
.beitrag figure img { display: block; width: 100%; height: auto; box-shadow: var(--kante-tief); }
.beitrag h2 { margin-top: 1.6em; font-size: 1.625rem; }
.beitrag h3 { font-size: 1.25rem; }
.beitrag blockquote { margin: 1.2em 0; padding: 12px 18px; background: var(--grau-hell); box-shadow: var(--kante-feld); }
.beitrag li > p { margin-bottom: .4em; }
.beitrag table { border-collapse: collapse; font-size: .9375rem; margin: 1em 0; }
.beitrag td, .beitrag th { border: 1px solid var(--grau); padding: 6px 8px; }
.beitrag-meta { font: 400 1rem/1.4 var(--f-chrome); color: var(--text-leise); margin: -.2em 0 1.4em; }
.titelbild { margin: 0 0 1.6em; max-width: 900px; }

/* Referenzliste */
.kunden { columns: 3 220px; column-gap: 32px; list-style: none; padding: 0; font-size: .9375rem; }
.kunden li { break-inside: avoid; padding: 3px 0; border-bottom: 1px dotted var(--grau); margin: 0; }

/* Fuß im Fenster */
.fuss { background: var(--grau); padding: 26px var(--abstand-innen) 22px; font: 400 .9375rem/1.55 var(--f-text); color: var(--schwarz); border-top: 1px solid var(--grau-dunkel); box-shadow: inset 0 1px var(--weiss); }
.fuss a { color: var(--schwarz); }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px 40px; }
.fuss h2 { font: 400 1rem/1.3 var(--f-chrome); color: var(--schwarz); margin: 0 0 .5em; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin: 0 0 .25em; }
.fuss .rechtliches { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--grau-dunkel); box-shadow: inset 0 1px var(--weiss); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .875rem; }

/* E-Mail-Schutz: Adresse kommt aus CSS */
a.mail[data-mail-name]::before { content: attr(data-mail-name) "\0040" attr(data-mail-domain); }

/* ---------- Formular ---------- */
.formular-fenster { background: var(--grau); padding: 3px; box-shadow: var(--kante-fenster); max-width: 760px; scroll-margin-top: 20px; }
.formular-fenster form, .formular-fenster .gesendet { padding: 18px 18px 20px; color: var(--schwarz); }
.formular-fenster p.einleitung { font-size: .9375rem; margin: 0 0 16px; }
fieldset.gruppe { margin: 0 0 16px; padding: 14px 14px 6px; border: 0; box-shadow: inset 1px 1px var(--grau-dunkel), inset -1px -1px var(--weiss), inset 2px 2px var(--weiss), inset -2px -2px var(--grau-dunkel); }
fieldset.gruppe legend { padding: 0 6px; font: 400 1rem/1.2 var(--f-chrome); background: var(--grau); }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.feld { margin-bottom: 12px; min-width: 0; }
.feld.breit { grid-column: 1 / -1; }
.feld > label, .feld > .bezeichnung { display: block; font: 400 .9375rem/1.3 var(--f-text); margin-bottom: 4px; }
.pflicht { color: #A0001E; }
.feld input:not([type="checkbox"]):not([type="radio"]), .feld select, .feld textarea, .symbolleiste select {
  width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 0;
  background: var(--weiss); box-shadow: var(--kante-feld); font: 400 1rem/1.3 var(--f-text); color: var(--schwarz);
}
.symbolleiste select { width: auto; min-width: 11em; min-height: 30px; padding: 3px 6px; font-size: .9375rem; }
.feld textarea { min-height: 96px; resize: vertical; }
.feld select, .symbolleiste select { appearance: none; padding-right: 30px; background: var(--weiss) url("/assets/img/icons/pfeil-runter.svg") right 3px center / 20px 20px no-repeat; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .symbolleiste select:focus { outline: 1px dotted var(--schwarz); outline-offset: -5px; }
.feld .hinweis { font-size: .8125rem; line-height: 1.35; margin: 4px 0 0; color: #2B3A3E; }
.feld-fehler { display: none; margin: 4px 0 0; font: 700 .8125rem/1.35 var(--f-text); color: #A0001E; }
.feld.hat-fehler .feld-fehler { display: block; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { box-shadow: var(--kante-feld), 0 0 0 2px #A0001E; }
.wahl { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; margin: 6px 0; font-size: .9375rem; line-height: 1.4; cursor: pointer; }
.wahl input { appearance: none; width: 16px; height: 16px; margin: 2px 0 0; background: var(--weiss); box-shadow: var(--kante-feld); cursor: pointer; }
.wahl input[type="radio"] { border-radius: 50%; box-shadow: inset 1px 1px var(--grau-dunkel), inset -1px -1px var(--weiss), inset 2px 2px var(--schwarz); }
.wahl input:checked { background-image: url("/assets/img/icons/haken.svg"); background-size: 12px; background-position: center; background-repeat: no-repeat; }
.wahl input[type="radio"]:checked { background-image: radial-gradient(var(--schwarz) 0 3px, transparent 3.5px); }
.wahl input:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font: 700 .9375rem/1.4 var(--f-text); margin: 10px 0 0; }
.form-status.ist-fehler { color: #A0001E; }
.formular-fenster.ist-gesendet form { display: none; }
.formular-fenster .gesendet[hidden] { display: none; }
form:tool-form-active { outline: 2px solid var(--lime-dunkel); outline-offset: 6px; }
button:tool-submit-active { outline: 2px solid var(--lime-dunkel); outline-offset: 3px; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .fenster.oeffnet { animation: fenster-auf .22s cubic-bezier(.2, .8, .2, 1) both; }
  .js .klein.ist-offen { animation: fenster-auf .18s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes fenster-auf { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .fortschritt i { transition: none; }
}

/* ---------- Übergänge zwischen den Seiten (View Transitions, Chrome, Edge, Safari) ----------
   Desktop und Taskleiste bleiben stehen; das alte Fenster klappt weg, das neue zoomt in Stufen
   aus dem angeklickten Icon oder Link auf, wie Windows 95 seine Fenster geöffnet hat. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .fenster { view-transition-name: fenster; }
  .icons { view-transition-name: icons; }
  .taskleiste { view-transition-name: taskleiste; }
  ::view-transition-group(icons), ::view-transition-group(taskleiste) { animation: none; }
  ::view-transition-old(icons), ::view-transition-old(taskleiste) { display: none; }
  ::view-transition-new(icons), ::view-transition-new(taskleiste) { animation: none; }
  ::view-transition-group(fenster) { animation-duration: 0s; }
  ::view-transition-old(fenster) { animation: fenster-weg .14s steps(3, end) both; }
  ::view-transition-new(fenster) {
    animation: fenster-zoom .3s steps(7, end) both;
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 30%);
  }
  @keyframes fenster-weg { to { opacity: 0; transform: scale(.97); } }
  @keyframes fenster-zoom {
    from { transform: scale(.06); opacity: .2; outline: 2px dotted rgba(255, 255, 255, .9); }
    60% { opacity: 1; }
    to { transform: none; opacity: 1; }
  }
}

/* ---------- Mittlere Breiten ---------- */
@media (max-width: 1100px) {
  .kopf-raster { grid-template-columns: 1fr; }
  .eigenschaften { max-width: 560px; }
}

/* ---------- Handy und Tablet hochkant: kein Desktop ---------- */
@media (max-width: 899px) {
  .desktop { display: flex; flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; }
  .icons { display: none; }
  .taskleiste { order: -1; position: sticky; top: 0; box-shadow: inset 0 -1px var(--grau-dunkel), 0 1px var(--schwarz); }
  .aufgabe { display: none; }
  .menue-hinweis { display: inline; }
  .infobereich a.tray-assistent span { display: none; }
  .infobereich a.tray-assistent { padding: 0 6px; }
  .startmenue { position: fixed; top: 40px; bottom: auto; left: 6px; right: 6px; max-height: calc(100dvh - 52px); overflow: auto; }
  .startmenue .banner { display: none; }
  .fenster { width: auto; justify-self: stretch; align-self: stretch; min-width: 0; margin: 10px 8px 12px; box-shadow: var(--kante-fenster), 0 8px 24px -8px rgba(20, 0, 40, .5); }
  .fenster-inhalt { overflow: visible; }
  .fensterknoepfe .nur-desktop { display: none; }
  .klein { left: 8px; right: 8px; bottom: 12px; width: auto; }
  .fuss-raster { grid-template-columns: 1fr; }
  .raster-zwei, .raster-zwei.breit-links { grid-template-columns: 1fr; }
  .setup-raster { grid-template-columns: 1fr; }
  .setup-bild { display: none; }
}
@media (max-width: 600px) {
  :root { --abstand-innen: 16px; --groesse-text: 1.0625rem; }
  .felder { grid-template-columns: 1fr; }
  .eigenschaften dl { grid-template-columns: 1fr; }
  .eigenschaften dt { padding-bottom: 0; border-bottom: 0; box-shadow: none; font-size: .8125rem; }
  .knopfreihe .knopf { flex: 1 1 100%; }
  /* Explorer-Tabelle wird zur Liste */
  table.explorer, .explorer tbody, .explorer tr, .explorer td { display: block; width: 100%; }
  .explorer thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .explorer tr { padding: 10px 6px; border-bottom: 1px solid var(--grau-hell); }
  .explorer td { padding: 2px 0 2px 42px; border: 0; text-align: left !important; }
  .explorer td.name { padding-left: 0; }
  .explorer td[data-label]::before { content: attr(data-label) ": "; color: var(--text-leise); }
  .symbolleiste .anzahl { margin-left: 0; }
  .statusleiste > :not(:first-child) { display: none; }
}

@media print {
  body { background: none; }
  .icons, .taskleiste, .titelleiste, .statusleiste, .klein, .formular-fenster { display: none !important; }
  .desktop { display: block; height: auto; }
  .fenster { box-shadow: none; padding: 0; width: auto; }
  .fenster-inhalt { box-shadow: none; overflow: visible; }
}