/* ==========================================================================
   Stylesheet der Anbeca-Webseite

   Diese Datei wird von Hand gepflegt und direkt ausgeliefert - es gibt
   keinen Build-Schritt mehr. Vorher entstand sie aus SCSS-Dateien unter
   src/styles/, die aber seit Oktober 2021 nicht mehr uebersetzt werden
   konnten: weder Node noch Composer sind auf den Arbeitsplaetzen
   installiert, und die Werkzeugkette (gulp 4 mit node-sass) laesst sich
   auf heutigen Systemen nicht mehr einrichten. Aenderungen am SCSS kamen
   dadurch nie auf der Seite an - wer etwas aendern wollte, musste es im
   Markup nachbauen. Deshalb ist der Umweg abgeschafft.

   Ausgangspunkt ist das zuletzt ausgelieferte, uebersetzte CSS, damit sich
   am Erscheinungsbild nichts aendert.
   ========================================================================== */

:root {
  /* Markenfarben. Standen frueher als SCSS-Variablen in src/styles/_colors.scss.
     Hier liegen nur die Farben, die man an einer einzigen Stelle aendern koennen
     will. Einmalige Abstufungen in Verlaeufen stehen weiter direkt an ihrer
     Regel, weil ein Name dort nichts erklaeren wuerde. */
  --farbe-akzent:        #cae001; /* Anbeca-Gruen, traegt die ganze Seite */
  --farbe-akzent-dunkel: #9cad01; /* Akzent, 10 % abgedunkelt - Verlaeufe und Ueberschriften */
  --farbe-text:          #373e00; /* Akzent, 32 % abgedunkelt - Fliesstext und Navigation */
}

.nav-main {
  color: var(--farbe-text);
  text-transform: uppercase;
  font-size: .85em;
  position: relative;
  z-index: 3;
  font-weight: bold;
}

@media (min-width: 1200px) {
  .nav-main {
    display: block !important;
    margin-left: auto;
  }
}

@media (max-width: 1199px) {
  .nav-main {
    display: none;
    clear: both;
    float: none;
    z-index: 999999;
    margin-top: 0;
    position: absolute;
    top: 3em;
    background-color: var(--farbe-akzent);
    width: 100%;
    left: 0;
    -webkit-box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
            box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
  }
}

/* Das Zeichen steht dunkel auf der gruenen Flaeche, nicht weiss.

   Weiss war von der alten Beschriftung "SOS" uebrig geblieben. Gegen das
   Anbeca-Gruen misst es 1,48:1 - fuer einen Schriftzug schon knapp, fuer
   eine Strichzeichnung mit Ring, Innenkreis und vier Speichen zu wenig:
   das Zeichen verschwamm zu einem hellen Fleck. #373e00 ist derselbe
   abgedunkelte Akzent, den auch die Navigation traegt, und kommt auf
   7,66:1. Die Flaeche bleibt in beiden Farbschemata gruen, deshalb hier
   ein fester Wert und nicht var(--farbe-text) - das waere im dunklen
   Schema hell und damit wieder unlesbar. */
.nav-main .button {
  color: #373e00;
  background-color: var(--farbe-akzent);
  padding: .3em .5em;
  border-radius: .2em;
  border-right: 0;
  -webkit-box-shadow: 0.05em 0.05em 0.2em rgba(0, 0, 0, 0.1);
          box-shadow: 0.05em 0.05em 0.2em rgba(0, 0, 0, 0.1);
  margin-left: .5em;
}

/* Das SOS-Zeichen ersetzt die fruehere Beschriftung der Schaltflaeche.
   Es erbt seine Farbe ueber currentColor von .nav-main .button, faellt
   also automatisch richtig aus, wenn dort die Farbe geaendert wird.
   vertical-align setzt es auf die Grundlinie der Nachbareintraege.
   Vorher stand hier eine Regel fuer ein img-Element, das seit Jahren
   auskommentiert war und nichts mehr traf. */
.nav-main .button .sos-symbol {
  height: 1.6em;
  width: 1.6em;
  vertical-align: -0.4em;
}

/* Am Desktop soll die Schaltflaeche quadratisch sein.

   Dafuer muss das Zeichen ein Block sein: als Zeilenelement bestimmt die
   Zeilenhoehe die Hoehe der Schaltflaeche, nicht das Zeichen selbst - sie
   war dadurch 34 Pixel breit, aber nur 27 hoch und wirkte gedrueckt.
   line-height: 0 nimmt der Zeile ihren Eigenanteil, und mit gleicher
   Polsterung rundum wird die Flaeche quadratisch.

   Nur ab 1200 Pixeln: in der schmalen Ansicht ist die Schaltflaeche eine
   volle Zeile des aufgeklappten Menues und wird ueber text-align zentriert,
   was bei einem Block nicht mehr griffe. */
@media (min-width: 1200px) {
  .nav-main .button {
    display: inline-block;
    padding: .5em;
    line-height: 0;
    /* line-height: 0 legt die Grundlinie eines inline-block auf seine
       Unterkante. Ohne diese Angabe stand die Schaltflaeche deshalb mit
       dem Fuss auf der Schriftlinie der Nachbarpunkte und ragte um ihre
       volle Hoehe darueber - gemessen 14,6 Pixel zu hoch. */
    vertical-align: middle;
  }

  .nav-main .button .sos-symbol {
    display: block;
    vertical-align: baseline;
  }
}

.nav-main .nav-sub {
  padding: 0;
  margin: 0;
  min-width: 15em;
  list-style-type: none;
  background-color: var(--farbe-akzent);
  overflow: hidden;
  -webkit-transition: .2s opacity;
  -o-transition: .2s opacity;
  transition: .2s opacity;
  left: .8em;
  display: none;
}

.nav-main .nav-sub li {
  padding-bottom: 0;
}

@media (min-width: 1200px) {
  .nav-main .nav-sub {
    position: absolute;
  }
}

/* Dunkle Schrift auf dem gruenen Untermenue. Die Vorlage sah hier Weiss
   vor - auf dem Markengruen sind das gemessene 1,48:1, die Schrift waere
   kaum zu lesen. Mit der Textfarbe der Seite sind es 7,66:1.
   (WCAG 2.1 AA verlangt 4,5:1 fuer Fliesstext.) */
.nav-main .nav-sub a {
  display: block;
  color: var(--farbe-text);
}

/* Der Schalter zum Aufklappen des Untermenues. Ab 1200 Pixel oeffnet sich das
   Untermenue beim Ueberfahren mit der Maus, dort ist er ueberfluessig; die
   Regeln fuer die schmale Ansicht weiter unten blenden ihn wieder ein.
   background und border setzen die Browservorgaben fuer <button> zurueck. */
.nav-main .toggle-subnav {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}

.nav-main > li:last-child > a {
  padding-right: 0;
}

.nav-main a {
  text-decoration: none;
  padding: .8em;
}

@media (min-width: 1200px) {
  .nav-main a {
    color: #a5b701;
  }
}

.nav-main a.active {
  font-weight: bold;
}

.nav-main > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@media (min-width: 1200px) {
  .nav-main > ul > li {
    display: inline-block;
    /* Die Vorlage hatte hier 1em. Das haette die Navigation von 45 auf rund
       55 Pixel wachsen lassen und die Kopfleiste mit ihr. Als Bruecke zum
       Untermenue wird die Polsterung nicht gebraucht: .nav-sub liegt
       absolut im Listenpunkt und schliesst luechenlos an. */
    padding-bottom: 0;
    position: relative;
  }
}

/* Der letzte Texteintrag braucht rechts weder Trennstrich noch Polsterung.

   :not(.button) haelt die Regel von der Fernwartungs-Schaltflaeche fern.
   Die steht als letzter Listenpunkt und ist damit genau der Fall, den
   dieser Selektor trifft - er nahm ihr die rechte Polsterung, waehrend
   links, oben und unten .5em standen. Die Flaeche war dadurch 31 Pixel
   breit bei 39 Pixel Hoehe, das Zeichen lag rechts buendig an der Kante,
   und die abgerundete Ecke schnitt oben rechts in den Rettungsring.
   Der fehlende Trennstrich der Schaltflaeche kommt jetzt aus
   .nav-main .button, wo er unabhaengig von der Position gilt. */
.nav-main > ul > li:last-child > a:not(.button) {
  padding-right: 0;
  border-right: 0;
}

@media (min-width: 1200px) {
  .nav-main > ul > li > a {
    border-right: 1px solid white;
    display: inline-block;
    letter-spacing: .01em;
    line-height: 1.4em;
  }
}

@media (min-width: 1200px) {
  .nav-main > ul > li:hover .nav-sub {
    display: block !important;
  }

  /* Damit das Untermenue auch erreichbar ist, wenn jemand mit der Tastatur
     durch die Seite geht und gar keinen Mauszeiger benutzt. */
  .nav-main > ul > li:focus-within .nav-sub {
    display: block !important;
  }
}

@media (max-width: 1199px) {
  .nav-main {
    margin-top: 1em;
  }
  .nav-main a,
  .nav-main .button {
    padding: 1em .5em;
    display: block;
    text-align: center;
    border-bottom: 1px solid #fff;
  }

  /* Die Farbe gehoert nur den Verweisen, nicht der Schaltflaeche.

     Hier stand ein unbedingtes #fff fuer beide. Im hellen Schema hat das
     aufgeklappte Menue selbst die gruene Akzentflaeche - weisse Schrift
     darauf misst 1,48:1, die Menuepunkte waren kaum zu lesen.
     var(--farbe-text) ist dunkel im hellen und hell im dunklen Schema und
     passt damit in beiden Faellen zum Untergrund.

     Die Schaltflaeche bleibt davon ausgenommen: sie behaelt in beiden
     Schemata ihre gruene Flaeche, ein heller Wert waere dort wieder
     unlesbar. Ihr fester Wert aus .nav-main .button gewinnt ohnehin,
     weil zwei Klassen schwerer wiegen als Klasse plus Elementname. */
  .nav-main a {
    color: var(--farbe-text);
  }
  .nav-main li {
    text-align: center;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    position: relative;
    /*&:last-child {
				border-bottom:1px solid lighten($c-border,20);
			}*/
  }
  /* Der Pfeil ist inzwischen ein inline gezeichnetes svg, kein img mehr. */
  .nav-main li.active .toggle-subnav svg,
  .nav-main li.active .toggle-subnav img {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .nav-main .toggle-subnav {
    width: 3em;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    opacity: .5;
    padding: .6em;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
  }
  .nav-main .toggle-subnav svg {
    width: 2.25em;
    height: 2.25em;
    -webkit-transition: -webkit-transform .25s;
    transition: -webkit-transform .25s;
    -o-transition: transform .25s;
    transition: transform .25s;
    transition: transform .25s, -webkit-transform .25s;
  }
  .nav-main .toggle-subnav path {
    fill: #fff;
  }
  .nav-main .nav-sub {
    background-color: #eafe2f;
  }
}

.nav-main-toggler {
  width: 2.2em;
  position: absolute;
  right: 3.5%;
  cursor: pointer;
  top: 0;
  z-index: 3;
}

@media (min-width: 1200px) {
  .nav-main-toggler {
    display: none;
  }
}

.nav-main-toggler .line {
  height: 6px;
  margin-bottom: 5px;
  background-color: var(--farbe-akzent);
  border-radius: .15em;
}

.nav-main-toggler .line:nth-child(2) {
  width: 80%;
  margin-left: 20%;
}

.nav-main-toggler .line:nth-child(3) {
  width: 90%;
  margin-left: 10%;
}

body {
  min-width: 320px;
  color: var(--farbe-text);
  font-family: 'Poppins', sans-serif;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
}

p,
li {
  line-height: 1.65em;
  margin: 0;
  font-size: 1.1em;
}

p {
  margin-bottom: .5em;
}

input,
textarea,
button {
  font-family: inherit;
}

.inner {
  max-width: 90em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-left: 3.5%;
  padding-right: 3.5%;
}

h1,
h2 {
  margin: .25em 0;
  letter-spacing: -.02em;
  line-height: 1em;
}

h1 {
  margin-bottom: .5em;
}

[v-show],
[v-if] {
  display: none;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

main {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

header {
  position: relative;
  min-height: 65vh;
  background-size: cover;
  background-position: center;
}

header .headlines-wrapper {
  position: absolute;
  bottom: 3em;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2);
  width: 100%;
}

header .headlines-wrapper h1 {
  font-size: 5em;
}

@media (max-width: 959px) {
  header .headlines-wrapper h1 {
    font-size: 2em;
  }
}

header .headlines-wrapper h2 {
  color: #e5f080;
}

header .head {
  background-color: #fff;
  /* Unten mehr Luft als die urspruenglichen 1em.

     Die Leiste ist um 1,5 Grad gekippt, ihre Unterkante steigt also nach
     rechts an - genau dorthin, wo die Navigation sitzt. Am rechten Rand
     frisst die Neigung rund 17 Pixel Hoehe weg, und die gruene Schraege
     am Fuss der Leiste lief dadurch quer durch die letzte Zeile: der
     Impressum-Kasten reichte 0,2 Pixel darunter, die Fernwartungs-
     Schaltflaeche 0,5. Bei ihr fiel es auf, weil gruene Flaeche auf
     gruene Linie trifft und beides zu einem Klumpen verschmilzt.

     1.7em gibt der Zeile rund 10 Pixel Abstand zur Schraege. Die Leiste
     waechst dadurch um 11 Pixel - das ist der Preis dafuer, dass die
     Neigung ueberhaupt Platz kostet. */
  padding: 6em 0 1.7em;
  margin-top: -4em;
  opacity: .9;
  -webkit-transform: skewY(-1.5deg);
      -ms-transform: skewY(-1.5deg);
          transform: skewY(-1.5deg);
  position: relative;
}

header .head .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: skewY(1.5deg);
      -ms-transform: skewY(1.5deg);
          transform: skewY(1.5deg);
  /* Hebt Logo und Navigation ueber die gruene Schraege am unteren Rand der
     Kopfleiste, die als header .head:after gezeichnet wird.

     Ohne diese Angabe legt sich die Schraege ueber das aufgeklappte
     Untermenue. Der Grund ist nicht offensichtlich: das transform oben
     eroeffnet einen eigenen Stapelkontext, weshalb das z-index: 3 der
     Navigation nur noch innerhalb dieses Kastens ordnet und nicht mehr
     gegen die Schraege wirkt. Auf der Ebene darueber stehen .inner und die
     Schraege beide auf "auto" - und bei Gleichstand gewinnt das zuletzt
     Gezeichnete, was ein :after immer ist. */
  z-index: 2;
}

header .head:after {
  content: '';
  display: block;
  width: 50%;
  right: 0;
  position: absolute;
  bottom: -3px;
  height: 6px;
  background-color: var(--farbe-akzent);
  -webkit-box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
          box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
}

header .head .logo {
  width: 12em;
}

header:before {
  opacity: .8;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -o-linear-gradient(70deg, #414800, rgba(179, 199, 1, 0.3) 50%);
  background-image: linear-gradient(20deg, #414800, rgba(179, 199, 1, 0.3) 50%);
}

footer {
  background-color: var(--farbe-akzent);
  padding: 1em 0;
  color: var(--farbe-text);
}

footer a {
  text-decoration: none;
  font-weight: bold;
}

.footer-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.section {
  padding: 6em 0;
  overflow: hidden;
  position: relative;
}

.section h1, .section h2 {
  color: var(--farbe-akzent-dunkel);
}

.section h2 {
  font-size: 2em;
}

.section h2.big {
  display: inline-block;
  background: -o-linear-gradient(55deg, var(--farbe-akzent-dunkel), #bfbfbf);
  background: linear-gradient(35deg, var(--farbe-akzent-dunkel), #bfbfbf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 959px) {
  .section h2 {
    font-size: 1.3em;
  }
}

.box {
  margin-bottom: 2em;
}

.particles-js {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
}

.image-left {
  padding-bottom: 0;
}

@media (min-width: 960px) {
  .image-left .text-component {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

.image-left .image-container {
  margin-right: 2em;
}

@media (min-width: 960px) {
  .text-component {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.text-component .text-container {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 65%;
          flex: 0 0 65%;
  margin-right: 5%;
}

.text-component img {
  -webkit-box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.3);
          box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.3);
  border-radius: .2em;
  -webkit-filter: grayscale(0.5);
          filter: grayscale(0.5);
}

.text-component .image-container {
  position: relative;
}

.text-component .image-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -o-linear-gradient(55deg, var(--farbe-akzent), var(--farbe-akzent-dunkel));
  background-image: linear-gradient(35deg, var(--farbe-akzent), var(--farbe-akzent-dunkel));
  z-index: 4;
  opacity: .4;
}

.negative {
  background-image: -o-linear-gradient(55deg, var(--farbe-akzent), var(--farbe-akzent-dunkel));
  background-image: linear-gradient(35deg, var(--farbe-akzent), var(--farbe-akzent-dunkel));
  overflow: visible;
}

.negative:before {
  content: '';
  display: block;
  width: 100%;
  -webkit-transform: skewY(-1.5deg);
      -ms-transform: skewY(-1.5deg);
          transform: skewY(-1.5deg);
  right: 0;
  position: absolute;
  top: -3em;
  height: 5em;
  background-color: #fff;
}

.negative:after {
  content: '';
  display: block;
  width: 100%;
  -webkit-transform: skewY(1.5deg);
      -ms-transform: skewY(1.5deg);
          transform: skewY(1.5deg);
  right: 0;
  position: absolute;
  bottom: -3em;
  height: 5em;
  background-color: #fff;
  -webkit-box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
          box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
}

.negative h2 {
  color: #fff;
  background: -o-linear-gradient(55deg, #e7fe16, #d9d9d9);
  background: linear-gradient(35deg, #e7fe16, #d9d9d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.negative h2.big {
  font-size: 5em !important;
  color: var(--farbe-text);
  text-align: center;
  display: inline-block;
  background: -o-linear-gradient(55deg, var(--farbe-akzent), #d9d9d9);
  background: linear-gradient(35deg, var(--farbe-akzent), #d9d9d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  top: -1.4em;
  margin-bottom: -2em;
  z-index: 23;
}

@media (max-width: 959px) {
  .negative h2.big {
    font-size: 2.5em !important;
    top: -3em;
    margin-bottom: -2em;
  }
}

.negative .person {
  padding: 0 1em;
  /* Feste Breite, damit alle Kacheln der Teamreihe gleich breit sind.
     Stand vorher als style="width: 300px" direkt im Markup von vier der
     sechs Partials - ein Notbehelf, weil sich das SCSS nicht mehr
     uebersetzen liess. Zwei Kacheln wurden dabei vergessen und richteten
     sich nach ihrem Inhalt (314 px und 294 px statt 300 px). */
  width: 300px;
}

@media (min-width: 960px) {
  .negative .persons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    /* Die Kacheln stehen mittig in ihrer Reihe. Ohne diese Angabe packen
       sie sich links zusammen, was auffaellt, sobald eine Reihe nicht
       voll besetzt ist: im Block "So sehen wir aus" der Bewerbungsseite
       stehen nur zwei Kacheln in einer Spalte von 65 Prozent Breite,
       und die Anwerbe-Kachel steht allein in der letzten Reihe. */
    justify-content: center;
  }
}

.negative .image-container {
  border-radius: 50%;
  overflow: hidden;
  height: 10em;
  width: 10em;
  display: inline-block;
  -webkit-box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.1);
          box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.1);
}

.negative .image-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 960px) {
  .boxes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* Drei Kacheln fuellen eine Reihe genau aus: 3 x 31,33 Prozent Breite
       plus 6 x 1 Prozent Abstand ergeben 100 Prozent. Ab der vierten muss
       die Reihe umbrechen duerfen, sonst quetschen sich alle nebeneinander.
       Eine nicht voll besetzte Reihe steht mittig - bei einer vollen Reihe
       aendert das nichts, weil sie die Breite ohnehin ausfuellt. */
    flex-wrap: wrap;
    justify-content: center;
  }
}

.box {
  background-image: -o-linear-gradient(55deg, #e1f901, #859401);
  background-image: linear-gradient(35deg, #e1f901, #859401);
  -webkit-box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.1);
          box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.1);
  padding: 2em;
  margin: 1%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 31.33%;
          flex: 0 0 31.33%;
  border-radius: .2em;
  position: relative;
}

.box:after {
  content: '';
  display: block;
  width: 50%;
  right: 0;
  position: absolute;
  bottom: -3px;
  height: 6px;
  background-color: var(--farbe-akzent);
  -webkit-box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
          box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
}

@media (max-width: 959px) {
  .box {
    margin-bottom: 5em;
  }
}

.box:before {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.box .image-container {
  text-align: center;
  position: relative;
  top: -4.5em;
  margin-bottom: -3em;
}

.box img {
  width: 5em;
}

.box h2 {
  color: #fff;
}

.box:nth-child(1) {
  /*	color:lighten($c-darkest,35);

		h2 {
			color:lighten($c-darkest,35);
		}*/
}

/* Farben und Auswahl stehen inzwischen in farbschema.css und wiederholen
   sich dort ueber 3n+2 und 3n+3 in jeder Dreierreihe. Die beiden Regeln
   hier greifen nur noch fuer die zweite und dritte Kachel und werden von
   dort ueberschrieben; sie bleiben stehen, damit die Seite auch ohne
   farbschema.css nicht voellig einfarbig aussieht. */
.box:nth-child(2) {
  background-image: -o-linear-gradient(55deg, #6e6e6e, #525252);
  background-image: linear-gradient(35deg, #6e6e6e, #525252);
  color: #fff;
}

.box:nth-child(3) {
  background-image: -o-linear-gradient(55deg, #d9d9d9, #b3b3b3);
  background-image: linear-gradient(35deg, #d9d9d9, #b3b3b3);
  color: #262626;
}

.section {
  margin-top: 5em;
  margin-bottom: 5em;
  padding-top: 5em;
  padding-bottom: 5em;
}

.section .big {
  font-size: 2em;
}

@media (min-width: 960px) {
  .section .big {
    font-size: 3.5em;
  }
}

.section:after {
  content: '';
  display: block;
  width: 50%;
  right: 0;
  position: absolute;
  bottom: -3px;
  height: 6px;
  background-color: var(--farbe-akzent);
  -webkit-box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
          box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
}

.section:nth-child(1) {
  margin-top: 0;
}

.section:nth-child(2n):after {
  left: 0;
  right: auto;
}

.section.negative:after {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.call-to-action-component h3 {
  text-align: center;
  color: #fff;
  margin: .25em 0;
  opacity: .8;
}

@media (min-width: 960px) {
  .call-to-action-component h3 {
    font-size: 3em;
  }
}

.call-to-action-component h3.email {
  opacity: .6;
}

.call-to-action-component h3 a {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Nachtraege

   Diese Regeln standen bis zum Umbau als <style>-Block mitten im Seitenkopf.
   Dort landeten sie, weil sich das SCSS nicht mehr uebersetzen liess und es
   keinen anderen Weg gab, etwas am Aussehen zu aendern.
   -------------------------------------------------------------------------- */

/* Haelt die Kopfleiste ueber dem Partikel-Effekt, der im Header laeuft. */
header .head {
  z-index: 1;
}

/* Die aufklappbaren Stellenanzeigen auf der Bewerbungsseite gleiten auf,
   statt hart zu erscheinen. */
details[open] summary ~ * {
  animation: sweep .7s ease-in-out;
}

@keyframes sweep {
  0%   { opacity: 0; margin-left: -20px; }
  100% { opacity: 1; margin-left: 0; }
}

/* Honigtopf im Bewerbungsformular.

   Das Feld muss im Markup stehen, damit Spam-Programme es finden und
   ausfuellen - aber fuer Menschen unsichtbar bleiben. Es wird deshalb aus
   dem Sichtfeld geschoben statt mit display:none ausgeblendet, weil
   manche Programme ausgeblendete Felder ueberspringen. Vorlesegeraete und
   Tastaturbedienung ueberspringen es ueber aria-hidden und tabindex. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Anwerbe-Kachel am Ende des Teams

   Sie steht in derselben Reihe wie die Personen, soll aber nicht wie eine
   Person aussehen: statt eines Portraets ein gestrichelter, leerer Kreis -
   ein offener Platz, keine Person. Die ganze Kachel ist anklickbar.
   -------------------------------------------------------------------------- */
.person-anwerbung {
  display: block;
  text-decoration: none;
}

.person-anwerbung .image-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, .65);
  background-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.person-anwerbung .anwerbung-zeichen {
  font-size: 4em;
  font-weight: 300;
  line-height: 1;
  color: #fff;
}

.person-anwerbung:hover .image-container,
.person-anwerbung:focus-visible .image-container {
  border-color: #fff;
  background-color: rgba(255, 255, 255, .28);
}

/* Der Hinweis auf die Stellen ist der eigentliche Aufruf und darf als
   solcher erkennbar sein - der Rest der Kachel traegt keinen Link. */
.person-anwerbung p {
  text-decoration: underline;
}

/* Verweis auf die Unterseite am Fuss jeder Leistungskachel.

   Die Farbe wird bewusst nicht gesetzt: die drei Kacheln einer Reihe sind
   unterschiedlich eingefaerbt, und "a { color: inherit }" laesst den Verweis
   die Textfarbe seiner Kachel uebernehmen. */
.box .mehr {
  margin-top: 1.2em;
  margin-bottom: 0;
  font-weight: bold;
}

.box .mehr a {
  text-decoration: underline;
}

/* Fliesstext auf den Leistungs-Unterseiten.

   Ohne Begrenzung liefe der Text bei 1440 Pixeln Fensterbreite ueber die
   volle Breite - Zeilen von 180 Zeichen liest niemand gern. 46em ergeben
   je nach Schriftgroesse rund 75 bis 90 Zeichen je Zeile. */
.leistung-text {
  max-width: 46em;
}

.leistung-text h3 {
  margin-top: 1.6em;
}

.leistung-text ul {
  padding-left: 1.2em;
}

.leistung-text li {
  margin-bottom: .4em;
}

/* Aufklappbare Stellenanzeigen auf der Bewerbungsseite.

   Diese Werte standen vorher als style-Attribut direkt im Markup. Dort
   schlagen sie jedes Stylesheet, lassen sich also weder ueberschreiben noch
   an einer Stelle pflegen - was zum Beispiel jeden dunklen Entwurf
   aushebelt.

   list-style: none nimmt das Dreieck weg, das Browser vor eine Zusammen-
   fassung setzen; die Ueberschriften tragen stattdessen einen Pfeil im Text.
   cursor ist neu: dass die Zeile anklickbar ist, sah man ihr vorher nicht an. */
.stelle {
  margin-bottom: 3em;
}

.stelle summary {
  list-style: none;
  background-color: #ececec;
  padding: 15px;
  border: 1px solid #000;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Mehr Luft im Kachelraster

   Die Vorlage setzte 1 Prozent Abstand rundum. Bei rund 420 Pixeln
   Kachelbreite blieben dadurch nur 27 Pixel zwischen zwei Kacheln - und zwar
   in beide Richtungen, weil das margin-Kurzformat weiter oben das
   margin-bottom von 2em ueberschreibt.

   Senkrecht war das zu wenig: die Symbole sitzen um 4,5em nach oben versetzt
   und ragen damit rund 30 Pixel ueber ihre Kachel hinaus. Sie stiessen
   dadurch an die Reihe darueber.

   Die Kachelbreite sinkt entsprechend, damit drei Stueck weiterhin genau eine
   Reihe fuellen: 3 x 30,13 % + 6 x 1,6 % Abstand ergibt 100 %.
   -------------------------------------------------------------------------- */
.box {
  margin: 1.6%;
  margin-bottom: 5em;
  flex: 0 0 30.13%;
  padding: 2.6em;
}

/* Die Ueberschrift stand fast auf dem Text darunter. Die .25em aus der
   allgemeinen Regel beziehen sich auf ihre eigene Schriftgroesse und sind
   deshalb nur acht Pixel. */
.box h2 {
  margin-bottom: .5em;
}

.box .mehr {
  margin-top: 1.8em;
}

/* --------------------------------------------------------------------------
   Portraets im Vorstellungsblock der Bewerbungsseite

   Der gruene Verlauf und die Entsaettigung gehoeren ueber das grosse
   Inhaltsfoto eines Textblocks, nicht ueber Gesichter. Der Block "So sehen
   wir aus" liegt im Markup aber innerhalb von .text-component und hat beides
   deshalb mit abbekommen - die Portraets wirkten gelbstichig und blass.

   Auf der Startseite stehen dieselben Personen ausserhalb von
   .text-component und werden dort unveraendert gezeigt. Erst damit sehen
   beide Stellen gleich aus.
   -------------------------------------------------------------------------- */
.text-component .person .image-container:before {
  background-image: none;
}

.text-component .person img {
  filter: none;
  box-shadow: none;
  border-radius: 0;
}

/* Verweis von einem Anriss auf die ausfuehrliche Seite, etwa von den
   Leistungskacheln der Startseite auf die Leistungsuebersicht. */
.weiter {
  text-align: center;
  font-weight: bold;
  margin-top: 2.5em;
  margin-bottom: 0;
}

.weiter a {
  text-decoration: underline;
}