/*
 * cv2.css — layout for every "v2" CV editor.
 *
 * Three kinds of rule live here, and the distinction matters:
 *
 *  1. Engine layout — sheets, columns, the 30px gap, the hover toolbars, the
 *     confirm dialog, print. Identical for every template.
 *  2. Shared content layout — section boxes, entries, chips. Also identical;
 *     the templates differ in colour and spacing, not in structure.
 *  3. Per-template rules, scoped under `.cv2-<name>` on the page host, which
 *     cv2.js sets from the view's `cv2Template`. Only the page header really
 *     differs between templates, so these blocks are small.
 *
 * The v1 templates carry their whole layout as inline `style=""` on hand-written
 * markup. That cannot work here: every sheet after the first is a clone, so
 * anything the pagination touches has to be addressable by class.
 *
 * Typography still comes from the shared stylesheets — `.ueberschrift1..4`,
 * `.zeitraum`, `.ort`, `.skills`, `.interessen`, `.sprachelevel`,
 * `.rating-system2`, `#foto`, `#profilbeschreibung`, `.newMargin` are all in
 * `bootstrap.min-dist.css` / `bootstrap_limitless.min.Vorlage4-dist.css`. Do not
 * duplicate them here; reusing the class names is what makes a v2 template look
 * like its v1 counterpart, and it inherits every later tweak for free.
 *
 * The `b2-` prefix is historical — it stood for "business 2", the first template
 * ported, and is now just the v2 engine's namespace.
 */

/* Hiding, without imposing a `display` on the way back. Every template's
   elements have their own — Modern's contact rows are flex, Business's are
   blocks — and an inline `display: block` to un-hide silently replaced it. */
.b2-hidden {
  display: none !important;
}

/* ------------------------------------------------------------------ sheets */

#b2-pages {
  /* Sheets are their own stacking context so the fixed-position sidebar and the
     editor toolbars (which stick out to the left of a sheet) keep working. */
  position: relative;
  margin-bottom: 100px;

  /* Everything the "Farben" sidebar controls. Declared on the host rather than
     on each sheet so a sheet created later picks the current values up for
     free — the pagination clones sheets long after the user chose a colour. */
  --b2-ueberschrift: #000000;
  --b2-ueberschrift-linie: #000000;
  --b2-kopf-bg: #ffffff;
  --b2-kopf-fg: #000000;
  --b2-haupt-bg: #ffffff;
}

.b2-page {
  position: relative;
  box-sizing: border-box;
  width: 940px;
  height: 1329px;
  background: var(--b2-haupt-bg);
  /* `--schriftart` is the same documentElement variable the other templates use,
     so the font sidebar keeps working without a Business-2-specific channel. */
  font-family: var(--schriftart) !important;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* The gap the user sees between two sheets. */
.b2-page + .b2-page {
  margin-top: 30px;
}

.b2-branding {
  position: absolute;
  top: 95%;
  left: 73%;
  display: block;
}

/* --------------------------------------------- header parts every template has
 *
 * A contact row and the profile blurb are the same everywhere; only their
 * arrangement differs, and that is what the per-template blocks below do. These
 * are deliberately NOT scoped — scoping them was the first cut, and Modern lost
 * its icon alignment and its delete-row hover anchor.
 */

.b2-headrow {
  position: relative;
  padding-left: 0;
  color: black;
}

/*
 * Everything in the page header takes the header's text colour.
 *
 * This has to be one shared rule, not a copy per template. `.b2-headrow` above
 * sets black — correct where a contact row appears in the body of the sheet,
 * which is where Design puts its personal-data block — and that black beat the
 * colour inherited from `.headblatt`. Business and Kunst happened to override it
 * inside their own blocks, so Modern was the template that showed the bug: a
 * white name over black contact details on a dark header.
 *
 * The photo's ring is `currentColor` by design, so it follows along.
 */
.headblatt,
.headblatt #name,
.headblatt #status,
.headblatt .persondata,
.headblatt .b2-headrow,
.headblatt .b2-headrow > i {
  color: var(--b2-kopf-fg);
}

.b2-headrow > i {
  float: left;
  line-height: inherit;
  padding-right: 5px;
  width: 20px;
  text-align: center;
}

#profileContainer {
  position: relative;
}

/* ------------------------------------------------- header: Business & Kunst
 *
 * A full-width name over two columns of contact details, photo floated right.
 * Kunst uses the same shape, so both classes select it.
 */

.cv2-business .headblatt,
.cv2-kreativ .headblatt {
  padding: 50px 85px 30px;
  margin: 0;
  display: inline-block;
  width: 100%;
  background: var(--b2-kopf-bg);
  color: var(--b2-kopf-fg);
}

.cv2-business .containerheader,
.cv2-kreativ .containerheader {
  width: 790px;
  height: auto;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.cv2-business #profilbild,
.cv2-kreativ #profilbild {
  float: right;
  width: 23%;
  height: 130px;
  top: 50px;
  display: block;
}

.cv2-business #foto,
.cv2-kreativ #foto {
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;
  border-color: black;
}

/* No `color` here on purpose. The shared `.headblatt` rule paints everything in
   the header with `--b2-kopf-fg`, and a `color: black` in this block would win
   the tie on specificity by coming later in the file — which is exactly how the
   name ended up black on a dark header while the contact rows were white. */
.cv2-business #name,
.cv2-kreativ #name {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2.5rem;
  padding-left: 0;
  margin-left: 0;
}

/* Set by business2.js when the name is long enough to wrap — same threshold the
   original used, just without re-measuring on every keystroke from three places. */
.cv2-business #name.b2-name-long,
.cv2-kreativ #name.b2-name-long {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.cv2-business #persoenlichedaten,
.cv2-kreativ #persoenlichedaten {
  display: flex;
}

.cv2-business #persoenlichedatenLinks,
.cv2-kreativ #persoenlichedatenLinks {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 55%;
  height: max-content;
}

.cv2-business #persoenlichedatennext,
.cv2-kreativ #persoenlichedatennext {
  padding-left: 0;
  width: 50%;
  float: left;
  height: max-content;
}



.cv2-business #persoenlichedatenfirst,
.cv2-kreativ #persoenlichedatenfirst {
  padding-left: 0;
  width: 245px;
  word-wrap: break-word;
}

.cv2-business #linkedin,
.cv2-kreativ #linkedin {
  width: 250px;
}


/* ---------------------------------------------------------- Kreativ: the look
 *
 * Kreativ shares Business's header *shape* — full-width name, contact details in
 * two columns, photo floated right — so the markup is the same and only this
 * block differs. What makes it Kreativ is the hard offset drop shadow: no blur,
 * 5px down and right, on the header and on every section box.
 *
 * Values taken from the v1 template's computed styles.
 */

/* The v1 header's computed style, in full. Taking only some of it was the bug:
   with `padding: 25px` but the inherited `display: inline-block`, the 790px
   content block sat hard against the left edge instead of being centred, which
   is what made the header look wrong. `display: flex` + centring is what puts
   it back in the middle. */
.cv2-kreativ .headblatt {
  padding: 25px;
  margin: 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.75);
}

.cv2-kreativ .b2-section {
  border: 2px solid gray;
  border-radius: 6px;
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.75);
}

/* A section split across sheets would show a closed, shadowed box on each half,
   as though it were two sections. Open it at the break — with a transparent
   border rather than none, so the height does not change and re-trigger the
   very split that decided to open it. */
.cv2-kreativ .b2-section.b2-has-continuation {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  box-shadow: 5px 0 0 0 rgba(0, 0, 0, 0.75);
}

.cv2-kreativ .b2-section.b2-continued {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent;
}

/* Wider gutters than the other two-column templates, and a real gap between the
   columns so the right column's shadow does not land on the left one. */
.cv2-kreativ .b2-flow {
  padding: 20px 80px 0;
}

.cv2-kreativ .b2-rail {
  width: 47%;
}

/* ----------------------------------------------------------- header: Modern
 *
 * Modern puts photo, name and one column of contact rows side by side in a
 * bordered box, where Business stacks a full-width name over two columns. That
 * is the only structural difference between the two templates; everything below
 * the header is the shared two-column flow.
 */

/* Metrics lifted from the live v1 template's computed styles.
   The border is kept deliberately: v1 currently computes `border: 0 !important`
   on the header, but that comes from the colour picker rather than the design,
   and the dev prefers it there. */
.cv2-modern .headblatt {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 177px;
  padding: 25px;
  margin: 0 0 15px;
  border: 2px solid #dbe2e6;
  background: var(--b2-kopf-bg);
}

.cv2-modern .containerheader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.cv2-modern #profilbild {
  width: 130px;
  height: 130px;
  padding-left: 23px;
  flex: none;
}

.cv2-modern #foto {
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;
}

.cv2-modern #name {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2.5rem;
  width: 70%;
  min-width: 277px;
  max-width: 277px;
  padding-left: 20px;
  padding-right: 10px;
  margin-left: 23px;
  overflow-wrap: break-word;
}

/* No `.b2-name-long` rule on purpose. Two lines is this header's normal state —
   the name is boxed at 277px between the photo and the contact details — so the
   shrink the other templates use would fire on almost every name.
   `TEMPLATES.modern` simply omits `nameShrinkAt`. */

.cv2-modern #persoenlichedaten {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 60px;
  padding-right: 20px;
  font-weight: 500;
}

/*
 * The address row lines up with the others only if this is zeroed.
 *
 * `bootstrap_limitless.min.Vorlage4-dist.css` gives `#persoenlichedatenfirst` —
 * the wrapper the address, and only the address, sits in — `padding-left: 20px`
 * and `float: left`. Business and Kunst have always overridden it; Modern did
 * not, which is why its address started 20px right of everything else.
 *
 * Rebuilding the rows as flex "fixed" the symptom by changing the layout out
 * from under the whole header, and made it worse. The rows are floated, like
 * every other template's, and the stray padding is simply removed.
 */
.cv2-modern #persoenlichedatenfirst {
  padding-left: 0;
  float: none;
  width: 250px;
  word-wrap: break-word;
}

/* --------------------------------------------------- Modern: photo position
 *
 * The header is a centred row of photo, name and contact details, so the photo
 * has three sensible places, not two — and the shared links/rechts switch only
 * offers the outer ones. `TEMPLATES.modern.fotoPositions` adds a third, and the
 * engine puts `b2-foto-<position>` on the host; ordering the flex items is
 * entirely this stylesheet's business.
 */

.cv2-modern #profilbild { order: 2; }
.cv2-modern #name { order: 1; }
.cv2-modern #persoenlichedaten { order: 3; }

.cv2-modern.b2-foto-left #profilbild { order: 0; }
.cv2-modern.b2-foto-middle #profilbild { order: 2; }
.cv2-modern.b2-foto-right #profilbild { order: 4; }

/*
 * "Middle" has to mean the photo is centred in the header, not merely that it
 * sits between the other two.
 *
 * The blocks either side are not the same width — the name box is 277px, the
 * contact column is as wide as its longest line — so at their natural sizes the
 * photo lands wherever the leftover space happens to put it, which is close to
 * the centre but visibly off. Giving both neighbours an equal share of the free
 * space is what actually centres it, and it only applies in this position:
 * left and right want the name at its own width.
 */
.cv2-modern.b2-foto-middle #name,
.cv2-modern.b2-foto-middle #persoenlichedaten {
  flex: 1 1 0;
  min-width: 0;
}

.cv2-modern.b2-foto-middle #name {
  max-width: none;
}

/* ----------------------------------------------------- Modern: the Rahmen
 *
 * Modern boxes every section. It is the one thing about this template people
 * ask to turn off, so it is a switch rather than a fixed rule: `Extras →
 * Rahmen um Bereiche` in the sidebar, stored per template in `cv2Extras`, and
 * applied as `b2-x-rahmen` on the page host.
 *
 * Toggling it changes section heights, so the layout watcher re-paginates —
 * nothing here has to know about that.
 */
.cv2-modern.b2-x-rahmen .b2-section {
  border: 2px solid #dbe2e6;
  border-radius: 6px;
}

/* A section split across sheets would otherwise show a closed box on each half,
   as though it were two sections. Open the boxes at the break instead.
   `transparent` rather than `none`: the border still occupies its 2px, so
   opening it cannot change the height, re-trigger the layout watcher and flip
   the very split that decided whether to open it. */
.cv2-modern.b2-x-rahmen .b2-section.b2-has-continuation {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.cv2-modern.b2-x-rahmen .b2-section.b2-continued {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent;
}

/* --------------------------------------------------------------- the flow */

.b2-flow {
  padding: 5px 7% 0;
  width: 100%;
  box-sizing: border-box;
}

/* The rail carries the width and the float; the column inside it is just the
   stack of sections. Keeping them apart is what lets Design put its page header
   inside the left rail, above the column, without the settle loop ever seeing
   it — everything the pagination touches is a child of `.b2-col`. */
.b2-rail {
  box-sizing: border-box;
  width: 49%;
}

.b2-rail-left {
  float: left;
  margin-left: 0;
}

.b2-rail-right {
  float: right;
}

.b2-col {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ----------------------------------------------------------- header: Design
 *
 * Design is the odd one out and this block is the reason. Every other template
 * puts a header band across the top of the sheet and splits the body into two
 * equal columns underneath it. Design has a full-height coloured sidebar down
 * the left instead: v1 writes it as `#headblatt { width: 40%; height: 100%;
 * float: left }` with the photo, the name, the contact details *and* three
 * sections inside it, and floats `#newRekat` at 60% next to it.
 *
 * So here the *left rail* is the sidebar. The header sits at the top of that
 * rail rather than above the flow (`railHeader` in cv2.js), the rail paints the
 * colour and runs the full height of the sheet, and the right rail starts at
 * the very top of the page with the profile blurb above its sections. That also
 * means the sidebar keeps going on sheet 2 and later, where there is no header.
 */

.cv2-design .b2-flow {
  padding: 0;
}

.cv2-design .b2-rail-left {
  width: 40%;
  /* The sheet's own height: a float cannot take `height: 100%` from a parent
     that is auto-height, and the page clips anything past it anyway. */
  min-height: 1329px;
  background: var(--b2-kopf-bg);
  /* The "Rand" switch, on the legacy `rand` field. v1 swaps these two exact
     values, so a document written by either editor renders the same. */
  border-right: 2px solid black;
  /* Everything in the sidebar takes the header's text colour, exactly as v1's
     `clickColorBgHdSchrift` does by walking the sidebar element by element. */
  color: var(--b2-kopf-fg);
}

#b2-pages.cv2-design:not(.b2-rand) .b2-rail-left {
  border-right: 1px solid lightgray;
}

.cv2-design .b2-rail-right {
  width: 60%;
  padding: 20px 35px 0;
}

.cv2-design .headblatt {
  padding: 30px 0;
  margin: 0;
  /* The rail carries the colour — the header is part of it, not a band. */
  background: none;
  text-align: center;
}

/* The sidebar's sections are not boxes on the main background: they are part of
   the coloured rail, and take its text colour rather than the heading one. Both
   of those come from rules that would otherwise win — `.b2-headrow` is black
   because it is right in the body of a sheet, and a heading takes the colour
   the "Farben" sidebar sets for headings, which here would be invisible. */
.cv2-design .b2-col-left .b2-section {
  background: none;
  padding: 0 30px;
  margin-bottom: 30px;
}

.cv2-design .b2-col-left .b2-head .ueberschrift1,
.cv2-design .b2-col-left .b2-headrow,
.cv2-design .b2-col-left .persondata {
  color: var(--b2-kopf-fg);
}

.cv2-design #profileContainer {
  position: relative;
  margin: 0 15px 10px;
}

.cv2-design #headblattContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cv2-design #profilbild {
  width: 130px;
  height: 130px;
}

.cv2-design #foto {
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;
}

.cv2-design #name {
  font-weight: 800;
  font-size: 2rem;
  width: 100%;
  padding: 20px 10px;
  text-align: center;
}

.cv2-design #name.b2-name-long {
  font-size: 1.4rem;
}

.cv2-design #status {
  font-size: 1rem;
  font-style: italic;
  text-align: center;
  width: 100%;
}

/* The personal-data block: a label column and a value column per row, rather
   than the icon-and-value rows the header templates use. */
.b2-persdata .b2-headrow {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.b2-persdata-label {
  flex: 0 0 42%;
  font-weight: 500;
}

.b2-persdata .persondata {
  flex: 1 1 auto;
  word-wrap: break-word;
}

/* Extras -> "Status/Leitspruch". Scoped to `.cv2-design` on purpose, and this
   is the trap with any extra written as a `:not()`: a template that does not
   declare the extra never gets the class either, so an unscoped rule would hide
   the motto on every *other* template instead of only where the switch exists. */
.cv2-design:not(.b2-x-status) #status {
  display: none;
}

/* -------------------------------------------------- single-column templates
 *
 * Tabellarisch and Tabellarisch-Kreativ run the whole CV down one column.
 * `TEMPLATES.<name>.columns` already stops the settle loop walking the second
 * one; this is the visual half. The empty column stays in the DOM — it is part
 * of the shared `#tpl-page` — but `display: none` also makes it undroppable,
 * which is what we want: there is nowhere to drag a section *to*.
 */

.cv2-tabellarisch .b2-rail-right,
.cv2-tabellarischKreativ .b2-rail-right,
.cv2-tabellarisch .b2-col-right,
.cv2-tabellarischKreativ .b2-col-right {
  display: none;
}

.cv2-tabellarisch .b2-rail-left,
.cv2-tabellarischKreativ .b2-rail-left {
  width: 100%;
  float: none;
}

/* With one full-width column the left margin is the sheet's, so the entry
   toolbars have room to sit outside the text exactly as they do in the
   two-column templates. Nothing to override. */

/* Their header is a band with the name in it and nothing else — the contact
   details are the `persoenlicheDaten` section below, as in Design. Missing this
   block entirely is what made the header look absent: an unstyled `.headblatt`
   has no padding, no background and a 0×0 photo. */
.cv2-tabellarisch .headblatt,
.cv2-tabellarischKreativ .headblatt {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 50px 85px 30px;
  background: var(--b2-kopf-bg);
}

.cv2-tabellarisch #name,
.cv2-tabellarischKreativ #name {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2.5rem;
}

.cv2-tabellarisch #name.b2-name-long,
.cv2-tabellarischKreativ #name.b2-name-long {
  font-size: 1.7rem;
}

/* Out of flow on purpose: v1 has the photo as a sibling of an absolutely
   positioned header, so its 130px never counts towards the header's height and
   the circle straddles the band's bottom edge. `top` is measured from the
   header box, which is why it is the same 120px v1 uses. */
.cv2-tabellarisch #profilbild,
.cv2-tabellarischKreativ #profilbild {
  position: absolute;
  top: 120px;
  right: 85px;
  width: 130px;
  height: 130px;
  z-index: 1;
}

/* No links/rechts rule on purpose: both Tabellarisch templates are `fotoFixed`,
   so the host class is never acted on here. Deliberately not left in place as a
   dormant rule — an account that saved `fotoPosition: 'links'` while the switch
   still existed would otherwise have the photo pinned left and no control left
   on the page to move it back. */

/* ------------------------------------------- Tabellarisch-Kreativ: the table
 *
 * The one that earns the name. Every heading has a thick coloured rule to its
 * left, and every entry is split down the same line: the Zeitraum (or, in the
 * personal-data block, the label; in Sprachkenntnisse, the language) in a 30%
 * column, and everything else beside it. Plain Tabellarisch does *not* do this
 * — its entries stack like Business's, which is the only structural difference
 * between the two templates.
 *
 * Done with grid rather than by wrapping the right-hand fields in a div, so the
 * markup stays the shared one: each direct child is pushed into column 2 in
 * document order and the one that belongs on the left is pulled back out.
 */

.cv2-tabellarischKreativ .b2-head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.cv2-tabellarischKreativ .b2-head::before {
  content: '';
  flex: 0 0 30%;
  height: 8px;
  margin: 10px 10px 10px 0;
  border-bottom: 5px solid var(--b2-strich, black);
}

.cv2-tabellarischKreativ .b2-head .ueberschrift1 {
  border-bottom: none;
  margin-bottom: 0;
}

/* This heading is a flex line, where a float means nothing: the "+" would land
   between the coloured rule and the heading. Ordered to the end instead, and
   the heading takes the rest of the line rather than the shared fixed width. */
.cv2-tabellarischKreativ .b2-head-add {
  order: 2;
}

.cv2-tabellarischKreativ .b2-head-add + .ueberschrift1 {
  width: auto;
  flex: 1;
}

.cv2-tabellarischKreativ .b2-job,
.cv2-tabellarischKreativ .b2-ausbildung,
.cv2-tabellarischKreativ .b2-sonstiges,
.cv2-tabellarischKreativ .sprache-entry {
  display: grid;
  grid-template-columns: 30% 1fr;
  column-gap: 10px;
  margin-bottom: 10px;
}

.cv2-tabellarischKreativ .b2-entry > * {
  grid-column: 2;
}

.cv2-tabellarischKreativ .b2-entry > .zeitraum,
.cv2-tabellarischKreativ .b2-entry > .sprache {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  float: none;
  /*
   * A grid item's margin counts towards its track, so `.zeitraum`'s 10px bottom
   * margin — which merely separates it from the next line where the entry is a
   * block — was inflating row 1 and pushing the company name 10px away from the
   * job title. The shared sheets have a `.zeitraum2` "für tabelle kreativ" that
   * zeroes exactly this; v2 keeps the one class and takes the values here.
   */
  margin-bottom: 0;
  padding-left: 0;
}

.cv2-tabellarischKreativ .b2-entry > .zeitraum {
  font-size: 17px;
}

/* v1 has no Ort field on this template at all. Hidden rather than dropped from
   the markup: `collect()` writes every slot, so a field that is not in the DOM
   is a field saved as empty — it would wipe an Ort typed on another template. */
.cv2-tabellarischKreativ .b2-entry > .ort {
  display: none;
}

/* The personal-data block splits on the same line as everything else. */
.cv2-tabellarischKreativ .b2-persdata .b2-headrow {
  gap: 10px;
}

.cv2-tabellarischKreativ .b2-persdata-label {
  flex: 0 0 30%;
}

.cv2-tabellarisch #foto,
.cv2-tabellarischKreativ #foto {
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;
}

/* ------------------------------------------------------------- a section */

.b2-section {
  margin-bottom: 15px;
  padding: 15px 20px;
  position: relative;
  background: var(--b2-haupt-bg);
}

/* A section that spilled onto the next sheet keeps the same box, minus the
   heading — the heading stays behind on the page where the section starts. */
.b2-section.b2-continued {
  padding-top: 0;
}

/* `.b2-head` is deliberately left without `position: relative` — the
   section-level toolbars are absolutely positioned against `.b2-section`, so
   "+ Beruf" lands at the bottom of the whole section rather than just under
   its heading. */

.b2-head .ueberschrift1 {
  border-bottom: solid;
  margin-bottom: 10px;
  color: var(--b2-ueberschrift);
  border-bottom-color: var(--b2-ueberschrift-linie);
  /* Room at the end of the line for `.b2-head-add`, so the underline stops
     before the icon instead of running underneath it. Reserved on *every*
     heading, not only the three that have the icon: Ausbildung and
     Sprachkenntnisse sit one above the other in the same column, and two
     underlines 24px apart in length read as a mistake. Constant whether the
     icon is showing or not — a hover that changed the heading's box would wake
     the layout watcher and could repaginate under the pointer. */
  width: calc(100% - 24px);
}

/* Extras -> "Linie unter Überschriften". Every template has this switch.
   Dropping the rule changes the heading's height, so the layout watcher
   repaginates on its own — which is right here: it is a deliberate action, not
   something happening under the user mid-keystroke. */
#b2-pages:not(.b2-x-ueberschriftLinie) .b2-head .ueberschrift1 {
  border-bottom: none;
}

/*
 * The "+" repeated beside the heading, for the sections that take entries.
 *
 * The footer copy is a long way from the heading on a section that fills half a
 * sheet, so adding a job means travelling to the bottom of it first. This one
 * appears on the same section hover as the drag grip and the entry toolbars.
 *
 * Two things it must not do. It must not change the heading's size when it
 * appears — a hover that alters content height wakes the layout watcher and can
 * repaginate under the pointer — so the heading is shortened by a constant
 * amount whether the icon is showing or not, and the icon floats into the space
 * that reserves. And the heading's underline must stop before it rather than
 * run underneath, which is what the width (rather than a padding) buys.
 */
.b2-head-add {
  float: right;
  display: none;
  cursor: pointer;
  color: black;
  line-height: inherit;
  position: relative;
  top: 2px;
  z-index: 3;
}

.b2-page .b2-section:hover > .b2-head > .b2-head-add,
.b2-head-add:hover {
  display: block;
}

.b2-head > .iconsLoesch {
  float: left;
  width: 21px;
  height: auto;
  font-size: 18px;
  line-height: inherit;
  margin-right: 3px;
  display: none;
  top: 2px;
  position: relative;
}

.b2-entry {
  position: relative;
}

/* The line that names the thing — job title, Studiengang, Sonstiges programme.
   The shared sheets give `.ueberschrift2` weight 500, which does not read as a
   heading next to the company name below it at 400. */
.b2-entry .ueberschrift2 {
  font-weight: 700;
}

.b2-ausbildung,
.b2-sonstiges {
  display: inline-block;
  width: 100%;
}

.b2-aufgaben {
  padding-left: 20px;
  margin-left: 0;
  display: inline-block;
}

.b2-aufgabe {
  position: relative;
}

.b2-edvgroup {
  overflow: hidden;
  margin-bottom: 10px;
  padding-left: 0;
  position: relative;
}

.b2-chips {
  overflow: hidden;
}

.b2-chip {
  position: relative;
  display: inline-block;
}

.b2-chip-text {
  float: left;
}

.containerinteressen {
  height: auto;
}

/* ---------------------------------------------------------- Trennlinie ---
 *
 * The "Trennlinie" switch used to move exactly two `<hr>`s, both of them
 * between the skill groups, because those are the only two the original markup
 * has — so on a CV whose weight is in Berufserfahrung it appeared to do
 * nothing. It now also rules off consecutive entries in the repeatable
 * sections, which is what the switch reads as it should do.
 *
 * A border on the *following* sibling rather than an inserted element: nothing
 * extra for the pagination to carry around, and the entry that happens to be
 * first on a sheet correctly gets no line above it, because a continuation
 * starts a fresh run of siblings.
 */

#b2-pages:not(.b2-trennlinie) hr {
  display: none;
}

.b2-trennlinie .b2-job + .b2-job,
.b2-trennlinie .b2-ausbildung + .b2-ausbildung,
.b2-trennlinie .b2-sonstiges + .b2-sonstiges,
.b2-trennlinie .sprache-entry + .sprache-entry {
  border-top: 1px solid #ddd;   /* the shared sheet's own `hr` colour */
  margin-top: 10px;
  padding-top: 10px;
}

/* ------------------------------------------------- hover editor toolbars */

/*
 * Everything below is Business 2's own. The shared sheets have equivalents
 * (`.editorjob`, `.editorKen`, `.containerMargin`, ...) but they are revealed by
 * rules keyed on element ids -- `#job1:hover .editorjob` repeated up to `#job13`,
 * `#edvgruppegut:hover .editorKen`, and so on. Those cannot cover a 14th entry,
 * and they certainly cannot cover an entry on a cloned sheet. Class-based rules
 * hold for any number of entries on any number of pages.
 *
 * Two reveal mechanisms, and which one to use is not a matter of taste:
 *   - Absolutely positioned toolbars are out of flow, so `display: none/flex`
 *     is fine -- showing one cannot change any measurement.
 *   - Anything that sits *in* the flow (the "+" after a chip group) uses
 *     `visibility` instead. Toggling its `display` on hover would change the
 *     column height, which would move content between sheets as the mouse
 *     passes over it.
 *
 * THE HOVER BRIDGES ARE LOAD-BEARING. A toolbar sits in the margin next to the
 * thing it belongs to, with empty space in between. Unless that space is part of
 * somebody's hover region, moving the mouse across it leaves the element, the
 * toolbar disappears, and the icons cannot be clicked at all -- you cannot move
 * a job.
 *
 * The bridge is a `::before` on the *owner* (`.b2-entry`, `.b2-aufgabe`, ...)
 * spanning the strip between it and its toolbar. Padding the toolbar out instead
 * was the obvious idea and it was wrong twice over: the width depends on the
 * icons' own box (`box-sizing: border-box` globally, so `width:16px` includes
 * their padding and the toolbar came out 5px short of the entry -- a dead strip
 * exactly where the pointer crosses), and any padding wide enough to be safe
 * overlaps the entry's text and swallows clicks on it.
 *
 * A `::before` cannot be off by icon metrics: it is anchored to both edges of
 * the gap. Keep its `left/width` in step with the toolbar's offset.
 */

/* --- per-entry toolbar: delete, the four move arrows, add-bullet ---------- */

.b2-entry-tools {
  position: absolute;
  /* Sits in the margin beside the entry. `--editorjobpad` is flipped by the
     Einzug toggle, same as the original. */
  left: var(--editorjobpad, -60px);
  top: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  /* Vertical grab room only. The horizontal reach is the `.b2-entry::before`
     bridge below, which cannot be thrown off by the icons' box model. */
  padding: 8px 0 12px 0;
  color: black;
  z-index: 2;
}

/* In the right-hand column the left margin belongs to the other column, so a
   toolbar there would land on top of it -- and putting it inside the box instead
   covers the Zeitraum/Ort line. It goes in the sheet's right margin, mirroring
   what the left column does with the sheet's left margin. */
.b2-col-right .b2-entry-tools {
  left: auto;
  right: var(--editorjobpad, -60px);
  padding: 8px 0 12px 0;
}

.b2-page .b2-entry:hover > .b2-entry-tools,
.b2-page .b2-entry-tools:hover {
  display: flex;
}

/* The bridge: the margin strip between the entry and its toolbar, made part of
   the entry's hover region. Transparent, and entirely outside the entry's own
   box, so it costs nothing visually and swallows no clicks on the text. */
.b2-entry::before,
.b2-aufgabe::before,
.b2-headrow::before,
#profileContainer::before,
.b2-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
}

.b2-entry::before {
  left: var(--editorjobpad, -60px);
  width: calc(-1 * var(--editorjobpad, -60px));
}

.b2-col-right .b2-entry::before {
  left: auto;
  right: var(--editorjobpad, -60px);
  width: calc(-1 * var(--editorjobpad, -60px));
}

/* Bullet trash at -35px, header-row and profile trash at -18px, and the section
   drag grip at -22px. Each strip reaches from its icon back to its owner. */
.b2-aufgabe::before {
  left: -35px;
  width: 35px;
}

.b2-headrow::before,
#profileContainer::before {
  left: -18px;
  width: 18px;
}

.b2-section::before {
  left: -22px;
  width: 22px;
}

/*
 * The footer bridge, and it is what makes "+ Beruf" clickable at all.
 *
 * `.b2-section-tools` hangs below the section box (`top: calc(100% - 12px)`),
 * so moving the pointer down onto it leaves `.b2-section`, the hover ends and
 * the toolbar disappears before the click lands — on every template, which is
 * why no section could have an entry added to it.
 *
 * The strip is 16px, which fits inside the section's own 15px bottom margin
 * plus the 12px overlap, so it covers the toolbar without reaching into the
 * next section and swallowing clicks there.
 */
.b2-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
  pointer-events: auto;
}

.b2-col-right .b2-section::before {
  left: auto;
  right: -22px;
  width: 22px;
}

/*
 * An entry that is first in its section cannot move up, one that is last cannot
 * move down, and the arrow is *gone* rather than dimmed — an arrow you can see
 * is an arrow you try to click.
 *
 * `display: none`, not `visibility: hidden`: the disabled arrows are always the
 * outer ones (⇈ ↑ at the top of the stack, ↓ ⇊ at the bottom), so collapsing
 * them shortens the toolbar from its ends instead of leaving the hole in the
 * middle that `visibility` left. A lone entry is then left with just its trash
 * icon, which is what the legacy `cv-reorder.js` does on the v1 templates.
 *
 * Free of layout consequences either way: every one of these toolbars is
 * absolutely positioned in the sheet's margin, so nothing here can change a
 * column's height and wake the settle loop.
 */
.b2-entry-tools i.b2-disabled,
.b2-row-tools i.b2-disabled {
  display: none;
}

/* --- bullets, chips, header rows, profile -------------------------------- */

.b2-aufgabe-tools {
  position: absolute;
  left: -35px;
  top: -4px;
  display: none;
  padding: 4px 0 6px 0;
  color: black;
}

.b2-page .b2-aufgabe:hover > .b2-aufgabe-tools {
  display: block;
}

.b2-chip-tools {
  position: absolute;
  top: 0;
  left: 45%;
  display: none;
  color: black;
}

.b2-page .b2-chip:hover > .b2-chip-tools {
  display: block;
}

/* Stacked, not laid out in a row: the arrows had to fit without widening the
   toolbar. A contact row's left margin is 18px here — enough for one icon, and
   nothing like enough for three side by side. The stack overhangs the row below
   while it is open, which is fine because it only exists on hover. */
.b2-row-tools {
  position: absolute;
  left: -18px;
  top: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-right: 4px;
  color: black;
  z-index: 2;
}

.b2-page .b2-headrow:hover > .b2-row-tools,
.b2-page .b2-row-tools:hover {
  display: flex;
}

.b2-row-tools i {
  padding-top: 2px;
  padding-bottom: 2px;
}

.b2-profil-tools {
  position: absolute;
  left: -18px;
  top: 0;
  display: none;
  padding-right: 4px;
  color: black;
}

.b2-page #profileContainer:hover > .b2-profil-tools {
  display: block;
}

/* --- per-section footer: add entry + the spacing controls ----------------- */

/*
 * Anchored to the bottom of the *section box*, and business2.js keeps it in
 * whichever part of the section is last. Both halves matter: leave it in the
 * heading and it renders after the last entry on page 1 rather than after the
 * last entry there is.
 */
.b2-section-tools {
  position: absolute;
  left: 48%;
  top: calc(100% - 12px);
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  white-space: nowrap;
  color: black;
  z-index: 3;
}

.b2-page .b2-section:hover .b2-section-tools,
.b2-page .b2-section-tools:hover {
  display: flex;
}

/* A section that has filled every slot the schema has: the "+" goes grey (both
   copies of it) and the footer says what the cap is. The dimming matches the
   move arrows'; the hint exists because a grey icon says "not now" and not
   "why", and this editor's recurring failure is a control that silently does
   nothing. `:empty` keeps the gap out of the toolbar the rest of the time —
   cv2.js writes the text only once the section is full. */
.b2-section-tools > i.b2-disabled,
.b2-head-add.b2-disabled {
  opacity: 0.25;
  pointer-events: none;
}

.b2-limit-hint {
  font-size: 12px;
  line-height: 1.4;
  color: #555;
  white-space: nowrap;
}

/*
 * An entry with neither an employer nor a timeframe. The editor draws
 * placeholder text into empty fields and the PDF does not, so an entry like
 * this is several lines tall here and collapses to its title in the download —
 * taking the pagination with it. `cv2.js` explains the rule; this only shows
 * it.
 *
 * `outline`, deliberately, and never `border` or `padding`: an outline is
 * painted outside the box without reserving space, so flagging an entry cannot
 * change a column's height and cannot wake the settle loop. The hover fill is
 * `background-color`, which is free for the same reason.
 *
 * Not present in the PDF at all — `markUnfinished()` returns early when
 * `window.cv2Print` is set, rather than trusting a print rule to hide it.
 */
.b2-entry.b2-unfinished {
  outline: 1px dashed #d9a441;
  outline-offset: 3px;
}

.b2-entry.b2-unfinished:hover {
  background-color: rgba(217, 164, 65, 0.07);
}

.b2-limit-hint:empty {
  display: none;
}

/* The ± Abstand pair is a black pill, which is what v1's `.containerMargin`
   makes of the same three divs. Copied rather than reused because the legacy
   rule is `display: none` until a `#job1:hover`-style id selector reveals it,
   and those cannot reach a cloned sheet — see the class-naming note at the top
   of this file. */
.b2-margin-tools {
  display: flex;
  justify-content: space-evenly;
  width: 200px;
  padding: 3px 0;
  font-size: 13px;
  background: black;
  color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.addMargin,
.removeMargin {
  cursor: pointer;
}

/* --- the "+" that adds a chip: in flow, so visibility rather than display -- */

.b2-add-chip {
  display: inline-block;
  visibility: hidden;
  margin: 0 10px;
  align-self: center;
  color: black;
  /* Its group is `overflow: hidden` with floated chips; give it a layer of its
     own so a neighbouring chip cannot end up painted over the click target. */
  position: relative;
  z-index: 2;
}

.b2-page .b2-section:hover .b2-add-chip {
  visibility: visible;
}

/* --- the grip that drags a whole section --------------------------------- */

.b2-drag-handle {
  position: absolute;
  left: -22px;
  top: 2px;
  display: none;
  padding-right: 0;
  color: #bbb;
  cursor: grab;
  z-index: 3;
}

.b2-col-right .b2-drag-handle {
  left: auto;
  right: -22px;
  padding-right: 0;
  padding-left: 0;
}

.b2-page .b2-section:hover > .b2-head > .b2-drag-handle,
.b2-drag-handle:hover {
  display: block;
}

.b2-drag-handle:hover {
  color: #666;
}

.b2-drag-handle:active {
  cursor: grabbing;
}

/* While a section is in flight: dim the original, and stop the text underneath
   from being selected as the pointer sweeps across the sheets. */
.b2-dragging {
  user-select: none;
}

.b2-dragging .b2-drag-source {
  opacity: 0.4;
}

/* A column with nothing on this sheet is zero-height and cannot be dropped on.
   Only affects empty ones, so nothing moves. */
.b2-dragging .b2-col {
  min-height: 80px;
}

/* Where it would land. A flex item in the column, so it pushes the sections
   apart and the gap itself is the preview. */
.b2-drop-marker {
  height: 3px;
  margin: 6px 0;
  border-radius: 2px;
  background: var(--sprachfarbe, #48cbc9);
  flex: none;
}

/* --- shared icon styling -------------------------------------------------- */

.b2-entry-tools i,
.b2-aufgabe-tools i,
.b2-chip-tools i,
.b2-row-tools i,
.b2-profil-tools i,
.b2-section-tools > i,
.b2-add-chip i {
  padding-right: 5px;
  width: 16px;
  text-align: center;
  cursor: pointer;
}

.b2-entry-tools i {
  padding-top: 4px;
  padding-bottom: 4px;
}

.b2-entry-tools i:hover,
.b2-aufgabe-tools i:hover,
.b2-chip-tools i:hover,
.b2-row-tools i:hover,
.b2-profil-tools i:hover,
.b2-section-tools i:hover,
.b2-add-chip i:hover {
  color: gray;
}

/* These two sit on the black pill, where gray barely reads. */
.addMargin:hover,
.removeMargin:hover {
  color: #bbb;
}

/* -------------------------------------------------------- sidebar helpers */

.b2-tgl-cell {
  float: right;
  width: 25%;
  height: 40px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0;
  display: inline-grid;
}

/* A segmented control for sidebar choices with more than two options — the
   project rule is no default browser dropdowns. */
.b2-choice {
  display: flex;
  margin: 0 20px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  overflow: hidden;
}

.b2-choice-option {
  flex: 1 1 0;
  padding: 5px 4px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  user-select: none;
}

.b2-choice-option + .b2-choice-option {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.b2-choice-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.b2-choice-option.b2-choice-on {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-weight: 600;
}

/* --------------------------------------------------- confirmation dialog */

/* In-app modal — the project rule is no window.confirm anywhere in the UI. */
.b2-confirm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
}

.b2-confirm.b2-open {
  display: flex;
}

.b2-confirm-box {
  background: #555;
  color: whitesmoke;
  border-radius: 6px;
  padding: 28px 32px;
  width: min(460px, calc(100vw - 40px));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  font-size: 1.3rem;
}

.b2-confirm-title {
  font-weight: 700;
  margin-bottom: 12px;
}

.b2-confirm-text {
  font-size: 1.05rem;
  line-height: 1.45;
  margin-bottom: 24px;
  color: #e6e6e6;
}

.b2-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.b2-confirm-actions button {
  font: inherit;
  font-size: 1rem;
  border-radius: 4px;
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid transparent;
}

.b2-confirm-cancel {
  background: transparent;
  color: whitesmoke;
  border-color: rgba(255, 255, 255, 0.5);
}

.b2-confirm-ok {
  background: #c0392b;
  color: white;
}

.b2-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.b2-confirm-ok:hover {
  background: #a93226;
}

/* ------------------------------------------------------------------ print */

/*
 * The PDF is rendered by puppeteer from the stored `#b2-pages` markup, with this
 * stylesheet linked in (`controllers/auth.js` adds it when the stored HTML is a
 * Business 2 render). That is a print rendering, so these rules are what the
 * user actually receives.
 *
 * The editor's sheet is a *representation* of a page — drop shadow, 30px gap,
 * clipped overflow. On paper the sheet IS the page, so all three have to go, and
 * each one has to end where the paper does.
 */
@media print {
  #b2-pages {
    margin-bottom: 0 !important;
  }

  .b2-page {
    box-shadow: none !important;
    margin: 0 !important;
    /*
     * Clipped, exactly as on screen. This was `visible`, which is what let a
     * background extension hang below the sheet and count towards the document
     * height: Chrome laid out more pages than there were sheets and
     * `pageRanges` cut the surplus off, losing real content. Clipping lets a
     * decoration overshoot the sheet safely — it is trimmed at the edge and the
     * document stays exactly sheets x 1329.
     */
    overflow: hidden;
    break-after: page;
    page-break-after: always;
  }

  /* Without this the last sheet emits a trailing blank page. */
  .b2-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  /*
   * There is no seam rule here, and there must not be one.
   *
   * A pale band of bare paper used to show under Design's coloured rail —
   * 6.94mm on the letter, measured by rasterising the real PDF. Three fixes
   * were tried from this stylesheet and all three were wrong. A `::after`
   * hanging below the sheet counted towards the document height, so Chrome
   * laid out more pages than there were sheets and `pageRanges` cut real
   * content off. A box-shadow has no layout effect but Chrome does not paint
   * shadows into a PDF at all. Overshooting the rail's `min-height` did work,
   * yet only hid the last of it.
   *
   * The cause was never in the CSS: `page.pdf`'s `scale` option makes Chrome
   * stop painting a few pixels short of the paper on any value but 1. The fix
   * is in `utils/cv2Pdf.js`, which drops `scale` and does the shrink with a
   * transform instead — see `CV2_PDF_SCALE` there. The rail's ordinary
   * `min-height: 1329px` now reaches the paper's edge on its own.
   */

  /* Editing affordances are hover-only, so they would not normally print — but
     `visibility`-based ones (the chip "+") still occupy their box, and a stray
     `display` from an inline style would come through. Belt and braces: the PDF
     is the one output nobody gets to undo. */
  .b2-entry-tools,
  .b2-aufgabe-tools,
  .b2-chip-tools,
  .b2-row-tools,
  .b2-profil-tools,
  .b2-section-tools,
  .b2-head-add,
  .b2-rename,
  .b2-add-chip,
  .b2-drag-handle,
  .b2-drop-marker,
  .b2-confirm,
  .upload-btn-wrapper {
    display: none !important;
  }
}

/* ============================================================== Anschreiben
 *
 * The two letters. Their page header is the CV counterpart's, and so is its
 * styling: `styleAs` in cv2.js puts `cv2-business` / `cv2-design` on the host
 * alongside `cv2-anschreibenBusiness` / `cv2-anschreibenDesign`, so every
 * header and rail rule above already applies. What is left here is the letter
 * itself, which no CV template has.
 */

/* Business's letter is one full-width column, like the Tabellarisch pair. The
   rail carries the width, not the column. */
.cv2-anschreibenBusiness .b2-col-right {
  display: none;
}

.cv2-anschreibenBusiness .b2-rail-left {
  width: 100%;
  float: none;
}

/* The sheet's own 7% side padding goes, because the letter sets its text column
   in by v1's 85px on the blocks themselves. Both together put the body 151px
   from the edge instead of 85. */
.cv2-anschreibenBusiness .b2-flow {
  padding-left: 0;
  padding-right: 0;
}

/* v1's `#editorAnschreiben` padding, which is what sets the letter's text column
   in from the edge of the sheet. Applied to the blocks rather than to a wrapper:
   there is no wrapper, because each block has to be able to land on a different
   sheet. The two templates disagree about the inset — Business 85px, Design 60,
   its column being the narrower half of a sidebar sheet. */
.cv2-anschreibenBusiness .b2-col > .b2-section {
  padding: 0 85px;
  background: none;
}

/*
 * Design puts the inset on the COLUMN, once, and the sections carry nothing.
 * v1 has a single `#editorAnschreiben` wrapper with `padding: 30px 60px 0 60px`
 * around the whole letter; applying that per section instead inset each one
 * separately and left `.b2-section`'s own 15px bottom margin and 15/20px
 * padding stacking between them. The letter's spacing is `.b2-datum` and
 * `.b2-betreff`, and nothing else.
 */
/* .cv2-anschreibenDesign .b2-col-right {
  padding: 30px 60px 0;
  box-sizing: border-box;
} */

.cv2-anschreibenDesign .b2-col-right > .b2-section {
  padding: 0;
  margin: 0;
  background: none;
}

/*
 * Design's letter sidebar carries one block where its CV carries four — the
 * contact details and nothing else — so its contents sit in the middle of the
 * rail rather than stranded at the top with the rest of it empty.
 *
 * The centring has to be on the RAIL, not on the column. The photo, the name
 * and the Leitspruch are the page header, and `railHeader: 'left'` puts those
 * in the rail *above* the column; centring the column therefore moved the one
 * section a little and left the photo pinned to the top, which is not what
 * "centred" looks like. The rail is the only box that holds all of it.
 */
.cv2-anschreibenDesign .b2-rail-left {
  display: flex;
  flex-direction: column;
  /* The spacing is done with auto margins below, not `justify-content`, so the
     groups can be two rather than three. */
  justify-content: flex-start;
}

/*
 * ...but over TWO groups, not three. The photo, the name, the Leitspruch and
 * the contact block belong together as the sender; the recipient is the other
 * thing in the sidebar and gets its own share of the space.
 *
 * `display: contents` lifts the sections out of the column so the rail can
 * space them, and the auto margins do the grouping: nothing between the header
 * and the contact block, all the give either side of the pair and above the
 * recipient. The column keeps existing for the engine, it just stops being a
 * box — the sections are still its children, so the settle loop is unaffected.
 */
.cv2-anschreibenDesign .b2-col-left {
  display: contents;
}

/*
 * Auto margins, one share above the sender group, one below it, one below the
 * recipient — `space-around` over two groups, which `justify-content` cannot
 * express because the rail holds three boxes. Nothing between the header and
 * the contact block, so those two read as one.
 */
.cv2-anschreibenDesign .headblatt {
  margin-top: auto;
}

.cv2-anschreibenDesign .b2-section[data-section="persoenlicheDaten"] {
  margin-top: 0;
  margin-bottom: auto;
}

/*
 * Ohne Kopfzeile uebernimmt der Kontaktblock den oberen Anteil.
 *
 * `margin-top: 0` oben ist richtig, SOLANGE die Kopfzeile darueber steht: die
 * beiden sollen als ein Block zusammen gelesen werden, der obere Anteil sitzt
 * auf `#headblatt`. Wird die Kopfzeile abgeschaltet, ist sie `display: none`
 * und steuert gar keinen Abstand mehr bei -- der obere Anteil verschwindet mit
 * ihr, und "Persoenliche Daten" ruecken an den Blattrand.
 *
 * Nur dieser eine Wert wird zurueckgenommen. Der untere Anteil und der
 * Empfaenger bleiben, wie sie sind, also aendert sich sonst nichts an dieser
 * Seite des Anschreibens.
 */
.cv2-anschreibenDesign.b2-no-head .b2-section[data-section="persoenlicheDaten"] {
  margin-top: auto;
}

.cv2-anschreibenDesign .b2-section[data-section="anschreibenEmpfaenger"] {
  margin-bottom: auto;
}


.cv2-anschreibenBusiness .b2-section[data-section="anschreibenKopf"] {
  padding-top: 30px;
}

/*
 * The recipient, the date and the subject. Sizes are `anschreiben.css`'s,
 * copied rather than inherited because that sheet keys them on ids
 * (`#empfaengerAnschreiben`, `#datumAnschreiben`) and an id cannot go on a block
 * the pagination may clone onto another sheet. Keep the two in step by hand.
 *
 * The two templates disagree about nearly all of it — Design keeps the
 * recipient in its sidebar and gives the date 5px of air where Business gives
 * 30 — so only the type sizes are shared and the spacing is per template.
 */
.b2-empfaenger {
  font-size: 16px;
}

.b2-datum {
  text-align: right;
  font-size: 15px;
}

.cv2-anschreibenBusiness .b2-empfaenger {
  margin-top: 20px;
  margin-bottom: 30px;
}

.cv2-anschreibenBusiness .b2-datum,
.cv2-anschreibenBusiness .b2-betreff {
  margin-bottom: 30px;
}

/* Design: `#datumAnschreiben { margin-bottom: 5px }`, and the recipient is in
   the sidebar rather than above the date. */
.cv2-anschreibenDesign .b2-datum {
  margin-bottom: 5px;
}

.cv2-anschreibenDesign .b2-betreff {
  margin-bottom: 30px;
}

/* Design's recipient: centred in the sidebar under a bold label. */
.b2-empfaenger-label {
  display: none;
}

.cv2-anschreibenDesign .b2-section[data-section="anschreibenEmpfaenger"] {
  text-align: center;
  padding: 0 30px;
}

.cv2-anschreibenDesign .b2-empfaenger-label {
  display: block;
  padding-bottom: 5px;
  font-weight: bold;
}

/* `anschreiben.css` gives the title 20px and the subject 18px, both bold, the
   subject boxed to its own width so its background does not span the column. */
.b2-betreff .ueberschriftEins {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.b2-betreff .ueberschriftZwei {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
  max-width: max-content;
  padding: 0 3px;
}

.b2-betreff .ueberschriftEins {
  color: var(--b2-anschreiben-ueberschrift, inherit);
}

.b2-betreff .ueberschriftZwei {
  color: var(--b2-anschreiben-betreff-fg, inherit);
  background: var(--b2-anschreiben-betreff-bg, transparent);
}


/*
 * The body. One continuous text, however many sheets it ends up spread over —
 * `settleLetter()` in cv2.js decides where it breaks, and puts each piece in a
 * headless copy of this box on the next sheet.
 *
 * `white-space: pre-wrap` because the body is stored as plain text and a
 * newline in it is a line break the user typed.
 *
 * The margins are zeroed deliberately. The shared sheets give `.edit` and the
 * legacy letter classes margins of their own, and with one on every piece the
 * text acquired a gap at each page break that is not in the document.
 */
.b2-brieftext-wrap {
  position: relative;
  margin: 0;
  padding: 0;
}

.b2-brieftext {
  /* `.inhaltAnschreiben`'s size from anschreiben.css. Restated because the PDF
     page deliberately does not load that sheet: it sets
     `body { padding-top: 75px !important }` for the editor's navbar, which on a
     print page would push every sheet down and change the split. */
  font-size: 16px;
  white-space: pre-wrap;
  margin: 0;
  /* A little breathing room around the text and rounded corners on the box
     the background colour draws — without this the coloured background ran
     edge to edge with the text sitting flush against it. */
  padding: 12px 16px;
  border-radius: 6px;
  box-sizing: border-box;
  min-height: 1em;
  background: var(--b2-anschreiben-text-bg, transparent);
  color: var(--b2-anschreiben-text-fg, inherit);
}

/* The letter's own sheet and text colours, which are separate fields from the
   CV's — an agent writes them through `update_cover_letter`. */
.cv2-anschreibenBusiness .b2-page,
.cv2-anschreibenDesign .b2-page {
  background: var(--b2-anschreiben-blatt-bg, #fff);
  color: var(--b2-anschreiben-blatt-fg, inherit);
}

/*
 * Gesperrter Lebenslauf -- die Probierseite nach einem Import.
 *
 * Die Daten stehen da und sind zu lesen; geaendert werden koennen sie erst mit
 * einem Konto. Das Attribut `contenteditable="false"` haelt den Cursor fern
 * (siehe `setReadOnly` in cv2.js), hier wird nur das Werkzeug weggeraeumt, das
 * sonst beim Ueberfahren erscheint und etwas verspricht, was nicht geht.
 *
 * WICHTIG: nichts hiervon darf eine Hoehe aendern. Alle diese Leisten sind
 * absolut positioniert und zaehlen nicht zum Fluss, `display: none` ist also
 * folgenlos -- aber genau deshalb steht es hier und nicht als `height: 0`
 * o. ae. Eine Aenderung der Spaltenhoehe weckt den ResizeObserver und kann die
 * Seitenaufteilung unter dem Leser verschieben.
 */
#b2-pages.b2-readonly .b2-entry-tools,
#b2-pages.b2-readonly .b2-aufgabe-tools,
#b2-pages.b2-readonly .b2-chip-tools,
#b2-pages.b2-readonly .b2-row-tools,
#b2-pages.b2-readonly .b2-section-tools,
#b2-pages.b2-readonly .b2-head-add,
#b2-pages.b2-readonly .b2-grip {
  display: none !important;
}

/* Der Textcursor verspricht Bearbeitbarkeit, bevor der Klick es widerlegt. */
#b2-pages.b2-readonly .edit,
#b2-pages.b2-readonly [contenteditable="false"] {
  cursor: default;
}

/*
 * Der Platzhalter gehoert zum leeren Feld, das man gleich fuellt. Auf einer
 * gesperrten Seite ist er die Aufforderung zu etwas, was nicht geht -- und in
 * einem importierten Lebenslauf ist ein leeres Feld schlicht ein Feld, das die
 * PDF nicht hergab.
 */
#b2-pages.b2-readonly .edit:empty:before {
  content: "" !important;
}

/*
 * Der Konfliktdialog ("anderswo geaendert").
 *
 * Liegt als `.popuptest` in `views/partials/popups.ejs` -- also auf der
 * dunklen Flaeche, auf der helle Standardfarben unsichtbar sind, dieselbe
 * Falle wie beim Verlauf-Popup. Sichtbar wird er ueber eine Klasse und nicht
 * ueber `style.display`, damit die vorhandene Popup-Mechanik nichts
 * ueberschreibt.
 */
#konfliktPopup { display: none; }
#konfliktPopup.konflikt-offen { display: block; }

#konfliktPopup .konflikt-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
#konfliktPopup .konflikt-knoepfe button {
  flex: 1 1 auto;
  border: 1px solid whitesmoke;
  background: transparent;
  color: whitesmoke;
  border-radius: 6px;
  padding: 10px 16px;
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
#konfliktPopup .konflikt-knoepfe button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
#konfliktPopup .konflikt-knoepfe button:disabled { opacity: .55; cursor: default; }
/* Die eigene Fassung zu behalten ist die Vorauswahl -- sie verwirft nichts,
   was gerade getippt wurde. */
#konfliktPopup #konfliktBehalten { background: #4d90fe; border-color: #4d90fe; }
#konfliktPopup #konfliktBehalten:hover:not(:disabled) { background: #2f6fd0; }