/*
 * SHG Karriere – Druckstile
 *
 * Bei einem Stellenportal wird gedruckt: Anzeigen werden weitergereicht, an
 * die Pinnwand geheftet, der Bewerbung beigelegt oder als PDF abgelegt. Ohne
 * diese Datei kam dabei je nach Browser entweder weiße Schrift auf weißem
 * Papier heraus oder eine vollflächig getonte Seite.
 *
 * Diese Datei wird mit media="print" geladen. Sie kostet den Bildschirm
 * nichts: Der Browser lädt sie nachrangig und wendet sie nie an.
 *
 * Der Kern ist der erste Block. Weil im ganzen Portal fast jede Farbe über
 * ein Token kommt, genügt es, die Token für den Druck neu zu belegen – die
 * über fünfhundert Stellen im Stylesheet folgen von selbst. Was danach
 * kommt, räumt nur noch auf, was auf Papier keinen Sinn ergibt.
 */

@media print {
  /* ---------- 1. Die Palette für Papier ---------- */

  /*
   * Schwarz auf Weiß, und die beiden Hausfarben in ihrer tiefen Stufe.
   *
   * Die reine Stufe ist für dunklen Grund gemacht: Auf Weiß käme Cyan auf
   * 1,26:1 und das Lichtorange auf 2,83:1 – das erste ist unsichtbar, das
   * zweite fällt durch. Die tiefen Stufen halten auf Weiß 6,30:1 (Orange)
   * und 6,34:1 (Cyan).
   */
  :root {
    --paper: #FFFFFF;
    --paper-hoch: #FFFFFF;
    --paper-band: #FFFFFF;
    --ink: #000000;
    --ink-muted: #3A3A3A;

    /*
     * Und die Kanaele der durchscheinenden Schleier auf Schwarz. Daran
     * haengen achtundsiebzig Raender und Trennlinien im Portal. Ohne diese
     * zwei Zeilen waeren sie hier heller Schleier auf weissem Papier, also
     * weg - jeder Kasten ohne Kante, jede Trennlinie unsichtbar.
     */
    --tinte-kanal: 0 0 0;
    --weiss-kanal: 0 0 0;

    --shg-orange: #A83D00;
    --shg-orange-tief: #A83D00;
    --shg-orange-dunkel: #FFFFFF;

    /*
     * Die Scheine um Knoepfe und Marken sollen auf Papier verschwinden statt
     * als graue Hoefe zu drucken - deshalb weiss auf weiss. Und was auf
     * einer Orangeflaeche steht, ist hier schwarz: Die Flaechen selbst sind
     * im Druck ohnehin leer.
     */
    --orange-kanal: 255 255 255;
    --schrift-auf-orange: #000000;
    --shg-cyan: #006B66;
    --shg-cyan-tief: #006B66;
    --shg-cyan-dunkel: #FFFFFF;

    --shg-hell: #FFFFFF;
    --shg-hell-schrift: #000000;
    --shg-hell-schrift-leise: #3A3A3A;
  }

  @page {
    margin: 1.5cm;
  }

  html,
  body {
    background: #FFFFFF !important;
    color: #000000;
    font-size: 11pt;
    line-height: 1.45;
  }

  /*
   * Keine Flächen, keine Schatten, keine Verläufe. Der Browser druckt
   * Hintergründe ohnehin meist nicht; damit nichts davon abhängt, nehmen wir
   * sie selbst heraus. Die Bildmarke bleibt – sie ist ein <img>.
   */
  *,
  *::before,
  *::after {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* ---------- 2. Was auf Papier nichts verloren hat ---------- */

  /*
   * Die Eröffnung, das Menü, die mitlaufende Leiste, die Fußzeile und jede
   * Bedienhilfe. Übrig bleibt der Text – und bei einer Anzeige der Weg zur
   * Bewerbung, der unten als Adresse steht.
   */
  .hero,
  .site-menu,
  .menu-toggle,
  .menu-close,
  .site-footer,
  .job-bar,
  .skip-link,
  .hero__pause,
  .hero__scroll,
  canvas {
    display: none !important;
  }

  /*
   * Hier stand erst eine Regel gegen alles mit aria-hidden. Das war zu grob:
   * Die Überschrift des Hero trägt ihren sichtbaren Teil in genau so einem
   * Element, und auf anderen Seiten könnte es ebenso stehen. Verborgen wird
   * deshalb namentlich, was verborgen gehört.
   */

  /* Was sich erst beim Scrollen einblendet, ist im Druck sofort da. */
  [data-reveal],
  [data-soft-reveal],
  .hero-intro [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
  }

  /* ---------- 3. Die Stellenanzeige ---------- */

  .job,
  .job__inner,
  .job__content,
  .job__body {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .job__title {
    margin: 0 0 .4cm;
    font-size: 20pt;
    line-height: 1.15;
  }

  .job__eyebrow,
  .job__updated {
    color: #3A3A3A;
    font-size: 9pt;
  }

  /* Die Eckdaten als Liste untereinander – nebeneinander wird es im
   * Papierformat zu eng und bricht unschön um. */
  .job__facts {
    display: block !important;
    margin: .3cm 0 .5cm;
    padding: .3cm 0;
    border-top: 1pt solid #000;
    border-bottom: 1pt solid #000;
  }

  .job__fact {
    display: block !important;
    margin: 0 0 .12cm;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .job__section {
    margin: 0 0 .45cm;
  }

  .job__heading {
    margin: 0 0 .15cm;
    font-size: 12pt;
  }

  .job__apply,
  .job__contact {
    margin-top: .5cm;
    padding: .35cm;
    border: 1pt solid #000;
    background: none !important;
  }

  /* ---------- 4. Verweise lesbar machen ---------- */

  a {
    color: #000;
    text-decoration: underline;
  }

  /*
   * Auf Papier ist ein Verweis ohne Adresse wertlos. Deshalb steht sie
   * dahinter – aber nur bei Verweisen nach außen und nicht bei Sprüngen
   * innerhalb der Seite, sonst stünde hinter jedem Wort eine Raute.
   */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  a[href^="#"]::after,
  .breadcrumb a::after {
    content: "";
  }

  /* Die Pfeile aus dem Stylesheet sind Masken – auf Papier nur ein Kasten. */
  .btn::after,
  .btn__icon,
  [class*="__link"]::after {
    display: none !important;
  }

  /*
   * Knöpfe werden zu Zeilen. Ein gefüllter Knopf ohne Fläche sähe aus wie
   * ein Versehen; so liest er sich als das, was er auf Papier ist: ein
   * Hinweis mit Adresse.
   */
  .btn {
    display: block !important;
    min-height: 0 !important;
    margin: .15cm 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #000 !important;
    font-weight: 500;
    text-align: left !important;
  }

  /* ---------- 5. Umbrüche ---------- */

  h1, h2, h3, h4 {
    break-after: avoid-page;
    break-inside: avoid-page;
  }

  li,
  figure,
  img,
  .job__fact,
  .job__apply,
  .job__contact {
    break-inside: avoid-page;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }
}