@charset "UTF-8";
/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* Stile aus den anderen SCSS-Dateien zusammentragen */
/* SaSS Variablen */
/* Fonts */
/* Farben */
/* Fontfarben */
/* Hintergrundfarben */
/* SaSS Mixins */
/* SaSS Basis-Stile */
/**************** Inhalt ***************/
/*                                     */
/*  0. Fonts / Animation               */
/*  1. Grundlagen HTML / Body          */
/*  2. Zeichenformate Content          */
/*   2.1 Überschriften                 */
/*   2.2 Links                         */
/*   2.3 Absatzformate                 */
/*   2.4 Listen                        */
/*   2.5 Tabellen                      */
/*   2.6 Formulare                     */
/*  3. Navigations-Elemente            */
/*  4. Layout Boxen                    */
/*   4.1 Grundgerüst                   */
/*   4.2 Columns                       */
/*  5. Einzelelemente                  */
/*  6. Helferlein                      */
/*  7. Extern                          */
/*                                     */
/***************************************/
/*  0. Fonts / Animation               */
/*  1. Grundlagen HTML / Body          */
body {
  margin: 0;
  padding: 0;
  font-size: 0.875em;
  line-height: 1.4em;
  font-family: "Calibri", Calibri, "Cambria", Cambria, Helvetica, Arial, sans-serif; }

/*  2. Zeichenformate Content          */
/*   2.1 Überschriften                 */
h1 {
  font-family: "Cambria", Cambria, Times, Georgia, serif;
  color: #ffffff;
  font-size: 2em;
  line-height: 1.6em;
  margin: 0;
  position: absolute;
  left: 24px;
  top: 15vh;
  width: 90%; }
  h1 span {
    background-color: #5ead26;
    padding: 1px 5px; }

#rechtstext h1 {
  font-family: "Calibri", Calibri, "Cambria", Cambria, Helvetica, Arial, sans-serif;
  color: #005f85;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%; }

h2 {
  font-size: 1.5em;
  line-height: 1.2em;
  color: #005f85; }

h3 {
  font-family: "Cambria", Cambria, Times, Georgia, serif;
  font-size: 2em;
  line-height: 1.2em;
  padding: 0;
  margin: 0 0 0.25em 0;
  color: #ffffff; }
  h3 span {
    background-color: #5ead26;
    padding: 1px 5px; }

#rechtstext h3 {
  color: #005f85;
  font-family: "Calibri", Calibri, "Cambria", Cambria, Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  line-height: 1.2em;
  margin: 0 0 0.5em 0; }

h4 {
  font-size: 1.25em;
  line-height: 1.2em;
  padding: 0;
  margin: 0;
  font-weight: 400;
  color: #ffffff; }
  h4 span {
    background-color: #5ead26;
    padding: 1px 5px; }

#rechtstext h4 {
  color: #005f85;
  margin: 0 0 1em 0;
  padding: 0;
  font-weight: 700; }

/*   2.2 Links                         */
a {
  font-weight: 700;
  opacity: 0.85;
  -webkit-transition: opacity 0.3s;
  /* Safari */
  transition: opacity 0.3s; }
  a:link {
    color: #ffffff;
    text-decoration: underline; }
  a:visited {
    color: #ffffff;
    text-decoration: underline; }
  a:hover {
    color: #ffffff;
    text-decoration: none;
    opacity: 1; }
  a:active {
    color: #ffffff;
    text-decoration: underline;
    opacity: 1; }

#logo a {
  opacity: 1 !important; }

article a:link {
  color: #005f85;
  text-decoration: underline; }
article a:visited {
  color: #005f85;
  text-decoration: underline; }
article a:hover {
  color: #005f85;
  text-decoration: none;
  opacity: 1; }
article a:active {
  color: #005f85;
  text-decoration: underline;
  opacity: 1; }

/*   2.3 Absatzformate                 */
.dark h2 {
  color: #005f85; }

.light {
  color: #ffffff !important; }

sub, sup {
  font-size: 0.75em;
  line-height: 1em; }

/*   2.4 Listen                        */
/*   2.5 Tabellen                      */
/*   2.6 Formulare                     */
/*  3. Navigations-Elemente            */
/*  4. Layout Boxen                    */
/*   4.1 Grundgerüst                   */
header#top-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: content-box;
  height: 60px;
  padding: 0 24px;
  z-index: 9999; }
  header#top-navigation #logo {
    width: 84px;
    height: 51px; }
    header#top-navigation #logo img {
      width: 84px;
      height: 51px; }
  header#top-navigation #ham-nav {
    position: absolute;
    left: auto;
    top: 9px;
    right: 66px;
    background-color: #009bd5;
    width: 42px;
    height: 42px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url("../img/_grafik/ham-closed.png"); }
    header#top-navigation #ham-nav.open {
      background-image: url("../img/_grafik/ham-open.png");
      background-color: #009bd5; }
    header#top-navigation #ham-nav:hover {
      background-color: #5ead26; }

/* Aufklappmenü */
#navigation {
  position: fixed;
  z-index: 9990;
  background-color: #005f85;
  opacity: 0;
  width: 0;
  left: 0;
  top: 0;
  height: 100vh;
  overflow: hidden;
  -webkit-transition: opacity 1s ease-in-out, width 0.6s ease-in-out;
  transition: opacity 1s ease-in-out, width 0.6s ease-in-out; }
  #navigation.aktiv {
    width: 100%;
    opacity: 0.9; }
  #navigation .nav-container {
    height: 100vh;
    padding-top: 60px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center; }
  #navigation ul {
    list-style-type: none;
    list-style-image: none;
    margin-left: 0;
    padding-left: 0; }
    #navigation ul li {
      text-align: center; }
      #navigation ul li a {
        display: block;
        text-align: center;
        font-size: 1.125em;
        padding: 0.2em 2em; }
      #navigation ul li a:link {
        text-decoration: none; }
      #navigation ul li a:visited {
        text-decoration: none; }
      #navigation ul li a:hover {
        text-decoration: underline; }
      #navigation ul li a:active {
        text-decoration: underline; }

main {
  width: 100%;
  position: relative; }

#scrolly {
  background-color: #ffffff;
  margin-top: 50vh;
  width: 100%;
  z-index: 1; }

#illustrations {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50vh;
  background-color: #005f85;
  overflow: hidden;
  z-index: 2; }

#rechtstext {
  margin: 120px auto 0 auto;
  padding: 2em 0;
  width: 90%;
  max-width: 1000px; }

footer.rechtstext {
  width: 100%;
  background-color: #4B4B4E;
  padding: 1.5em 0; }
  footer.rechtstext .footercontent {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto; }
    footer.rechtstext .footercontent a {
      display: block; }

/*   4.2 Columns                       */
/*  5. Einzelelemente                  */
#scrolly article .artikelbox {
  background-color: #ffffff;
  position: relative;
  padding: 3em 2em; }
  #scrolly article .artikelbox::after {
    content: " ";
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1em;
    background-image: url("../img/_grafik/bg-stripes-lightblue.png"); }
  #scrolly article .artikelbox header {
    background-color: #ffffff; }
  #scrolly article .artikelbox .contentbox {
    background-color: #ffffff;
    position: relative; }
  #scrolly article .artikelbox .content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column-reverse; }
  #scrolly article .artikelbox .text-column {
    padding: 0 1em 0 0;
    flex: 60%; }
  #scrolly article .artikelbox .image-column {
    flex: 40%;
    background-size: cover;
    background-position: center center;
    min-height: 400px;
    display: none;
    visibility: hidden; }
  #scrolly article .artikelbox footer {
    padding: 0.25em 1.5em;
    font-size: 0.875em; }
  #scrolly article .artikelbox.weiss {
    padding: 2em; }
    #scrolly article .artikelbox.weiss header {
      padding: 0; }
  #scrolly article .artikelbox.hellblau {
    background-color: #ffffff; }
    #scrolly article .artikelbox.hellblau footer {
      background-color: #009bd5;
      color: #ffffff; }

.step {
  opacity: 0.3;
  -webkit-transition: opacity 0.3s;
  /* Safari */
  transition: opacity 0.3s; }

.step.is-active {
  opacity: 1; }

#illustrations article {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 0; }

.illus {
  opacity: 0;
  -webkit-transition: opacity 1.5s;
  /* Safari */
  transition: opacity 1.5s; }

.illus.on {
  opacity: 1; }

.projektbezeichnung {
  position: absolute;
  left: 30px;
  top: auto;
  bottom: 10vh; }

/* Einleitung */
#illu-einleitung {
  background-image: url("../img/einleitung/uba-mobilitaet-einleitung-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

/* Rotterdam */
#rotterdam-illu {
  background-image: url("../img/rotterdam/rotterdam-regensensor-melanchtonwegB-1016-016-bg.jpg");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat; }

#marburg-illu {
  background-image: url("../img/marburg/marburg-DSCF1872-Verbessert-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#wien-illu {
  background-image: url("../img/wien/wien-NEU_Kierspe 2020_VZ-325-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#madrid-illu {
  background-image: url("../img/madrid/Leere_S_Bahn_Dross_bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#helsinki-illu {
  background-image: url("../img/helsinki/helsinki_EMW_Netzwerktreffen_2019_DJI_0024_bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#westaustralien-illu {
  background-image: url("../img/westaustralienaustralien/westaustralien_EMW_2023_LK_LueDa2_carsharing-dienstag3_02bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#barcelona-illu {
  background-image: url("../img/barcelona/barcelona-future-mob-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#bruessel-illu {
  background-image: url("../img/bruessel/bruessel_Alena_Berta_2025_bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#florenz-illu {
  background-image: url("../img/florenz/florenz-pexels-shvets-production-7973629-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#singapur-illu {
  background-image: url("../img/singapur/singapur-pexels-hikaique-3190370-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#graz-illu {
  background-image: url("../img/graz/graz-pexels-alexasfotos-9522804-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#hytch-illu {
  background-image: url("../img/hytch/hytch-Fahrgemeinschaft_Bildquelle_Andrey Popov_AdobeStock-bg.jpg");
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat; }

/*  6. Helferlein                      */
/* ==========================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
========================================================================== */
.on {
  /* Fade In */
  /* Pop In */
  /* Blur In */
  /* Glow In */
  /* Grow In */
  /* Splat In */
  /* Roll In */
  /* Flip In */
  /* Spin In */
  /* Slide In */
  /* Drop In */
  /* Animation Delays */ }
  .on.animate {
    animation-duration: 1.5s;
    animation-delay: 0;
    animation-name: animate-fade;
    animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
    animation-fill-mode: backwards; }
  .on.animate.fade {
    animation-name: animate-fade;
    animation-timing-function: ease; }
@keyframes animate-fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .on.animate.pop {
    animation-name: animate-pop; }
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5); }
  100% {
    opacity: 1;
    transform: scale(1, 1); } }
  .on.animate.blur {
    animation-name: animate-blur;
    animation-timing-function: ease; }
@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px); }
  100% {
    opacity: 1;
    filter: blur(0px); } }
  .on.animate.glow {
    animation-name: animate-glow;
    animation-timing-function: ease; }
@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8); }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1); } }
  .on.animate.grow {
    animation-name: animate-grow; }
@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden; }
  100% {
    opacity: 1;
    transform: scale(1, 1); } }
  .on.animate.splat {
    animation-name: animate-splat; }
@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px); }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg); }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px); }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0); } }
  .on.animate.roll {
    animation-name: animate-roll; }
@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg); }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg); } }
  .on.animate.flip {
    animation-name: animate-flip;
    transform-style: preserve-3d;
    perspective: 1000px; }
@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9); }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1); } }
  .on.animate.spin {
    animation-name: animate-spin;
    transform-style: preserve-3d;
    perspective: 1000px; }
@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, 0.9); }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1); } }
  .on.animate.slide {
    animation-name: animate-slide; }
@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }
  .on.animate.drop {
    animation-name: animate-drop;
    animation-timing-function: cubic-bezier(0.77, 0.14, 0.91, 1.25); }
@keyframes animate-drop {
  0% {
    opacity: 0;
    transform: translate(0, -300px) scale(0.9, 1.1); }
  95% {
    opacity: 1;
    transform: translate(0, 0) scale(0.9, 1.1); }
  96% {
    opacity: 1;
    transform: translate(10px, 0) scale(1.2, 0.9); }
  97% {
    opacity: 1;
    transform: translate(-10px, 0) scale(1.2, 0.9); }
  98% {
    opacity: 1;
    transform: translate(5px, 0) scale(1.1, 0.9); }
  99% {
    opacity: 1;
    transform: translate(-5px, 0) scale(1.1, 0.9); }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1, 1); } }
  .on.delay-1 {
    animation-delay: 4.6s; }
  .on.delay-2 {
    animation-delay: 4.8s; }
  .on.delay-3 {
    animation-delay: 5.0s; }
  .on.delay-4 {
    animation-delay: 0.9s; }
  .on.delay-5 {
    animation-delay: 0.7s; }
  .on.delay-6 {
    animation-delay: 1.1s; }
  .on.delay-7 {
    animation-delay: 1.2s; }
  .on.delay-8 {
    animation-delay: 1.3s; }
  .on.delay-9 {
    animation-delay: 1.4s; }
  .on.delay-10 {
    animation-delay: 1.5s; }
  .on.delay-11 {
    animation-delay: 1.6s; }
  .on.delay-12 {
    animation-delay: 1.7s; }
  .on.delay-13 {
    animation-delay: 1.8s; }
  .on.delay-14 {
    animation-delay: 1.9s; }
  .on.delay-15 {
    animation-delay: 2s; }

.on {
  /* Slide In */
  /* Animation Delays */ }
  .on .animate {
    animation-duration: 0.95s;
    animation-delay: 0;
    animation-name: animate-fade;
    animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
    animation-fill-mode: backwards; }
  .on .animate.slide {
    animation-name: animate-slide; }
@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }
  .on .delay-1 {
    animation-delay: 4.6s; }
  .on .delay-2 {
    animation-delay: 4.8s; }
  .on .delay-3 {
    animation-delay: 5.0s; }
  .on .delay-4 {
    animation-delay: 0.9s; }
  .on .delay-5 {
    animation-delay: 1s; }
  .on .delay-6 {
    animation-delay: 1.1s; }
  .on .delay-7 {
    animation-delay: 1.2s; }
  .on .delay-8 {
    animation-delay: 1.3s; }
  .on .delay-9 {
    animation-delay: 1.4s; }
  .on .delay-10 {
    animation-delay: 1.5s; }
  .on .delay-11 {
    animation-delay: 1.6s; }
  .on .delay-12 {
    animation-delay: 1.7s; }
  .on .delay-13 {
    animation-delay: 1.8s; }
  .on .delay-14 {
    animation-delay: 1.9s; }
  .on .delay-15 {
    animation-delay: 2s; }

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important; } }
/* Justiert die Sprungziele wegen des Fixed Headers */
:target::before {
  content: "";
  display: block;
  height: 50vh;
  /* Höhe des fixed headers */
  margin-top: -50vh;
  /* Höhe des fixed headers */ }

/*  7. Extern                          */
@media screen and (min-width: 481px) {
  /* SaSS Big Phone */
  /**************** Inhalt ***************/
  /*                                     */
  /*  0. Fonts / Animation               */
  /*  1. Grundlagen HTML / Body          */
  /*  2. Zeichenformate Content          */
  /*   2.1 Überschriften                 */
  /*   2.2 Links                         */
  /*   2.3 Absatzformate                 */
  /*   2.4 Listen                        */
  /*   2.5 Tabellen                      */
  /*   2.6 Formulare                     */
  /*  3. Navigations-Elemente            */
  /*  4. Layout Boxen                    */
  /*   4.1 Grundgerüst                   */
  /*   4.2 Columns                       */
  /*  5. Einzelelemente                  */
  /*  6. Helferlein                      */
  /*  7. Extern                          */
  /*                                     */
  /***************************************/ }
@media screen and (min-width: 768px) {
  /* SaSS Tablet */
  /**************** Inhalt ***************/
  /*                                     */
  /*  0. Fonts / Animation               */
  body {
    font-size: 1em; }

  /*  1. Grundlagen HTML / Body          */
  /*  2. Zeichenformate Content          */
  /*   2.1 Überschriften                 */
  h1 {
    font-size: 3em; }

  /*   2.2 Links                         */
  /*   2.3 Absatzformate                 */
  /*   2.4 Listen                        */
  /*   2.5 Tabellen                      */
  /*   2.6 Formulare                     */
  /*  3. Navigations-Elemente            */
  /*  4. Layout Boxen                    */
  /*   4.1 Grundgerüst                   */
  footer.rechtstext .footercontent a {
    display: inline-block;
    width: 33%; }

  /*   4.2 Columns                       */
  /*  5. Einzelelemente                  */
  /* #scrolly article {
    .artikelbox {
      .content {
        flex-direction: row;
      }
      .image-column {
        min-height: auto;
      }
    }
  } */
  /*  6. Helferlein                      */
  /*  7. Extern                          */
  /*                                     */
  /***************************************/ }
@media screen and (min-width: 1024px) {
  /* SaSS Desktop */
  /**************** Inhalt ***************/
  /*                                     */
  /*  0. Fonts / Animation               */
  body {
    font-size: 1.125em; }

  /*  1. Grundlagen HTML / Body          */
  /*  2. Zeichenformate Content          */
  /*   2.1 Überschriften                 */
  h1 {
    width: 45%;
    left: 48px;
    top: 24vh; }

  /*   2.2 Links                         */
  /*   2.3 Absatzformate                 */
  /*   2.4 Listen                        */
  /*   2.5 Tabellen                      */
  /*   2.6 Formulare                     */
  /*  3. Navigations-Elemente            */
  header#top-navigation {
    height: 80px;
    padding: 0 36px; }
    header#top-navigation #logo {
      width: 112px;
      height: 68px; }
      header#top-navigation #logo img {
        width: 112px;
        height: 68px; }
    header#top-navigation #ham-nav {
      top: 20px;
      right: 108px; }

  /* Aufklappmenü */
  #navigation ul li a {
    font-size: 1em; }

  /*  4. Layout Boxen                    */
  /*   4.1 Grundgerüst                   */
  #scrolly {
    position: relative;
    background-color: transparent;
    width: 45%;
    max-width: 600px;
    margin-left: auto;
    margin-top: 0;
    padding-top: 20vh;
    z-index: 5; }
    #scrolly article {
      padding: 10vh 0; }

  #illustrations {
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 2; }

  .projektbezeichnung {
    left: 48px; }

  /*   4.2 Columns                       */
  /*  5. Einzelelemente                  */
  #scrolly article .artikelbox {
    padding: 1em 2em; }
    #scrolly article .artikelbox.rechtshinweis {
      margin-top: 3em; }
    #scrolly article .artikelbox .image-column {
      display: block;
      visibility: visible; }

  /*  6. Helferlein                      */
  :target::before {
    content: "";
    display: block;
    height: 92px;
    /* Höhe des fixed headers */
    margin-top: -92px;
    /* Höhe des fixed headers */ }

  /*  7. Extern                          */
  /*                                     */
  /***************************************/ }
@media screen and (min-width: 1400px) {
  /* SaSS Large */
  /**************** Inhalt ***************/
  /*                                     */
  /*  0. Fonts / Animation               */
  /*  1. Grundlagen HTML / Body          */
  body {
    font-size: 1.25em; }

  /*  2. Zeichenformate Content          */
  /*   2.1 Überschriften                 */
  h1 {
    width: 50%;
    left: 60px;
    top: 30vh; }

  /*   2.2 Links                         */
  /*   2.3 Absatzformate                 */
  /*   2.4 Listen                        */
  /*   2.5 Tabellen                      */
  /*   2.6 Formulare                     */
  /*  3. Navigations-Elemente            */
  header#top-navigation {
    height: 100px;
    padding: 0 60px; }
    header#top-navigation #logo {
      width: 140px;
      height: 85px; }
      header#top-navigation #logo img {
        width: 140px;
        height: 85px; }
    header#top-navigation #ham-nav {
      top: 28px;
      right: 162px; }

  /*  4. Layout Boxen                    */
  /*   4.1 Grundgerüst                   */
  #scrolly {
    width: 45%;
    max-width: 700px; }
    #scrolly article {
      padding: 15vh 0; }

  /*   4.2 Columns                       */
  /*  5. Einzelelemente                  */
  .projektbezeichnung {
    left: 60px; }

  /*  6. Helferlein                      */
  :target::before {
    content: "";
    display: block;
    height: 110px;
    /* Höhe des fixed headers */
    margin-top: -110px;
    /* Höhe des fixed headers */ }

  /*  7. Extern                          */
  /*                                     */
  /***************************************/ }
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important; }

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */ }

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto; }

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table; }

.clearfix::after {
  clear: both; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */ }
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]::after {
    content: " (" attr(href) ")"; }

  abbr[title]::after {
    content: " (" attr(title) ")"; }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: ""; }

  pre {
    white-space: pre-wrap !important; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  tr,
  img {
    page-break-inside: avoid; }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

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