/* ====================================================================
   microdat · FIBU-Portal — Gestaltung
   fibu-portal-animation.css

   ERZEUGTE DATEI — nicht von Hand ändern.
   Sie entsteht aus folien-engine.css + marke-microdat.css,
   zusammengesetzt von bauen.mjs. Änderungen gehören in quelle/;
   danach `node bauen.mjs` aufrufen.

   Gebaut am 2026-08-21
   ==================================================================== */
/* ---------- folien-engine.css ---------- */
/* ============================================================
   FOLIEN-ENGINE · Gestaltung

   Einbettbar: Es gibt keine Regel außerhalb von `.film`. Weder `body`
   noch `:root` werden angefasst, damit die Datei auf einer fremden
   Seite (WordPress) nichts überschreibt, was ihr nicht gehört. Auch die
   Farbtokens hängen an `.film` statt an `:root`.

   Die Marke wird ausschließlich über die Tokens --akzent, --a, --b,
   --gut und --neutral gesetzt; die Werte hier sind nur ein neutraler
   Ausgangspunkt, den das Projekt überschreibt (marke-microdat.css).

   Schrift: Die Bühne führt ihre eigene schmale Schrift, weil die
   Beschriftungen im SVG auf enge Laufweiten gerechnet sind. Der
   Fließtext daneben erbt bewusst die Schrift der umgebenden Seite.
   ============================================================ */

.film {
  /* Grundflächen und Schrift */
  --papier: #f6f5f5;
  --flaeche: #ffffff;
  --flaeche-2: #ececec;
  --tinte: #16151a;
  --tinte-2: #55535c;
  --tinte-3: #85838c;
  --linie: #d5d3d8;
  --raster: #e6e4e8;

  /* Bedeutungsfarben — vom Projekt zu belegen */
  --akzent: #7a5cff;   /* Marke, Stempelfarbe        */
  --a: #c02b3c;        /* Seite A                    */
  --b: #1d4f7c;        /* Seite B                    */
  --gut: #4a7d4a;      /* bestätigt, erledigt        */
  --gut-weich: #4a7d4a22;
  --gold: #a8780c;     /* verschlüsselt · Schlüssel  */
  --gold-weich: #a8780c1a;
  --a-weich: #c02b3c1c;
  --neutral: #454049;  /* vermittelnde Instanz       */
  --neutral-2: #6a646f;

  /* Schmale Schrift für die Bühne; der Fließtext erbt von der Seite */
  --din: Bahnschrift, "DIN Alternate", "DIN Condensed", "Roboto Condensed",
         "Arial Narrow", system-ui, sans-serif;
  --fest: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Roboto Mono", ui-monospace, monospace;

  --schatten: 0 1px 2px rgba(20, 18, 24, .07), 0 10px 30px rgba(20, 18, 24, .07);
  --fokus: 0 0 0 3px var(--flaeche), 0 0 0 5px var(--akzent);

  /* Breite des Erklärtexts im Vollbild, als Anteil der Bildschirmbreite.
     Er verdeckt vom Bild nichts — er nimmt ihm diesen Anteil ab; mehr als
     ein Fünftel soll das nie sein. */
  --seitentext-anteil: 20%;
}

/* Dunkel nur auf ausdrückliche Ansage. Eingebettet richtet sich die
   Animation nach der Seite, nicht nach der Systemeinstellung des
   Besuchers — sonst steht eine dunkle Grafik auf hellem Grund. */
.film[data-theme="dunkel"] {
  --papier: #121115;
  --flaeche: #1b1a20;
  --flaeche-2: #252430;
  --tinte: #eeecf2;
  --tinte-2: #a29fab;
  --tinte-3: #7a7782;
  --linie: #34323c;
  --raster: #232229;
  --neutral: #b4b0bc;
  --neutral-2: #888490;
  --gold: #e0b13c;
  --gold-weich: #e0b13c1f;
  --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .4);
}

/* ============================================================
   Gerüst
   ============================================================ */
.film,
.film *,
.film *::before,
.film *::after { box-sizing: border-box; }

.film {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 26px);
  color: var(--tinte);
  line-height: 1.55;
  container-type: inline-size;
}

/* Kopf */
.film .kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px 24px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--tinte);
}
.film .kopf .marke {
  font-family: var(--din);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 6px;
}
.film .kopf .titel {
  font-family: var(--din);
  font-size: clamp(24px, 4.2vw, 44px);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.04;
  color: var(--tinte);
  margin: 0;
  padding: 0;
  text-wrap: balance;
}
.film .kopf .kicker {
  font-family: var(--din);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinte-2);
  text-align: right;
  line-height: 1.5;
}

/* Kino: Bild, Erklärtext und Bedienung als ein Stück.

   Es und nicht die Bühne allein geht in den Vollbildmodus — was außerhalb
   läge, wäre dort unsichtbar. Außerhalb des Vollbilds stapelt es seine
   Teile genau so untereinander, wie sie vorher standen; den Abstand gibt
   weiterhin der Film vor (`gap: inherit`), damit es dafür nur ein Maß
   gibt. */
.film .kino {
  display: flex;
  flex-direction: column;
  gap: inherit;
  min-width: 0;
}

/* Bühne.

   Auch sie ist eine Grifffläche: Drücken hält an, Loslassen lässt weiter-
   laufen — wie beim Erklärtext. Das Nachdunkeln beim Halten ist die
   einzige Rückmeldung, die es dafür gibt; im Vollbild ohne Text steht
   kein Knopf da, der seine Beschriftung wechseln könnte. */
.film .buehne-rahmen {
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 3px;
  box-shadow: var(--schatten);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: opacity .15s;
}
.film .buehne-rahmen:active { opacity: .82; }
.film .buehne {
  display: block;
  width: 100%;
  height: auto;
  background: var(--flaeche);
  fill: var(--tinte);
}

/* ============================================================
   Erklärtext zum laufenden Abschnitt

   Er erscheint an zwei Stellen, nie an beiden zugleich:

   · normal      unter der Bühne, über der Bedienung (`.mitlese`)
   · im Vollbild in einer eigenen Spalte neben dem Bild (`.seitentext`)

   Beide sind Griffflächen: Wer beim Lesen nicht hinterherkommt, drückt
   darauf und die Animation wartet, bis er loslässt. Deshalb kein
   Textmarkieren — sonst zöge das Halten eine blaue Auswahl auf. Dasselbe
   gilt für die Bühne selbst, siehe dort.
   ============================================================ */
.film .mitlese,
.film .seitentext {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.film .mitschrift {
  margin: 0;
  padding: 0;
  color: var(--tinte);
  text-wrap: pretty;
}

.film .mitlese {
  border-left: 3px solid var(--akzent);
  padding: 2px 0 2px 15px;
  transition: opacity .15s;
}
.film .mitlese:active { opacity: .62; }        /* sichtbare Rückmeldung beim Halten */

/* Außerhalb des Vollbilds haben Seitentext und Menüknopf nichts zu suchen —
   dort steht der Text bereits unter der Bühne. */
.film .seitentext,
.film .textknopf { display: none; }

.film .kino[data-vollbild="ja"]:hover .textknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 42px; height: 42px;
  padding: 0;
  appearance: none;
  cursor: pointer;
  color: var(--tinte) !important;
  background: var(--flaeche) !important;
  border: 1.5px solid var(--linie) !important;
  border-radius: 2px;
}
.film .kino[data-vollbild="ja"] .textknopf:hover { border-color: var(--tinte) !important; }
.film .kino[data-vollbild="ja"] .textknopf:focus-visible { outline: none; box-shadow: var(--fokus); }

/* Drei Striche, der unterste kürzer: ein Hamburger, der nach Text aussieht */
.film .textknopf > span { position: relative; display: block; }
.film .textknopf > span,
.film .textknopf > span::before,
.film .textknopf > span::after {
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.film .textknopf > span::before { content: ""; position: absolute; top: -6px; left: 0; }
.film .textknopf > span::after { content: ""; position: absolute; top: 6px; left: 0; width: 11px; }

/* ============================================================
   Vollbild: entweder ganz Bild oder Bild und Text nebeneinander

   Es gibt genau zwei Lagen, und der Menüknopf schaltet zwischen ihnen:

   · ohne Text   Das Bild bekommt den Schirm. Nichts daneben, nichts
                 darunter, nichts darüber. Bedient wird über den
                 Menüknopf, die Tastatur und den Griff aufs Bild.
   · mit Text    Bild und Text teilen sich die Fläche — der Text
                 höchstens `--seitentext-anteil`, das Bild den Rest. Der
                 Text liegt nicht über dem Bild, er verschmälert es.

   Daraus folgt der Platz für die Bedienung, ganz ohne zweites Maß: Ein
   16:9-Bild in einer 80 % breiten Spalte wird auf einem 16:9-Schirm auch
   nur 80 % hoch — die frei bleibende Zeile darunter nimmt Fortschritts-
   balken und Knöpfe auf. Die Bedienung kostet also nichts, sie füllt nur
   aus, was die Aufteilung ohnehin übrig lässt. Genau deshalb erscheint
   sie auch nur mit dem Text: Ohne ihn gäbe es diese Zeile nicht, sie
   müsste dem Bild abgezogen werden.

   Geschaltet wird über `data-vollbild` statt über `:fullscreen`. Der
   Zustand ist derselbe — die Engine setzt ihn bei `fullscreenchange` —,
   aber als Attribut lässt sich das Layout prüfen und ansehen, ohne den
   Vollbildmodus zu erzwingen: Den gibt ein Browser nur auf eine echte
   Nutzergeste her, nie einem Skript (pruefung/vollbild.html).
   ============================================================ */
.film .kino[data-vollbild="ja"] {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "bild";
  gap: 0;
  width: 100%;
  height: 100%;
  background: var(--papier);
}
.film .kino[data-vollbild="ja"][data-text="an"] {
  grid-template-columns: 1fr var(--seitentext-anteil);
  grid-template-rows: 1fr auto;
  grid-template-areas: "bild      text"
                       "bedienung text";
}

.film .kino[data-vollbild="ja"] > .buehne-rahmen {
  grid-area: bild;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* Die Bühne füllt ihr Feld; `preserveAspectRatio` hält das Seitenverhältnis
   und rückt das Bild in die Mitte. Was daneben frei bleibt, zeigt Papier —
   deshalb hier keine eigene Fläche. */
.film .kino[data-vollbild="ja"] .buehne {
  width: 100%;
  height: 100%;
  background: transparent;
}
.film .kino[data-vollbild="ja"] > .mitlese { display: none; }

.film .kino[data-vollbild="ja"][data-text="an"] > .seitentext {
  display: block;
  grid-area: text;
  min-width: 0;
  padding: 68px clamp(14px, 1.4vw, 26px) clamp(14px, 1.4vw, 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--flaeche);
  border-left: 1px solid var(--linie);
}
.film .kino[data-vollbild="ja"] .seitentext .mitschrift {
  font-size: clamp(12px, 1.05vw, 17px);
  line-height: 1.6;
}
.film .kino[data-vollbild="ja"] .seitentext:active { opacity: .78; }

/* Die Bedienung erscheint mit dem Text und verschwindet mit ihm: Sie wohnt
   in der Zeile, die erst durch die schmalere Bildspalte frei wird. Ohne
   Text gibt es diese Zeile nicht — dann bekommt das Bild den ganzen
   Schirm, und bedient wird über Menüknopf, Tastatur und den Griff aufs
   Bild (drücken hält an). */
.film .kino[data-vollbild="ja"] > .steuerung { display: none; }
.film .kino[data-vollbild="ja"][data-text="an"] > .steuerung {
  display: flex;
  grid-area: bedienung;
  padding: 0 clamp(12px, 1.5vw, 26px) clamp(10px, 1.2vw, 20px);
}
/* Im Vollbild zählt die Breite des Schirms, nicht die des Behälters. Die
   Regeln für schmale Spalten weiter unten messen aber weiterhin den
   Behälter — eingebettet in eine enge Textspalte legten sie die Bedienung
   sonst auch im Vollbild übereinander. */
.film .kino[data-vollbild="ja"] > .steuerung .knopf { flex: 0 0 auto; }
.film .kino[data-vollbild="ja"] > .steuerung .leiste { flex: 1 1 240px; order: 0; }
.film .kino[data-vollbild="ja"] > .steuerung .uhr { order: 0; width: auto; }

/* Steuerung */
.film .steuerung {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Farben der Knöpfe durchweg mit !important.

   Grund: WordPress-Themes setzen Knopffarben gern global und leiten sie aus
   der Hintergrundfarbe ab. Steht die auf #fff oder #000, kippt die Schrift
   dort auf den Gegenwert und der Knopf wird unlesbar. Die Angaben hier sind
   Teil der Gestaltung dieser Animation und dürfen nicht überschrieben werden.

   Der rote Hauptknopf braucht seine eigene Hover-Farbe: Eine gemeinsame
   Regel für alle Knöpfe würde ihm sonst die dunkle Schrift der hellen
   Knöpfe verpassen — auf Rot unlesbar. */
.film .knopf {
  appearance: none;
  font-family: var(--din);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte) !important;
  background: var(--flaeche) !important;
  border: 1.5px solid var(--linie) !important;
  border-radius: 2px;
  padding: 10px 14px;
  min-height: 40px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, filter .15s;
}
.film .knopf:hover {
  color: var(--tinte-2) !important;
  border-color: var(--tinte) !important;
}
.film .knopf:focus-visible { outline: none; box-shadow: var(--fokus); }

.film .knopf.haupt {
  background: var(--akzent) !important;
  border-color: var(--akzent) !important;
  color: #fff !important;
  min-width: 108px;
}
.film .knopf.haupt:hover {
  color: #fff !important;                /* nicht die dunkle Schrift der hellen Knöpfe */
  border-color: var(--akzent) !important;
  filter: brightness(1.08);
}

.film .leiste {
  flex: 1 1 240px;
  position: relative;
  min-width: 180px;
  height: 34px;
  display: flex;
  align-items: center;
}
.film .leiste .marken { position: absolute; inset: 0; pointer-events: none; }
.film .leiste .marken i {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.5px;
  height: 14px;
  background: var(--linie);
}
.film .leiste input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.film .leiste input::-webkit-slider-runnable-track {
  height: 4px; background: var(--flaeche-2); border-radius: 2px;
}
.film .leiste input::-moz-range-track {
  height: 4px; background: var(--flaeche-2); border-radius: 2px;
}
.film .leiste input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: -6px;
  background: var(--akzent); border: none; border-radius: 50%;
}
.film .leiste input::-moz-range-thumb {
  width: 16px; height: 16px; border: none;
  border-radius: 50%; background: var(--akzent);
}
.film .leiste input:focus-visible { outline: none; }
.film .leiste input:focus-visible::-webkit-slider-thumb { box-shadow: var(--fokus); }
.film .leiste input:focus-visible::-moz-range-thumb { box-shadow: var(--fokus); }

.film .uhr {
  font-family: var(--fest);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--tinte-2);
  white-space: nowrap;
}

/* ============================================================
   Erklärtexte zu den Folien

   Hier erbt bewusst alles die Schrift und Textgröße der Seite: Auf
   einer WordPress-Seite soll dieser Teil aussehen wie der übrige
   Fließtext und nicht wie ein Fremdkörper.
   ============================================================ */
.film .skript { display: flex; flex-direction: column; }
.film .skript-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.film .skript h2 {
  font-family: var(--din);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinte-2);
  margin: 0;
  padding: 0;
}
.film .skript .hinweis {
  font-size: .85em;
  color: var(--tinte-3);
  margin: 0;
}

/* Die Liste ist Wegweiser, nicht Textträger: Der Erklärtext steht unter der
   Bühne und im Vollbild am Rand, hier nur Zeitmarke und Überschrift. */
.film .passus {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 0 18px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--linie);
  padding: 13px 8px 13px 12px;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  position: relative;
  transition: background .18s;
}
.film .passus:last-child { border-bottom: 1px solid var(--linie); }
.film .passus::before {
  content: "";
  position: absolute;
  left: 0; top: -1px; bottom: 0;
  width: 3px;
  background: var(--akzent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.film .passus[aria-current="true"]::before { transform: scaleY(1); }
.film .passus:hover { background: var(--flaeche); }
.film .passus:focus-visible { outline: none; box-shadow: var(--fokus); }
.film .passus .tc {
  font-family: var(--fest);
  font-variant-numeric: tabular-nums;
  font-size: .78em;
  color: var(--tinte-3);
  padding-top: .35em;
  letter-spacing: .04em;
}
.film .passus .titel {
  display: block;
  font-family: var(--din);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-2);
  transition: color .18s;
}
.film .passus[aria-current="true"] .titel { color: var(--tinte); }
.film .passus[aria-current="true"] .tc { color: var(--akzent); }

/* Fuß */
.film .fuss {
  display: flex;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  border-top: 1.5px solid var(--tinte);
  padding-top: 14px;
  font-family: var(--din);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.film .fuss a {
  color: var(--akzent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.film .fuss a:hover { border-bottom-color: var(--akzent); }
.film .fuss a:focus-visible { outline: none; box-shadow: var(--fokus); }

.film .nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   Schmale Darstellung

   Gemessen wird die Breite des Behälters, nicht die des Fensters:
   Eingebettet steht die Animation oft in einer Spalte, die deutlich
   schmaler ist als der Bildschirm.
   ============================================================ */
@container (max-width: 720px) {
  .film .kopf { grid-template-columns: 1fr; align-items: start; }
  .film .kopf .kicker { text-align: left; }
  .film .fuss { flex-direction: column; }
}

@container (max-width: 520px) {
  /* Auf dem Telefon zählt die Bedienbarkeit mehr als die Zeile: Der
     Abspielknopf bekommt die volle Breite, die Leiste eine eigene. */
  .film .steuerung { gap: 10px; }
  .film .knopf.haupt { flex: 1 1 100%; }
  .film .leiste { flex: 1 1 100%; order: -1; }
  .film .knopf { flex: 1 1 auto; }
  .film .uhr { order: -1; width: 100%; }
}

/* Rückfallebene für Browser ohne Container-Anfragen (vor 2023) */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .film .kopf { grid-template-columns: 1fr; align-items: start; }
    .film .kopf .kicker { text-align: left; }
  }
}

/* ============================================================
   Bühnenklassen

   fill sitzt auf der Wurzel (.buehne), nicht auf den Elementen: Kinder
   erben es, ihre eigenen Präsentationsattribute schlagen die Vererbung.
   Eine Klassenregel würde sie dagegen überstimmen — aus demselben Grund
   tragen die .s-*-Klassen keine stroke-width.
   ============================================================ */
.film .buehne text { font-family: var(--din); }
.film .buehne .fest { font-family: var(--fest); }

.film .h1   { font-size: 54px; font-weight: 600; letter-spacing: .01em; }
.film .h2   { font-size: 34px; font-weight: 600; letter-spacing: .02em; }
.film .lbl  { font-size: 21px; font-weight: 600; letter-spacing: .17em; }
.film .lbls { font-size: 15px; font-weight: 600; letter-spacing: .15em; }
.film .lblt { font-size: 12.5px; font-weight: 600; letter-spacing: .18em; }
.film .satz { font-size: 21px; letter-spacing: .01em; }
.film .num  { font-size: 15px; letter-spacing: .02em; }
.film .nums { font-size: 12.5px; letter-spacing: .03em; }

.film .s-tinte   { fill: none; stroke: var(--tinte);   }
.film .s-linie   { fill: none; stroke: var(--linie);   }
.film .s-blass   { fill: none; stroke: var(--tinte-3); }
.film .s-akzent  { fill: none; stroke: var(--akzent);  }
.film .s-a       { fill: none; stroke: var(--a);       }
.film .s-b       { fill: none; stroke: var(--b);       }
.film .s-gut     { fill: none; stroke: var(--gut);     }
.film .s-gold    { fill: none; stroke: var(--gold);    }
.film .s-neutral { fill: none; stroke: var(--neutral); }
.film .f-gold      { fill: var(--gold-weich); }
.film .f-flaeche   { fill: var(--flaeche); }
.film .f-flaeche2  { fill: var(--flaeche-2); }
.film .f-akzent    { fill: var(--akzent); }
.film .rund { stroke-linecap: round; }
.film .eck  { stroke-linejoin: round; }

/* Nur der Zustand vor dem ersten Zeichnen. Danach setzt die Engine Deckung
   und Sichtbarkeit je Bild selbst: Die Überblendung gehört zur Zeitachse,
   nicht zur Wanduhr — sie muss beim Spulen dem Zeiger folgen und in einem
   einzeln herausgerechneten Bild überhaupt erst entstehen können. */
.film .folie {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .film .passus,
  .film .passus::before,
  .film .knopf { transition: none !important; }
}

/* ---------- marke-microdat.css ---------- */
/* ============================================================
   MARKE MICRODAT · Farbtokens

   Belegt ausschließlich die Tokens der Engine — keine eigenen Regeln,
   keine Selektoren außerhalb von `.film`. Wird nach folien-engine.css
   geladen und überschreibt deren neutrale Ausgangswerte.

   Werte aus den CSS-Variablen von microdat.de:
   --color-fibu #cc002e · --color-lohn #004574 · --color-steuer #548d54
   --color-microdat #e5003b
   ============================================================ */

.film {
  --papier: #f6f4f5;
  --flaeche: #ffffff;
  --flaeche-2: #eceaec;
  --tinte: #191114;
  --tinte-2: #5d5158;
  --tinte-3: #8b7f85;
  --linie: #d7cfd3;
  --raster: #e7e1e4;

  --akzent: #e5003b;      /* microdat            */
  --a: #cc002e;           /* Kanzlei · FIBU      */
  --a-weich: #cc002e1c;
  --b: #004574;           /* Mandant · Portal    */
  --gut: #4a7d4a;         /* bestätigt           */
  --gut-weich: #548d5422;
  --neutral: #4a4046;     /* Drehscheibe         */
  --neutral-2: #6d616a;
}

/* Dunkle Fassung — greift nur, wenn der Behälter sie ausdrücklich
   anfordert: <div id="…" class="film" data-theme="dunkel"> */
.film[data-theme="dunkel"] {
  --papier: #131013;
  --flaeche: #1c171a;
  --flaeche-2: #262024;
  --tinte: #efe9eb;
  --tinte-2: #a6989f;
  --tinte-3: #7c6f76;
  --linie: #362d33;
  --raster: #241e22;

  --akzent: #ff3860;
  --a: #ff4d6d;
  --a-weich: #ff4d6d20;
  --b: #57a8dd;
  --gut: #85c285;
  --gut-weich: #85c28522;
  --neutral: #b6a9b0;
  --neutral-2: #8a7d84;
}