@charset "utf-8";
/* =====================================================================
   fountainpen.de — Stilblatt für den Neubau (2026)
   ---------------------------------------------------------------------
   Das einzige Stilblatt der Website. Es gibt daneben keins mehr:

     nicht mehr: fountain.css, fp-mobile.css, fp-print.css, der
     eingebettete Block „Modernes Template (2025)", der Grundstil-Block,
     der Sprungmarken-Block, die von fp-features.js eingeschleusten
     Regeln, style-Attribute im HTML.

   Deshalb steht hier keine einzige Abwehrregel — kein !important gegen
   alte Stile, kein „html a:link" gegen fountain.css, keine Selektoren
   auf bgcolor. Was hier steht, gestaltet; es verteidigt nichts.

   Gestaltungsgrundsatz: fountainpen.de ist ein Nachschlagewerk. Seine
   Tugend ist Dichte und Auffindbarkeit, nicht Weißraum. Die Luft gehört
   in den Text und um die Bilder — nicht ins Menü.
   ===================================================================== */

/* ── Festwerte ─────────────────────────────────────────────────────── */
:root {
  --breite:        1440px;      /* breiter, damit die Tabellen nicht seitlich laufen
                                  (Michael Steiner, 30.10.2026) */
  --tinte:         #16181d;
  --tinte-leise:   #5c6270;
  --tinte-blass:   #8a8f99;
  --blau:          #1b3c6e;      /* Tintenblau */
  --blau-hell:     #2a579b;
  --blau-zart:     #eef2f8;
  --papier:        #ffffff;
  --papier-grau:   #f6f6f4;
  --papier-warm:   #faf8f4;
  --rand:          #e3e3df;
  --rand-stark:    #c9c9c3;
  --aussen:        #ebe8e2;

  --sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --serif:  "Iowan Old Style", "Palatino Linotype", Palatino,
            "Book Antiqua", Georgia, serif;

  --text:   16px;
  --zeile:  1.62;
  --mass:   70ch;                  /* Zeilenlänge für Fließtext */
  --spalte: 750px;                 /* = Breite der großen Fotos; Steckbrief fluchtet */
  --radius: 6px;
  --schatten-bild: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}

/* ── Grundlage ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text);
  line-height: var(--zeile);
  color: var(--tinte);
  background: var(--aussen);
  -webkit-font-smoothing: antialiased;
}
img, picture { max-width: 100%; height: auto; }
img { display: block; }
picture { display: block; }
a { color: var(--blau); }
a:hover { color: var(--blau-hell); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 18px; background: var(--blau); color: #fff;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

#fp-wrapper {
  max-width: var(--breite);
  margin: 0 auto;
  background: var(--papier);
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.05);
}
@media (min-width: 1480px) {
  #fp-wrapper { margin: 20px auto; border-radius: var(--radius); overflow: hidden; }
}

/* ── Topbar ────────────────────────────────────────────────────────── */
#fp-topbar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 6px 20px;
  background: var(--papier-grau);
  border-bottom: 1px solid var(--rand);
  font-size: 13px; line-height: 1.4;
}
.fp-toplinks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.fp-toplinks a { color: var(--tinte-leise); text-decoration: none; }
.fp-toplinks a:hover { color: var(--blau); text-decoration: underline; }
@media (max-width: 760px) {
  .fp-toplinks a:not(.lang-btn) { display: none; }   /* Beiwerk; Fußzeile hat dieselben */
}

.fp-toplinks a.lang-btn, .fp-fusslinks a.lang-btn {
  background: var(--tinte); color: #fff;
  padding: 3px 13px; border-radius: 999px;
  font-weight: 600; letter-spacing: .02em;
  text-decoration: none;
}
.fp-toplinks a.lang-btn:hover, .fp-fusslinks a.lang-btn:hover { background: var(--blau); color: #fff; }

/* ── Kopf ──────────────────────────────────────────────────────────── */
#fp-header {
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--rand);
}
.fp-logo { display: inline-block; }
.fp-logo img { width: auto; max-height: 40px; }
.fp-tagline {
  margin: 4px 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: 13.5px; color: var(--tinte-leise);
}

/* ── Hauptmenü ─────────────────────────────────────────────────────── */
/* Flach gehalten (Michael: das erste Muster war doppelt so hoch wie das
   alte Menü und schob den Inhalt unter den Bildschirmrand). Kein Klapp-
   menü auf keiner Breite (Michael: „Menschen HASSEN diese Burger
   Menüs"). Beim Überfahren deutlich: voller Blaugrund. */
#fp-nav {
  border-bottom: 2px solid var(--tinte);
  line-height: 1.25;
}
.fp-nav-row {
  display: grid;
  grid-template-columns: 24px 150px 1fr;
  gap: 0 10px;
  align-items: baseline;
  padding: 2px 20px;
}
.fp-nav-row + .fp-nav-row { border-top: 1px solid var(--rand); }
.fp-nav-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; align-self: center;
  border-radius: 50%;
  background: var(--tinte); color: #fff;
  font-size: 10.5px; font-weight: 700;
}
.fp-nav-num.fp-num-blank { background: none; }
.fp-nav-category { font-size: 13px; color: var(--tinte-leise); }
.fp-nav-category strong { color: var(--tinte); font-weight: 600; }
.fp-nav-links { display: flex; flex-wrap: wrap; gap: 0 2px; }
.fp-nav-links a {
  padding: 1px 8px; border-radius: 3px;
  font-size: 13px; color: var(--tinte);
  text-decoration: none; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.fp-nav-links a:hover,
.fp-nav-links a:focus-visible { background: var(--blau); color: #fff; }
.fp-nav-links a[aria-current="page"] { background: var(--tinte); color: #fff; font-weight: 600; }
.fp-nav-links a.fp-knopf { background: var(--blau); color: #fff; font-weight: 600; }
.fp-nav-links a.fp-knopf:hover { background: var(--blau-hell); }

@media (max-width: 900px) {
  .fp-nav-row { grid-template-columns: 20px 1fr; padding: 4px 14px; }
  .fp-nav-category, .fp-nav-links { grid-column: 2; }
  .fp-nav-links a { font-size: 14px; padding: 3px 8px; }
}
@media (max-width: 560px) {
  .fp-nav-row { grid-template-columns: 1fr; padding: 5px 12px; }
  .fp-nav-num { display: none; }
  .fp-nav-category, .fp-nav-links { grid-column: 1; }
}

/* ── Brotkrume (vom Skript eingefügt) ──────────────────────────────── */
#fp-bc {
  padding: 6px 20px;
  font-size: 12.5px; color: var(--tinte-blass);
  border-bottom: 1px solid var(--rand);
  background: var(--papier-warm);
}
#fp-bc a { color: var(--tinte-leise); text-decoration: none; }
#fp-bc a:hover { color: var(--blau); text-decoration: underline; }
#fp-bc span { margin: 0 5px; color: var(--rand-stark); }
#fp-bc .fp-bc-aktuell { margin: 0; color: var(--tinte); }

/* ── Seite: Inhalt und Seitenmenü ──────────────────────────────────── */
/* Im Quelltext steht der Inhalt VOR dem Seitenmenü — für Vorlese-
   programme und Suchmaschinen kommt das Wichtige zuerst. Auf breiten
   Bildschirmen stellt das Raster das Menü trotzdem nach links, wie
   bisher. Auf schmalen steht es unter dem Inhalt: sichtbar, nicht
   versteckt. */
.fp-seite {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-areas: "menue inhalt";
  gap: 0 34px;
  padding: 26px 26px 44px;
}
.fp-seite.ohne-menue { grid-template-columns: minmax(0, 1fr); grid-template-areas: "inhalt"; }
main { grid-area: inhalt; min-width: 0; }
/* FAQ-Archiv (faq/, faq-en/): Lesespalte statt voller Breite */
main.fp-faq { max-width: 980px; }
.fp-seitenmenue { grid-area: menue; }

@media (max-width: 860px) {
  .fp-seite {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "inhalt" "menue";
    padding: 18px 16px 32px;
  }
}

/* ── Seitenmenü ────────────────────────────────────────────────────── */
.fp-seitenmenue nav {
  position: sticky; top: 14px;
  font-size: 14px; line-height: 1.35;
}
/* Zwischenüberschriften deutlich als solche erkennbar: Tintenblau, fett,
   mit einer Linie darunter und mehr Luft davor (Michael Steiner,
   29.10.2026: „optisch deutlich stärker hervorheben“). */
.fp-seitenmenue h2 {
  margin: 24px 0 6px; padding: 0 8px 5px;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--blau);
  border-bottom: 2px solid var(--blau);
}
.fp-seitenmenue h2:first-child { margin-top: 0; }
/* „Home“: zwei Zeilen Abstand, eigene Linie, Haus-Zeichen */
.fp-seitenmenue .menue-home {
  margin: 2.8em 0 0; padding-top: 12px;
  border-top: 2px solid var(--rand-stark);
  max-width: none;
}
.fp-seitenmenue .menue-home a {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--blau);
}
.fp-seitenmenue .menue-home a::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3c6e' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 11 12 3l9 8'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fp-seitenmenue .menue-home a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 11 12 3l9 8'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}
.fp-seitenmenue ul { list-style: none; margin: 0; padding: 0; }
.fp-seitenmenue a {
  display: block; padding: 3px 8px; border-radius: 4px;
  color: var(--tinte); text-decoration: none;
}
.fp-seitenmenue a:hover { background: var(--blau); color: #fff; }
.fp-seitenmenue a[aria-current="page"] {
  background: var(--blau-zart); color: var(--blau); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--blau);
}
@media (max-width: 860px) {
  .fp-seitenmenue {
    margin-top: 32px; padding-top: 18px;
    border-top: 2px solid var(--rand-stark);
  }
  .fp-seitenmenue nav { position: static; columns: 2 170px; column-gap: 24px; }
  .fp-seitenmenue h2, .fp-seitenmenue ul { break-inside: avoid; }
  .fp-seitenmenue h2 { break-after: avoid; }
  .fp-seitenmenue .menue-home { column-span: all; margin-top: 1.6em; }
}

/* ── Überschriften und Fließtext ───────────────────────────────────── */
main h1 {
  margin: 0 0 18px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.12;
  letter-spacing: -.01em;
}
main h1 .h1-reihe {
  display: block; margin-bottom: 4px;
  font-family: var(--sans); font-weight: 600;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise);
}
main h1 .h1-zusatz { font-style: italic; font-weight: 400; color: var(--tinte-leise); }

main h2 {
  margin: 34px 0 10px;
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; line-height: 1.25;
}
main p, main ul, main ol { max-width: var(--mass); }
main p { margin: 0 0 1em; }
main ul, main ol { margin: 0 0 1.1em; padding-left: 1.3em; }
main li { margin: .15em 0; }
main p.listeneinleitung { margin-bottom: .3em; }
main hr { border: 0; border-top: 1px solid var(--rand); margin: 28px 0; max-width: var(--mass); }
/* ── Verweise: intern und extern deutlich unterschieden ───────────────
   Michael Steiner, 03.11.2026: „kennzeichne externe Links deutlicher als
   extern als jetzt. Interne Links werden in der Liste mit den LEs und SEs
   zu unscheinbar. Mach dies deutlicher“.
   Extern (andere Website, neuer Tab): braun, gepunktet unterstrichen, dazu
   das Schild „↗ extern“. Intern bleibt Tintenblau; in Tabellen halbfett
   bzw. als blaues Schild (siehe .ue-tabelle). Erkannt wird extern an der
   Adresse — interne Verweise sind immer relativ (CLAUDE.md). */
main a[href^="http://"]:not([href*="fountainpen.de"]),
main a[href^="https://"]:not([href*="fountainpen.de"]) {
  color: #7a4a12; text-decoration-line: underline; text-decoration-style: dotted;
  text-underline-offset: 3px;
}
main a[href^="http://"]:not([href*="fountainpen.de"]):hover,
main a[href^="https://"]:not([href*="fountainpen.de"]):hover { color: #a3600f; text-decoration-style: solid; }
main a[href^="http://"]:not([href*="fountainpen.de"]):not(:has(img))::after,
main a[href^="https://"]:not([href*="fountainpen.de"]):not(:has(img))::after {
  content: "\2197\0000a0extern";
  display: inline-block; margin-left: .4em; padding: 0 .5em;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; font-style: normal;
  line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: #7a4a12; background: #fdf3e3; border: 1px solid #ecd2a8; border-radius: 999px;
  vertical-align: 1px;
}
html[lang|="en"] main a[href^="http://"]:not([href*="fountainpen.de"]):not(:has(img))::after,
html[lang|="en"] main a[href^="https://"]:not([href*="fountainpen.de"]):not(:has(img))::after {
  content: "\2197\0000a0external";
}

/* ── Steckbrief ────────────────────────────────────────────────────── */
/* Zuoberst, farbig abgesetzt: welche Bauart die Fotos zeigen und seit
   wann. Michael Steiner, 29.10.2026: „hier MUSS wirklich sehr, sehr
   deutlich werden, welcher Jahrgang jeweils gezeigt wird.“ Darunter die
   Daten genau dieser Bauart, dann „Nicht zu verwechseln“ mit Verweisen
   auf die anderen Bauarten. Die Quellen sind zugeklappt. */
.steckbrief {
  max-width: var(--spalte);
  margin: 0 0 28px;
  background: var(--papier-warm);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.steckbrief .gezeigt {
  background: var(--blau);
  color: #fff;
  padding: 14px 20px 14px;
}
.steckbrief .gezeigt p { margin: 0; max-width: none; }
.steckbrief .gezeigt-marke {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #c3d2ea;
}
.steckbrief .gezeigt p.gezeigt-was {
  margin-top: 3px;
  font-family: var(--serif); font-size: 21px; line-height: 1.3; font-weight: 600;
}
.steckbrief .gezeigt p.gezeigt-merkmale { margin-top: 7px; font-size: 15px; line-height: 1.5; color: #e4ebf6; }
.steckbrief .gezeigt a, .steckbrief .gezeigt sup a { color: #fff; }
.steckbrief .koerper { padding: 14px 20px 10px; }
.steckbrief h2, .steckbrief h3 {
  margin: 0 0 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blau);
}
.steckbrief .abgrenzung { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--rand); }
.steckbrief .abgrenzung ul { list-style: none; margin: 0; padding: 0; }
.steckbrief .abgrenzung li {
  margin: 0 0 10px; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--rand-stark);
}
.steckbrief .abgrenzung p { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.55; }
.steckbrief .abgrenzung .abgr-titel { font-size: 15px; font-weight: 600; color: var(--tinte); }
.steckbrief .abgrenzung .abgr-seiten { margin-top: 3px; font-size: 14px; }
.steckbrief dl { margin: 0; }
.steckbrief dl > div {
  display: grid; grid-template-columns: 132px 1fr; gap: 0 14px;
  padding: 6px 0;
  border-top: 1px solid var(--rand);
}
.steckbrief dl > div:first-child { border-top: none; }
.steckbrief dt { color: var(--tinte-leise); font-size: 14px; }
.steckbrief dd { margin: 0; font-size: 15px; }
.steckbrief sup { font-size: 11px; line-height: 0; margin-left: 2px; }
.steckbrief sup a { text-decoration: none; padding: 0 1px; }
.steckbrief details { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rand);
                      font-size: 13.5px; line-height: 1.55; color: var(--tinte-leise); }
.steckbrief summary { cursor: pointer; color: var(--blau); padding: 4px 0; }
.steckbrief .anmerkungen ol { margin: 6px 0 4px; padding-left: 1.6em; }
.steckbrief .anmerkungen li { margin: .45em 0; scroll-margin-top: 16px; }
.steckbrief .anmerkungen li:target { background: var(--blau-zart); border-radius: 3px; }
@media (max-width: 520px) {
  .steckbrief dl > div { grid-template-columns: 1fr; }
  .steckbrief dt { font-size: 12.5px; }
  .steckbrief .gezeigt p.gezeigt-was { font-size: 18px; }
}

/* ── Alle Ausführungen eines Modells ───────────────────────────────── */
/* Unter dem Inhalt der Seite: der Steckbrief oben beschreibt die Bauart
   auf den Fotos, hier stehen alle anderen, nach Bauart und Zeit. */
.ausfuehrungen {
  max-width: var(--spalte);
  margin: 36px 0 28px; padding-top: 18px;
  border-top: 2px solid var(--blau);
  scroll-margin-top: 16px;
}
.ausfuehrungen h2 {
  margin: 0 0 6px;
  font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--tinte);
}
.ausfuehrungen p { max-width: none; }
.ausfuehrungen .ausf-einleitung { margin: 0 0 14px; font-size: 15px; color: var(--tinte-leise); }
.ausfuehrungen details.ausf-gruppe {
  margin: 0 0 10px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--papier);
}
.ausfuehrungen summary {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--blau);
  list-style: none;
}
.ausfuehrungen summary::-webkit-details-marker { display: none; }
.ausfuehrungen summary::before { content: "▸"; color: var(--blau); }
.ausfuehrungen details[open] > summary::before { content: "▾"; }
.ausfuehrungen .ausf-zahl {
  margin-left: auto; font-weight: 600; font-size: 12.5px;
  color: var(--tinte-leise); background: var(--papier-grau);
  border-radius: 999px; padding: 1px 9px;
}
.ausfuehrungen table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
/* Spalten Nummer | Ausführung | Zeit (09.11.2026: die Nummer zuerst und fett) — über die Klasse, nicht die Stelle */
.ausfuehrungen th.ausf-nr { width: 20%; }
.ausfuehrungen th.ausf-zeit { width: 24%; }
.ausfuehrungen th {
  text-align: left; font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-blass);
  padding: 6px 14px; border-top: 1px solid var(--rand);
}
.ausfuehrungen td { padding: 7px 14px; border-top: 1px solid var(--rand); vertical-align: top; line-height: 1.45; }
.ausfuehrungen td.ausf-nr { font-size: 13.5px; color: var(--tinte); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
.ausfuehrungen td.ausf-nr strong { font-weight: 700; }
.ausfuehrungen .ausf-bez { font-weight: 600; color: var(--tinte); }
.ausfuehrungen td.ausf-zeit { color: var(--tinte-leise); }
.ausfuehrungen .ausf-quellen { margin-top: 12px; font-size: 13px; color: var(--tinte-leise); }
@media (max-width: 640px) {
  /* Zeilen als Blöcke; der Kopf bleibt als Leiste zum Sortieren stehen */
  .ausfuehrungen table, .ausfuehrungen thead, .ausfuehrungen tbody { display: block; }
  .ausfuehrungen thead tr { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 6px 14px; }
  .ausfuehrungen thead th { display: block; width: auto !important; padding: 0; border: 0; }
  .ausfuehrungen tbody tr { display: block; padding: 8px 14px; border-top: 1px solid var(--rand); }
  .ausfuehrungen td:nth-child(n) { display: block; padding: 1px 0; border: 0; white-space: normal; }
}

/* ── Übersicht einer Reihe ─────────────────────────────────────────── */
/* Heritage, Meisterstück Great Masters, Masters of Art (Menüpunkte vom
   29.10.2026). Oben der Kasten im Stil des Steckbriefs: was die Seite
   zeigt, Gruppen, „Nicht zu verwechseln“. Darunter je Gruppe eine
   Tabelle — Michael Steiner: „jedes Schreibgerät eine Zeile“. Die
   Tabelle läuft auf schmalen Bildschirmen seitlich, statt Spalten zu
   verlieren. */
.ue-gruppe { margin: 38px 0 0; scroll-margin-top: 14px; }
.ue-gruppe > h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 8px;
}
.ue-gruppe .ue-zeit {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--blau); background: var(--blau-zart);
  border-radius: 999px; padding: 1px 10px;
}
.ue-gruppe .ue-zahl { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--tinte-blass); }
.ue-tabelle {
  margin: 12px 0 0; overflow-x: auto;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--papier);
}
.ue-tabelle:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.ue-tabelle table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.ue-tabelle th {
  text-align: left; font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-blass);
  background: var(--papier-grau); padding: 8px 10px; border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.ue-tabelle td { padding: 8px 10px; border-top: 1px solid var(--rand); vertical-align: top; line-height: 1.45; }
.ue-tabelle tbody tr:first-child td { border-top: 0; }
.ue-tabelle tbody tr:hover td { background: var(--papier-warm); }
.ue-tabelle td.ue-jahr, .ue-tabelle td.ue-geraet, .ue-tabelle td.ue-preis { white-space: nowrap; }
.ue-tabelle td.ue-jahr { color: var(--tinte-leise); }
.ue-tabelle td.ue-auflage { color: var(--tinte-leise); min-width: 96px; }
/* Breite und Ausrichtung über die Klasse der Spalte, nicht über ihre Stelle — die Spaltenfolge
   ist seit 09.11.2026 Nummer | Jahr | Gerät | Ausführung | … (Michael Steiner: „zunächst die
   Modellnummer … und dann alles andere“) */
.ue-tabelle td.ue-text { min-width: 220px; }
/* Die Nummer zuerst, fett, schmal, ohne Umbruch (Michael Steiner, 09.11.2026: „Die Modellnummer
   soll zudem immer in den Tabellen bold / fett markiert sein“). Zusätze darunter normal. */
.ue-tabelle td.ue-nr { width: 1%; min-width: 4.5em; font-weight: 700; color: var(--tinte);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ue-tabelle td.ue-nr .ue-hinweis { font-weight: 400; white-space: normal; min-width: 7em; }
.ue-tabelle td.ue-preis { text-align: right; font-variant-numeric: tabular-nums; }
.ue-tabelle th.ue-preis { text-align: right; }
.ue-tabelle td.ue-foto { white-space: nowrap; font-size: 13.5px; }
.ue-tabelle td.ue-quelle { font-size: 12.5px; color: var(--tinte-leise); min-width: 140px; }
/* Kleine Fotos und Angaben der früheren Übersicht in „Alle Schreibgeräte“
   (Michael Steiner, 30.10.2026: „nur eine Tabelle … auch die kleinen Fotos“).
   Die Fotos stehen in ihrer echten Größe (meist 60 px) — nie vergrößert. */
.ue-tabelle td.ue-foto .ue-bild { display: block; width: max-content; margin: 0 0 5px; }
.ue-tabelle td.ue-foto .ue-bild + .ue-bild { margin-top: 4px; }
.ue-tabelle td.ue-foto img { width: auto; max-width: 80px; height: auto; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); background: var(--papier); }
.ue-tabelle .ue-notiz { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45;
  color: var(--tinte-leise); white-space: normal; }
.ue-tabelle .ue-name { font-weight: 600; }
/* Interne Verweise in den Übersichten: blaues Schild („eigene Fotos“,
   „Editionsseite“) bzw. halbfett unterstrichen (Name als Verweis) */
.ue-tabelle a.ue-seite,
.ue-tabelle td.ue-foto a:not([href^="http"]):not(.ue-bild) {
  display: inline-block; padding: 1px 10px; border-radius: 999px;
  background: var(--blau); color: #fff; font-size: 12.5px; font-weight: 600;
  line-height: 1.5; text-decoration: none; white-space: nowrap;
}
.ue-tabelle a.ue-seite:hover,
.ue-tabelle td.ue-foto a:not([href^="http"]):not(.ue-bild):hover { background: var(--blau-hell); color: #fff; }
.ue-tabelle a.ue-ziel {
  font-weight: 600; color: var(--blau);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ue-tabelle a.ue-ziel:hover { color: var(--blau-hell); background: var(--blau-zart); }
.ue-tabelle .ue-hinweis { display: block; font-size: 12.5px; color: var(--tinte-blass); }
.ue-tabelle .ue-gm {
  display: inline-block; margin-left: 3px; padding: 0 7px;
  border-radius: 999px; background: var(--blau-zart); color: var(--blau);
  font-size: 11.5px; font-weight: 600; cursor: help;
}
.ue-fuss {
  margin: 40px 0 0; padding-top: 16px;
  border-top: 1px solid var(--rand);
  font-size: 14px; line-height: 1.55; color: var(--tinte-leise);
}
.ue-fuss h2 {
  margin: 0 0 8px; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blau);
}
.ue-fuss p { margin: 0 0 .6em; }

/* ── Tabellen aus dem Inhalt alter Seiten ──────────────────────────── */
/* Echte Datentabellen (writer.htm: Bild | Name | Jahr | Stückzahl) bleiben
   Tabellen — neubau.py erkennt sie (ist_datentabelle). Auf schmalen
   Bildschirmen läuft die Tabelle seitlich. */
.tabelle-rahmen { margin: 14px 0 22px; overflow-x: auto; }
table.daten { border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
table.daten th {
  text-align: left; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: var(--tinte-leise);
  background: var(--papier-grau); padding: 7px 10px; border-bottom: 1px solid var(--rand);
}
table.daten td { padding: 8px 10px; border-top: 1px solid var(--rand); vertical-align: top; line-height: 1.45; }
table.daten tr:first-child td { border-top: 0; }
table.daten img { max-width: 120px; height: auto; }

/* ── „Aus der Editionsliste“ und „Aus dem Archiv“ ──────────────────── */
.edb, .kur {
  max-width: var(--spalte);
  margin: 34px 0 0; padding: 16px 20px;
  background: var(--papier-warm);
  border: 1px solid var(--rand); border-left: 4px solid var(--blau);
  border-radius: var(--radius);
}
.edb h2, .kur h2 { margin: 0 0 6px; font-size: 19px; }
.edb .edb-sub, .edb .edb-q, .kur .kur-src { font-size: 13.5px; color: var(--tinte-leise); max-width: none; }
.edb table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.edb th {
  text-align: left; font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--tinte-leise); background: var(--papier-grau);
  padding: 6px 8px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
.edb td { padding: 6px 8px; border-top: 1px solid var(--rand); vertical-align: top; }
.edb .r { text-align: right; white-space: nowrap; }
.edb .nr, .edb .d { white-space: nowrap; color: var(--tinte-leise); }
.edb td.nr { color: var(--tinte); font-weight: 700; font-variant-numeric: tabular-nums; }
.kur .kur-kicker {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blau); margin-bottom: 4px;
}
.kur p { max-width: none; }

/* ── Alle Schreibgeräte einer Reihe (Serienseiten, bis 2026) ──────── */
/* Michael Steiner, 29.10.2026: „bei den Writers soll es natürlich bis 2026
   gehen ... das gilt für ALLE websites!“ — jedes Schreibgerät eine Zeile.
   Gebaut von skript/serienlisten.py; die Tabelle läuft seitlich. */
.edb.reihenliste { max-width: none; }
.edb.reihenliste h2, .edb.reihenliste h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.edb.reihenliste h3 { margin: 26px 0 4px; font-size: 17px; scroll-margin-top: 14px; }
.edb.reihenliste .ue-zeit {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--blau); background: var(--blau-zart);
  border-radius: 999px; padding: 1px 10px;
}
.edb.reihenliste .ue-zahl { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--tinte-blass); }
.edb.reihenliste .rl-sprung { font-size: 13.5px; line-height: 1.9; color: var(--tinte-leise); margin: 8px 0 0; max-width: none; }
.edb.reihenliste .ue-tabelle { background: var(--papier); }
.edb.reihenliste .ue-tabelle table { min-width: 940px; margin: 0; }
.edb.reihenliste .ue-tabelle th {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-blass); padding: 8px 10px;
}
.edb.reihenliste .ue-tabelle td { padding: 8px 10px; line-height: 1.45; }
.edb.reihenliste tr.rl-neues-jahr td { border-top: 2px solid var(--rand-stark); }
.edb.reihenliste tbody tr:first-child td { border-top: 0; }
.edb.reihenliste tr[id] { scroll-margin-top: 14px; }

/* ── Seitenmenü: Anmerkungen zu Einträgen ─────────────────────────── */
.fp-seitenmenue .menue-notiz { display: block; padding: 0 8px 4px; font-size: 12px; color: var(--tinte-blass); }
.fp-seitenmenue .menue-text { padding: 3px 8px; font-size: 13.5px; color: var(--tinte-leise); }

/* ── Galerie ───────────────────────────────────────────────────────── */
/* Die Bilder sind der Gegenstand der Seite. Bisher saßen 750 px breite
   Fotos in einer Tabellenzelle, die Unterschrift in einer 96 px schmalen
   Spalte daneben — Wort für Wort umgebrochen. Jetzt: volle Spaltenbreite,
   Unterschrift darunter, Klick vergrößert. */
.galerie { margin: 6px 0 30px; display: grid; gap: 26px; }
.galerie figure { margin: 0; }
.galerie img {
  border-radius: 4px;
  box-shadow: var(--schatten-bild);
  background: var(--papier);
}
.galerie figure.breit img { width: auto; max-width: 100%; }   /* nie über die echte Größe — sonst unscharf */
.galerie figcaption {
  max-width: var(--spalte);
  margin-top: 8px;
  font-size: 14px; line-height: 1.45; color: var(--tinte-leise);
}
.galerie.raster {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: start; gap: 18px;
}
.galerie.raster img { width: auto; max-width: 100%; }
/* Nie über die eigene Größe hinaus vergrößern — die Auflösung reicht dafür
   nicht (Michael Steiner, 30.10.2026: „merke dir bitte, dass Du nicht
   vergrößern sollst, weil dann die Auflösung nicht reicht“). Kleine Bilder
   stehen deshalb in ihrer echten Größe nebeneinander. */
.galerie.leiste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.galerie.leiste figure { flex: 0 0 auto; max-width: 240px; }
.galerie.leiste img { width: auto; max-width: 100%; }

.fp-zoomable { cursor: zoom-in; transition: transform .15s, box-shadow .15s; }
.fp-zoomable:hover { box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 12px 32px rgba(0,0,0,.12); }

/* ── Anderssprachiger Abschnitt ────────────────────────────────────── */
.andere-sprache {
  margin: 30px 0;
  padding-top: 18px;
  border-top: 1px solid var(--rand);
}
.sprachkennung {
  display: inline-block; margin: 0 0 10px;
  padding: 1px 9px; border-radius: 999px;
  background: var(--papier-grau); border: 1px solid var(--rand);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--tinte-leise);
}

/* ── Vor / Zurück ──────────────────────────────────────────────────── */
.vor-zurueck {
  display: flex; justify-content: space-between; gap: 14px;
  margin: 40px 0 0; padding-top: 18px;
  border-top: 1px solid var(--rand);
}
.vor-zurueck a {
  flex: 0 1 46%;
  display: block; padding: 10px 14px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  text-decoration: none; color: var(--tinte);
  background: var(--papier);
  transition: border-color .12s, background-color .12s;
}
.vor-zurueck a:hover { border-color: var(--blau); background: var(--blau-zart); color: var(--blau); }
.vor-zurueck span {
  display: block; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinte-blass);
}
.vor-zurueck .zurueck span::before { content: "← "; }
.vor-zurueck .weiter { margin-left: auto; text-align: right; }
.vor-zurueck .weiter span::after { content: " →"; }

/* ── Häufige Fragen ────────────────────────────────────────────────── */
.faq-verwandt {
  margin: 40px 0 0; padding: 18px 22px;
  background: var(--papier-warm);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.faq-verwandt h2 { margin: 0 0 10px; font-size: 19px; }
.faq-verwandt ul { margin: 0; padding-left: 1.1em; max-width: none; }
.faq-verwandt li { margin: .45em 0; }
.faq-verwandt a { text-decoration: none; }
.faq-verwandt a:hover { text-decoration: underline; }
.faq-verwandt .aufrufe { color: var(--tinte-blass); font-size: 13px; white-space: nowrap; }
.faq-fuss { margin: 12px 0 0; font-size: 13.5px; color: var(--tinte-leise); }

/* ── Weitere Modelle ───────────────────────────────────────────────── */
.fp-weitere { margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--rand); }
.fp-weitere h2 { margin: 0 0 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; }
.fp-weitere ul {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  font-size: 14px;
}
.fp-weitere li::before { content: "› "; color: var(--tinte-blass); }
.fp-weitere a { text-decoration: none; }
.fp-weitere a:hover { text-decoration: underline; }

/* ── Fußzeile ──────────────────────────────────────────────────────── */
#fp-footer {
  padding: 22px 26px 26px;
  background: var(--papier-grau);
  border-top: 1px solid var(--rand);
  font-size: 13.5px; color: var(--tinte-leise);
  text-align: center;
}
.fp-rechte {
  max-width: 760px; margin: 0 auto 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--tinte-blass);
}
.fp-fusslinks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; }
.fp-fusslinks a { color: var(--tinte-leise); text-decoration: none; }
.fp-fusslinks a:hover { color: var(--blau); text-decoration: underline; }
.fp-copy { margin: 12px 0 0; font-size: 12.5px; }

/* ── Suche (vom Skript eingefügt) ──────────────────────────────────── */
#fp-search-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; }
/* Breit genug, dass „Modelle suchen…“ ganz dasteht; die Lupe ist ein
   Hintergrundbild und nimmt dem Text keinen Platz weg. */
#fp-search-input {
  width: 172px; height: 28px; padding: 2px 12px 2px 30px;
  border: 1px solid var(--rand-stark); border-radius: 999px;
  background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 11px 50%;
  color: var(--tinte);
  font: inherit; font-size: 13px;
  transition: width .15s, border-color .15s;
}
#fp-search-input:focus { width: 232px; border-color: var(--blau); outline: none; }
#fp-search-input::placeholder { color: var(--tinte-blass); }
#fp-search-drop {
  display: none; position: absolute; top: 32px; right: 0; z-index: 50;
  min-width: 300px; max-height: 360px; overflow-y: auto;
  background: var(--papier);
  border: 1px solid var(--rand-stark); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
#fp-search-drop.fp-open { display: block; }
.fp-sr {
  display: block; padding: 7px 12px;
  border-bottom: 1px solid var(--rand);
  font-size: 13.5px; color: var(--tinte); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-sr:hover { background: var(--blau); color: #fff; }
.fp-sr em { font-style: normal; background: #fff3a8; color: inherit; border-radius: 2px; }
.fp-sr-none { display: block; padding: 9px 12px; font-size: 13px; color: var(--tinte-blass); }

/* ── Großansicht (vom Skript eingefügt) ────────────────────────────── */
#fp-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 32px; background: rgba(12, 14, 18, .94);
  cursor: zoom-out;
}
#fp-lb.fp-lb-open { display: flex; }
#fp-lb img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); background: #fff;
}
#fp-lb-cap {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  max-width: 80%; padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 13px; text-align: center;
}
#fp-lb-close, #fp-lb-prev, #fp-lb-next {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  font: inherit; line-height: 1; opacity: .8;
}
#fp-lb-close { top: 14px; right: 18px; background: none; font-size: 34px; }
#fp-lb-prev, #fp-lb-next {
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 60px; border-radius: var(--radius);
  background: rgba(255,255,255,.08); font-size: 36px;
}
#fp-lb-prev { left: 12px; }
#fp-lb-next { right: 12px; }
#fp-lb-close:hover, #fp-lb-prev:hover, #fp-lb-next:hover { opacity: 1; }
#fp-lb-prev:hover, #fp-lb-next:hover { background: rgba(255,255,255,.18); }
@media (max-width: 600px) {
  #fp-lb { padding: 14px; }
  #fp-lb-prev, #fp-lb-next { width: 36px; height: 48px; font-size: 28px; }
}

/* ── Nach oben (vom Skript eingefügt) ──────────────────────────────── */
#fp-btt {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tinte); color: #fff; font-size: 18px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .2s, background-color .15s;
}
#fp-btt.fp-btt-show { opacity: .9; }
#fp-btt:hover { opacity: 1; background: var(--blau); }

/* ── Bewegung sparsam ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Druck ─────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; font-size: 11pt; }
  #fp-wrapper { box-shadow: none; max-width: none; margin: 0; }
  #fp-topbar, #fp-nav, #fp-bc, .fp-seitenmenue, .vor-zurueck,
  #fp-btt, #fp-search-wrap, .skip-link { display: none !important; }
  .fp-seite { display: block; padding: 0; }
  .galerie img, .fp-zoomable { box-shadow: none; }
  .steckbrief details { display: block; }
  .steckbrief details > ol { display: block; }
  a { color: inherit; text-decoration: none; }
  figure, .steckbrief { break-inside: avoid; }
}

/* ── Bildvergleich Original und Fälschung (fakes.htm) ───────────────── */
section.fkv { margin: 30px 0 0; }
.fkv .fkv-sub { color: var(--tinte-leise); margin: 0 0 14px; }
.fkv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fkv-card { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--papier);
  display: block; text-decoration: none; color: var(--tinte); }
.fkv-card:hover { border-color: var(--rand-stark); }
.fkv-card img { display: block; width: auto; max-width: 100%; height: auto; }   /* nie vergrößern */
.fkv-card .fkv-t { font-size: 14px; font-weight: 600; padding: 9px 12px 3px; }
.fkv-card .fkv-n { font-size: 12.5px; color: var(--tinte-blass); padding: 0 12px 10px; }

/* ── Uhren und Bereichsübersichten (uhren_uebersicht.py, bereiche_uebersicht.py) ── */
.edb.reihe-bereich .ue-tabelle th { text-align: left; }
.edb.reihe-uhren .ue-tabelle td.ue-text { min-width: 260px; }
.edb.reihe-uhren .ue-tabelle td.ue-nr { white-space: normal; min-width: 7em; }
.edb.reihe-bereich .ue-tabelle table { min-width: 640px; }
.edb.reihe-bereich .ue-tabelle td.ue-text { min-width: 240px; }
.edb.reihe-bereich .ue-tabelle td.ue-foto { width: 96px; }
.edb.reihe-uhren .uhren-linien { max-width: none; margin: 10px 0 0; padding-left: 1.2em; }
.edb.reihe-uhren .uhren-linien li { margin: .55em 0; line-height: 1.5; }
.edb.reihe-uhren .uhren-linien .ue-zeit { margin: 0 4px; }

/* ── Literatur-Fußnoten (04.11.2026) ──────────────────────────────────
   Michael Steiner, 04.11.2026: „Wenn Du Diary usw. beschreibst, müsste es
   danach eine Fußnote geben, die zu der Quellenangabe führt. dies wäre auch
   als Tool Tipp möglich“. Hinter der Nennung eines Werks ein hochgestelltes
   Zeichen (a, b, c …): Überfahren zeigt die vollständige Angabe (title),
   ein Klick springt zur Literaturliste unten auf der Seite. Das Zeichen
   kommt aus data-fn und ist kein Text — Suche und Prüfungen lesen „Diary“,
   nicht „Diarya“. Gebaut von skript/literatur.py. */
a.lit-fn { text-decoration: none; }
a.lit-fn::after {
  content: attr(data-fn);
  font-size: .72em; line-height: 0; vertical-align: super;
  margin-left: .08em; padding: 0 1px;
  color: var(--blau); font-weight: 600; font-style: italic;
}
a.lit-fn:hover::after, a.lit-fn:focus::after { color: var(--blau-hell); text-decoration: underline; }
.lit-liste {
  margin: 28px 0 8px; padding-top: 12px; border-top: 1px solid #ddd;
  font-size: 13.5px; color: var(--tinte-leise);
}
.lit-liste h2 { font-size: 15px; margin: 0 0 6px; }
.lit-liste ol { list-style: none; margin: 0; padding: 0; }
.lit-liste li { margin: .35em 0; padding-left: 1.6em; text-indent: -1.6em; scroll-margin-top: 16px; }
.lit-liste li:target { background: var(--blau-zart); border-radius: 3px; }
.lit-liste .lit-zeichen {
  display: inline-block; width: 1.6em; text-indent: 0;
  font-style: italic; font-weight: 600; color: var(--blau);
}
.lit-liste a.lit-mehr { white-space: nowrap; }

/* ── Beschreibungstexte: Einstieg, Zwischenüberschriften, Listen, Abweichende Angaben (Lesbarkeit, 04.11.2026) ── */
main .txt { max-width: var(--mass); }
main .txt p.einstieg { font-size: 1.12em; line-height: 1.55; color: var(--tinte); margin-top: 0.4em; }
main .txt h2.txt-h { margin: 1.6em 0 0.4em; }
main .txt ul.txt-liste { margin: 0.4em 0 1em 1.2em; padding: 0; }
main .txt ul.txt-liste li { margin: 0.25em 0; line-height: 1.55; }
main aside.abweichend { max-width: var(--mass); margin: 28px 0 10px; padding: 12px 18px; background: var(--blau-zart);
  border-left: 3px solid var(--blau); border-radius: 4px; font-size: 14.5px; }
main aside.abweichend h2 { font-size: 16px; margin: 0 0 6px; }
main aside.abweichend ul { margin: 0; padding-left: 1.1em; }
main aside.abweichend li { margin: 0.3em 0; }

/* ── Entwicklung eines Modells (146, 149; 09.11.2026) ── */
/* Michael Steiner, 09.11.2026: die Merkmale zur Bestimmung der Bauzeit
   nebeneinander — eine Zeile je Bauart, vor „Alle Ausführungen“.
   Gebaut von neubau.py (entwicklung_html) aus entwicklung-146-149.json. */
.entwicklung {
  margin: 36px 0 28px; padding-top: 18px;
  border-top: 2px solid var(--blau);
  scroll-margin-top: 16px;
}
.entwicklung h2 {
  margin: 0 0 6px;
  font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--tinte);
}
.entwicklung p.entw-einleitung { max-width: var(--mass); margin: 0 0 14px; font-size: 15px; color: var(--tinte-leise); }
.entwicklung .entw-rahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--papier); }
.entwicklung table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.entwicklung th {
  text-align: left; vertical-align: bottom; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-blass);
  padding: 8px 10px; background: var(--papier-grau); border-bottom: 1px solid var(--rand);
}
.entwicklung th:nth-child(1) { width: 19%; }
.entwicklung th:nth-child(7) { width: 9%; }
.entwicklung td { padding: 8px 10px; border-top: 1px solid var(--rand); vertical-align: top; }
.entwicklung td:first-child strong { display: block; color: var(--blau); font-size: 14.5px; }
.entwicklung .entw-jahre { display: block; font-weight: 600; color: var(--tinte); margin: 1px 0 4px; }
.entwicklung .entw-text { display: block; color: var(--tinte-leise); font-size: 13px; }
.entwicklung tr.entw-luecke td { background: var(--papier-warm); }
.entwicklung tr.entw-luecke td:last-child { color: var(--tinte-leise); font-style: italic; }
.entwicklung details.entw-anm { margin-top: 12px; }
@media (max-width: 760px) {
  .entwicklung thead { display: none; }
  .entwicklung tr { display: block; padding: 8px 12px; border-top: 1px solid var(--rand); }
  .entwicklung td { display: block; padding: 2px 0; border: 0; }
  .entwicklung td:not(:first-child)::before {
    content: attr(data-label) ": "; font-weight: 700; font-size: 11.5px; color: var(--tinte-blass);
    text-transform: uppercase; letter-spacing: .04em;
  }
}
.entwicklung sup { font-size: 11px; line-height: 0; margin-left: 2px; }
.entwicklung sup a { text-decoration: none; padding: 0 1px; }
.entwicklung details.entw-anm { padding-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--tinte-leise); }
.entwicklung details.entw-anm summary { cursor: pointer; color: var(--blau); padding: 4px 0; }
.entwicklung details.entw-anm ol { margin: 6px 0 4px; padding-left: 1.6em; max-width: 110ch; }
.entwicklung details.entw-anm li { margin: .45em 0; scroll-margin-top: 16px; }
.entwicklung details.entw-anm li:target { background: var(--blau-zart); border-radius: 3px; }

/* ── Sortierbare Tabellen (fp-neu.js, initSortieren; 09.11.2026) ──
   Michael Steiner, 09.11.2026: „in den Tabellen soll man auch sortieren
   können, also nach Modellnummer und auch nach Jahr“. Das Skript setzt in
   jeden Spaltenkopf von table.sortierbar einen Knopf mit Pfeil: ↕ unsortiert,
   ▲ aufsteigend, ▼ absteigend (aria-sort am th). Ohne Skript bleibt der Kopf
   reiner Text. */
table.sortierbar .sort-knopf {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; padding: 2px 0; border: 0; border-radius: 3px; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
  color: inherit; cursor: pointer; white-space: nowrap; min-height: 24px;
}
table.sortierbar .sort-knopf:hover { color: var(--blau); }
table.sortierbar .sort-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
table.sortierbar .sort-pfeil::after { content: "\2195"; font-size: 1.1em; line-height: 1; opacity: .4; }
table.sortierbar th[aria-sort] { color: var(--blau); }
table.sortierbar th[aria-sort="ascending"] .sort-pfeil::after { content: "\25B2"; font-size: .8em; opacity: 1; }
table.sortierbar th[aria-sort="descending"] .sort-pfeil::after { content: "\25BC"; font-size: .8em; opacity: 1; }
/* Finger: größere Fläche */
@media (pointer: coarse) {
  table.sortierbar .sort-knopf { min-height: 36px; }
}
/* Sortiert: die Jahrestrenner der Reihenlisten (rl-neues-jahr) gelten nicht mehr */
.edb.reihenliste table.ist-sortiert tr.rl-neues-jahr td { border-top: 1px solid var(--rand); }
.edb.reihenliste table.ist-sortiert tbody tr:first-child td { border-top: 0; }
/* Ansage für Bildschirmleser („Sortiert nach Nr., aufsteigend“), unsichtbar */
.fp-sr-nur {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Spaltenköpfe dürfen umbrechen und trennen — Michael Steiner, 09.11.2026:
   „In den Tabellen kannst Du auch Umbrüche nutzen, wenn es nötig ist also
   beispielsweise statt "Einführings" "Einführungs-preise"“.
   Silbentrennung nach der Sprache der Seite (<html lang>). */
.ue-tabelle th, .edb th, table.daten th, .ausfuehrungen th, .entwicklung th, table.vt th,
table.sortierbar th, table.sortierbar .sort-knopf {
  white-space: normal; -webkit-hyphens: auto; hyphens: auto;
  overflow-wrap: normal; word-break: normal; vertical-align: bottom;
}
table.sortierbar .sort-knopf { display: inline; text-align: left; }
table.sortierbar .sort-pfeil { display: inline-block; margin-left: 4px; white-space: nowrap; }

/* Seitentexte (09.11.2026): beschreibender Text dünner Seiten, nach den Fotos (neubau.seitentext_html) */
main section.seitentext { margin: 30px 0 12px; }
main section.seitentext > h2 { margin-bottom: 0.3em; }
main .seitentext h3.txt-h { margin: 1.4em 0 0.35em; font-size: 1.08em; }
main .seitentext aside.abweichend h3 { font-size: 16px; margin: 0 0 6px; }

/* Fundstellen in Klammern (neubau.verweise_html, Prüfung 3 vom 09.11.2026): kleiner und leiser, damit der
   Lesefluss nicht an jeder Quelle hängen bleibt — Michael Steiner, 09.11.2026: „Strukturiere den Text, Nutze
   Absätze und Hervorhebungen“. Wortlaut und Ziel der Verweise bleiben. */
main .beleg { font-size: 0.84em; color: var(--tinte-blass); white-space: normal; }
main .beleg a { color: var(--tinte-leise); }
main .beleg a[href^="http://"]:not([href*="fountainpen.de"])::after,
main .beleg a[href^="https://"]:not([href*="fountainpen.de"])::after { font-size: 0.85em; }

/* Prüfung 4 (10.11.2026): „Nicht zu verwechseln“ als eigener Kasten nach den ersten Fotos; Seitentext in Stücken
   zwischen den Bildgruppen (neubau.anordnen) */
.steckbrief.steckbrief-abgrenzung { margin-top: 26px; }
.steckbrief.steckbrief-abgrenzung .abgrenzung { margin-top: 0; padding-top: 0; border-top: 0; }
main section.seitentext.seitentext-forts { margin-top: 18px; }
main section.seitentext + .galerie, main .steckbrief-abgrenzung + .galerie { margin-top: 22px; }

/* Prüfung 4: Aufzählungen statt Zeilenfolgen (neubau: Strichlisten der alten Seiten, Steckbrief-Werte) */
main ul.strichliste { margin: 0.4em 0 1em; padding-left: 1.3em; }
main ul.strichliste li { margin: 0.2em 0; }
main ul.strichliste .strich { display: none; }
.steckbrief dd ul.sb-liste { margin: 0; padding-left: 1.1em; }
.steckbrief dd ul.sb-liste li { margin: 0.12em 0; }

/* Begriffserklärung „Edelharz“ (fp-neu.js): gepunktet unterstrichen, Erklärung beim Überfahren, Antippen oder Tab */
abbr.begriff-tipp { position: relative; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
abbr.begriff-tipp:hover::after, abbr.begriff-tipp:focus::after {
  content: attr(data-tipp); position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: min(320px, 78vw);
  padding: 10px 12px; border-radius: var(--radius); background: var(--tinte); color: #fff;
  font: 400 14px/1.45 var(--sans); text-align: left; white-space: normal; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
abbr.begriff-tipp:focus { outline: 2px solid var(--blau-hell); outline-offset: 2px; }