/*
Theme Name: Designpilot
Author: gn2
Author URI: https://agentur.gn2.de/
Version: 1.0
Requires at least: 5.0
*/
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, .toolsOverview__basicsTechnikenNav span, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

main, article, aside, figure, footer, header, nav, section, details, summary {
  display: block;
}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {
  max-width: 100%;
}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type=radio] {
  vertical-align: text-bottom;
}

input[type=checkbox] {
  vertical-align: bottom;
}

.ie7 input[type=checkbox] {
  vertical-align: baseline;
}

.ie6 input {
  vertical-align: text-bottom;
}

select, input, textarea {
  font: 99% sans-serif;
}

table {
  font-size: inherit;
  font: 100%;
}

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

td, td img {
  vertical-align: top;
}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0;
}

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible;
}

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

@font-face {
  font-family: "Glyphter";
  font-display: block;
  src: url("/wp-content/themes/designpilot/assets/fonts/Glyphter.eot");
  src: url("/wp-content/themes/designpilot/assets/fonts/Glyphter.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/Glyphter.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/Glyphter.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/Glyphter.svg#Glyphter") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class*=icon-]:before, .c-accordion__item .c-accordion__title:before {
  display: inline-block;
  font-family: "Glyphter";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-view:before {
  content: "A";
}

.icon-logout:before {
  content: "B";
}

.icon-edit:before {
  content: "C";
}

.icon-image:before {
  content: "D";
}

.icon-document:before {
  content: "E";
}

.icon-settings:before {
  content: "F";
}

.icon-checkmark:before {
  content: "G";
}

.icon-favorite:before {
  content: "H";
}

.icon-arrow-right:before {
  content: "I";
}

.icon-plus:before {
  content: "J";
}

.icon-info:before {
  content: "K";
}

.icon-book:before {
  content: "L";
}

.icon-delete:before {
  content: "M";
}

.icon-phase_1:before {
  content: "N";
}

.icon-phase_2:before {
  content: "O";
}

.icon-phase_3:before {
  content: "P";
}

.icon-phase_4:before {
  content: "Q";
}

.icon-phase_5:before {
  content: "R";
}

.icon-phase_6:before {
  content: "S";
}

.icon-phase_7:before {
  content: "T";
}

.icon-phase_8:before {
  content: "U";
}

.icon-profil:before {
  content: "V";
}

.icon-folder:before {
  content: "W";
}

.icon-close:before {
  content: "X";
}

.icon-text:before {
  content: "Y";
}

.icon-back:before {
  content: "Z";
}

.icon-next:before, .c-accordion__item .c-accordion__title:before {
  content: "a";
}

.icon-ui-gripsmall-diagonal-se:before {
  content: "b";
}

.icon-cog:before {
  content: "c";
}

.icon-down:before, .c-accordion__item.is-open .c-accordion__title:before {
  content: "d";
  text-transform: lowercase;
}

.icon-up:before {
  content: "e";
  text-transform: lowercase;
}

.icon-ui-gripsmall-e:before {
  content: "f";
}

.icon-off:before {
  content: "g";
}

.icon-on:before {
  content: "h";
}

.icon-search:before {
  content: "i";
}

.icon-group:before {
  content: "j";
  text-transform: lowercase;
}

.icon-paperandpencil:before {
  content: "k";
  text-transform: lowercase;
}

.icon-time:before {
  content: "l";
  text-transform: lowercase;
}

.icon-dragndrop_handle:before {
  content: "m";
}

.icon-toolbox:before {
  content: "n";
  text-transform: lowercase;
}

.icon-menu-button:before {
  content: "o";
}

.icon-log:before {
  content: "p";
}

.icon-speech-bubble:before {
  content: "q";
}

/* open-sans-300 - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-regular.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-regular.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-regular.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-regular.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-regular.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-500 - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: italic;
  font-weight: 300;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300italic.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300italic.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300italic.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300italic.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-300italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: italic;
  font-weight: 400;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-italic.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-italic.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-italic.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-italic.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-500italic - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: italic;
  font-weight: 500;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500italic.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500italic.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500italic.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500italic.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-500italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: italic;
  font-weight: 700;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700italic.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700italic.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700italic.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700italic.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-700italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: italic;
  font-weight: 600;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600italic.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600italic.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600italic.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600italic.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-600italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
/* open-sans-800italic - latin */
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-style: italic;
  font-weight: 800;
  src: url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800italic.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800italic.woff2") format("woff2"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800italic.woff") format("woff"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800italic.ttf") format("truetype"), url("/wp-content/themes/designpilot/assets/fonts/open-sans-v28-latin-800italic.svg#OpenSans") format("svg");
  /* Legacy iOS */
}
html {
  height: 100%;
}
html.wpAdminBarVisible {
  height: calc(100% - 32px);
}
@media screen and (min-width: 800px) {
  html.wpAdminBarVisible#p16688 .startseite {
    min-height: calc(100vh - 112px);
  }
}
html.wpAdminBarVisible:not(#p16688) {
  padding-top: 32px;
}
html.wpAdminBarVisible:not(#p16688) .toolsOverview__search,
html.wpAdminBarVisible:not(#p16688) .topBar {
  top: 32px;
}
html.wpAdminBarVisible:not(#p16688) .mainNav__toggler {
  top: 32px;
}
html.wpAdminBarVisible:not(#p16688) .mainNav {
  padding-top: 92px !important;
}
html.wpAdminBarVisible:not(#p16688) .toolsOverview__phasen {
  padding-top: 0;
}

body {
  height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  position: relative;
  background: #e0e0df;
  font-weight: 400;
  color: #000;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 27px;
  font-weight: bold;
  color: #000;
  margin: 40px 0 20px 0;
}

h2, .toolsOverview__basicsTechnikenNav span {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  color: #000;
}

.content--page h2, .content--page .toolsOverview__basicsTechnikenNav span, .toolsOverview__basicsTechnikenNav .content--page span,
.content--reviews h2,
.content--reviews .toolsOverview__basicsTechnikenNav span,
.toolsOverview__basicsTechnikenNav .content--reviews span {
  margin-bottom: 20px;
  margin-top: 30px;
  font-size: 20px;
  text-transform: uppercase;
}
.content--page h2:first-of-type, .content--page .toolsOverview__basicsTechnikenNav span:first-of-type, .toolsOverview__basicsTechnikenNav .content--page span:first-of-type,
.content--reviews h2:first-of-type,
.content--reviews .toolsOverview__basicsTechnikenNav span:first-of-type,
.toolsOverview__basicsTechnikenNav .content--reviews span:first-of-type {
  margin-top: 0;
}

h3 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  margin-bottom: 10px;
  color: #000;
}

p {
  margin-bottom: 1.2rem;
}
.content--reviews p {
  margin-bottom: 10px;
}

ul {
  list-style: disc;
  list-style-position: outside;
  margin-left: 25px;
  margin-bottom: 1.2rem;
}

hr {
  margin: 0 0 1.2rem 0;
  padding: 0;
  width: 100%;
  height: 1px;
  background: #706f6f;
}
hr.wp-block-separator {
  border: 0;
}

a {
  text-decoration: none;
  transition: all 0.25s;
  color: #000;
}

.topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 80;
  background: #706f6f;
  padding-left: 40px;
  display: none;
  line-height: 50px;
  white-space: nowrap;
}
.topBar a, .topBar span {
  display: inline-block;
  color: #fff;
  letter-spacing: 2px;
  font-size: 18px;
  text-transform: uppercase;
}
.topBar span {
  padding-left: 40px;
}
.topBar .fakeHeadline {
  display: none;
  color: #fff;
  letter-spacing: 2px;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
  font-weight: normal;
}
@media screen and (min-width: 860px) {
  .topBar .fakeHeadline {
    display: inline-block;
  }
}

.topBar--phasen {
  padding-left: 0;
}
.topBar--phasen a {
  display: inline-block;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 170px;
}
.topBar--phasen a:before {
  position: relative;
  top: 0.15em;
  left: -0.6em;
}

.content {
  padding: 90px 30px 60px 30px;
}
@media screen and (min-width: 1920px) {
  .content {
    padding: 110px 100px;
  }
}

.singlePhase__h1,
.singleTechnik__h1 {
  display: block;
  color: #000;
  padding: 0;
  margin-top: 0;
}
@media screen and (min-width: 860px) {
  .singlePhase__h1,
.singleTechnik__h1 {
    position: absolute;
    left: 20000px;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

@media screen and (min-width: 860px) {
  .singlePhase__wrapper,
.singleTechnik__wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .singlePhase__wrapper,
.singleTechnik__wrapper {
    gap: 50px;
  }
}

.singlePhase__imagesWrapper,
.singleTechnik__imagesWrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media screen and (min-width: 860px) {
  .singlePhase__imagesWrapper,
.singleTechnik__imagesWrapper {
    grid-template-columns: 1fr 1fr;
  }
}
.singlePhase__imagesWrapper img,
.singleTechnik__imagesWrapper img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.singlePhase__textBox,
.singleTechnik__textBox {
  margin-bottom: 4.4rem;
}

.singlePhase__textBox--quellen,
.singleTechnik__textBox--quellen {
  overflow-wrap: break-word;
}
.singlePhase__textBox--quellen *:not(h3),
.singleTechnik__textBox--quellen *:not(h3) {
  color: #999;
}

.singleTechnik__additionalInfo {
  color: #767676;
  margin-bottom: 30px;
}
.singleTechnik__additionalInfo h3 {
  color: #000;
}
.singleTechnik__additionalInfo h3:before {
  position: relative;
  top: 0.1em;
  margin-right: 0.5em;
  display: inline-block;
}

.c-accordion__item {
  margin-bottom: 20px;
  margin-left: -30px;
  margin-right: -30px;
}
@media screen and (min-width: 700px) {
  .c-accordion__item {
    margin-left: 0;
    margin-right: 0;
  }
}
.c-accordion__item .c-accordion__title {
  position: relative;
  background: #cccac8;
  color: #000;
  font-size: 16px;
  padding: 18px 10px 18px 40px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  word-break: break-word;
}
.c-accordion__item .c-accordion__title:before {
  font-size: 20px;
  position: absolute;
  left: 9px;
  text-transform: lowercase;
}
@media screen and (min-width: 700px) {
  .c-accordion__item .c-accordion__title:before {
    font-size: 30px;
    left: 18px;
  }
}
.c-accordion__item .c-accordion__title:after {
  display: none;
}
@media screen and (min-width: 700px) {
  .c-accordion__item .c-accordion__title {
    font-size: 30px;
    padding: 18px 24px 18px 70px;
  }
}
.c-accordion__item .c-accordion__content {
  background: #f2f0f0;
  color: #000;
  padding: 1em 1em 3em 1em;
}

.tutorial__background {
  transform: scale(0.9);
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 9999999;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.8s ease;
}
.tutorial__background.visible {
  padding-top: 0;
  visibility: visible;
  opacity: 1;
  height: auto;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.tutorial__slider {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  background: #fefefe;
}
@media screen and (min-width: 600px) {
  .tutorial__slider {
    left: 5vh;
    right: 5vh;
    top: 5vh;
    bottom: auto;
  }
}

.tutorial__slide {
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.tutorial__slide.visible {
  opacity: 1;
  height: auto;
}
.tutorial__slide h2, .tutorial__slide .toolsOverview__basicsTechnikenNav span, .toolsOverview__basicsTechnikenNav .tutorial__slide span {
  margin-bottom: 20px;
}
.tutorial__slide *:not(h2) {
  font-size: 14px;
}
.tutorial__slide ul {
  list-style-position: inside;
  margin-left: 0;
}
.tutorial__slide .wp-block-media-text {
  display: block;
  overflow: hidden;
}
.tutorial__slide .wp-block-media-text__media {
  position: relative;
}
.tutorial__slide .wp-block-media-text__media img {
  height: auto;
  width: 100%;
}
@media screen and (min-width: 900px) {
  .tutorial__slide .wp-block-media-text__media {
    float: left;
    width: 60%;
  }
}
.tutorial__slide .wp-block-media-text__content {
  padding: 70px 45px 160px 45px;
}
@media screen and (min-width: 900px) {
  .tutorial__slide .wp-block-media-text__content {
    float: right;
    width: 40%;
  }
}

.tutorial__close--icon {
  position: absolute;
  right: 0;
  top: 0;
  padding: 1rem;
  cursor: pointer;
  color: #aaa;
}
.tutorial__close--icon:hover {
  color: #000;
}

.tutorial__buttons {
  width: 40%;
  position: fixed;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 600px) {
  .tutorial__buttons {
    position: absolute;
  }
}

.tutorial__skip,
.tutorial__next,
.tutorial__go {
  display: none;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0.5em 20px;
  cursor: pointer;
}
@media screen and (min-width: 900px) {
  .tutorial__skip,
.tutorial__next,
.tutorial__go {
    padding: 0.5em 65px;
  }
}
.tutorial__skip.visible,
.tutorial__next.visible,
.tutorial__go.visible {
  display: flex;
}

.tutorial__skip {
  background: #f3f3f3;
}

.tutorial__go,
.tutorial__next {
  background: #3c3c3b;
  color: #fff;
}

html.js .topBar {
  display: block;
}

#p .mainNav,
#p .topBar,
#p .mainNav__toggler,
#p16688 .mainNav,
#p16688 .topBar,
#p16688 .mainNav__toggler {
  display: none;
}
#p .startseite__background,
#p16688 .startseite__background {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
#p .toolsOverview__phase--startseite,
#p16688 .toolsOverview__phase--startseite {
  padding: 0;
  flex: 1;
}
#p .startseite,
#p16688 .startseite {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 800px) {
  #p .startseite,
#p16688 .startseite {
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 80px);
  }
}
#p .startseite__nav,
#p16688 .startseite__nav {
  position: relative;
  background: #fff;
  padding: 10px 20px 10px 30px;
}
@media screen and (min-width: 800px) {
  #p .startseite__nav,
#p16688 .startseite__nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 30px;
  }
}
#p .menu-startseite-container ul,
#p16688 .menu-startseite-container ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}
#p .menu-startseite-container ul li + li,
#p16688 .menu-startseite-container ul li + li {
  margin-left: 1rem;
}
@media screen and (min-width: 800px) {
  #p .menu-startseite-container ul,
#p16688 .menu-startseite-container ul {
    margin-top: 0;
  }
  #p .menu-startseite-container ul li + li,
#p16688 .menu-startseite-container ul li + li {
    margin-left: 1rem;
  }
}
#p .menu-startseite-container .current_page_item,
#p16688 .menu-startseite-container .current_page_item {
  font-weight: bold;
}
#p .startseite__content,
#p16688 .startseite__content {
  padding: 30px;
  font-size: 1.2rem;
}
#p .startseite__content hr,
#p16688 .startseite__content hr {
  width: 100px;
  border: 0;
  height: 10px;
  background: #c00000;
}
@media screen and (min-width: 800px) {
  #p .startseite__content,
#p16688 .startseite__content {
    flex: 0 0 60%;
    padding: 120px 30px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: 1.4rem;
  }
}
#p .startseite__logoContent,
#p16688 .startseite__logoContent {
  padding: 30px;
  max-width: 300px;
  margin-left: auto;
}
@media screen and (min-width: 800px) {
  #p .startseite__logoContent,
#p16688 .startseite__logoContent {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    max-width: 400px;
  }
}

.toolsOverview__wrapper {
  width: 100%;
  position: relative;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.toolsOverview__phasenScrollLayer,
.toolsOverview__basicsScrollLayer,
.toolsOverview__technikenScrollLayer {
  width: 100%;
  height: 100%;
}

.toolsOverview__phasen {
  height: 100%;
  display: flex;
  align-items: stretch;
}
.toolsOverview__phasen a {
  color: #706f6f;
  font-size: 16px;
  display: inline-block;
}

.toolsOverview__techniken {
  padding: 20px 30px 20px 20px;
  height: 100%;
}
.toolsOverview__techniken a {
  color: #fff;
  font-size: 16px;
  display: inline-block;
}
@media screen and (min-width: 600px) {
  .toolsOverview__techniken {
    padding: 30px 60px 30px 60px;
  }
}

.toolsOverview__technikenWrapper {
  background: none transparent;
  position: relative;
}
.toolsOverview__technikenWrapper .icon-close {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  color: #fff;
  display: none;
}
@media screen and (min-width: 600px) {
  .toolsOverview__technikenWrapper .icon-close {
    right: 30px;
    top: 30px;
  }
}

.toolsOverview__basicsWrapper {
  width: 100%;
  background: #3c3c3b;
  color: #fff;
}
.toolsOverview__basicsWrapper .icon-close {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  color: #fff;
  display: none;
}
@media screen and (min-width: 600px) {
  .toolsOverview__basicsWrapper .icon-close {
    right: 30px;
    top: 30px;
  }
}

.toolsOverview__basicsScrollLayer,
.toolsOverview__technikenScrollLayer {
  background: #3c3c3b;
  height: 100%;
  color: #fff;
}
.toolsOverview__basicsScrollLayer *,
.toolsOverview__technikenScrollLayer * {
  color: #fff;
}

.toolsOverview__technikenGroupWrapper {
  display: flex;
}

.toolsOverview__basics {
  padding: 20px 30px 20px 20px;
  max-height: calc(100% - 200px);
}
@media screen and (min-width: 600px) {
  .toolsOverview__basics {
    padding: 30px 60px 30px 60px;
  }
}

.toolsOverview__basicsLinks {
  column-count: 4;
}

.toolsOverview__phase {
  padding: 20px 30px 20px 20px;
}
.toolsOverview__phase.tax_1 {
  background: #dbdbda;
}
.toolsOverview__phase.tax_2 {
  background: #d6d6d5;
}
.toolsOverview__phase.tax_3 {
  background: #d1d1cf;
}
.toolsOverview__phase.tax_4 {
  background: #ccccca;
}
.toolsOverview__phase.tax_5 {
  background: #c7c7c5;
}
.toolsOverview__phase.tax_6 {
  background: #c2c2c0;
}
.toolsOverview__phase.tax_7 {
  background: #bdbdbb;
}
.toolsOverview__phase.tax_8 {
  background: #b8b8b6;
}
@media screen and (min-width: 600px) {
  .toolsOverview__phase {
    padding: 40px 70px 40px 40px;
  }
}

.toolsOverview__h2 {
  font-size: 18px;
  letter-spacing: 1px;
  margin: 0;
  padding-bottom: 30px;
  white-space: nowrap;
}

.toolsOverview__basicsH2,
.toolsOverview__technikenH2 {
  padding-bottom: 20px;
  flex: 0 0 100%;
}
.toolsOverview__basicsH2 .icon-down, .toolsOverview__basicsH2 .c-accordion__item.is-open .c-accordion__title:before, .c-accordion__item.is-open .toolsOverview__basicsH2 .c-accordion__title:before,
.toolsOverview__technikenH2 .icon-down,
.toolsOverview__technikenH2 .c-accordion__item.is-open .c-accordion__title:before,
.c-accordion__item.is-open .toolsOverview__technikenH2 .c-accordion__title:before {
  display: inline-block;
  cursor: pointer;
}
.toolsOverview__basicsH2 .icon-down:before, .toolsOverview__basicsH2 .c-accordion__item.is-open .c-accordion__title:before, .c-accordion__item.is-open .toolsOverview__basicsH2 .c-accordion__title:before,
.toolsOverview__technikenH2 .icon-down:before,
.toolsOverview__technikenH2 .c-accordion__item.is-open .c-accordion__title:before,
.c-accordion__item.is-open .toolsOverview__technikenH2 .c-accordion__title:before {
  position: relative;
  top: 0.1em;
  margin-right: 20px;
}
@media screen and (min-width: 600px) {
  .toolsOverview__basicsH2,
.toolsOverview__technikenH2 {
    padding-bottom: 40px;
  }
}

.toolsOverview__h3 {
  padding-bottom: 20px;
  font-size: 16px;
  margin: 0;
}

.toolsOverview__technikenH3 {
  font-size: 18px;
  margin: 0;
  padding-bottom: 5px;
}
@media screen and (min-width: 600px) {
  .toolsOverview__technikenH3 {
    padding-bottom: 20px;
  }
}

.toolsOverview__icon {
  height: 100%;
  width: auto;
  max-height: 30px;
  max-width: none;
}
.toolsOverview__h2 .toolsOverview__icon {
  position: relative;
  bottom: -7px;
  margin-right: 20px;
}

.toolsOverview__phaseLinks,
.toolsOverview__basicsLinks,
.toolsOverview__technikenGroupLinks {
  margin: 0;
  padding: 0;
  column-count: 1;
  column-width: auto;
  clear: both;
  position: relative;
}
.toolsOverview__phaseLinks a,
.toolsOverview__basicsLinks a,
.toolsOverview__technikenGroupLinks a {
  position: relative;
}

.toolsOverview__phaseLink,
.toolsOverview__basicsLink,
.toolsOverview__technikenGroupLink {
  padding: 5px 5px 5px 0;
  min-width: 260px;
  max-width: 300px;
  display: inline-block;
}
.toolsOverview__phaseLink.calculating,
.toolsOverview__basicsLink.calculating,
.toolsOverview__technikenGroupLink.calculating {
  max-width: none;
  width: 300px;
}
@media screen and (min-width: 600px) {
  .toolsOverview__phaseLink,
.toolsOverview__basicsLink,
.toolsOverview__technikenGroupLink {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 600px) {
  .toolsOverview__basicsLink,
.toolsOverview__technikenGroupLink {
    margin-bottom: 5px;
  }
}

.toolsOverview__phaseLink--last {
  margin-bottom: 40px;
}

.toolsOverview__reviewLink {
  position: relative;
}

.toolsOverview__reviewLink a {
  line-height: 34px;
  border: 3px solid #706f6f;
  color: #706f6f;
  padding: 4px 8px;
  white-space: nowrap;
  position: relative;
}

.toolsOverview__nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.toolsOverview__basicsTechnikenNav {
  padding-bottom: 16px;
  display: flex;
}
.toolsOverview__basicsTechnikenNav span {
  opacity: 0.4;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
}
.toolsOverview__basicsTechnikenNav span:hover {
  opacity: 1;
}
.toolsOverview__basicsTechnikenNav span:before {
  margin-right: 5px;
}
@media screen and (min-width: 440px) {
  .toolsOverview__basicsTechnikenNav span:before {
    margin-right: 15px;
  }
}
@media screen and (min-width: 440px) {
  .toolsOverview__basicsTechnikenNav span {
    font-size: 18px;
  }
}
.toolsOverview__basicsTechnikenNav span:first-child {
  padding-right: 10px;
}
@media screen and (min-width: 440px) {
  .toolsOverview__basicsTechnikenNav span:first-child {
    padding-right: 20px;
  }
}
@media screen and (min-width: 1400px) {
  .toolsOverview__basicsTechnikenNav span:first-child {
    padding-right: 30px;
  }
}
@media screen and (min-width: 1400px) {
  .toolsOverview__basicsTechnikenNav {
    position: absolute;
    left: 0;
    padding-left: 30px;
  }
}

.toolsOverview__phasenJumpnav {
  display: flex;
  padding-bottom: 16px;
  justify-content: center;
}

.toolsOverview__phasenJumpnavLink {
  list-style: none;
  height: 26px;
  display: flex;
  justify-content: center;
}
.toolsOverview__phasenJumpnavLink a {
  opacity: 0.4;
}
.toolsOverview__phasenJumpnavLink a:hover {
  opacity: 1;
}
@media screen and (min-width: 440px) {
  .toolsOverview__phasenJumpnavLink {
    height: 30px;
  }
}
.toolsOverview__phasenJumpnavLink + .toolsOverview__phasenJumpnavLink {
  margin-left: 10px;
}
@media screen and (min-width: 440px) {
  .toolsOverview__phasenJumpnavLink + .toolsOverview__phasenJumpnavLink {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1400px) {
  .toolsOverview__phasenJumpnavLink + .toolsOverview__phasenJumpnavLink {
    margin-left: 40px;
  }
}

.toolsOverview__search {
  position: fixed;
  right: 0;
  top: 0;
  height: 50px;
  z-index: 90;
  padding-right: 50px;
  width: 100%;
  max-width: calc(100% - 67px);
}
@media screen and (min-width: 500px) {
  .toolsOverview__search {
    max-width: 400px;
  }
}

.toolsOverview__searchInput {
  height: 100%;
  width: 0;
  overflow: hidden;
}
.toolsOverview__searchInput input {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 100%;
  border: 0;
  color: #000;
  background: #f2f2f2;
  padding: 0 24px;
  font-size: 20px;
  outline: none;
}
.toolsOverview__searchInput.visible {
  width: 100%;
}

.toolsOverview__searchToggle {
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  height: 100%;
  line-height: 50px;
  width: 50px;
  border: 0;
  color: #000;
  background: #d9d9d9;
  font-size: 20px;
  outline: none;
}

.toolsOverview__searchSuggestions {
  position: absolute;
  top: 50px;
  left: 0;
  right: 50px;
  padding: 0;
  max-height: calc(90vh - 50px);
  list-style: none;
  margin: 0;
  color: #000;
  background: rgba(242, 242, 242, 0.9);
  overflow-y: auto;
  display: none;
}
.toolsOverview__searchSuggestions.visible {
  display: block;
}
.toolsOverview__searchSuggestions li {
  padding: 0 24px 12px 24px;
  font-size: 20px;
  color: #666;
  cursor: pointer;
}

.toolsOverview__highlightedSearchSuggestion {
  font-weight: bold;
}
.toolsOverview__highlightedSearchSuggestion:after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -4px;
  height: 3px;
  background: #c00000;
  border-radius: 2px;
}

html.js .toolsOverview__wrapper {
  height: 100%;
  overflow: hidden;
}
html.js .toolsOverview__phasenScrollLayer,
html.js .toolsOverview__basicsScrollLayer,
html.js .toolsOverview__technikenScrollLayer {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  cursor: -webkit-grab;
}
html.js .toolsOverview__phasenScrollLayer::-webkit-scrollbar,
html.js .toolsOverview__basicsScrollLayer::-webkit-scrollbar,
html.js .toolsOverview__technikenScrollLayer::-webkit-scrollbar {
  display: none;
}
html.js .toolsOverview__phasenScrollLayer.active, html.js .toolsOverview__phasenScrollLayer.active *,
html.js .toolsOverview__basicsScrollLayer.active,
html.js .toolsOverview__basicsScrollLayer.active *,
html.js .toolsOverview__technikenScrollLayer.active,
html.js .toolsOverview__technikenScrollLayer.active * {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
html.js .toolsOverview__basicsWrapper,
html.js .toolsOverview__technikenWrapper {
  position: absolute;
  left: -20000px;
  z-index: 100;
  width: 0;
  height: 0;
  overflow: hidden;
}
html.js .toolsOverview__basicsWrapper.visible,
html.js .toolsOverview__technikenWrapper.visible {
  left: 0;
  top: 200px;
  bottom: 0;
  right: 0;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 600px) {
  html.js .toolsOverview__basicsWrapper,
html.js .toolsOverview__technikenWrapper {
    right: 30px;
    top: 230px;
  }
}
html.js .toolsOverview__basicsWrapper .icon-close,
html.js .toolsOverview__technikenWrapper .icon-close {
  display: block;
}
html.js .toolsOverview__basicsWrapper.visible {
  top: auto;
  height: auto;
}
html.js .toolsOverview__phasen {
  padding-top: 50px;
}
html.js .toolsOverview__nav {
  display: flex;
}

.mainNav {
  background: #3c3c3b;
  padding: 40px;
  font-weight: 100;
  font-size: 18px;
  overflow: hidden;
  display: block;
}
.mainNav ul {
  list-style: none;
  margin: 0;
}
.mainNav li {
  margin-bottom: 20px;
}
.mainNav li:before {
  display: none !important;
}
.mainNav a {
  font-weight: 100;
  font-size: 18px;
  text-transform: uppercase;
  color: #878787;
  letter-spacing: 1px;
  transition: color 0.25s;
}
.mainNav a:before {
  transition: color 0.25s;
  width: 30px;
  margin-right: 10px;
  position: relative;
  top: 1px;
}
.mainNav a:hover {
  color: #fff;
}
.mainNav a:hover:before {
  color: #fff;
}
.mainNav a.icon-flyer:before {
  content: "";
  width: 20px;
  margin-right: 20px;
  height: 20px;
  background-image: url(/wp-content/themes/designpilot/assets/images/flieger_weiss.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0.4;
  top: 3px;
}
.mainNav a.icon-flyer:hover:before {
  opacity: 1;
}
.mainNav .sub-menu {
  padding: 16px 0 10px 42px;
}
.mainNav .sub-menu li {
  margin-bottom: 0;
}
.mainNav .sub-menu a {
  display: inline-block;
  padding: 7px 0;
  font-size: 14px;
  letter-spacing: 0;
}
.mainNav .current-menu-item a, .mainNav .current-menu-item a:before {
  color: #fff;
}

html.js .mainNav {
  padding: 60px 30px 30px 27px;
  z-index: 999;
  position: fixed;
  width: 280px;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
}

.mainNav__toggler {
  position: fixed;
  left: 0;
  top: 0;
  width: 45px;
  height: 50px;
  justify-content: flex-end;
  align-items: center;
  z-index: 1000;
  display: none;
}

.mainNav__togglerButton {
  width: 21px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.mainNav__togglerButton div {
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

html.js .mainNav {
  z-index: 100;
  position: fixed;
  width: 280px;
  height: 100%;
  top: 0;
  left: -280px;
  bottom: 0;
  transition: left 0.3s;
}
html.js .mainNav.visible {
  left: 0;
}
html.js .mainNav__toggler {
  display: flex;
}

/*# sourceMappingURL=style.css.map */