/*
 * Das Blatt.
 *
 * Sieben Grundformen, jede vollständig in CSS. Die Akzentfarbe kommt als
 * Variable von aussen, damit eine Vorlage aus einer Grundform und einem
 * Farbwert besteht.
 *
 * Masse in Bildpunkten bei 96 dpi: A4 ist 794 mal 1123. Chromium druckt
 * genau dieses Blatt, deshalb stehen hier keine Umrechnungen mehr.
 *
 * Der Abstand zwischen zwei Stationen steht in --jl-abstand und wird von
 * dort aus gesetzt. Der Druck muss mit diesem Wert rechnen, weil er den
 * Blöcken unsichtbare Rahmen für den Seitenrand mitgibt und den
 * ursprünglichen Abstand dabei erhalten muss.
 */

.jl-blatt {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  position: relative;
  color: #1a2230;
  font-family: Inter, "Inter Variable", system-ui, sans-serif;
}

/* Beim Druck fällt die feste Höhe weg, den Umbruch macht der Browser. */
@media print {
  .jl-blatt { min-height: 0; box-shadow: none; }
}

  /* =====================================================================
     VORLAGE  spalte
     ===================================================================== */
  /*
   * Die Farbspalte ist der Hintergrund des Blattes, nicht die Fläche der
   * Spalte selbst.
   *
   * Grund: eine Spalte ist ein Flex-Element und damit genau so hoch wie
   * ihr Inhalt. Beim Druck über zwei Seiten hörte die Farbe dort auf, wo
   * der Text endet. Ein Verlauf mit hartem Stopp deckt dagegen immer die
   * volle Höhe des Blattes ab, auch über den Seitenumbruch hinweg.
   */
  .jl-spalte {
    display: flex;
    font-size: 12.5px;
    line-height: 1.5;
    background: linear-gradient(to right, var(--akzent) 0 262px, #fff 262px);
  }
  .jl-spalte .neben { width: 262px; flex: none; color: #dde8ee; padding: 38px 26px; }
  .jl-spalte .haupt { flex: 1; padding: 44px 38px 40px 32px; min-width: 0; }
  .jl-spalte .portraet {
    width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 22px;
    background: rgba(255,255,255,.14); display: grid; place-items: center;
    color: rgba(255,255,255,.8); font-size: 32px; font-weight: 700;
    border: 3px solid rgba(255,255,255,.22);
  }
  .jl-spalte .nkopf {
    font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.62); padding-bottom: 7px; margin-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,.17);
  }
  .jl-spalte .nblock { margin-bottom: 24px; }
  .jl-spalte .zeile { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
  .jl-spalte .zeile svg { width: 13px; height: 13px; flex: none; margin-top: 2px; opacity: .75; }
  .jl-spalte .marke {
    display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px; padding: 4px 9px; font-size: 11px; margin: 0 5px 6px 0;
  }
  .jl-spalte .sprachzeile { margin-bottom: 10px; }
  .jl-spalte .sprachzeile .oben { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; gap: 8px; }
  .jl-spalte .bahn { height: 4px; border-radius: 2px; background: rgba(255,255,255,.17); }
  .jl-spalte .bahn > i { display: block; height: 100%; border-radius: 2px; background: rgba(255,255,255,.7); }
  .jl-spalte h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.022em; line-height: 1.1; color: var(--akzent); }
  .jl-spalte .rolle { margin: 7px 0 0; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: #64818f; text-transform: uppercase; }
  .jl-spalte .strich { height: 3px; width: 52px; background: var(--akzent); margin: 16px 0 18px; border-radius: 2px; }
  .jl-spalte .hkopf {
    font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
    color: var(--akzent); margin: 26px 0 13px; display: flex; align-items: center; gap: 10px;
  }
  .jl-spalte .hkopf::after { content: ""; flex: 1; height: 1px; background: #e0e7ec; }
  .jl-spalte .stat { position: relative; padding-left: 19px; --jl-abstand: 17px; margin-bottom: var(--jl-abstand); }
  .jl-spalte .stat::before {
    content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px;
    border-radius: 50%; background: #fff; border: 2px solid var(--akzent);
  }
  .jl-spalte .stat .kopfzeile { display: block; }
  .jl-spalte .stat .titel { font-size: 13.5px; font-weight: 700; color: #16222f; }
  .jl-spalte .stat .firma { font-size: 12.5px; color: #4c7d92; font-weight: 600; }
  .jl-spalte .stat .zeit { font-size: 10.5px; color: #8a95a3; margin-top: 3px; }
  .jl-spalte .stat ul { margin: 7px 0 0; padding: 0; list-style: none; }
  .jl-spalte .stat li { position: relative; padding-left: 13px; margin-bottom: 4px; color: #47525f; }
  .jl-spalte .stat li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #aebfca; }

  /* =====================================================================
     VORLAGE  band
     ===================================================================== */
  .jl-band { font-size: 12.5px; line-height: 1.5; }
  .jl-band .band {
    background: var(--akzent); color: #e8f0ec; padding: 38px 48px 32px;
    display: flex; align-items: center; gap: 28px; position: relative; overflow: hidden;
  }
  .jl-band .band::after {
    content: ""; position: absolute; right: -70px; top: -90px; width: 290px; height: 290px;
    border-radius: 50%; background: rgba(255,255,255,.05);
  }
  .jl-band .portraet {
    width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); font-size: 30px; font-weight: 700;
    border: 3px solid rgba(255,255,255,.2); position: relative; z-index: 1;
  }
  .jl-band .kopftext { position: relative; z-index: 1; min-width: 0; }
  .jl-band h1 { margin: 0; font-size: 33px; font-weight: 800; letter-spacing: -.024em; }
  .jl-band .rolle { margin: 6px 0 0; font-size: 13.5px; color: rgba(255,255,255,.7); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .jl-band .zeilen { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 11.5px; color: rgba(255,255,255,.85); }
  .jl-band .zeilen .zeile { display: flex; align-items: center; gap: 6px; }
  .jl-band .zeilen svg { width: 12px; height: 12px; opacity: .7; }
  .jl-band .koerper { display: flex; padding: 30px 48px 40px; gap: 32px; }
  .jl-band .links { flex: 1; min-width: 0; }
  .jl-band .rechts { width: 210px; flex: none; }
  .jl-band .kopfz {
    font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
    color: var(--akzent); padding-bottom: 6px; margin: 0 0 13px; border-bottom: 2px solid var(--akzent);
  }
  .jl-band .nkopf {
    font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
    color: var(--akzent); padding-bottom: 5px; margin-bottom: 11px;
    border-bottom: 1px solid #dfe6e3;
  }
  .jl-band .nblock { margin-bottom: 22px; }
  .jl-band .stat { --jl-abstand: 16px; margin-bottom: var(--jl-abstand); }
  .jl-band .stat .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
  .jl-band .stat .zeit { flex: none; font-size: 10.5px; color: #7d8a92; font-weight: 600; }
  .jl-band .stat .titel { font-size: 13.5px; font-weight: 700; color: #17222a; }
  .jl-band .stat .firma { font-size: 12px; color: var(--akzent); font-weight: 600; margin-top: 1px; }
  .jl-band .stat ul { margin: 7px 0 0; padding: 0; list-style: none; }
  .jl-band .stat li { position: relative; padding-left: 13px; margin-bottom: 4px; color: #48545e; }
  .jl-band .stat li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #a8bfb5; }
  .jl-band .marke {
    display: block; background: #f2f6f4; border-left: 3px solid var(--akzent);
    padding: 7px 10px; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: #24483c;
  }
  .jl-band .sprachzeile { display: flex; justify-content: space-between; font-size: 11.5px; padding: 6px 0; border-bottom: 1px dashed #e2e8e5; gap: 8px; }
  .jl-band .bahn { display: none; }
  .jl-band .zeile { display: flex; gap: 7px; margin-bottom: 6px; font-size: 11.5px; }
  .jl-band .zeile svg { display: none; }

  /* =====================================================================
     VORLAGE  klar
     ===================================================================== */
  .jl-klar { padding: 58px 70px; font-size: 12.5px; line-height: 1.55; color: #23282e; }
  .jl-klar .portraet { display: none; }
  .jl-klar .kopfreihe { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .jl-klar h1 { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 38px; font-weight: 600; letter-spacing: -.015em; line-height: 1; }
  .jl-klar .rolle { margin: 9px 0 0; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); font-weight: 600; }
  .jl-klar .zeilen { text-align: right; font-size: 11.5px; color: #5d666f; line-height: 1.8; }
  .jl-klar .zeilen .zeile { justify-content: flex-end; display: flex; gap: 6px; }
  .jl-klar .zeilen svg { display: none; }
  .jl-klar .regel { height: 1px; background: #23282e; margin: 20px 0 24px; }
  .jl-klar .koerper { display: block; }
  .jl-klar .rechts { margin-top: 26px; }
  .jl-klar .kopfz, .jl-klar .nkopf, .jl-klar .hkopf {
    font-family: "Source Serif 4", Georgia, serif; font-size: 15px; font-weight: 700;
    letter-spacing: .02em; margin: 0 0 12px; padding-bottom: 5px;
    border-bottom: 1px solid #ddd8ce; color: #23282e; text-transform: none;
  }
  .jl-klar .nblock { margin-bottom: 22px; }
  .jl-klar .stat { --jl-abstand: 15px; margin-bottom: var(--jl-abstand); display: block; }
  .jl-klar .stat .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
  .jl-klar .stat .titel { font-size: 13.5px; font-weight: 700; }
  .jl-klar .stat .zeit { font-size: 11px; color: #7f8890; flex: none; width: auto; }
  .jl-klar .stat .firma { font-size: 12.5px; color: var(--akzent); font-weight: 600; margin-top: 1px; }
  .jl-klar .stat ul { margin: 6px 0 0; padding: 0; list-style: none; }
  .jl-klar .stat li { position: relative; padding-left: 14px; margin-bottom: 4px; color: #454d55; }
  .jl-klar .stat li::before { content: "\2022"; position: absolute; left: 2px; top: -1px; color: #b9b0a0; }
  .jl-klar .marke { display: inline; font-size: 12.5px; color: #454d55; }
  .jl-klar .marke::after { content: " · "; color: #b9b0a0; }
  .jl-klar .marke:last-child::after { content: ""; }
  .jl-klar .sprachzeile { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid #f0ece5; gap: 8px; }
  .jl-klar .bahn { display: none; }
  .jl-klar .zeile { display: flex; gap: 7px; }

  /* =====================================================================
     VORLAGE  rechts
     Hauptteil links, helle Nebenspalte rechts mit Farbkante.
     ===================================================================== */
  .jl-rechts {
    display: flex;
    font-size: 12.5px;
    line-height: 1.5;
    /* Helle Spalte und Farbkante als Blatthintergrund, siehe oben. */
    background:
      linear-gradient(to left, #f4f6f8 0 252px, transparent 252px),
      linear-gradient(to left, var(--akzent) 252px, transparent 252px 257px);
  }
  .jl-rechts .haupt { flex: 1; padding: 46px 32px 40px 44px; min-width: 0; order: 1; }
  .jl-rechts .neben { width: 257px; flex: none; order: 2; padding: 40px 26px 40px 31px; }
  .jl-rechts .portraet {
    width: 124px; height: 124px; border-radius: 50%; margin: 0 auto 22px;
    background: var(--akzent); display: grid; place-items: center;
    color: #fff; font-size: 31px; font-weight: 700;
  }
  .jl-rechts .nkopf {
    font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--akzent); padding-bottom: 6px; margin-bottom: 11px; border-bottom: 1px solid #dde3e8;
  }
  .jl-rechts .nblock { margin-bottom: 22px; }
  .jl-rechts .zeile { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; color: #46505c; }
  .jl-rechts .zeile svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--akzent); }
  .jl-rechts .marke { display: inline-block; background: #fff; border: 1px solid #dde3e8; border-radius: 6px; padding: 4px 9px; font-size: 11px; margin: 0 5px 6px 0; color: #3c4653; }
  .jl-rechts .sprachzeile { margin-bottom: 10px; }
  .jl-rechts .sprachzeile .oben { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; gap: 8px; color: #3c4653; }
  .jl-rechts .bahn { height: 4px; border-radius: 2px; background: #e2e7ec; }
  .jl-rechts .bahn > i { display: block; height: 100%; border-radius: 2px; background: var(--akzent); }
  .jl-rechts h1 { margin: 0; font-size: 33px; font-weight: 800; letter-spacing: -.024em; color: #16202b; }
  .jl-rechts .rolle { margin: 7px 0 0; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--akzent); text-transform: uppercase; }
  .jl-rechts .strich { height: 3px; width: 52px; background: var(--akzent); margin: 16px 0 20px; border-radius: 2px; }
  .jl-rechts .hkopf {
    font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
    color: var(--akzent); margin: 26px 0 13px; padding-bottom: 6px; border-bottom: 2px solid #e6ebef;
  }
  .jl-rechts .stat { --jl-abstand: 16px; margin-bottom: var(--jl-abstand); }
  .jl-rechts .stat .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
  .jl-rechts .stat .titel { font-size: 13.5px; font-weight: 700; color: #16222f; }
  .jl-rechts .stat .zeit { flex: none; font-size: 10.5px; color: #8a95a3; font-weight: 600; }
  .jl-rechts .stat .firma { font-size: 12.5px; color: var(--akzent); font-weight: 600; }
  .jl-rechts .stat ul { margin: 7px 0 0; padding: 0; list-style: none; }
  .jl-rechts .stat li { position: relative; padding-left: 13px; margin-bottom: 4px; color: #47525f; }
  .jl-rechts .stat li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #b3bfcb; }

  /* =====================================================================
     VORLAGE  kachel
     Zweispaltig hell, Stationen in Karten, kräftiger Akzent.
     ===================================================================== */
  .jl-kachel { font-size: 12.5px; line-height: 1.5; }
  .jl-kachel .kopfreihe {
    padding: 42px 44px 24px; display: flex; align-items: center; gap: 24px;
    border-bottom: 4px solid var(--akzent);
  }
  .jl-kachel .portraet {
    width: 104px; height: 104px; border-radius: 22px; flex: none; display: grid; place-items: center;
    background: var(--akzent); color: #fff; font-size: 29px; font-weight: 700;
  }
  .jl-kachel h1 { margin: 0; font-size: 31px; font-weight: 800; letter-spacing: -.022em; color: #1c1f2b; }
  .jl-kachel .rolle { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--akzent); letter-spacing: .03em; }
  .jl-kachel .zeilen { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px 18px; font-size: 11.5px; color: #5b6270; }
  .jl-kachel .zeilen .zeile { display: flex; align-items: center; gap: 6px; }
  .jl-kachel .zeilen svg { width: 12px; height: 12px; opacity: .6; }
  .jl-kachel .koerper { display: flex; gap: 28px; padding: 26px 44px 40px; }
  .jl-kachel .links { flex: 1; min-width: 0; }
  .jl-kachel .rechts { width: 212px; flex: none; }
  .jl-kachel .kopfz, .jl-kachel .nkopf {
    font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--akzent); margin: 0 0 12px; display: flex; align-items: center; gap: 9px;
  }
  .jl-kachel .kopfz::before, .jl-kachel .nkopf::before {
    content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--akzent); flex: none;
  }
  .jl-kachel .nblock { margin-bottom: 22px; }
  .jl-kachel .stat {
    background: #f8f9fc; border: 1px solid #e8ecf4; border-radius: 10px;
    padding: 12px 14px; --jl-abstand: 10px; margin-bottom: var(--jl-abstand);
  }
  .jl-kachel .stat .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .jl-kachel .stat .titel { font-size: 13.5px; font-weight: 700; color: #1c1f2b; }
  .jl-kachel .stat .zeit {
    font-size: 10px; font-weight: 700; color: var(--akzent); flex: none;
    background: #fff; border: 1px solid #e4e8f2; border-radius: 20px; padding: 2px 9px;
  }
  .jl-kachel .stat .firma { font-size: 12px; color: #6b7280; font-weight: 600; margin-top: 2px; }
  .jl-kachel .stat ul { margin: 8px 0 0; padding: 0; list-style: none; }
  .jl-kachel .stat li { position: relative; padding-left: 13px; margin-bottom: 4px; color: #4a515d; }
  .jl-kachel .stat li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #c3cbdd; }
  .jl-kachel .marke {
    display: inline-block; background: #f1f2f9; color: var(--akzent);
    border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 600; margin: 0 5px 6px 0;
  }
  .jl-kachel .sprachzeile { margin-bottom: 9px; }
  .jl-kachel .sprachzeile .oben { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; gap: 8px; color: #2e3340; }
  .jl-kachel .bahn { height: 5px; border-radius: 3px; background: #eceff6; }
  .jl-kachel .bahn > i { display: block; height: 100%; border-radius: 3px; background: var(--akzent); }
  .jl-kachel .zeile { display: flex; gap: 7px; margin-bottom: 6px; color: #4a515d; }
  .jl-kachel .zeile svg { display: none; }

  /* =====================================================================
     VORLAGE  linie
     Einspaltig mit Zeitachse links. Datum in eigener Spur.
     ===================================================================== */
  .jl-linie { padding: 52px 60px; font-size: 12.5px; line-height: 1.55; }
  .jl-linie .kopfreihe { display: flex; align-items: center; gap: 22px; margin-bottom: 6px; }
  .jl-linie .portraet {
    width: 96px; height: 96px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: var(--akzent); color: #fff; font-size: 27px; font-weight: 700;
  }
  .jl-linie h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.025em; color: #1b2027; }
  .jl-linie .rolle { margin: 5px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
  .jl-linie .zeilen { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11.5px; color: #5f6874; }
  .jl-linie .zeilen .zeile { display: flex; align-items: center; gap: 6px; }
  .jl-linie .zeilen svg { width: 12px; height: 12px; color: var(--akzent); }
  .jl-linie .koerper { display: block; margin-top: 22px; }
  .jl-linie .rechts { margin-top: 4px; }
  /*
   * Alles im Abschnitt rückt gemeinsam ein. Die linke Spur bleibt frei
   * für Datum, Linie und Punkt, die sich mit negativem Versatz
   * hineinsetzen. Würde jedes Element seinen Einzug selbst tragen,
   * fiele beim Umbruch das zweite Kenntnisfeld an den linken Rand.
   */
  .jl-linie .abschnitt { padding-left: 116px; position: relative; }
  .jl-linie .kopfz, .jl-linie .nkopf, .jl-linie .hkopf {
    font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
    color: #1b2027; margin: 0 0 14px; position: relative;
  }
  .jl-linie .kopfz::before, .jl-linie .nkopf::before, .jl-linie .hkopf::before {
    content: ""; position: absolute; left: -116px; top: 6px; width: 100px; height: 2px; background: var(--akzent);
  }
  .jl-linie .nblock { margin-bottom: 22px; }

  .jl-linie .stat { display: block; --jl-abstand: 17px; margin-bottom: var(--jl-abstand); position: relative; }
  .jl-linie .stat .kopfzeile { display: block; }
  .jl-linie .stat .zeit {
    width: 82px; font-size: 10.5px; color: #7d858f; font-weight: 700;
    text-align: right; position: absolute; left: -116px; top: 1px; line-height: 1.35;
  }
  .jl-linie .stat::before {
    content: ""; position: absolute; left: -21px; top: 6px; bottom: -17px; width: 1.5px; background: #e6e9ee;
  }
  .jl-linie .stat::after {
    content: ""; position: absolute; left: -24px; top: 4px; width: 8px; height: 8px;
    border-radius: 50%; background: #fff; border: 2px solid var(--akzent);
  }
  .jl-linie .stat:last-child::before { display: none; }
  .jl-linie .stat .titel { font-size: 13.5px; font-weight: 700; color: #1b2027; }
  .jl-linie .stat .firma { font-size: 12.5px; color: var(--akzent); font-weight: 600; }
  .jl-linie .stat ul { margin: 7px 0 0; padding: 0; list-style: none; }
  .jl-linie .stat li { position: relative; padding-left: 13px; margin-bottom: 4px; color: #48525d; }
  .jl-linie .stat li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #b6bec8; }
  .jl-linie .marke { display: inline-block; border: 1px solid #e0e4ea; border-radius: 20px; padding: 3px 11px; font-size: 11px; margin: 0 5px 6px 0; color: #48525d; }
  .jl-linie .sprachzeile { display: flex; justify-content: space-between; max-width: 300px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid #eef1f4; gap: 8px; }
  .jl-linie .bahn { display: none; }
  .jl-linie .zeile { display: flex; gap: 7px; margin-bottom: 5px; color: #48525d; }
  .jl-linie .zeile svg { display: none; }

  /* =====================================================================
     VORLAGE  portal
     Zentrierter Kopf, darunter zwei Spalten. Ruhig und formell.
     ===================================================================== */
  .jl-portal { padding: 50px 56px 44px; font-size: 12.5px; line-height: 1.5; }
  .jl-portal .kopfreihe { text-align: center; }
  .jl-portal .portraet {
    width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 16px;
    background: var(--akzent); display: grid; place-items: center; color: #fff;
    font-size: 29px; font-weight: 700;
  }
  .jl-portal h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: .01em; color: #171c22; text-transform: uppercase; }
  .jl-portal .rolle { margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); }
  .jl-portal .zeilen {
    margin-top: 16px; display: flex; justify-content: center; flex-wrap: wrap;
    gap: 6px 20px; font-size: 11.5px; color: #5c646e;
    padding-top: 14px; border-top: 1px solid #e4e7ec;
  }
  .jl-portal .zeilen .zeile { display: flex; align-items: center; gap: 6px; }
  .jl-portal .zeilen svg { width: 12px; height: 12px; color: var(--akzent); }
  .jl-portal .koerper { display: flex; gap: 32px; margin-top: 26px; }
  .jl-portal .links { flex: 1; min-width: 0; }
  .jl-portal .rechts { width: 208px; flex: none; }
  .jl-portal .kopfz, .jl-portal .nkopf {
    font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--akzent); margin: 0 0 12px; padding-bottom: 6px;
    border-bottom: 1px solid #e4e7ec; text-align: left;
  }
  .jl-portal .nblock { margin-bottom: 22px; }
  .jl-portal .stat { --jl-abstand: 15px; margin-bottom: var(--jl-abstand); }
  .jl-portal .stat .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
  .jl-portal .stat .titel { font-size: 13.5px; font-weight: 700; color: #171c22; }
  .jl-portal .stat .zeit { flex: none; font-size: 10.5px; color: #838b95; font-weight: 600; }
  .jl-portal .stat .firma { font-size: 12.5px; color: #5c646e; font-weight: 600; }
  .jl-portal .stat ul { margin: 6px 0 0; padding: 0; list-style: none; }
  .jl-portal .stat li { position: relative; padding-left: 13px; margin-bottom: 4px; color: #48515b; }
  .jl-portal .stat li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #bcc3cb; }
  .jl-portal .marke { display: inline-block; background: #f4f6f8; border-radius: 4px; padding: 4px 9px; font-size: 11px; margin: 0 4px 5px 0; color: #414a54; }
  .jl-portal .sprachzeile { display: flex; justify-content: space-between; font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid #f0f2f5; gap: 8px; }
  .jl-portal .bahn { display: none; }
  .jl-portal .zeile { display: flex; gap: 7px; margin-bottom: 5px; color: #48515b; font-size: 11.5px; }
  .jl-portal .zeile svg { display: none; }

/* =====================================================================
   Bearbeitung im Blatt
   =====================================================================
   Das Blatt ist der Editor. Jedes Feld wird an Ort und Stelle
   beschrieben, es gibt kein Formular daneben, das auseinanderlaufen
   könnte. Die Umrandung erscheint nur beim Zeigen und Auswählen und
   wird beim Druck nie mitgenommen.
*/
.jl-bearbeitbar {
  --jl-marke: #15803d;
  --jl-linie: #dde3ec;
  --jl-text: #0f172a;
}

  /* ---- Bearbeitung ---- */
  .jl-bearbeitbar [data-feld] { outline: none; }
  .jl-bearbeitbar [data-feld]:hover { background: rgba(21,128,61,.07); border-radius: 3px; }
  .jl-bearbeitbar [data-feld]:focus { background: rgba(21,128,61,.11); border-radius: 3px; }
  .jl-bearbeitbar [data-feld]:empty::before { content: attr(data-leer); color: #9aa5b1; }

  .jl-bearbeitbar .abschnitt { position: relative; border-radius: 8px; }
  .jl-bearbeitbar .abschnitt::after {
    content: ""; position: absolute; inset: -7px -10px; border-radius: 10px;
    border: 1.5px solid transparent; pointer-events: none; transition: border-color .12s;
  }
  .jl-bearbeitbar .abschnitt:hover::after { border-color: rgba(21,128,61,.3); }
  .jl-bearbeitbar .abschnitt.gewaehlt::after { border-color: var(--jl-marke); }

  .jl-bearbeitbar .eintrag { position: relative; }
  .jl-bearbeitbar .eintrag .griff {
    position: absolute; left: -26px; top: 2px; width: 20px; height: 20px;
    border-radius: 6px; display: none; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--jl-linie); cursor: grab; color: #94a3b8;
  }
  .jl-bearbeitbar .eintrag:hover .griff { display: flex; }
  .jl-bearbeitbar .eintrag .weg {
    position: absolute; right: -26px; top: 2px; width: 20px; height: 20px;
    border-radius: 6px; display: none; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--jl-linie); cursor: pointer; color: #94a3b8;
  }
  .jl-bearbeitbar .eintrag:hover .weg { display: flex; }
  .jl-bearbeitbar .eintrag .weg:hover { color: #dc2626; border-color: #fecaca; }
  .jl-bearbeitbar .griff svg, .jl-bearbeitbar .weg svg { width: 12px; height: 12px; }

  /* Werkzeugleiste über dem gewählten Abschnitt */
  .jl-werkzeug {
    position: absolute; z-index: 40; display: none;
    background: #fff; border-radius: 11px; padding: 4px;
    box-shadow: 0 10px 30px -10px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.09);
    gap: 2px; align-items: center;
  }
  .jl-werkzeug.an { display: flex; }
  .jl-werkzeug button {
    border: 0; background: transparent; border-radius: 8px; cursor: pointer;
    height: 32px; padding: 0 11px; font: inherit; font-size: 0.78rem; font-weight: 600;
    color: var(--jl-text); display: inline-flex; align-items: center; gap: 6px;
  }
  .jl-werkzeug button:hover { background: #f1f5f9; }
  .jl-werkzeug button.haupt { background: var(--jl-marke); color: #fff; }
  .jl-werkzeug button.haupt:hover { background: #146e35; }
  .jl-werkzeug button.gefahr:hover { background: #fef2f2; color: #dc2626; }
  .jl-werkzeug svg { width: 15px; height: 15px; }
  .jl-werkzeug .trenn { width: 1px; height: 20px; background: var(--jl-linie); margin: 0 2px; }

/* =====================================================================
   Bewerbungsfoto
   =====================================================================
   Die Grundformen setzen den Rahmen des Portraits, jede in ihrer eigenen
   Grösse und Rundung. Was fehlte, war das Bild darin: ohne diese Regeln
   liegt ein 360 mal 360 grosses JPG unbeschnitten im Rahmen und sprengt
   ihn. object-fit schneidet mittig zu, was bei Bewerbungsfotos richtig
   ist, weil das Gesicht dort sitzt.

   .jl-rund macht das Portrait unabhängig von der Grundform kreisrund.
   Kachel und Portal setzen sonst abgerundete Ecken, und wer ein rundes
   Foto wählt, will es überall rund. */

.jl-blatt .portraet { overflow: hidden; }

.jl-blatt .portraetbild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.jl-blatt.jl-rund .portraet { border-radius: 50%; }

/* =====================================================================
   RAND OBEN UND UNTEN
   =====================================================================

   Der Abstand zum oberen und unteren Blattrand lässt sich verstellen.
   Wer viel Inhalt hat, holt sich mit einem knapperen Rand eine halbe
   Seite zurück; wer wenig hat, lässt das Blatt atmen.

   Die beiden Variablen sind Verschiebungen, keine absoluten Werte. So
   behält jede Vorlage ihr eigenes Verhältnis: in "spalte" steht die
   Randspalte weiter oben als der Textteil, und das bleibt bei jedem
   Rand so.

   Die Regeln stehen am Dateiende, damit sie die Vorlagen überschreiben,
   ohne dass in jeder Vorlage die Zahlen doppelt gepflegt werden müssen.
   Geändert wird nur oben und unten, links und rechts bleiben. */

.jl-spalte .neben {
  padding-top: calc(38px + var(--jl-oben, 0px));
  padding-bottom: calc(38px + var(--jl-unten, 0px));
}
.jl-spalte .haupt {
  padding-top: calc(44px + var(--jl-oben, 0px));
  padding-bottom: calc(40px + var(--jl-unten, 0px));
}

.jl-band .kopf { padding-top: calc(38px + var(--jl-oben, 0px)); }
.jl-band .koerper { padding-bottom: calc(40px + var(--jl-unten, 0px)); }

.jl-klar {
  padding-top: calc(58px + var(--jl-oben, 0px));
  padding-bottom: calc(58px + var(--jl-unten, 0px));
}

.jl-rechts .haupt {
  padding-top: calc(46px + var(--jl-oben, 0px));
  padding-bottom: calc(40px + var(--jl-unten, 0px));
}
.jl-rechts .neben {
  padding-top: calc(40px + var(--jl-oben, 0px));
  padding-bottom: calc(40px + var(--jl-unten, 0px));
}

.jl-kachel .kopf { padding-top: calc(42px + var(--jl-oben, 0px)); }
.jl-kachel .koerper { padding-bottom: calc(40px + var(--jl-unten, 0px)); }

.jl-linie {
  padding-top: calc(52px + var(--jl-oben, 0px));
  padding-bottom: calc(52px + var(--jl-unten, 0px));
}

.jl-portal {
  padding-top: calc(50px + var(--jl-oben, 0px));
  padding-bottom: calc(44px + var(--jl-unten, 0px));
}