:root {
  --white: #fff;
  --black: #000;
  --grey-dark: #0a0a0a;
  --grey-dark-info: #5e5e5e;
  --grey-dark-gradient: linear-gradient(#0a0a0a, #090909, #090909, #080808, #080808, #060606, #050505, #030303, #020202, #000000);
  --grey-light: #fcfcfc;
  --grey-light-info: #cccccc;
  --grey-light-gradient: linear-gradient(#fcfcfc, #fcfcfc, #fcfcfc, #fcfcfc, #fcfcfc, #fcfcfc, #fdfdfd, #fdfdfd, #fefefe, #ffffff);
  --egen: #00f0c9;
  --egen-gradient-dark: linear-gradient(#000000, #000202, #000b09, #001a16, #002f27, #004a3e, #006a59, #009179, #00bd9e, #00f0c9);
  --egen-gradient-light: linear-gradient(#ffffff, #fbfefe, #f2fefc, #e2fdf9, #ccfcf4, #b0faee, #8df8e7, #64f5de, #35f3d4, #00f0c9);
  --choreo-collection: #ff23b7;
  --choreo-collection-gradient-dark: linear-gradient(#000000, #030002, #0c0109, #1c0314, #320624, #4e0a38, #710f51, #9a156e, #c91b90, #ff23b7);
  --choreo-collection-gradient-light: linear-gradient(#ffffff, #fffcfe, #fff4fb, #ffe6f7, #ffd3f0, #ffbbe8, #ff9ddf, #ff79d3, #ff51c6, #ff23b7);
  --choreo-display: #ff23b7;
  --choreo-display-gradient-dark: linear-gradient(#000000, #030002, #0c0109, #1c0314, #320624, #4e0a38, #710f51, #9a156e, #c91b90, #ff23b7);
  --choreo-display-gradient-light: linear-gradient(#ffffff, #fffcfe, #fff4fb, #ffe6f7, #ffd3f0, #ffbbe8, #ff9ddf, #ff79d3, #ff51c6, #ff23b7);
  --choreo-text: #ff23b7;
  --choreo-text-gradient-dark: linear-gradient(#000000, #030002, #0c0109, #1c0314, #320624, #4e0a38, #710f51, #9a156e, #c91b90, #ff23b7);
  --choreo-text-gradient-light: linear-gradient(#ffffff, #fffcfe, #fff4fb, #ffe6f7, #ffd3f0, #ffbbe8, #ff9ddf, #ff79d3, #ff51c6, #ff23b7);
  --choreo-stencil: #e6ff3b;
  --choreo-stencil-gradient-dark: linear-gradient(#000000, #020300, #0b0c02, #191c06, #2d320b, #464e12, #66711a, #8b9a23, #b5c92e, #e6ff3b);
  --choreo-stencil-gradient-light: linear-gradient(#ffffff, #fefffc, #fdfff5, #fcffe9, #faffd8, #f7ffc2, #f3ffa7, #efff88, #ebff64, #e6ff3b);
  --varianz-superfamily: #fff562;
  --varianz-superfamily-gradient-dark: linear-gradient(#000000, #030301, #0c0c04, #1c1b0a, #323013, #4e4b1e, #716c2b, #9a943b, #c9c14d, #fff562);
  --varianz-superfamily-gradient-light: linear-gradient(#ffffff, #fffefd, #fffef7, #fffded, #fffddf, #fffbce, #fffab9, #fff8a0, #fff782, #fff562);
  --varianz-superfamily-gradient-lightmode: linear-gradient(#fcfcfc, #fcfbfa, #fcfbf4, #fcfbea, #fcfadd, #fcf9cc, #fdf8b7, #fdf79e, #fef682, #fff562);
  --varianz-sans: #0000ff;
  --varianz-sans-gradient-dark: linear-gradient(#000000, #000003, #00000c, #00001c, #000032, #00004e, #000071, #00009a, #0000c9, #0000ff);
  --varianz-sans-gradient-light: linear-gradient(#ffffff, #fbfbff, #f2f2ff, #e2e2ff, #ccccff, #b0b0ff, #8d8dff, #6464ff, #3535ff, #0000ff);
  --varianz-mix: #273e06;
  --varianz-mix-gradient-dark: linear-gradient(#000000, #000000, #010300, #040600, #070c01, #0c1301, #111b02, #172503, #1e3004, #273e06);
  --varianz-mix-gradient-light: linear-gradient(#ffffff, #fcfcfb, #f4f5f2, #e7e9e3, #d4d8cd, #bcc3b2, #9fa990, #7c8a68, #54663a, #273e06);
  --varianz-mix-hell: #9bff7c;
  --varianz-mix-hell-gradient-dark: linear-gradient(#000000, #010301, #070c06, #111c0d, #1e3218, #2f4e26, #447137, #5d9a4b, #7ac961, #9bff7c);
  --varianz-mix-hell-gradient-light: linear-gradient(#ffffff, #fdfffd, #fafff8, #f3fff0, #ebffe5, #e0ffd6, #d2ffc4, #c2ffaf, #afff97, #9bff7c);
  --varianz-serif: #ff89d6;
  --varianz-serif-gradient-dark: linear-gradient(#000000, #030102, #0c060a, #1c0f17, #321b2a, #4e2a42, #713c5f, #9a5281, #c96ca9, #ff89d6);
  --varianz-serif-gradient-light: linear-gradient(#ffffff, #fffdfe, #fff9fc, #fff1fa, #ffe7f6, #ffdaf2, #ffcaec, #ffb7e6, #ffa1de, #ff89d6);
  --elephant: #adadad;
  --elephant-gradient-dark: linear-gradient(#000000, #020202, #080808, #131313, #222222, #353535, #4c4c4c, #686868, #888888, #adadad);
  --elephant-gradient-light: linear-gradient(#ffffff, #fdfdfd, #fafafa, #f5f5f5, #eeeeee, #e5e5e5, #dadada, #cdcdcd, #bebebe, #adadad);
  --scytheserif: #ff6000;
  --scytheserif-gradient-dark: linear-gradient(#000000, #030100, #0c0400, #1c0a00, #321200, #4e1d00, #712a00, #9a3a00, #c94b00, #ff6000);
  --scytheserif-gradient-light: linear-gradient(#ffffff, #fffdfb, #fff7f2, #ffede2, #ffdfcc, #ffcdb0, #ffb88d, #ff9e64, #ff8135, #ff6000);
  --scytheserif-zweitfarbe: #242424;
  --vol: #00fd51;
  --vol-gradient-dark: linear-gradient(#000000, #000301, #000c04, #001c09, #003110, #004e19, #007024, #009931, #00c740, #00fd51);
  --vol-gradient-light: linear-gradient(#ffffff, #fbfefc, #f2fef6, #e2feeb, #ccfedc, #b0fec9, #8dfeb1, #64fd95, #35fd75, #00fd51);
  --selection-hover: #bfffbf;
  --selection-clicked: #00ff00;
  --check-green: #00ff00;
  --cancel-red: #FF0000;
  --fontSizeGeneral: 12.5px;
  --fontSizeTitle: 200px;
  --fontSizeFamilyOverviewTitle: 93.75px;
  --fontSizePageHeadline: 56.25px;
  --rounding-general: 10px;
  --transitionGeneral: 0.25s ease;
  --transitionSinglestylesGradient: opacity 0.5s ease;
  --mainFontFamily: VZWO VARIANZ Low Sans;
}

@charset “UTF-8″;

* {
  box-sizing: border-box;
}

@font-face {
  font-family: "VZWO VARIANZ Low Sans";
  src: url(fonts/VZWOVARIANZ-LowSansRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ Variable";
  src: url(fonts/VZWOVARIANZVariable.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ High Sans";
  src: url(fonts/VZWOVARIANZ-HighSansRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ Mid Sans";
  src: url(fonts/VZWOVARIANZ-MidSansRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ High Mix";
  src: url(fonts/VZWOVARIANZ-HighMixRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ Mid Mix";
  src: url(fonts/VZWOVARIANZ-MidMixRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ Low Mix";
  src: url(fonts/VZWOVARIANZ-LowMixRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ High Serif";
  src: url(fonts/VZWOVARIANZ-HighSerifRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ Mid Serif";
  src: url(fonts/VZWOVARIANZ-MidSerifRegular.woff2);
}
@font-face {
  font-family: "VZWO VARIANZ Low Serif";
  src: url(fonts/VZWOVARIANZ-LowSerifRegular.woff2);
}
@font-face {
  font-family: "VZWO Choreo Banner Thin";
  src: url(fonts/VZWOChoreoBanner-Thin.woff2);
}
@font-face {
  font-family: "VZWO Choreo Display Thin";
  src: url(fonts/VZWOChoreoDisplay-ThinItalic.woff2);
}
@font-face {
  font-family: "VZWO Choreo Display Black";
  src: url(fonts/VZWOChoreoDisplay-BlackItalic.woff2);
}
@font-face {
  font-family: "VZWO Choreo Text Variable Upright";
  src: url("fonts/VZWOChoreoText-VariableUpright.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text Variable Italic";
  src: url("fonts/VZWOChoreoText-VariableItalic.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text Regular";
  src: url(fonts/VZWOChoreoText-Regular.woff2);
}
@font-face {
  font-family: "VZWO Choreo Text Italic";
  src: url(fonts/VZWOChoreoText-Italic.woff2);
}
@font-face {
  font-family: "VZWO Choreo Text Medium";
  src: url("fonts/VZWOChoreoText-Medium.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text Medium Italic";
  src: url("fonts/VZWOChoreoText-MediumItalic.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text Bold";
  src: url("fonts/VZWOChoreoText-Bold.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text Bold Italic";
  src: url("fonts/VZWOChoreoText-BoldItalic.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text ExtraBold";
  src: url("fonts/VZWOChoreoText-ExtraBold.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text ExtraBold Italic";
  src: url("fonts/VZWOChoreoText-ExtraBoldItalic.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text Black";
  src: url("fonts/VZWOChoreoText-Black.woff2");
}
@font-face {
  font-family: "VZWO Choreo Text Black Italic";
  src: url("fonts/VZWOChoreoText-BlackItalic.woff2");
}
@font-face {
  font-family: "VZWO Choreo Stencil Variable";
  src: url("fonts/VZWOChoreoStencil-Variable.woff2");
}
@font-face {
  font-family: "VZWO VOL Variable";
  src: url(fonts/VZWOVOLVariable.woff2);
}
@font-face {
  font-family: "VZWO Elephant";
  src: url(fonts/VZWOElephant-Black.woff2);
}
@font-face {
  font-family: "VZWO ScytheSerif";
  src: url(fonts/VZWOScytheSerif-Black.woff2);
}
@font-face {
  font-family: "VZWO VOL-900";
  src: url(fonts/VZWOVOL-900.woff2);
}
@font-face {
  font-family: "VZWO VOL-900 Backslanted";
  src: url(fonts/VZWOVOL-900Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-900 Slanted";
  src: url(fonts/VZWOVOL-900Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-800";
  src: url(fonts/VZWOVOL-800.woff2);
}
@font-face {
  font-family: "VZWO VOL-800 Backslanted";
  src: url(fonts/VZWOVOL-800Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-800 Slanted";
  src: url(fonts/VZWOVOL-800Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-700";
  src: url(fonts/VZWOVOL-700.woff2);
}
@font-face {
  font-family: "VZWO VOL-700 Backslanted";
  src: url(fonts/VZWOVOL-700Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-700 Slanted";
  src: url(fonts/VZWOVOL-700Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-600";
  src: url(fonts/VZWOVOL-600.woff2);
}
@font-face {
  font-family: "VZWO VOL-600 Backslanted";
  src: url(fonts/VZWOVOL-600Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-600 Slanted";
  src: url(fonts/VZWOVOL-600Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-500";
  src: url(fonts/VZWOVOL-500.woff2);
}
@font-face {
  font-family: "VZWO VOL-500 Backslanted";
  src: url(fonts/VZWOVOL-500Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-500 Slanted";
  src: url(fonts/VZWOVOL-500Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-400";
  src: url(fonts/VZWOVOL-400.woff2);
}
@font-face {
  font-family: "VZWO VOL-400 Backslanted";
  src: url(fonts/VZWOVOL-400Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-400 Slanted";
  src: url(fonts/VZWOVOL-400Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-300";
  src: url(fonts/VZWOVOL-300.woff2);
}
@font-face {
  font-family: "VZWO VOL-300 Backslanted";
  src: url(fonts/VZWOVOL-300Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-300 Slanted";
  src: url(fonts/VZWOVOL-300Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-200";
  src: url(fonts/VZWOVOL-200.woff2);
}
@font-face {
  font-family: "VZWO VOL-200 Backslanted";
  src: url(fonts/VZWOVOL-200Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-200 Slanted";
  src: url(fonts/VZWOVOL-200Slanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-100";
  src: url(fonts/VZWOVOL-100.woff2);
}
@font-face {
  font-family: "VZWO VOL-100 Backslanted";
  src: url(fonts/VZWOVOL-100Backslanted.woff2);
}
@font-face {
  font-family: "VZWO VOL-100 Slanted";
  src: url(fonts/VZWOVOL-100Slanted.woff2);
}
@font-face {
  font-family: "VZWO Egen UltraCondensed Black";
  src: url(fonts/VZWOEgen-UltraCondensedBlack.woff2);
}

html, body {
  width: 100%;
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
  background-color: var(--black);
}
header, main {
  max-width: 1500px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}
nav {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  width: 100%;
  max-width: 1500px;
  padding-left: 30px;
  padding-bottom: 3px;
  z-index: 1000;
  background-color:  rgba(var(--black), 0.99);
  border: 1px solid var(--black), 0.75;
  -webkit-backdrop-filter: blur(37.5px);
  backdrop-filter: blur(37.5px);
  font-family: var(--mainFontFamily), sans-serif;
  font-size: var(--fontSizeGeneral);
  transition: top 0.5s;
  border-radius: var(--rounding-general);
}
nav a {
  text-decoration: none;
  color: var(--white);
}
nav a:hover {
  filter: opacity(40%);
  transition: var(--transitionGeneral);
}
.navbar-menu-points {
  display: flex;
}
.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu > li {
  padding-right: 30px;
  overflow: hidden;
  padding-top: 2px;
}
.menu-button-container {
  display: none;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  margin-top: 1.875px;
  height: 35px;
  width: 30px;
  cursor: pointer;
  position: relative;
}
.menu-button-container:hover .menu-button {
  filter: opacity(40%);
  transition: var(--transitionGeneral);
}
#menu-toggle {
  display: none;
}
.menu-button,
.menu-button::before,
.menu-button::after {
  background-color: var(--white);
  position: absolute;
  width: 15px;
  height: 1px;
  transition: transform 175ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-button::before {
  content: '';
  margin-top: -5px;
}
.menu-button::after {
  content: '';
  margin-top: 5px;
}
#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(45deg);
}
#menu-toggle:checked + .menu-button-container .menu-button {
  background: none;
}
#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-45deg);
}

/*LIGHT/LIGHTMODE TOGGLE*//*LIGHT/LIGHTMODE TOGGLE*//*LIGHT/LIGHTMODE TOGGLE*//*LIGHT/LIGHTMODE TOGGLE*/
.toggle-container {
  display: inline-block;
  position: relative;
  margin-right: 25px;
  margin-top: 4px;
}
.toggle-checkbox {
  display: none;
}
.toggle-label {
  display: block;
  width: 15px;
  height: 15px;
  position: relative;
  cursor: pointer;
}
.toggle-svg {
  width: 15px;
  height: 15px;
  fill: var(--white);
}
.toggle-svg:hover {
  filter: opacity(40%);
  transition: var(--transitionGeneral);
}
/*LIGHT/LIGHTMODE TOGGLE*//*LIGHT/LIGHTMODE TOGGLE*//*LIGHT/LIGHTMODE TOGGLE*//*LIGHT/LIGHTMODE TOGGLE*/

#VZWO-index-intro {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0;
  z-index: 2000;
  background-color: rgba(var(--black), 0.99);
  border: 1px solid rgba(var(--black), 0.75);
  -webkit-backdrop-filter: blur(37.5px);
  backdrop-filter: blur(37.5px);
  transition: backdrop-filter 0.5s ease-out, -webkit-backdrop-filter 0.5s ease-out;
}
#VZWO-index-intro.hide {
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
.VZWO-logo-container-index-intro {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.VZWO-logo-index-intro {
  width: 250px;
  fill: var(--white);
  transition: opacity 0.5s ease-out, filter 0.5s ease-out;
}
.light-mode .VZWO-logo-index-intro {
  fill: var(--black);
}
.VZWO-logo-index-intro.fade-out {
  opacity: 0;
  filter: blur(10px);
}


body p {
  margin: 0;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  font-size: var(--fontSizeTitle);
  color: var(--white);
}
.title-egen {
  background-color: var(--egen);
  background-image: var(--egen-gradient-dark);
  font-family: VZWO Egen UltraCondensed Black;
  padding-bottom: 0;
}
.title-choreo-collection {
  background-color: var(--choreo-collection);
  background-image: var(--choreo-collection-gradient-dark);
  font-family: VZWO Choreo Banner Thin;
  padding-bottom: 0;
}
.title-choreo-collection:hover {
  animation: changeStylesChoreoCollectionTitle 2.5s steps(1) infinite;
}
@keyframes changeStylesChoreoCollectionTitle {
    0%, 20% {
        font-family: VZWO Choreo Banner Thin;
    }
    20%, 40% {
        font-family: VZWO Choreo Display Thin;
    }
    40%, 60% {
        font-family: VZWO Choreo Display Black;
    }
    60%, 80% {
        font-family: VZWO Choreo Text Regular;
    }
    80%, 100% {
        font-family: VZWO Choreo Text Italic;
    }
}
.title-choreo-collection p:first-child {
	display: flex;
}
.title-choreo-collection p:nth-child(2) {
	display: none;
}
.title-choreo-collection:hover p:first-child {
	display: none;
}
.title-choreo-collection:hover p:nth-child(2) {
	display: flex;
}
.title-choreo-text {
  background-color: var(--choreo-text);
  background-image: var(--choreo-text-gradient-dark);
  font-family: VZWO Choreo Text Variable Upright;
  padding-bottom: 0;
}
.title-choreo-text:hover {
  font-family: VZWO Choreo Text Variable Italic;
}
.title-choreo-stencil {
  background-color: var(--choreo-stencil);
  background-image: var(--choreo-stencil-gradient-dark);
  font-family: VZWO Choreo Stencil Variable;
  padding-bottom: 0;
}
.title-choreo-display {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-dark);
  font-family: VZWO Choreo Display Black;
  padding-bottom: 0;
}
.title-choreo-display:hover {
  font-family: VZWO Choreo Display Thin;
}
.title-choreo-banner {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-dark);
  font-family: VZWO Choreo Banner Thin;
  padding-bottom: 0;
  text-transform: uppercase;
}
.title-choreo-banner:hover {
  text-transform: none;
}
.title-varianz-superfamily {
  background-color: var(--varianz-superfamily);
  background-image: var(--varianz-superfamily-gradient-dark);
  font-family: VZWO VARIANZ Variable;
  padding-bottom: 25px;
}
.title-varianz-sans {
  background-color: var(--varianz-sans);
  background-image: var(--varianz-sans-gradient-dark);
  font-family: VZWO VARIANZ High Sans;
  padding-bottom: 25px;
}
.title-varianz-sans:hover {
  animation: changeStylesVarianzSansTitle 2.5s steps(1) infinite;
}
@keyframes changeStylesVarianzSansTitle {
    0%, 33.33% {
        font-family: VZWO VARIANZ Low Sans;
    }
    33.33%, 66.66% {
        font-family: VZWO VARIANZ Mid Sans;
    }
    66.66%, 100% {
        font-family: VZWO VARIANZ High Sans;
    }
}
.title-varianz-mix {
  background-color: var(--varianz-mix);
  background-image: var(--varianz-mix-gradient-dark);
  font-family: VZWO VARIANZ High Mix;
  padding-bottom: 25px;
}
.title-varianz-mix:hover {
  animation: changeStylesVarianzMixTitle 2.5s steps(1) infinite;
}
@keyframes changeStylesVarianzMixTitle {
    0%, 33.33% {
        font-family: VZWO VARIANZ Low Mix;
    }
    33.33%, 66.66% {
        font-family: VZWO VARIANZ Mid Mix;
    }
    66.66%, 100% {
        font-family: VZWO VARIANZ High Mix;
    }
}
.title-varianz-serif {
  background-color: var(--varianz-serif);
  background-image: var(--varianz-serif-gradient-dark);
  font-family: VZWO VARIANZ High Serif;
  padding-bottom: 25px;
}
.title-varianz-serif:hover {
  animation: changeStylesVarianzSerifTitle 2.5s steps(1) infinite;
}
@keyframes changeStylesVarianzSerifTitle {
    0%, 33.33% {
        font-family: VZWO VARIANZ Low Serif;
    }
    33.33%, 66.66% {
        font-family: VZWO VARIANZ Mid Serif;
    }
    66.66%, 100% {
        font-family: VZWO VARIANZ High Serif;
    }
}
.title-vol {
  display: block;
  text-align: center;
  padding-top: calc(30vh - 17.5px);
  background-color: var(--vol);
  background-image: var(--vol-gradient-dark);
  font-family: VZWO VOL Variable;
}
.title-vol p {
  transform: translateY(-50%);
}
.title-elephant {
  background-color: var(--elephant);
  background-image: var(--elephant-gradient-dark);
  font-family: VZWO Elephant;
  padding-top: 15px;
}
.title-scytheserif {
  background-color: var(--scytheserif);
  background-image: var(--scytheserif-gradient-dark);
  font-family: VZWO ScytheSerif;
  padding-top: 25px;
}


main {
  background-color: var(--black);
  font-family: VZWO VARIANZ Low Sans;
  font-size: var(--fontSizeGeneral);
  line-height: 1.625;
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  padding: 27.5px 30px 30px 30px;
}
main a {
  text-decoration: none;
  color: var(--white);
}
.infokasten {
  width: 100%;
  background: var(--black);
  color: var(--white);
  margin-bottom: 60px;
  display: flex;
  border: 1px solid var(--white);
  z-index: 999;
}
.infokasten div {
  padding: 5px 15px 7.5px 15px;
}
.infokasten a {
  padding-right: 15px;
  text-align: left;
}
.scroll-to-link:hover {
  filter: opacity(40%);
  transition: var(--transitionGeneral);
}
.get-egen {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-egen:hover {
  color: var(--egen);
}
.get-choreo-collection {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-choreo-collection:hover {
  color: var(--choreo-collection);
}
.get-choreo-text {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-choreo-text:hover {
  color: var(--choreo-text);
}
.get-choreo-stencil {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-choreo-stencil:hover {
  color: var(--choreo-stencil);
}
.get-choreo-display {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-choreo-display:hover {
  color: var(--choreo-display);
}
.get-varianz-superfamily {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-varianz-superfamily:hover {
  color: var(--varianz-superfamily);
}
.get-varianz-sans {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-varianz-sans:hover {
  color: var(--varianz-sans);
}
.get-varianz-mix {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-varianz-mix:hover {
  color: var(--varianz-mix-hell);
}
.get-varianz-serif {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-varianz-serif:hover {
  color: var(--varianz-serif);
}
.get-vol {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-vol:hover {
  color: var(--vol);
}
.get-elephant {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-elephant:hover {
  color: var(--elephant);
}
.get-scytheserif {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.get-scytheserif:hover {
  color: var(--scytheserif);
}
.see-vzwo-typefaces {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.see-vzwo-typefaces:hover {
  color: var(--grey-dark-info);
}
.sticky-on-scroll {
  position: -webkit-sticky;
  position: sticky;
  top: 17.5px;
}
.border-only-right {
  border-right: 1px solid var(--white);
}
.with-flex {
  display: flex;
  margin-bottom: 60px;
}
.with-flex-content-div {
  width: 50%;
  margin-right: 30px;
}
.with-flex-content-div:last-child {
  margin-right: 0;
}
.with-flex-for-tripple {
  display: flex;
  margin-bottom: 30px;
}
.with-flex-content-div-tripple {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
}
.with-flex-content-div-tripple:last-child {
  margin-right: 0;
}
.text-with-small-headline-and-line {
  margin-bottom: 30px;
}
.text-with-small-headline-and-line a {
  display: block;
}
.text-with-small-headline-and-line a:hover {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.text-with-small-headline-and-line a:hover .font-family-styles-overview {
  color: var(--white);
}
.small-headline {
  margin-bottom: 7.5px;
}
.line-horizontal {
  width: 100%;
  height: 1px;
  background-color: var(--white);
  margin-bottom: 7.5px;
}
.font-family-styles-overview {
  font-size: 20px;
}
.font-family-styles-overview-vol {
  display: flex;
}
.font-family-styles-overview-vol p {
  margin-right: 30px;
}
.font-family-styles-overview-vol p:last-child {
  margin-right: 0;
}


/*TYPETESTER*//*TYPETESTER*//*TYPETESTER*//*TYPETESTER*//*TYPETESTER*//*TYPETESTER*/
    .try {
      margin-bottom: 90px;
    }
    .typetester-container {
      margin-bottom: 60px;
    }
    .typetester {
      position: relative;
      z-index: 1;
    }
    .typetester label {
      text-align: left;
      display: inline-block;
    }
    .typetester-bedienung-container {
      display: flex;
    }
    .typetester-bedienung-container button{
      cursor: pointer;
    }
    .typetester-bedienung {
      display: flex;
      justify-content: space-between;
      width: 25%;
      margin-right: 30px;
    }
    .typetester-bedienung button {
      background-color: transparent;
      border: none;
      padding: 0;
      margin-top: -6px;
    }
/*font dropdown menu*/
    .font-dropdown-arrow {
        position: absolute;
        top: 9px;
        border-style: solid;
        border-width: 5px 3.75px 0 3.75px;
    }
    .font-dropdown-arrow-choreocollection {
        border-color: var(--choreo-collection) transparent transparent transparent;
    }
    .font-dropdown-arrow-choreotext {
        border-color: var(--choreo-text) transparent transparent transparent;
    }
    .font-dropdown-arrow-choreostencil {
        border-color: var(--choreo-stencil) transparent transparent transparent;
    }
    .font-dropdown-arrow-choreodisplay {
        border-color: var(--choreo-display) transparent transparent transparent;
    }
    .font-dropdown-arrow-varianzsuperfamily {
        border-color: var(--varianz-superfamily) transparent transparent transparent;
    }
    .font-dropdown-arrow-varianzsans {
        border-color: var(--varianz-sans) transparent transparent transparent;
    }
    .font-dropdown-arrow-varianzmix {
        border-color: var(--varianz-mix-hell) transparent transparent transparent;
    }
    .font-dropdown-arrow-varianzserif {
        border-color: var(--varianz-serif) transparent transparent transparent;
    }
    .font-dropdown-arrow-vol {
        border-color: var(--vol) transparent transparent transparent;
    }
    .font-dropdown {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-left: 10px;
        font-family: var(--mainFontFamily);
        font-size: var(--fontSizeGeneral);
        border: none;
        outline: none;
        background-color: transparent;
        color: var(--white);
        cursor: pointer;
    }
    .font-dropdown-choreocollection:hover {
        color: var(--choreo-collection);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-choreotext:hover {
        color: var(--choreo-text);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-choreostencil:hover {
        color: var(--choreo-stencil);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-choreodisplay:hover {
        color: var(--choreo-display);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-varianzsuperfamily:hover {
        color: var(--varianz-superfamily);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-varianzsans:hover {
        color: var(--varianz-sans);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-varianzmix:hover {
        color: var(--varianz-mix-hell);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-varianzserif:hover {
        color: var(--varianz-serif);
        transition: var(--transitionGeneral);
    }
    .font-dropdown-vol:hover {
        color: var(--vol);
        transition: var(--transitionGeneral);
    }
    .font-dropdown option {
      height: auto;
    }
/*font dropdown menu*/
    
    .alignment-button {
      margin: 0 -3.75px;
    }
    .alignment-buttons {
      height: 35px;
      width: 35px;
      fill: none;
      stroke: var(--white);
      background: none;
    }
    .alignment-buttons:hover {
      stroke: var(--hover-color, var(--choreo-display));
      transition: var(--transitionGeneral);
    }
    .alignment-buttons.selected {
      stroke: var(--selected-color, var(--choreo-display));
      transition: var(--transitionGeneral);
    }
    .typetester-bedienung-slider {
      width: 25%;
      margin-right: 30px;
    }
    .typetester-bedienung-slider:last-child {
      margin-right: 0;
    }
    .typetester-slider-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: -5px;
    }
    @supports (-moz-appearance: none) {
      .typetester-slider-info {
        margin-bottom: 10px;
      }
    }
    .typetester-slider-info p, .typetester-slider-info span {
      color: var(--grey-dark-info);
    }
    .typetester-slider-styling {
      width: 100%;
    }
    /* Style the range input */
    input[type="range"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 1px;
        background: var(--white);
        outline: none;
        margin-bottom: 15px;
    }
    /* Style the slider thumb */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 10px;
        height: 10px;
        background: var(--slider-thumb-color, var(--choreo-display));
        border-radius: 50%;
        cursor: pointer;
    }
    input[type="range"]::-moz-range-thumb {
        width: 10px;
        height: 10px;
        background: var(--slider-thumb-color, var(--choreo-display));
        border: none;
        border-radius: 50%;
        cursor: pointer;
    }
    .typetester-testfield {
      padding-bottom: 30px;
      line-height: 1;
      letter-spacing: normal;
      text-align: center;
      outline: none;
    }
    #typetesteregenultracondensedblack {
      font-family: VZWO Egen UltraCondensed Black;
    }
    #typetesterchoreobannerthin {
      font-family: VZWO Choreo Banner Thin;
    }
    #typetesterchoreodisplaythinitalic {
      font-family: VZWO Choreo Display Thin;
    }
    #typetesterchoreodisplayblackitalic {
      font-family: VZWO Choreo Display Black;
    }
    #typetesterchoreotextregular {
      font-family: VZWO Choreo Text Regular;
    }
    #typetesterchoreotextitalic {
      font-family: VZWO Choreo Text Italic;
    }
    #typetesterchoreotextmedium {
      font-family: VZWO Choreo Text Medium;
    }
    #typetesterchoreotextmediumitalic {
      font-family: VZWO Choreo Text Medium Italic;
    }
    #typetesterchoreotextbold {
      font-family: VZWO Choreo Text Bold;
    }
    #typetesterchoreotextbolditalic {
      font-family: VZWO Choreo Text Bold Italic;
    }
    #typetesterchoreotextextrabold {
      font-family: VZWO Choreo Text ExtraBold;
    }
    #typetesterchoreotextextrabolditalic {
      font-family: VZWO Choreo Text ExtraBold Italic;
    }
    #typetesterchoreotextblack {
      font-family: VZWO Choreo Text Black;
    }
    #typetesterchoreotextblackitalic {
      font-family: VZWO Choreo Text Black Italic;
    }
    #typetestervarianzhighsans {
      font-family: VZWO VARIANZ High Sans;
    }
    #typetestervarianzhighmix {
      font-family: VZWO VARIANZ High Mix;
    }
    #typetestervarianzhighserif {
      font-family: VZWO VARIANZ High Serif;
    }
    #typetestervarianzmidsans {
      font-family: VZWO VARIANZ Mid Sans;
    }
    #typetestervarianzmidmix {
      font-family: VZWO VARIANZ Mid Mix;
    }
    #typetestervarianzmidserif {
      font-family: VZWO VARIANZ Mid Serif;
    }
    #typetestervarianzlowsans {
      font-family: VZWO VARIANZ Low Sans;
    }
    #typetestervarianzlowmix {
      font-family: VZWO VARIANZ Low Mix;
    }
    #typetestervarianzlowserif {
      font-family: VZWO VARIANZ Low Serif;
    }
    #typetestervol900 {
      font-family: VZWO VOL-900;
    }
    #typetestervol900backslanted {
      font-family: VZWO VOL-900 Backslanted;
    }
    #typetestervol900slanted {
      font-family: VZWO VOL-900 Slanted;
    }
    #typetestervol800 {
      font-family: VZWO VOL-800;
    }
    #typetestervol800backslanted {
      font-family: VZWO VOL-800 Backslanted;
    }
    #typetestervol800slanted {
      font-family: VZWO VOL-800 Slanted;
    }
    #typetestervol700 {
      font-family: VZWO VOL-700;
    }
    #typetestervol700backslanted {
      font-family: VZWO VOL-700 Backslanted;
    }
    #typetestervol700slanted {
      font-family: VZWO VOL-700 Slanted;
    }
    #typetestervol600 {
      font-family: VZWO VOL-600;
    }
    #typetestervol600backslanted {
      font-family: VZWO VOL-600 Backslanted;
    }
    #typetestervol600slanted {
      font-family: VZWO VOL-600 Slanted;
    }
    #typetestervol500 {
      font-family: VZWO VOL-500;
    }
    #typetestervol500backslanted {
      font-family: VZWO VOL-500 Backslanted;
    }
    #typetestervol500slanted {
      font-family: VZWO VOL-500 Slanted;
    }
    #typetestervol400 {
      font-family: VZWO VOL-400;
    }
    #typetestervol400backslanted {
      font-family: VZWO VOL-400 Backslanted;
    }
    #typetestervol400slanted {
      font-family: VZWO VOL-400 Slanted;
    }
    #typetestervol300 {
      font-family: VZWO VOL-300;
    }
    #typetestervol300backslanted {
      font-family: VZWO VOL-300 Backslanted;
    }
    #typetestervol300slanted {
      font-family: VZWO VOL-300 Slanted;
    }
    #typetestervol200 {
      font-family: VZWO VOL-200;
    }
    #typetestervol200backslanted {
      font-family: VZWO VOL-200 Backslanted;
    }
    #typetestervol200slanted {
      font-family: VZWO VOL-200 Slanted;
    }
    #typetestervol100 {
      font-family: VZWO VOL-100;
    }
    #typetestervol100backslanted {
      font-family: VZWO VOL-100 Backslanted;
    }
    #typetestervol100slanted {
      font-family: VZWO VOL-100 Slanted;
    }
    #typetesterelephant {
      font-family: VZWO Elephant;
    }
    #typetesterscytheserif {
      font-family: VZWO ScytheSerif;
    }

    /*VARIABLE TYPETESTER PART*//*VARIABLE TYPETESTER PART*//*VARIABLE TYPETESTER PART*//*VARIABLE TYPETESTER PART*/
        .typetester-container-variable {
          margin-bottom: 120px;
        }
        .typetester-variable {
          position: relative;
          z-index: 1;
        }
        .typetester-variable label {
          text-align: left;
          display: inline-block;
        }
        .typetester-bedienung-variable-slider {
          width: 50%;
          margin-right: 30px;
        }
        .typetester-bedienung-variable-slider:last-child {
          margin-right: 0;
        }
        .typetester-bedienung-variable-slider-oneonly {
          width: 100%;
          margin-right: 0;
        }
        .alignment-buttons-variable {
          height: 35px;
          width: 35px;
          fill: none;
          stroke: var(--white);
          background: none;
        }
        .alignment-buttons-variable:hover {
          stroke: var(--hover-color, var(--choreo-display));
          transition: var(--transitionGeneral);
        }
        .alignment-buttons-variable.selected {
          stroke: var(--selected-color, var(--choreo-display));
          transition: var(--transitionGeneral);
        }
        .animateAxis {
            display: none;
        }
        .switch {
            position: relative;
            display: block;
            width: 10px;
            height: 10px;
            cursor: pointer;
        }
        .play-icon, .pause-icon {
            margin-top: -5px;
            padding-left: 3px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .pause-icon {
            display: none;
        }
        .animateAxis:checked + .switch .pause-icon {
            display: block;
        }
        .animateAxis:not(:checked) + .switch .pause-icon {
            display: none;
        }
        .animateAxis:not(:checked) + .switch .play-icon {
            display: block;
        }
        .animateAxis:checked + .switch .pause-icon {
            display: block;
        }
        .animateAxis:checked + .switch .play-icon {
            display: none;
        }
        #variabletypetestervarianz {
          font-family: 'VZWO VARIANZ Variable';
        }
        #variabletypetestervol {
          font-family: 'VZWO VOL Variable';
        }
        #variabletypetesterchoreotext {
          font-family: 'VZWO Choreo Text Variable Upright';
        }
        #variabletypetesterchoreostencil {
          font-family: 'VZWO Choreo Stencil Variable';
        }
    /*VARIABLE TYPETESTER PART*//*VARIABLE TYPETESTER PART*//*VARIABLE TYPETESTER PART*//*VARIABLE TYPETESTER PART*/ 
/*TYPETESTER*//*TYPETESTER*//*TYPETESTER*//*TYPETESTER*//*TYPETESTER*//*TYPETESTER*/

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.25s ease-out, transform 0.5s ease-out;
}
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.specimen-container {
  margin-bottom: 105px;
}
.specimen-full-width {
  width: 100%;
  height: auto;
  border-radius: var(--rounding-general);
  margin-bottom: 30px;
}
.specimen-full-width-melt-top {
  width: 100%;
  height: auto;
  border-top-left-radius: var(--rounding-general);
  border-top-right-radius: var(--rounding-general);
  margin-bottom: -6px;
}
.specimen-full-width-melt-bottom {
  width: 100%;
  height: auto;
  border-bottom-left-radius: var(--rounding-general);
  border-bottom-right-radius: var(--rounding-general);
  margin-top: 0;
  margin-bottom: 30px;
}
.specimen-half-width-container {
  display: flex;
}
.specimen-half-width {
  width: calc((100% - 30px) / 2);
  height: auto;
  margin-right: 30px;
  border-radius: var(--rounding-general);
  margin-bottom: 30px;
}
.specimen-half-width:last-child {
  margin-right: 0;
}
.specimen-half-width video {
  width: 100%;
  border-radius: var(--rounding-general);
}
.specimen-altar-width-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.specimen-altar-width {
  margin-right: 30px;
}
.specimen-altar-width:last-child {
  margin-right: 0;
}
.specimen-altar-width-big {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(66.66% - 30px);
  box-sizing: border-box;
  border-radius: var(--rounding-general);
}
.specimen-altar-width-small {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(16.67% - 15px);
  box-sizing: border-box;
  border-radius: var(--rounding-general);
}
.specimen-third-width-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.specimen-third-width:first-child {
  margin-right: 30px;
}
.specimen-third-width:nth-child(2) {
  margin-right: 0;
}
.specimen-third-width-big {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(66.66% - 15px);
  box-sizing: border-box;
  border-radius: var(--rounding-general);
}
.specimen-third-width-small {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(33.33% - 15px);
  box-sizing: border-box;
  border-radius: var(--rounding-general);
}
.specimen-tripple-width {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc((100% - 60px) / 3);
  box-sizing: border-box;
  border-radius: var(--rounding-general);
  margin-right: 30px;
}
.specimen-tripple-width:last-child {
  margin-right: 0;
}
.specimen-quarter-width-container {
  display: flex;
  flex-wrap: wrap;
}
.specimen-quarter-width {
  width: calc((100% - 90px) / 4);
  height: auto;
  margin-right: 30px;
  margin-bottom: 30px;
  border-radius: var(--rounding-general);
}
.specimen-quarter-width:nth-child(4),
.specimen-quarter-width:nth-child(9){
  margin-right: 0;
}
.background-white {
  background-color: var(--white);
}
.background-white-grey {
  background-color: var(--white);
}
.background-white-black {
  background-color: var(--white);
}
.background-white-blue {
  background-color: var(--white);
}
.background-white-varianz-serif {
  background-color: var(--white);
}
.background-grey {
  background-color: var(--grey-dark);
}
.background-grey-black {
  background-color: var(--grey-dark);
}
.background-grey-white {
  background-color: var(--grey-dark);
}
.background-black {
  background-color: var(--black);
}
.background-varianz-gradient {
  background-image: var(--varianz-superfamily-gradient-dark);
}
.background-choreo-stencil-black {
  background: var(--choreo-stencil);
  fill: var(--black);
}
.background-grey-choreo-stencil {
  background: var(--grey-dark);
  fill: var(--black);
}
.choreo-stencil-invisible-fill {
  fill: none;
}
.background-choreo-display {
  background: var(--choreo-display);
  fill: var(--black);
}
.background-choreo-text {
  background: var(--choreo-text);
  fill: var(--black);
}
.background-vol {
  background-color: var(--vol);
}
.background-vol-red {
  background-color: #ff0000;
}
.background-scytheserif {
  background-color: var(--scytheserif);
}
.background-scytheserif-zweitfarbe {
  background-color: var(--scytheserif-zweitfarbe);
}
.background-varianz-sans {
  background-color: var(--varianz-sans);
}
.background-varianz-mix {
  background-color: var(--varianz-mix);
}
.background-varianz-mix-hell {
  background-color: var(--varianz-mix-hell);
}
.background-varianz-serif {
  background-color: var(--varianz-serif);
}
.background-varianz-serif-grey {
  background-color: var(--varianz-serif);
}
.background-red-grey {
  background-color: #ff0000;
}
.background-elephant {
  background-color: var(--elephant);
}
.background-egen {
  background-color: var(--egen);
}
.background-egen-gradient {
  background-image: var(--egen-gradient-dark);
}
.background-choreo-stencil-gradient {
  background-image: var(--choreo-stencil-gradient-light);
}
.fill-in-fat-outline, .fat-outline {
  fill: var(--white);
}
.fat-outline {
  stroke: var(--black);
  stroke-miterlimit: 10;
  stroke-width: 20px;
}
.choreo-racing-contour-1 {
  stroke-miterlimit: 3;
}
.choreo-racing-contour-1,
.choreo-racing-contour-2,
.choreo-racing-contour-3 {
  stroke: var(--white);
  stroke-width: 8px;
}
.choreo-racing-contour-2 {
  stroke-miterlimit: 4.1;
}
.choreo-racing-contour-3 {
  stroke-miterlimit: 10;
}
.choreo-racing-contour-4 {
  fill: var(--black);
}
.choreo-racing-contour-5 {
  fill: var(--white);
}
.cls-2 {
  fill: #fff;
}
.cls-3 {
  fill: url(#Unbenannter_Verlauf_5-3);
}
.cls-4 {
  fill: url(#Unbenannter_Verlauf_5-2);
}
.cls-5 {
  fill: url(#Unbenannter_Verlauf_5);
}
.highlight-varianz-superfamily-morecontrast {
  fill: var(--varianz-superfamily);
}
.highlight-varianz-superfamily {
  fill: var(--varianz-superfamily);
}
.highlight-varianz-superfamily-stroke {
  stroke: var(--varianz-superfamily);
}
.specimen-svg path {
  fill: var(--white);
}
.specimen-svg-varianz-sans-highlight path {
  fill: var(--varianz-sans);
}
.highlight-varianz-mix-hell {
  fill: var(--varianz-mix-hell);
}
.highlight-varianz-mix-hell-dunkel {
  fill: var(--varianz-mix-hell);
}
.highlight-varianz-serif {
  fill: var(--varianz-serif);
}
.highlight-varianz-serif-white {
  fill: var(--varianz-serif);
}
.highlight-white-varianz-serif {
  fill: var(--white);
}
.highlight-egen {
  fill: var(--egen);
}
.highlight-egen path{
  fill: var(--egen);
}
.highlight-egen-black {
  fill: var(--egen);
}
.highlight-scytheserif {
  fill: var(--scytheserif);
}
.highlight-scytheserif-zweitfarbe {
  fill: var(--scytheserif-zweitfarbe);
}
.highlight-elephant {
  fill: var(--elephant);
}
.highlight-choreo-stencil path {
  fill: var(--choreo-stencil);
}
.highlight-red {
  fill: #ff0000;
}
.specimen-svg-melt path {
  fill: var(--white);
}
.specimen-svg-dark-type path {
  fill: var(--black);
}
.specimen-svg-dark-type polygon {
  fill: var(--black);
}
.specimen-svg-always-white {
  fill: var(--white);
}
.specimen-svg-black-white-fill {
  fill: var(--black);
}
.specimen-svg-black-red-fill {
  fill: var(--black);
}
.specimen-svg-white-black-fill {
  fill: var(--white);
}
.specimen-svg-grey-fill {
  fill: var(--grey-dark);
}
.specimen-svg-grey-info-fill path {
  fill: var(--grey-dark-info);
}
.specimen-svg-black-choreo-stencil-fill {
  fill: var(--black);
}
.specimen-svg-choreo-stencil-black-fill {
  fill: var(--choreo-stencil);
}
.specimen-container .highlight-varianz-sans {
  fill: var(--varianz-sans);
}
.varianz-sans-circled-figures-animation {
  border-radius: var(--rounding-general);
}
.specimen-container .highlight-choreo-collection {
  fill: var(--choreo-collection);
}
.specimen-container .highlight-choreo-display {
  fill: var(--choreo-display);
}
.specimen-container .highlight-choreo-text {
  fill: var(--choreo-text);
}
.varianz-mix-verlauf-01 {
  fill: url(#Unbenannter_Verlauf_5-3);
}
.varianz-mix-verlauf-02 {
  fill: url(#Unbenannter_Verlauf_5-2);
}
.varianz-mix-verlauf-03 {
  fill: url(#Unbenannter_Verlauf_5);
}
.text-abdeckung-grey-dark-light {
  fill: var(--grey-dark);
}

.letterings-full-width {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.letterings-full-width svg {
  border-radius: var(--rounding-general);
  margin-bottom: 2.5px;
}
.letterings-full-width:hover .letterings-info,
.letterings-half-width:hover .letterings-info,
.letterings-tripple-width:hover .letterings-info {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.letterings-half-width {
  position: relative;
  width: calc((100% - 30px) / 2);
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
.letterings-half-width:last-child {
  margin-right: 0;
}
.letterings-half-width svg {
  border-radius: var(--rounding-general);
  margin-bottom: 7.5px;
}
.letterings-tripple-width {
  position: relative;
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
.letterings-tripple-width:last-child {
  margin-right: 0;
}
.letterings-tripple-width svg {
  margin-bottom: 7.5px;
}
.letterings-tripple-width video {
  border-radius: var(--rounding-general);
  margin-bottom: 7.5px;
}

/*Ausklappbarer Teil*//*Ausklappbarer Teil*//*Ausklappbarer Teil*/
  .collapsible-container {
    border: none;
    outline: none;
    padding: 0 0 12.5px 0;
    width: 100%;
    background-color: var(--black);
    color: var(--white);
    text-align: left;
    font-size: 20px;
    font-family: VZWO VARIANZ Low Sans;
    cursor: pointer;
    position: relative;
  }
  .collapsible-container::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 1px;
    background-color: var(--white);
    top: 37.5%;
    right: 12.5px;
    transform-origin: center;
    transform: translateY(-50%);
  }
  .collapsible-plus-minus-icon {
    background-color: var(--white);
    position: absolute;
    width: 25px;
    height: 1px;
    top: 37.5%;
    right: 12.5px;
    transform-origin: center;
    transform: rotate(90deg) translateY(-50%);
    display: none;
  }
  .collapsible-container.closed .collapsible-plus-minus-icon {
    display: block;
  }
  .collapsible {
    padding-bottom: 60px;
    padding-top: 27.5px;
    display: block;
  }
  .collapsible-content{
    display: flex;
    margin-bottom: 30px;
    width: 100%;
  }
  .collapsible-subcontent {
    width: 50%;
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .collapsible-subcontent:last-child {
    margin-right: 0;
  }

/*OPENTYPE*/
  .opentypefeatures {
    margin-bottom: 45px;
  }
  .opentypefeatures-visuals {
    font-size: 25px;
  }
  .collapsible-subcontent-opentypefeatures {
    width: 50%;
    margin-right: 30px;
  }
  .collapsible-subcontent-opentypefeatures:last-child {
    margin-right: 0;
  }
  .collapsible-subcontent-opentypefeatures div {
    background-color: var(--grey-dark);
    border-radius: var(--rounding-general);
    text-align: center;
    font-size: 37.5px;
    height: 300px;
    padding-bottom: 10px;
  }
  .opentypefeatures-visuals-egen {
    font-family: VZWO Egen UltraCondensed Black;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-egen p{
    font-size: 100px;
  }
  .opentypefeatures-visuals-varianz-superfamily {
    font-family: VZWO VARIANZ Mid Mix;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-varianz-sans {
    font-family: VZWO VARIANZ Low Sans;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-varianz-mix {
    font-family: VZWO VARIANZ High Mix;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-varianz-serif {
    font-family: VZWO VARIANZ High Serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-choreo-collection {
    font-family: VZWO Choreo Text Italic;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-choreo-banner {
    font-family: VZWO Choreo Banner Thin;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-choreo-banner p{
    font-size: 32.5px;
  }
  .opentypefeatures-visuals-choreo-display {
    font-family: VZWO Choreo Display Thin;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-choreo-text {
    font-family: VZWO Choreo Text Bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-choreo-stencil {
    font-family: VZWO Choreo Stencil Variable;
	font-variation-settings: 'wght' 650;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-vol {
    font-family: VZWO VOL-500;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-vol p{
    font-size: 50px;
  }
  .opentypefeatures-visuals-elephant {
    font-family: VZWO Elephant;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-elephant p{
    font-size: 50px;
  }
  .opentypefeatures-visuals-scytheserif {
    font-family: VZWO ScytheSerif;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .opentypefeatures-visuals-scytheserif p{
    font-size: 50px;
  }
  .opentypefeatures-description {
    margin-top: 7.5px;
  }
  .calt-feature p {
    font-feature-settings: "calt" 1;
  }
  .calt-feature:hover p {
    font-feature-settings: "calt" 0;
  }
  .subscript-feature {
    font-feature-settings: "subs" 1;
  }
  .supscript-feature {
    font-feature-settings: "sups" 1;
  }
  .numerator-feature {
    font-feature-settings: "numr" 1;
  }
  .denumerator-feature {
    font-feature-settings: "dnom" 1;
  }
  .subs-sinf-sups-numr-dnom-features:hover .subscript-feature,
  .subs-sinf-sups-numr-dnom-features:hover .supscript-feature,
  .subs-sinf-sups-numr-dnom-features:hover .numerator-feature,
  .subs-sinf-sups-numr-dnom-features:hover .denumerator-feature {
    font-feature-settings: "subs" 0;
    font-feature-settings: "sups" 0;
    font-feature-settings: "numr" 0;
    font-feature-settings: "dnom" 0;
  }
  .frac-feature {
    font-feature-settings: "frac" 1;
  }
  .frac-feature:hover {
    font-feature-settings: "frac" 0;
  }
  .ordn-feature {
    font-feature-settings: "ordn" 1;
  }
  .ordn-feature:hover {
    font-feature-settings: "ordn" 0;
  }
  .tnum-feature {
    font-feature-settings: "tnum" 1;
  }
  .tnum-feature:hover {
    font-feature-settings: "tnum" 0;
  }
  .onum-feature {
    font-feature-settings: "onum" 1;
  }
  .onum-feature:hover {
    font-feature-settings: "onum" 0;
  }
  .case-feature {
    font-feature-settings: "case" 1;
  }
  .case-feature:hover {
    font-feature-settings: "case" 0;
  }
  .case-feature-varianz {
    font-feature-settings: "case" 1;
  }
  .case-feature-varianz:hover {
    font-feature-settings: "case" 0;
    font-feature-settings: "calt" 0;
  }
  .liga-feature {
    font-feature-settings: "liga" 1;
  }
  .liga-feature:hover {
    font-feature-settings: "liga" 0;
  }
  .ss01-feature {
    font-feature-settings: "ss01" 1;
  }
  .ss01-feature:hover {
    font-feature-settings: "ss01" 0;
  }
  #toggleStateEgenCalt,
  #toggleStateEgenSubs,
  #toggleStateEgenFrac,
  #toggleStateEgenOrdn,
  #toggleStateEgenTnum,
  #toggleStateEgenOnum,
  #toggleStateEgenCase {
    color: var(--egen);
  }
  #toggleStateVarianzSuperfamilyCalt,
  #toggleStateVarianzSuperfamilySubs,
  #toggleStateVarianzSuperfamilyFrac,
  #toggleStateVarianzSuperfamilyOrdn,
  #toggleStateVarianzSuperfamilyTnum,
  #toggleStateVarianzSuperfamilyOnum,
  #toggleStateVarianzSuperfamilyCase {
    color: var(--varianz-superfamily);
  }
  #toggleStateVarianzSansCalt,
  #toggleStateVarianzSansSubs,
  #toggleStateVarianzSansFrac,
  #toggleStateVarianzSansOrdn,
  #toggleStateVarianzSansTnum,
  #toggleStateVarianzSansOnum,
  #toggleStateVarianzSansCase {
    color: var(--varianz-sans);
  }
  #toggleStateVarianzMixCalt,
  #toggleStateVarianzMixSubs,
  #toggleStateVarianzMixFrac,
  #toggleStateVarianzMixOrdn,
  #toggleStateVarianzMixTnum,
  #toggleStateVarianzMixOnum,
  #toggleStateVarianzMixCase {
    color: var(--varianz-mix-hell);
  }
  #toggleStateVarianzSerifCalt,
  #toggleStateVarianzSerifSubs,
  #toggleStateVarianzSerifFrac,
  #toggleStateVarianzSerifOrdn,
  #toggleStateVarianzSerifTnum,
  #toggleStateVarianzSerifOnum,
  #toggleStateVarianzSerifCase {
    color: var(--varianz-serif);
  }
  #toggleStateChoreoCollectionCalt,
  #toggleStateChoreoCollectionSubs,
  #toggleStateChoreoCollectionFrac,
  #toggleStateChoreoCollectionOrdn,
  #toggleStateChoreoCollectionTnum,
  #toggleStateChoreoCollectionOnum,
  #toggleStateChoreoCollectionCase,
  #toggleStateChoreoCollectionLiga {
    color: var(--choreo-collection);
  }
  #toggleStateChoreoBannerCalt,
  #toggleStateChoreoBannerSubs,
  #toggleStateChoreoBannerFrac,
  #toggleStateChoreoBannerOrdn,
  #toggleStateChoreoBannerTnum,
  #toggleStateChoreoBannerOnum,
  #toggleStateChoreoBannerCase,
  #toggleStateChoreoBannerLiga {
    color: var(--choreo-display);
  }
  #toggleStateChoreoDisplayCalt,
  #toggleStateChoreoDisplaySubs,
  #toggleStateChoreoDisplayFrac,
  #toggleStateChoreoDisplayOrdn,
  #toggleStateChoreoDisplayTnum,
  #toggleStateChoreoDisplayOnum,
  #toggleStateChoreoDisplayCase,
  #toggleStateChoreoDisplayLiga {
    color: var(--choreo-display);
  }
  #toggleStateChoreoTextCalt,
  #toggleStateChoreoTextSubs,
  #toggleStateChoreoTextFrac,
  #toggleStateChoreoTextOrdn,
  #toggleStateChoreoTextTnum,
  #toggleStateChoreoTextOnum,
  #toggleStateChoreoTextCase,
  #toggleStateChoreoTextLiga,
  #toggleStateChoreoTextSs01 {
    color: var(--choreo-text);
  }
  #toggleStateChoreoStencilCalt,
  #toggleStateChoreoStencilSubs,
  #toggleStateChoreoStencilFrac,
  #toggleStateChoreoStencilOrdn,
  #toggleStateChoreoStencilTnum,
  #toggleStateChoreoStencilOnum,
  #toggleStateChoreoStencilCase,
  #toggleStateChoreoStencilLiga,
  #toggleStateChoreoStencilSs01 {
    color: var(--choreo-stencil);
  }
  #toggleStateVolSubs,
  #toggleStateVolFrac,
  #toggleStateVolOrdn {
    color: var(--vol);
  }
  #toggleStateElephantCalt,
  #toggleStateElephantSups,
  #toggleStateElephantOrdn,
  #toggleStateElephantCase,
  #toggleStateElephantLiga {
    color: var(--elephant);
  }
  #toggleStateScytheSerifSs01,
  #toggleStateScytheSerifLiga {
    color: var(--scytheserif);
  }

  .collapsible-with-flex {
    display: flex;
    margin-bottom: 37.5px;
  }
  .collapsible-with-flex-content-div {
    width: 50%;
    margin-right: 30px;
  }
  .collapsible-with-flex-content-div:last-child {
    margin-right: 0;
  }
/*OPENTYPE*/
/*Ausklappbarer Teil*//*Ausklappbarer Teil*//*Ausklappbarer Teil*/


.info {
  color: var(--grey-dark-info);
}
.tabular {
  font-feature-settings: "tnum";
}




/*CHARACTERSET*/
  .characterset {
    margin-bottom: 45px;
  }
  .font-selector {
    padding: 5px 15px 7.5px 15px;
    margin-right: 22.5px;
    margin-bottom: 30px;
    border: 1px solid var(--white);
    background: var(--black);
    color: var(--white);
    font-size: 20px;
    transition: var(--transitionGeneral);
    cursor: pointer;
    z-index: 2;
  }
  .font-selector:last-child {
    margin-right: 0;
  }
  .font-selector-egen:hover {
    color: var(--egen);
    border: 1px solid var(--egen);
  }
  .font-selector-egen[selected] {
    color: var(--egen);
    border: 1px solid var(--egen);
  }
  .font-selector-choreo-collection:hover {
    color: var(--choreo-collection);
    border: 1px solid var(--choreo-collection);
  }
  .font-selector-choreo-collection[selected] {
    color: var(--choreo-collection);
    border: 1px solid var(--choreo-collection);
  }
  .font-selector-choreo-text:hover {
    color: var(--choreo-text);
    border: 1px solid var(--choreo-text);
  }
  .font-selector-choreo-text[selected] {
    color: var(--choreo-text);
    border: 1px solid var(--choreo-text);
  }
  .font-selector-choreo-stencil:hover {
    color: var(--choreo-stencil);
    border: 1px solid var(--choreo-stencil);
  }
  .font-selector-choreo-stencil[selected] {
    color: var(--choreo-stencil);
    border: 1px solid var(--choreo-stencil);
  }
  .font-selector-choreo-display:hover {
    color: var(--choreo-display);
    border: 1px solid var(--choreo-display);
  }
  .font-selector-choreo-display[selected] {
    color: var(--choreo-display);
    border: 1px solid var(--choreo-display);
  }
  .font-selector-varianz-superfamily:hover {
    color: var(--varianz-superfamily);
    border: 1px solid var(--varianz-superfamily);
  }
  .font-selector-varianz-superfamily[selected] {
    color: var(--varianz-superfamily);
    border: 1px solid var(--varianz-superfamily);
  }
  .font-selector-varianz-sans:hover {
    color: var(--varianz-sans);
    border: 1px solid var(--varianz-sans);
  }
  .font-selector-varianz-sans[selected] {
    color: var(--varianz-sans);
    border: 1px solid var(--varianz-sans);
  }
  .font-selector-varianz-mix:hover {
    color: var(--varianz-mix-hell);
    border: 1px solid var(--varianz-mix-hell);
  }
  .font-selector-varianz-mix[selected] {
    color: var(--varianz-mix-hell);
    border: 1px solid var(--varianz-mix-hell);
  }
  .font-selector-varianz-serif:hover {
    color: var(--varianz-serif);
    border: 1px solid var(--varianz-serif);
  }
  .font-selector-varianz-serif[selected] {
    color: var(--varianz-serif);
    border: 1px solid var(--varianz-serif);
  }
  .font-selector-vol:hover {
    color: var(--vol);
    border: 1px solid var(--vol);
  }
  .font-selector-vol[selected] {
    color: var(--vol);
    border: 1px solid var(--vol);
  }
  .font-selector-elephant {
    padding: 7px 15px 5.5px 15px;
    margin-right: 22.5px;
    margin-bottom: 30px;
    border: 1px solid var(--white);
    background: var(--black);
    color: var(--white);
    font-size: 20px;
    transition: var(--transitionGeneral);
    cursor: pointer;
    z-index: 2;
  }
  .font-selector-elephant:hover {
    color: var(--elephant);
    border: 1px solid var(--vol);
  }
  .font-selector-elephant[selected] {
    color: var(--elephant);
    border: 1px solid var(--elephant);
  }
  .font-selector-scytheserif {
    padding: 7px 15px 5.5px 15px;
    margin-right: 22.5px;
    margin-bottom: 30px;
    border: 1px solid var(--white);
    background: var(--black);
    color: var(--white);
    font-size: 20px;
    transition: var(--transitionGeneral);
    cursor: pointer;
    z-index: 2;
  }
  .font-selector-scytheserif:hover {
    color: var(--scytheserif);
    border: 1px solid var(--scytheserif);
  }
  .font-selector-scytheserif[selected] {
    color: var(--scytheserif);
    border: 1px solid var(--scytheserif);
  }
  .characters {
      width: 100%;
      list-style-type: none;
      padding: 0;
      margin: 0 0 30px 0;
      display: flex;
      flex-wrap: wrap;
  }
  .character {
      width: calc((100% + 29px) / 30);;
      border: 1px solid var(--white);
      height: auto;
      margin-right: -1px;
      margin-bottom: -1px;
      box-sizing: border-box;
      border-collapse: collapse;
      background-color: var(--black);
      transition: transform 0.3s;
      fill: var(--white);
  }
  .character:hover {
      transform: scale(2.5);
      border-radius: 4px;
      background-color: var(--white);
      fill: var(--black);
      border: none;
  }
  .character::after {
      content: attr(data-unicode);
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--grey-light-info);
      font-size: 5px;
      font-family: var(--mainFontFamily);, sans-serif;
      z-index: 1;
      visibility: hidden;
  }
  .character:hover::after {
      visibility: visible;
  }
/*CHARACTERSET*/

.info {
  color: var(--grey-dark-info);
}
.table-with-border {
  width: 100%;
}
.table-with-border table {
  width: 100%;
  border-collapse: collapse;
  padding-top: 0;
}
.table-with-border tr {
  border-bottom: 1px solid var(--white);
}
.table-with-border tr:last-child {
  border-bottom: none;
}
.table-with-border td {
  padding-top: 5px;
  padding-bottom: 7.5px;
  width: 50%;
  vertical-align: top;
}
.without-padding-top td {
  padding-top: 0;
  width: 50%;
  vertical-align: top;
}
.body-imprint-data-privacy td:nth-child(2n-1) {
  padding-right: 30px;
}
.table-2-rows {
  width: 100%;
}
.table-2-rows table {
  width: 100%;
  border-collapse: collapse;
  padding-top: 0;
}
.table-2-rows td {
  width: 50%;
  vertical-align: top;
}
.language-support {
  margin-bottom: 45px;
}
.multi-row-list-container {
  display: flex;
  width: 100%;
}
.multi-row-list-subcontainer1 {
  display: flex;
  width: 50%;
  margin-right: 30px;
}
.multi-row-list-subcontainer1:last-child {
  margin-right: 0;
}
.multi-row-list-subcontainer2 {
  display: flex;
  width: 50%;
}
.multi-row-list{
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.multi-row-list li {
  box-sizing: border-box;
}

.pair-with-links-container-only-black {
  justify-content: center;
  align-items: center;
  margin-bottom: 45px;
}
.pair-with-links-container-only-black a {
  text-decoration: none;
  color: var(--black);
}
.pair-with-links-container {
  justify-content: center;
  align-items: center;
  margin-bottom: 45px;
}
.pair-with-links-container-choreo {
  background-color: var(--choreo-display);
}
.pair-with-links-container-choreocollection {
  background-color: var(--choreo-collection);
}
.pair-with-links-container-varianzsuperfamily {
  background-color: var(--varianz-superfamily);
}
.pair-with-links-container-choreostencil {
  background-color: var(--choreo-stencil);
}
.pair-with-links-container-varianzsans {
  background-color: var(--varianz-sans);
}
.pair-with-links-container-vol {
  background-color: var(--vol);
}
.pair-with-links-container-elephant {
  background-color: var(--elephant);
}
.pair-with-links-container-egen {
  background-color: var(--egen);
}
.pair-with-links-container-scytheserif {
  background-color: var(--scytheserif);
}
.pair-with-links-container-only-black .collapsible-subcontent-singlestyles,
.pair-with-links-container .collapsible-subcontent-singlestyles {
  font-family: var(--mainFontFamily);
  font-size: var(--fontSizeGeneral);
  line-height: 1.625;
}
.pair-with-links-container a {
  text-decoration: none;
  color: var(--black);
}
.pair-with-links {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 120px;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  display: flex;
}
.pair-with-links-line-horizontal-only-black {
  width: 100%;
  height: 1px;
  background-color: var(--black);
  margin-bottom: 7.5px;
}
.pair-with-links-line-horizontal {
  width: 100%;
  height: 1px;
  background-color: var(--black);
  margin-bottom: 7.5px;
}
.pair-with-links .collapsible-content-singlestyles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.pair-with-links .collapsible-subcontent-singlestyles {
  position: relative;
  width: calc((100% - 30px) / 2);
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
.pair-with-links .collapsible-subcontent-singlestyles:last-child {
  margin-right: 0;
}
.pair-with-links .collapsible-subcontent-singlestyles a:nth-child(2) {
  margin-top: calc(100% + 7.5px);
}
.pair-with-links-content-full .collapsible-subcontent-singlestyles {
  position: relative;
  width: calc((100% - 90px) / 4);
  margin-right: 30px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
}
.pair-with-links-content-half {
  width: 50%;
  margin-right: 30px;
}
.pair-with-links-content-half:last-child {
  margin-right: 0;
}
.pair-with-links-content-full {
  width: 100%;
  margin-right: 30px;
}
.pair-with-links-content-full:last-child {
  margin-right: 0;
}
.big-headline-only-black {
    padding: 0 0 12.5px 0;
    width: 100%;
    text-align: left;
    font-size: 20px;
    font-family: VZWO VARIANZ Low Sans;
    color: var(--black);
}
.big-headline {
    padding: 0 0 12.5px 0;
    width: 100%;
    text-align: left;
    font-size: 20px;
    font-family: VZWO VARIANZ Low Sans;
    color: var(--black);
}
.pair-with-links .single-style-svg-before {
  background: var(--black);
  z-index: 1;
}
.pair-with-links .collapsible-subcontent-singlestyles:hover .single-style-svg-before {
  transition: opacity 1s ease;
  opacity: 0;
}
.pair-with-links .collapsible-subcontent-singlestyles:hover p {
  color: var(--black);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreotext:hover span {
  color: var(--white);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreotext:hover span:nth-child(2) {
  color: var(--black);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreostencil-pair-with:hover span {
  color: var(--choreo-text);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreostencil-pair-with:hover span:nth-child(2) {
  color: var(--choreo-text);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreostencil:hover span {
  color: var(--white);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreostencil:hover span:nth-child(2) {
  color: var(--black);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreodisplay:hover span {
  color: var(--white);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-choreodisplay:hover span:nth-child(2) {
  color: var(--black);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-varianzsuperfamily:hover span {
  color: var(--white);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-varianzsuperfamily:hover span:nth-child(2) {
  color: var(--black);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-varianzsans:hover span:nth-child(2) {
  color: var(--varianz-sans);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-varianzmix:hover span:nth-child(2) {
  color: var(--varianz-mix);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.pair-with-links .collapsible-subcontent-singlestyles-varianzserif:hover span:nth-child(2) {
  color: var(--varianz-serif);
  filter: opacity(50%);
  transition: var(--transitionGeneral);
}
.varianz-superfamily-image {
  fill: var(--white);
  stroke: var(--white);
  stroke-width: .5px;
}

/*TYPEFACES*/
.typefaces-family-overview-container {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 45px;
}
.typefaces-family-overview {
  margin-bottom: 30px;
}
.appear-on-768 {
  display: none;
}
.typefaces-family-title {
  font-size: var(--fontSizeFamilyOverviewTitle);
  display: block;
  margin-bottom: -5px;
}
@keyframes varianz-title-animation {
  0% {
    font-variation-settings: "EXPR" 0, "SERI" 0;
  }
  25% {
    font-variation-settings: "EXPR" 100, "SERI" 0;
  }
  50% {
    font-variation-settings: "EXPR" 100, "SERI" 100;
  }
  75% {
    font-variation-settings: "EXPR" 0, "SERI" 100;
  }
  100% {
    font-variation-settings: "EXPR" 0, "SERI" 0;
  }
}
.typefaces-family-title-varianzsuperfamily {
  font-family: VZWO VARIANZ Variable;
  transition: font-variation-settings 0.3s ease;
  animation-name: varianz-title-animation;
  animation-duration: 2.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.typefaces-family-overview-varianzsuperfamily:hover .typefaces-family-info-varianz {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-varianzsuperfamily:hover .typefaces-family-info-varianz span {
  color: var(--varianz-superfamily);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-choreocollection {
  position: relative;
}
.typefaces-family-title-choreocollection {
  font-family: VZWO Choreo Display Thin;
}
.typefaces-family-overview-choreocollection .typefaces-family-title-choreocollection:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block; 
  opacity: 1;
}
.typefaces-family-overview-choreocollection .typefaces-family-title-choreocollection:nth-child(2) {
  display: block;
  opacity: 0;
  pointer-events: none;
}
.typefaces-family-overview-choreocollection:hover .typefaces-family-title-choreocollection:first-child {
  opacity: 0;
  pointer-events: none;
}
.typefaces-family-overview-choreocollection:hover .typefaces-family-title-choreocollection:nth-child(2) {
  opacity: 1;
  pointer-events: auto;
}
@keyframes changeStylesChoreoCollection {
    0%, 20% {
        font-family: VZWO Choreo Banner Thin;
    }
    20%, 40% {
        font-family: VZWO Choreo Display Thin;
    }
    40%, 60% {
        font-family: VZWO Choreo Display Black;
    }
    60%, 80% {
        font-family: VZWO Choreo Text Regular;
    }
    80%, 100% {
        font-family: VZWO Choreo Text Italic;
    }
}
.typefaces-family-overview-choreocollection:hover .typefaces-family-title-choreocollection {
    animation: changeStylesChoreoCollection 2.5s steps(1) infinite;
}
.typefaces-family-overview-choreocollection:hover .typefaces-family-info-choreocollection {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-choreocollection:hover .typefaces-family-info-choreocollection span {
  color: var(--choreo-collection);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-choreostencil {
  font-family: VZWO Choreo Stencil Variable;
  transition: font-variation-settings 0.3s ease;
  animation-name: choreostencil-title-animation;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
@keyframes choreostencil-title-animation {
  0% {
    font-variation-settings: "wght" 400;
  }
  100% {
    font-variation-settings: "wght" 900;
  }
}
@keyframes choreotext-title-animation-italic {
  0% {
    font-variation-settings: "wght" 400;
  }
  100% {
    font-variation-settings: "wght" 900;
  }
}
.typefaces-family-title-choreotext-italic {
  font-family: VZWO Choreo Text Variable Italic;
  transition: font-variation-settings 0.3s ease;
  animation-name: choreotext-title-animation-italic;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
@keyframes choreotext-title-animation {
  0% {
    font-variation-settings: "wght" 400;
  }
  100% {
    font-variation-settings: "wght" 900;
  }
}
.typefaces-family-title-choreotext {
  font-family: VZWO Choreo Text Variable Upright;
  transition: font-variation-settings 0.3s ease;
  animation-name: choreotext-title-animation;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
.typefaces-family-overview-choreotext:hover .typefaces-family-title-choreotext {
  font-family: VZWO Choreo Text Variable Italic;
}
.typefaces-family-overview-choreotext:hover .typefaces-family-info-choreotext {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-choreotext:hover .typefaces-family-info-choreotext span {
  color: var(--choreo-text);
  transition: var(--transitionGeneral);
}
@keyframes choreostencil-title-animation {
  0% {
    font-variation-settings: "wght" 400;
  }
  100% {
    font-variation-settings: "wght" 900;
  }
}
.typefaces-family-title-choreostencil {
  font-family: VZWO Choreo Stencil Variable;
  transition: font-variation-settings 0.3s ease;
  animation-name: choreostencil-title-animation;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
.typefaces-family-overview-choreostencil:hover .typefaces-family-info-choreostencil {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-choreostencil:hover .typefaces-family-info-choreostencil span {
  color: var(--choreo-stencil);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-choreobanner {
  font-family: VZWO Choreo Banner Thin;
  text-transform: uppercase;
}
.typefaces-family-overview-choreobanner:hover .typefaces-family-title-choreobanner {
  text-transform: none;
}
.typefaces-family-overview-choreobanner:hover .typefaces-family-info-choreobanner {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-choreobanner:hover .typefaces-family-info-choreobanner span {
  color: var(--choreo-display);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-choreodisplay {
  font-family: VZWO Choreo Display Black;
}
.typefaces-family-overview-choreodisplay:hover .typefaces-family-title-choreodisplay {
  font-family: VZWO Choreo Display Thin;
}
.typefaces-family-overview-choreodisplay:hover .typefaces-family-info-choreodisplay {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-choreodisplay:hover .typefaces-family-info-choreodisplay span {
  color: var(--choreo-display);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-elephant {
  font-family: VZWO Elephant;
}
.typefaces-family-overview-elephant:hover .typefaces-family-info-elephant {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-elephant:hover .typefaces-family-info-elephant span {
  color: var(--elephant);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-egen {
  font-family: VZWO Egen UltraCondensed Black;
}
.typefaces-family-overview-egen:hover .typefaces-family-info-egen {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-egen:hover .typefaces-family-info-egen span {
  color: var(--egen);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-scytheserif {
  font-family: VZWO ScytheSerif;
}
.typefaces-family-overview-scytheserif:hover .typefaces-family-info-scytheserif {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-scytheserif:hover .typefaces-family-info-scytheserif span {
  color: var(--scytheserif);
  transition: var(--transitionGeneral);
}
@keyframes vol-title-animation {
  0% {
    font-variation-settings: "slnt" -12, "VOLU" 100;
  }
  12.5% {
    font-variation-settings: "slnt" 0, "VOLU" 400;
  }
  25% {
    font-variation-settings: "slnt" 12, "VOLU" 900;
  }
  37.5% {
    font-variation-settings: "slnt" 12, "VOLU" 800;
  }
  50% {
    font-variation-settings: "slnt" 0, "VOLU" 800;
  }
  62.5% {
    font-variation-settings: "slnt" -12, "VOLU" 100;
  }
  75% {
    font-variation-settings: "slnt" 8, "VOLU" 700;
  }
  87.5% {
    font-variation-settings: "slnt" 10, "VOLU" 200;
  }
  100% {
    font-variation-settings: "slnt" 12, "VOLU" 900;
  }
}
.typefaces-family-title-vol {
  font-family: VZWO VOL Variable;
  transition: font-variation-settings 0.3s ease;
  animation-name: vol-title-animation;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.typefaces-family-overview-vol:hover .typefaces-family-info-vol {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-vol:hover .typefaces-family-info-vol span {
  color: var(--vol);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-varianzsans {
  font-family: VZWO VARIANZ Low Sans;
}
@keyframes changeStylesVarianzSans {
    0%, 33.33% {
        font-family: VZWO VARIANZ High Sans;
    }
    33.33%, 66.66% {
        font-family: VZWO VARIANZ Mid Sans;
    }
    66.66%, 100% {
        font-family: VZWO VARIANZ Low Sans;
    }
}
.typefaces-family-overview-varianzsans:hover .typefaces-family-title-varianzsans {
    animation: changeStylesVarianzSans 2.5s steps(1) infinite;
}
.typefaces-family-overview-varianzsans:hover .typefaces-family-info-varianzsans {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-varianzsans:hover .typefaces-family-info-varianzsans span {
  color: var(--varianz-sans);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-varianzmix {
  font-family: VZWO VARIANZ High Mix;
}
@keyframes changeStylesVarianzMix {
    0%, 33.33% {
        font-family: VZWO VARIANZ Low Mix;
    }
    33.33%, 66.66% {
        font-family: VZWO VARIANZ Mid Mix;
    }
    66.66%, 100% {
        font-family: VZWO VARIANZ High Mix;
    }
}
.typefaces-family-overview-varianzmix:hover .typefaces-family-title-varianzmix {
    animation: changeStylesVarianzMix 2.5s steps(1) infinite;
}
.typefaces-family-overview-varianzmix:hover .typefaces-family-info-varianzmix {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-varianzmix:hover .typefaces-family-info-varianzmix span {
  color: var(--varianz-mix);
  transition: var(--transitionGeneral);
}
.typefaces-family-title-varianzserif {
  font-family: VZWO VARIANZ Low Serif;
}
@keyframes changeStylesVarianzSerif {
    0%, 33.33% {
        font-family: VZWO VARIANZ High Serif;
    }
    33.33%, 66.66% {
        font-family: VZWO VARIANZ Mid Serif;
    }
    66.66%, 100% {
        font-family: VZWO VARIANZ Low Serif;
    }
}
.typefaces-family-overview-varianzserif:hover .typefaces-family-title-varianzserif {
    animation: changeStylesVarianzSerif 2.5s steps(1) infinite;
}
.typefaces-family-overview-varianzserif:hover .typefaces-family-info-varianzserif {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.typefaces-family-overview-varianzserif:hover .typefaces-family-info-varianzserif span {
  color: var(--varianz-serif);
  transition: var(--transitionGeneral);
}
.distance {
  height: 92.5px;
}
.distance-2 {
  height: 60px;
}
.distance-3 {
  height: 22.5px;
}
.distance-4 {
  height: 90px;
}
.distance-4-reduced {
  height: 87px;
}
.vzwo-singlestyles {
  margin-bottom: 45px;
}
.collapsible-content-singlestyles {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  width: 100%;
}
.collapsible-subcontent-singlestyles {
  position: relative;
  width: calc((100% - 90px) / 4);
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
.collapsible-subcontent-singlestyles:nth-child(4n) {
  margin-right: 0;
}
.collapsible-subcontent-singlestyles a:nth-child(2) {
  margin-top: calc(100% + 7.5px);
}
.single-style-svg-before,
.single-style-svg-after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--rounding-general);
  fill: var(--white);
}
.single-style-svg-before {
  background: var(--grey-dark);
  z-index: 1;
}
.single-style-svg-after {
  z-index: 2;
  opacity: 0;
  transition: var(--transitionSinglestylesGradient);
}
.single-style-svg-after-choreotext {
  background: var(--choreo-text-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-choreotext {
  opacity: 1;
}
.single-style-svg-after-choreostencil {
  background: var(--choreo-stencil-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-choreostencil {
  opacity: 1;
}
.single-style-svg-after-egen {
  background: var(--egen-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-egen {
  opacity: 1;
}
.single-style-svg-after-choreodisplay {
  background: var(--choreo-display-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-choreodisplay {
  opacity: 1;
}
.single-style-svg-after-varianzsuperfamily {
  background: var(--varianz-superfamily-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-varianzsuperfamily {
  opacity: 1;
}
.single-style-svg-after-varianzsans {
  background: var(--varianz-sans-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-varianzsans {
  opacity: 1;
}
.single-style-svg-after-varianzmix {
  background: var(--varianz-mix-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-varianzmix {
  opacity: 1;
}
.single-style-svg-after-varianzserif {
  background: var(--varianz-serif-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-varianzserif {
  opacity: 1;
}
.single-style-svg-after-elephant {
  background: var(--elephant-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-elephant {
  opacity: 1;
}
.single-style-svg-after-scytheserif {
  background: var(--scytheserif-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-scytheserif {
  opacity: 1;
}
.single-style-svg-after-vol {
  background: var(--vol-gradient-dark);
}
.collapsible-subcontent-singlestyles:hover .single-style-svg-after-vol {
  opacity: 1;
}
.collapsible-subcontent-singlestyles:hover p {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-egen:hover span {
  color: var(--egen);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-choreodisplay:hover span {
  color: var(--choreo-display);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-choreotext:hover span {
  color: var(--choreo-text);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-choreostencil:hover span {
  color: var(--choreo-stencil);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-varianz:hover span {
  color: var(--varianz-superfamily);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-varianzsans:hover span {
  color: var(--varianz-sans);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-varianzmix:hover span {
  color: var(--varianz-mix);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-varianzserif:hover span {
  color: var(--varianz-serif);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-elephant:hover span {
  color: var(--elephant);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-scytheserif:hover span {
  color: var(--scytheserif);
  transition: var(--transitionGeneral);
}
.collapsible-subcontent-singlestyles-vol:hover span {
  color: var(--vol);
  transition: var(--transitionGeneral);
}
.families-collections .with-flex-content-div {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
}
.with-flex-content-div-double-container {
  width: calc(2 * ((100% - 60px) / 3) + 30px);
  display: flex;
  margin-right: 0;
  padding-right: 0;
}
.with-flex-content-div-double {
  width: calc((100% - 30px) / 2);
  margin-right: 30px;
}
.with-flex-content-div-double:last-child {
  margin-right: 0;
}
.families-collections .text-with-small-headline-and-line:hover .small-headline p{
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.coming-soon p {
  color: var(--grey-dark-info);
}
.line-horizontal-coming-soon {
  width: 100%;
  height: 1px;
  background-color: var(--grey-dark-info);
  margin-bottom: 7.5px;
}
.varianz-variablesuperfamily:hover span {
  color: var(--varianz-superfamily);
  transition: var(--transitionGeneral);
}
.egen:hover span {
  color: var(--egen);
  transition: var(--transitionGeneral);
}
.choreo-collection:hover span {
  color: var(--choreo-display);
  transition: var(--transitionGeneral);
}
.choreo-banner:hover span {
  color: var(--choreo-display);
  transition: var(--transitionGeneral);
}
.choreo-display:hover span {
  color: var(--choreo-display);
  transition: var(--transitionGeneral);
}
.choreo-text:hover span {
  color: var(--choreo-text);
  transition: var(--transitionGeneral);
}
.choreo-stencil:hover span {
  color: var(--choreo-stencil);
  transition: var(--transitionGeneral);
}
.varianz-sans:hover span {
  color: var(--varianz-sans);
  transition: var(--transitionGeneral);
}
.varianz-mix:hover span {
  color: var(--varianz-mix);
  transition: var(--transitionGeneral);
}
.varianz-serif:hover span {
  color: var(--varianz-serif);
  transition: var(--transitionGeneral);
}
.elephant:hover span {
  color: var(--elephant);
  transition: var(--transitionGeneral);
}
.scytheserif:hover span {
  color: var(--scytheserif);
  transition: var(--transitionGeneral);
}
.vol:hover span {
  color: var(--vol);
  transition: var(--transitionGeneral);
}
/*TYPEFACES*/


/*INDEX*/
.title-index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(60vh - 50px);
  font-size: var(--fontSizeTitle);
  color: var(--black);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--rounding-general);
}
.index-title-animation-container {
  padding: 50px 30px 0px 30px;
}
.index-title-animation-container a{
  text-decoration: none;
  cursor: pointer;
}
.title-choreo-collection-index {
  background-color: var(--choreo-collection);
  background-image: var(--choreo-collection-gradient-light);
  padding-bottom: 50px;
  font-family: VZWO Choreo Text Regular;
}
.title-choreo-text-index {
  background-color: var(--choreo-text);
  background-image: var(--choreo-text-gradient-light);
  padding-bottom: 50px;
  font-family: VZWO Choreo Text Variable Upright;
  transition: font-variation-settings 0.3s ease;
  animation-name: title-choreo-text-index-animation;
  animation-duration: 1.125s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
@keyframes title-choreo-text-index-animation {
  0% {
  	font-family: VZWO Choreo Text Variable Upright;
	font-variation-settings: "wght" 400;
  }
  25% {
  	font-family: VZWO Choreo Text Variable Upright;
    font-variation-settings: "wght" 900;
  }
  50% {
  	font-family: VZWO Choreo Text Variable Italic;
    font-variation-settings: "wght" 900;
  }
  75% {
  	font-family: VZWO Choreo Text Variable Italic;
	font-variation-settings: "wght" 400;
  }
  100% {
  	font-family: VZWO Choreo Text Variable Italic;
	font-variation-settings: "wght" 400;
  }
}
.title-choreo-stencil-index {
  background-color: var(--choreo-stencil);
  background-image: var(--choreo-stencil-gradient-light);
  padding-bottom: 50px;
  font-family: VZWO Choreo Stencil Variable;
  transition: font-variation-settings 0.3s ease;
  animation-name: title-choreo-stencil-index-animation;
  animation-duration: 1.125s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
@keyframes title-choreo-stencil-index-animation {
  0% {
  	font-family: VZWO Choreo Stencil Variable;
	font-variation-settings: "wght" 400;
  }
  50% {
  	font-family: VZWO Choreo Stencil Variable;
    font-variation-settings: "wght" 900;
  }
  100% {
  	font-family: VZWO Choreo Stencil Variable;
	font-variation-settings: "wght" 400;
  }
}
.title-choreo-banner-thin-index {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-light);
  font-family: VZWO Choreo Banner Thin;
  text-transform: uppercase;
  padding-bottom: 50px;
}
.title-choreo-display-black-index {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-light);
  font-family: VZWO Choreo Display Black;
  padding-bottom: 50px;
}
.title-choreo-display-thin-index {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-light);
  font-family: VZWO Choreo Display Thin;
  padding-bottom: 50px;
}
.title-egen-index {
  background-color: var(--egen);
  background-image: var(--egen-gradient-light);
  font-family: VZWO Egen UltraCondensed Black;
  padding-bottom: 50px;
}
.title-varianz-superfamily-index {
  background-color: var(--varianz-superfamily);
  background-image: var(--varianz-superfamily-gradient-light);
  padding-bottom: 75px;
  font-family: VZWO VARIANZ Variable;
  transition: font-variation-settings 0.3s ease;
  animation-name: varianz-title-animation;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
.title-varianz-sans-index {
  background-color: var(--varianz-sans);
  background-image: var(--varianz-sans-gradient-light);
  font-family: VZWO VARIANZ Low Sans;
  padding-bottom: 75px;
}
.title-varianz-mix-index {
  background-color: var(--varianz-mix);
  background-image: var(--varianz-mix-gradient-light);
  font-family: VZWO VARIANZ High Mix;
  padding-bottom: 75px;
}
.title-varianz-serif-index {
  background-color: var(--varianz-serif);
  background-image: var(--varianz-serif-gradient-light);
  font-family: VZWO VARIANZ High Serif;
  padding-bottom: 75px;
}
.title-vol-index {
  background-color: var(--vol);
  background-image: var(--vol-gradient-light);
  padding-bottom: 67.5px;
  font-family: VZWO VOL Variable;
  transition: font-variation-settings 0.3s ease;
  animation-name: title-vol-index-animation;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, .01, .06, 1);
}
@keyframes title-vol-index-animation {
  0% {
    font-variation-settings: "slnt" 12, "VOLU" 900;
  }
  50% {
    font-variation-settings: "slnt" 0, "VOLU" 100;
  }
  100% {
    font-variation-settings: "slnt" -12, "VOLU" 900;
  }
}
.title-elephant-index {
  background-color: var(--elephant);
  background-image: var(--elephant-gradient-light);
  font-family: VZWO Elephant;
  padding-bottom: 35px;
}
.title-scytheserif-index {
  background-color: var(--scytheserif);
  background-image: var(--scytheserif-gradient-light);
  font-family: VZWO ScytheSerif;
  padding-bottom: 25px;
}
.typefaces-visuals-index-full-width {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}
.typefaces-visuals-index-half-width {
  position: relative;
  width: calc((100% - 30px) / 2);
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
.typefaces-visuals-index-half-width:last-child {
  margin-right: 0;
}
.specimen-tripple-width-container {
  display: flex;
}
.typefaces-visuals-index-tripple-width {
  position: relative;
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
.typefaces-visuals-index-tripple-width:last-child {
  margin-right: 0;
}
.typefaces-visuals-index-full-width:hover,
.typefaces-visuals-index-half-width:hover,
.typefaces-visuals-index-tripple-width:hover {
  cursor: pointer;
}
.typefaces-visuals-index-tripple-width img {
  border-radius: var(--rounding-general);
  margin-bottom: 2.5px;
}
.typefaces-visuals-index-tripple-width svg {
  margin-bottom: 2.5px;
}
.typefaces-visuals-index-full-width svg {
  margin-bottom: 7.5px;
}
.typefaces-visuals-index-full-width:hover a {
  transition: var(--transitionGeneral);
  color: var(--grey-dark-info);
}
.typefaces-visuals-index-half-width video {
  width: 100%;
  margin-bottom: 2.5px;
  border-radius: var(--rounding-general);
}
.typefaces-visuals-index-half-width:hover a {
  transition: var(--transitionGeneral);
  color: var(--grey-dark-info);
}
.typefaces-visuals-index-tripple-width:hover a {
  transition: var(--transitionGeneral);
  color: var(--grey-dark-info);
}
.collapsible-index {
  margin-top: -45px;
  padding-bottom: 90px;
  padding-top: 27.5px;
  display: block;
}
.background-varianz-superfamily-gradient {
  background-image: var(--varianz-superfamily-gradient-dark);
}
.typefaces-visuals-index-tripple-width.collapsible-subcontent-singlestyles-choreodisplay:hover span:nth-child(2) {
  color: var(--white);
  transition: var(--transitionGeneral);
}
 .choreo-collection-poster-class-1, .choreo-collection-poster-class-2 {
  fill: none;
}
 .choreo-collection-poster-class-3 {
  clip-path: url(#clippath-1);
}
 .choreo-collection-poster-class-4 {
  clip-path: url(#clippath-3);
}
 .choreo-collection-poster-class-5 {
  clip-path: url(#clippath-4);
}
 .choreo-collection-poster-class-6 {
  clip-path: url(#clippath-2);
}
 .choreo-collection-poster-class-2 {
  stroke: var(--black);
  stroke-miterlimit: 10;
  stroke-width: 20px;
}
 .light-mode .choreo-collection-poster-class-2 {
  stroke: var(--white);
}
 .choreo-collection-poster-class-9 {
  clip-path: url(#clippath);
}
.highlight-choreo-collection-poster {
  fill: var(--choreo-collection);
}
.choreo-collection-poster-before {
  background-color: var(--white);
  background-image: var(--white);
  display: block;
}
.choreo-collection-poster-after {
  background-color: var(--white);
  background-image: var(--choreo-collection-gradient-light);
  display: none;
}
.choreo-collection-poster:hover .choreo-collection-poster-before {
  display: none;
}
.choreo-collection-poster:hover .choreo-collection-poster-after {
  display: block;
}
.light-mode .choreo-collection-poster-before {
  background-color: var(--black);
  background-image: var(--black);
}
.light-mode .choreo-collection-poster-after {
  background-color: var(--black);
  background-image: var(--choreo-collection-gradient-dark);
}
.choreo-stencil-index-animation-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rounding-general);
  overflow: hidden;
  margin-bottom: 11px;
}
/*INDEX*/


/*ABOUT*/
.page-headline {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 68px;
  font-family: VZWO Choreo Display Thin;
  font-size: var(--fontSizePageHeadline);
  line-height: 1.25;
}
.page-headline-black {
  font-family: VZWO Choreo Display Black;
}
.about-picture-container {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 87px;
  margin-bottom: 90px;
}
.about-picture {
  border-radius: var(--rounding-general);
  width: calc((100% - 60px) / 3);
}
.page-big-text {
  font-family: VZWO Choreo Text Regular;
  font-size: 32.5px;
  line-height: 1.375;
  margin-bottom: 32px;
}
.page-big-text a:hover {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.page-big-text-italic {
  font-family: VZWO Choreo Text Italic;
  margin-left: calc(((100% - 60px) / 3) + 30px);
  margin-bottom: 118px;
}
/*.page-big-text-bold {
  font-family: VZWO Choreo Text Bold;
}
.page-big-text-bold-italic {
  font-family: VZWO Choreo Text Bold Italic;
}*/
.tabular-figures {
  font-feature-settings: "tnum";
  letter-spacing: -0.5px;
}
.vzwo-atmosphere-image-container {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 7.5px;
}
.vzwo-atmosphere-image-normal {
  width: 100%;
  margin-bottom: -250px;
}
.vzwo-atmosphere-image-wide {
  display: none;
}
.imprint-container {
  margin-top: 87px;
}
.all-caps-big-text {
  font-feature-settings: "case";
}
.data-privacy-container {
  width: 100%;
  display: flex;
  margin-bottom: 45px;
}
.data-privacy-container:last-child {
  margin-bottom: 0;
}
.data-privacy-container-half {
  width: calc((100% - 30px) / 2);
  margin-right: 30px;
  margin-bottom: 30px;
}
.data-privacy-container-half:last-child {
  margin-right: 0;
}
.data-privacy-container-half-last-row {
  width: calc((100% - 30px) / 2);
  margin-right: 30px;
}
.data-privacy-container-half-last-row:last-child {
  margin-right: 0;
}
.data-privacy-content {
  padding-top: 27.5px;
}
.big-headline-main {
  margin-top: -3.75px;
  margin-bottom: -5px; 
  padding: 0 0 12.5px 0;
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-family: VZWO VARIANZ Low Sans;
  color: var(--white);
}
.hyphenate {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
/*ABOUT*/

/*LICENSING*/
.pricelist {
  margin-top: 45px;
}
.table-with-border-pricelist {
  width: 100%;
}
.table-with-border-pricelist table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  padding-top: 0;
}
.table-with-border-pricelist tr {
  border-bottom: 1px solid var(--white);
}
.table-with-border-pricelist tr:last-child {
  border-bottom: none;
}
.table-with-border-pricelist td {
  padding-top: 5px;
  padding-bottom: 7.5px;
  vertical-align: top;
}
.table-with-border-pricelist td:nth-child(2) {
  padding-left: 7.5px;
}
.table-with-border-pricelist td:nth-child(3) {
  padding-left: 15px;
}
.table-with-border-pricelist td:nth-child(4) {
  padding-left: 22.5px;
}
.without-padding-top-pricelist td {
  padding-top: 0;
  vertical-align: top;
}
.pricing-egen-highlight-color:hover,
.pricing-choreo-highlight-color:hover,
.pricing-varianz-superfamily-highlight-color:hover,
.pricing-varianz-sans-highlight-color:hover,
.pricing-varianz-mix-highlight-color:hover,
.pricing-varianz-serif-highlight-color:hover,
.pricing-elephant-highlight-color:hover,
.pricing-scytheserif-highlight-color:hover,
.pricing-vol-highlight-color:hover {
  background-color: var(--white);
  color: var(--black);
  transition: var(--transitionGeneral);
}
.mail-link:hover {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}

/*BESTELLFORMULAR*/
.bestellformular-container {
	position: relative;
	display: flex; 
	justify-content: center;
	align-items: center;
	margin-bottom: 103.75px;
}
.bestellformular {
	width: calc((100% - 30px) / 2);
	padding: 22.5px 30px 30px 30px;
	border-radius: var(--rounding-general);
	background-color: var(--white);
}
.bestellformular-big-headline {
    width: 100%;
    text-align: left;
    font-size: 20px;
    font-family: var(--mainFontFamily);
    color: var(--black);
	margin-bottom: 60px;
}
.bestellformular-line-horizontal {
	width: 100%;
	height: 1px;
	background-color: var(--black);
	margin-bottom: 7.5px;
}
.bestellformular-big-headline-main {
	margin-top: -3.75px;
	margin-bottom: -5px; 
	padding: 0 0 12.5px 0;
	width: 100%;
	text-align: left;
	font-size: 20px;
	font-family: var(--mainFontFamily);
	color: var(--black);
}
.bestellformular-start-button {
	width: 100%;
	text-align: center;
	background-color: var(--black);
	color: var(--white);
    font-size: 20px;
    font-family: var(--mainFontFamily);
	padding: 8px 0 12.5px 0;
	margin: 60px 0 0 0;
	cursor: pointer;
	border: none;
	border-radius: var(--rounding-general);
}
.bestellformular-start-button:hover {
	background-color: var(--check-green);
	color: var(--black);
	transition: var(--transitionGeneral);
}
.bestellformular-container input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}
.bestellformular-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	bottom: -100%;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.875);
	padding-top: 93px;
	transition: bottom 0.5s ease-in-out;
}
.bestellformular-close-container {
	max-width: calc((1440px - 30px) / 2);
	width: calc((100% - 30px) / 2);
	position: relative;
	margin: auto;
}
.bestellformular-close {
	position: absolute;
	width: 30px;
	height: 30px;
	top: -44px;
	right: 0px;
	background: var(--grey-dark-info);
	border: none;
	border-radius: var(--rounding-general);
	transition: background 0.25s ease;
}
.bestellformular-close:hover{
 	background: var(--cancel-red);
}
.bestellformular-close::before,
.bestellformular-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 1px;
	background-color: var(--black);
	transition: background-color 0.25s ease;
}
.bestellformular-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.bestellformular-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.bestellformular-close:hover,
.bestellformular-close:focus {
	cursor: pointer;
}
.bestellformular-modal-content {
	max-width: calc((1440px - 30px) / 2);
	max-height: calc(100vh - 123px);
	width: calc((100% - 30px) / 2);
	padding: 22.5px 30px 30px 30px;
	margin: auto;
	border: none;
	border-radius: var(--rounding-general);
	position: relative;
	background-color: var(--white);
	overflow: auto;
}
.tab {
	display: none;
}
.style-selection-container {
	margin: 30px 0 45px 0;
	color: var(--black);
}
.style-selection-container:last-child {
	margin: 30px 0 0 0;
}
.checkboxes-style-selection {
    width: 100%;
    border: 1px solid var(--black);
    padding: 5px 15px 7.5px 15px;
	margin-bottom: -1px;
    box-sizing: border-box;
	transition: var(--transitionGeneral);
	display: flex;
    align-items: center;
	justify-content: space-between;
}
.checkboxes-style-selection:hover {
	background: var(--selection-hover);
	cursor: pointer;
}
.checkboxes-style-selection:has(input:checked) {
    background: var(--selection-clicked);
}
.checkbox-right-text {
    text-align: right;
	font-feature-settings: "tnum";
}
.bestellformular-info {
	color: var(--black);
	filter: opacity(40%);
}
.bestellformular-container input[type="text"] {
	width: 100%;
	height: auto;
    border: 1px solid var(--black);
    padding: 5px 15px 7.5px 15px;
	margin-bottom: -1px;
	color: var(--grey-light-info);
	transition: var(--transitionGeneral);
}
.bestellformular-container input[type="text"]:hover {
	background-color: var(--selection-hover);
}
.bestellformular-container input[type="text"]:focus {
	background-color: var(--selection-hover);
	color: var(--black);
	outline: none;
}
.bestellformular-container input[type="text"]:not(:placeholder-shown) {
    background-color: var(--selection-clicked);
    color: var(--black);
}
.bestellformular-dropdown-container {
    width: 100%;
    border: 1px solid var(--black);
    padding: 0;
	margin-bottom: -1px;
    box-sizing: border-box;
	transition: var(--transitionGeneral);
	display: flex;
    align-items: left;
	position: relative;
	background-color: var(--white);
}
.bestellformular-dropdown-container:hover {
	background-color: var(--selection-hover);
}
.bestellformular-dropdown-arrow {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 5px 3.75px 0 3.75px;
    border-color: var(--black) transparent transparent transparent;
    pointer-events: none;
}
.bestellformular-dropdown-container select {
    width: 100%;
    padding: 7px 15px 8.5px 30px;
    font-family: var(--mainFontFamily);
	line-height: 1.375;
	color: var(--black);
	cursor: pointer;
	appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
	background-color: transparent;
}
.bestellformular-dropdown-container.selected {
    background-color: var(--selection-clicked);
}
.bestellformular-info-zusatzebene {
	color: var(--grey-light-info);
	padding: 5px 15px 0 15px;
}
.bestellformular-link-zusatzebene {
	color: var(--black);
	padding: 5px 15px 0 15px;
	transition: var(--transitionGeneral);
}
.bestellformular-link-zusatzebene:hover {
	color: var(--grey-light-info);
}
.bestellformular-optional-message input[type="text"] {
	width: 100%;
	height: auto;
    border: 1px solid var(--black);
    padding: 5px 15px 90px 15px;
	margin-bottom: 5px;
	color: var(--grey-light-info);
	transition: var(--transitionGeneral);
}
.bestellformular-optional-message input[type="text"]:hover {
	background-color: var(--selection-hover);
}
.bestellformular-optional-message input[type="text"]:focus {
	background-color: var(--selection-hover);
	color: var(--black);
	outline: none;
}
.bestellformular-optional-message input[type="text"]:not(:placeholder-shown) {
    background-color: var(--selection-clicked);
    color: var(--black);
}
.bestellformular-nav-button-container {
    width: 100%;
	display: flex;
    align-items: center;
	justify-content: space-between;
	margin: 65px 0 -5px 0;
}
.bestellformular-nav-button-container div {
    display: flex;
    align-items: center;
	width: calc((100% - 60px) / 3);
}
.bestellformular-nav-button-previous {
    width: 100%;
    text-align: center;
	background-color: var(--white);
    color: var(--grey-light-info);
    font-size: 20px;
    font-family: var(--mainFontFamily);
	padding: 8px 0 12.5px 0;
    cursor: pointer;
    border: 1px solid var(--grey-light-info);
    border-radius: var(--rounding-general);
    transition: var(--transitionGeneral);
}
.bestellformular-nav-button-previous:hover {
	background-color: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
}
.bestellformular-nav-button-next {
	width: 100%;
	text-align: center;
	background-color: var(--black);
	color: var(--white);
    font-size: 20px;
    font-family: var(--mainFontFamily);
	padding: 8px 0 12.5px 0;
	cursor: pointer;
	border: none;
	border-radius: var(--rounding-general);
    transition: var(--transitionGeneral);
}
.bestellformular-nav-button-next:hover {
    background-color: var(--check-green);
	color: var(--black);
}
.bestellformular-nav-button-next.last-step {
    background-color: var(--black);
    color: var(--white);
}
.bestellformular-nav-button-next.last-step:hover {
    background-color: var(--check-green);
    color: var(--black);
}
.steps-container {
    display: flex;
    justify-content: center;
}
.step {
	font-size: 20px;
	color: var(--grey-light-info);
	padding: 8px 0 12.5px 0;
}
.step.active {
	color: var(--black);
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
.bestellformular-message {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc((100% - 60px));
  width: auto;
  padding: 8px 15px 12.5px 15px;
  border-radius: var(--rounding-general);
  z-index: 1000;
  font-size: var(--fontSizeGeneral);
  line-height: 1.625;
  font-family: var(--mainFontFamily);
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
}
.bestellformular-message.show {
  top: 93px;
  opacity: 1;
}
.bestellformular-message.success {
  background-color: var(--check-green);
  color: var(--black);
}
.bestellformular-message.error {
  background-color: var(--cancel-red);
  color: var(--black);
}
/*BESTELLFORMULAR*/

/*LICENSING*/

/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/
.early-access-container {
	position: relative;
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
}
.early-access {
	width: 100%;
	padding: 22.5px 30px 30px 30px;
	border-radius: var(--rounding-general);
	background-color: var(--white);
	margin-bottom: 30px;
}
.email-for-early-access-container {
	display: flex;
}
.email-for-early-access {
	display: flex;
	flex-direction: column;
	width: calc((100% - 30px) / 2);
	margin-right: 30px;
}
.email-for-early-access-container input[type="email"] {
	width: 100%;
	height: auto;
    border: 1px solid var(--black);
    padding: 5px 15px 7.5px 15px;
	margin-bottom: -1px;
	color: var(--grey-light-info);
	transition: var(--transitionGeneral);
}
.email-for-early-access-container input[type="email"]:hover {
	background-color: var(--selection-hover);
}
.email-for-early-access-container input[type="email"]:focus {
	background-color: var(--selection-hover);
	color: var(--black);
	outline: none;
}
.email-for-early-access-container input[type="email"]:not(:placeholder-shown) {
    background-color: var(--selection-clicked);
    color: var(--black);
}
.get-early-access-button {
	width: calc((100% - 30px) / 2);
	text-align: center;
	background-color: var(--black);
	color: var(--white);
    font-size: 20px;
    font-family: var(--mainFontFamily);
	padding: 8px 0 12.5px 0;
	margin: 0;
	cursor: pointer;
	border: none;
	border-radius: var(--rounding-general);
	-webkit-appearance: none;
	appearance: none;
	text-shadow: 0 0 0 transparent;
	-webkit-text-stroke: 0 transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translateZ(0);
}
.get-early-access-button:hover {
	background-color: var(--check-green);
	color: var(--black);
	transition: var(--transitionGeneral);
}
.early-access-progress-container {
	position: relative;
	display: flex; 
	width: 100%;
}
.early-access-progress {
	position: relative;
	display: flex; 
	flex-direction: column;
	width: calc((100% - 90px) / 4);
	margin-right: 30px;
}
.early-access-progress:last-child {
	margin-right: 0;
}
.early-access-progress-info {
	color: var(--black);
	margin-bottom: 7.5px;
}
.early-access-progress-track {
  width: 100%;
  height: 15px;
  margin-bottom: 7.5px;
  border: 1px solid var(--black);
  box-sizing: border-box;
  background: var(--grey-light);
}
.early-access-progress-bar {
  height: 100%;
  background: var(--black);
}
.early-access-progress-percentage-info {
	color: var(--black);
	margin-bottom: 0;
}
/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/

/*FOOTER*/
footer {
  background-color: var(--black);
  font-family: VZWO VARIANZ Low Sans;
  font-size: var(--fontSizeGeneral);
  line-height: 1.625;
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 120px;
  padding-bottom: 10px;
}
footer a {
  text-decoration: none;
  color: var(--white);
  line-height: 1.625;
}
footer a:hover {
  color: var(--grey-dark-info);
  transition: var(--transitionGeneral);
}
.VZWO-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.VZWO-logo {
  width: 250px;
  fill: var(--white);
}
.footer-content-container {
  margin-top: -65px;
  padding-top: 90px;
  background-color: var(--grey-dark);
  background-image: var(--grey-dark-gradient);
}
.footer-content {
  max-width: 1500px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
.infokasten-footer {
  width: 100%;
  background: var(--black);
  color: var(--white);
  margin-bottom: 60px;
  display: flex;
  border: 1px solid var(--white);
}
.infokasten-footer div {
  justify-content: space-between;
  padding: 5px 15px 7.5px 15px;
  display: flex;
  width: 100%;
}
.infokasten-footer a {
  text-align: right;
}
.line-height-increased {
  margin-top: -2.5px;
}
.line-height-increased a{
  line-height: 2;
}
.footer-last-line {
  width: 100%;
  display: flex;
}
.footer-last-line-left {
  width: 50%;
  margin-right: 30px;
}
.footer-last-line-right {
  width: 50%;
  justify-content: space-between;
  display: flex;
}
.footer-last-line-right a:last-child {
  text-align: right;
}
/*FOOTER*/




.appear-on-480 {
  display: none;
}
.appear-on-1200 {
  display: none;
}
@media (min-width: 768px) and (max-width: 1200px) {
	.appear-on-1200 {
	display: block;
	}
}
@media (max-width: 480px) {
	.appear-on-1200 {
	display: block;
	}
}

@media (max-width: 1319px) {
  .linebreak-about-title::after {
    content: '\A';
    white-space: pre;    
  }
  .multi-row-list-subcontainer2 {
    display: block;
  }
  .opentypefeatures-visuals-choreo-banner p{
    font-size: 30px;
  }
  .title-choreo-banner-thin-index {
    text-transform: none;
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 1280px) {
  #scytheserif-title-short::after {
    display: none;
  }
  .title-choreo-banner {
    text-transform: none;
  }
  .character {
    width: calc((100% + 25px) / 26);;
  }
}

@media (min-width: 1237px) {
  .linebreak-about-big-text::after {
    content: '\A';
    white-space: pre;    
  }
}
@media (max-width: 1237px) {
  .linebreak-new-release-singlestyles::after {
    content: '\A';
    white-space: pre;    
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 1200px) {
  .title-index {
    font-size: 175px;
  }
  .title {
    font-size: 175px;
  }
  .collapsible-subcontent-singlestyles {
    width: calc((100% - 60px) / 3);
  }
  .collapsible-subcontent-singlestyles:nth-child(3n) {
    margin-right: 0;
  }
  .collapsible-subcontent-singlestyles:nth-child(4n) {
    margin-right: auto;
  }
  .linebreak-new-release-singlestyles::after {
    content: '';
    white-space: pre;    
  }
  .index-single-styles-disappear-on-responsive {
    display: none;
  }
  .typetester-bedienung {
    width: calc((100% - 60px) / 3);
  }
  .typetester-bedienung-slider {
    width: calc((100% - 60px) / 3);
  }
  .typetester-bedienung-slider:nth-child(3) {
    margin-right: 0;
  }
  .typetester-container-variable .typetester-bedienung-slider:last-child {
    display: none;
  }
  .typetester-container .typetester-bedienung-slider:last-child {
    display: none;
  }
  .specimen-quarter-width-container {
	display: flex;
	flex-wrap: wrap;
  }
  .specimen-quarter-width {
    width: calc((100% - 60px) / 3);
  }
  .specimen-quarter-width:nth-child(4) {
	margin-right: 30px;
  }
  .specimen-quarter-width:nth-child(3n) {
	margin-right: 0;
  }
  .collapsible-subcontent-opentypefeatures div {
    font-size: 32.5px;
  }
  .opentypefeatures-visuals-choreo-banner p{
    font-size: 26.25px;
  }
  .opentypefeatures-visuals-vol p{
    font-size: 42.5px;
  }
  .opentypefeatures-visuals-elephant p{
    font-size: 45px;
  }
  .opentypefeatures-visuals-scytheserif p{
    font-size: 45px;
  }
  .character {
    width: calc((100% + 23px) / 24);;
  }
  .pair-with-links {
    display: block;
  }
  .pair-with-links-content-full .collapsible-subcontent-singlestyles {
    width: calc((100% - 60px) / 3);
  }
  .pair-with-links-content-half {
    width: 100%;
    margin-right: 0;
  }
  .pair-with-links .collapsible-subcontent-singlestyles {
    width: calc((100% - 60px) / 3);
  }
  .pair-with-links-container-elephant .collapsible-subcontent-singlestyles:nth-child(3) {
    display: none;
  }
  .pair-with-links-container-choreostencil .collapsible-subcontent-singlestyles:nth-child(4) {
    display: none;
  }
  .pair-with-links-container-choreo .collapsible-subcontent-singlestyles:nth-child(3) {
    display: none;
  }
  .pair-with-links-container-choreocollection .collapsible-subcontent-singlestyles:nth-child(4) {
    display: none;
  }
  .pair-with-links-container-egen .collapsible-subcontent-singlestyles:nth-child(3) {
    display: none;
  }
  .pair-with-links-container-scytheserif .collapsible-subcontent-singlestyles:last-child {
    display: none;
  }
  .pair-with-links-container-scytheserif .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: 0;
  }
  .pair-with-links-container-vol .collapsible-subcontent-singlestyles:nth-child(3) {
    display: none;
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 1080px) {
  .families-collections .with-flex-content-div {
    width: 50%;
    margin-right: 30px;
  }
  .with-flex-content-div-double-container {
    width: 50%;
    display: block;
  }
  .with-flex-content-div-double {
    width: 100%;
    margin-right: 0;
  }
  .with-flex-for-tripple {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  .with-flex-content-div-tripple {
    width: calc((100% - 30px) / 2);
    margin-right: 30px;
  }
  .with-flex-content-div-tripple:nth-child(2) {
    margin-right: 0;
  }
  .with-flex-content-div-tripple:nth-child(3) {
    width: calc((100% - 30px) / 2);
    margin-right: 0;
  }
  .about-picture {
    width: calc((100% - 30px) / 2);
  }
  .page-big-text-italic {
    margin-left: calc(((100% - 30px) / 4) + 15px);
  }
  .data-privacy-container:nth-child(1) {
    display: block;
    margin-bottom: 105px;
  }
  .data-privacy-container:nth-child(1) .data-privacy-container-half {
    width: 100%;
    margin-right: 0;
    margin-bottom: 60px;
  }
  .data-privacy-container:nth-child(2) {
    display: block;
    margin-bottom: 105px;
  }
  .data-privacy-container:nth-child(2) .data-privacy-container-half {
    width: 100%;
    margin-right: 0;
    margin-bottom: 60px;
  }
  .data-privacy-container:nth-child(1) .hyphenate {
    padding-left: 15px;
  }
  .data-privacy-container:nth-child(2) .hyphenate {
    padding-left: 15px;
  }
  .character {
      width: calc((100% + 21px) / 22);;
  }
  .collapsible-with-flex {
    display: block;
  }
  .collapsible-with-flex-content-div {
    width: 100%;
    margin-right: 0;
  }
  .collapsible-with-flex-content-div {
    margin-bottom: 45px;
  }
  #technical td:nth-child(2n) {
    padding-left: 15px;
  }
  .multi-row-list-subcontainer1 {
    width: calc((100% - 30px) / 2);
    margin-right: 30px;
  }
  .multi-row-list-subcontainer1:last-child {
    margin-right: 0;
  }
  .multi-row-list-subcontainer2 {
    width: calc((100% - 30px) / 2);
    margin-right: 30px;
  }
  .multi-row-list-subcontainer2:last-child {
    margin-right: 0;
  }
  .opentypefeatures-visuals-choreo-banner p{
    font-size: 23.75px;
  }
/*BESTELLFORMULAR*/
	.bestellformular {
 		width: 100%;
	}
	.bestellformular-close-container {
		max-width: calc(100% - 60px);
		width: 100%;
	}
	.bestellformular-modal-content {
		max-width: calc(100% - 60px);
		width: 100%;
	}
/*BESTELLFORMULAR*/
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 1024px) {
  .title-index {
    font-size: 137.5px;
  }
  .title {
    font-size: 137.5px;
  }
  .body-index .typefaces-visuals-index-tripple-width:first-child {
    display: none;
  }
  .body-index .typefaces-visuals-index-tripple-width {
    width: calc((100% - 30px) / 2);
  }
  .linebreak-footer-lastrow::after {
    content: '\A';
    white-space: pre;
  }
  footer .with-flex {
    display: flex;
    flex-wrap: wrap;
  }
  footer .with-flex-content-div {
    width: calc((100% - 30px) / 2);
    margin-right: 30px;
  }
  footer .with-flex-content-div:nth-child(2n) {
    margin-right: 0;
  }
  .body-letterings-logos .specimen-tripple-width-container {
    display: flex;
    flex-wrap: wrap;
  }
  .letterings-tripple-width {
    width: calc((100% - 30px) / 2);
  }
  .letterings-tripple-width:nth-child(2) {
    margin-right: 0;
  }
  .data-privacy-container {
    display: block;
    margin-bottom: 112.5px;
  }
  .data-privacy-container-half {
    width: 100%;
    margin-right: 0;
    margin-bottom: 67.5px;
  }
  .data-privacy-container-half-last-row {
    width: 100%;
    margin-right: 0;
    margin-bottom: 67.5px;
  }
  :root {
    --fontSizePageHeadline: 46.875px;
  }
  .page-big-text {
    font-size: 27px;
  }
  .margin-bottom-verkuerzt {
    margin-bottom: 16px;
  }
  .linebreak-about-big-text::after {
    content: '\A';
    white-space: pre;
  }
  .vzwo-atmosphere-image-normal {
    margin-bottom: -125px;
  }
  .border-only-right {
    display: none;
  }
  .collapsible-subcontent-opentypefeatures div {
    font-size: 27.5px;
  }
  .opentypefeatures-visuals-choreo-banner p{
    font-size: 22px;
  }
  .opentypefeatures-visuals-vol p{
    font-size: 37.5px;
  }
  .opentypefeatures-visuals-elephant p{
    font-size: 45px;
  }
  .opentypefeatures-visuals-scytheserif p{
    font-size: 45px;
  }
  .character {
    width: calc((100% + 19px) / 20);;
  }
}


/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 940px) {
  .linebreak-new-release-singlestyles::after {
    content: '\A';
    white-space: pre;
  }
  .character {
    width: calc((100% + 17px) / 18);;
  }
  .font-family-styles-overview-vol {
    display: block;
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 870px) {
  .linebreak-about-big-text::after {
    content: '';
    white-space: pre;
  }
  .typetester-bedienung {
    width: calc((100% - 30px) / 2);
  }
  .typetester-bedienung-slider {
    width: calc((100% - 30px) / 2);
  }
  .typetester-bedienung-slider:nth-child(2) {
    margin-right: 0;
  }
  .typetester-container-variable .typetester-bedienung-slider:nth-child(3) {
    display: none;
  }
  .typetester-container .typetester-bedienung-slider:nth-child(3) {
    display: none;
  }
  .opentypefeatures .collapsible-content{
    display: block;
  }
  .opentypefeatures .collapsible-subcontent-opentypefeatures {
    width: 100%;
    margin-right: 0;
  }
  .opentypefeatures .collapsible-subcontent-opentypefeatures div {
    font-size: 37.5px;
  }
  .opentypefeatures-visuals-vol p{
    font-size: 47.5px;
  }
  .opentypefeatures-visuals-elephant p{
    font-size: 50px;
  }
  .opentypefeatures-visuals-scytheserif p{
    font-size: 50px;
  }
  .customizedsolutions-disappear-on-responsive {
    display: none;
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 850px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 35px;
    left: 0;
    flex-direction: column;
    width: 100%;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 0.3s cubic-bezier(0.25, 1, 0.25, 1);
  }
  #menu-toggle:checked ~ .menu li {
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    height: 35px;
    align-items: center;
    background-color: var(--grey-dark);
    transition: height 0.3s cubic-bezier(0.25, 1, 0.25, 1);
  }
  #menu-toggle:checked ~ .menu li:hover {
    background-color: var(--black);
    cursor: pointer;
  }
  #menu-toggle:checked ~ .menu li:hover a {
    filter: opacity(40%);
    transition: var(--transitionGeneral);
  }
  #menu-toggle:checked ~ .menu li:first-child {
    border-top-left-radius: var(--rounding-general);
    border-top-right-radius: var(--rounding-general);
  }
  #menu-toggle:checked ~ .menu li:last-child {
    border-bottom-left-radius: var(--rounding-general);
    border-bottom-right-radius: var(--rounding-general);
  }
  .menu li a {
    width: 100%;
    padding-top: 7.5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .toggle-container {
    display: inline-block;
    position: relative;
    margin-top: 13px;
  }
  .body-about .with-flex-for-tripple {
    display: block;
  }
  .body-about .with-flex-content-div-tripple {
    width: 100%;
    margin-right: 0;
  }
  .character {
    width: calc((100% + 15px) / 16);;
  }
  .pair-with-links .collapsible-subcontent-singlestyles {
    width: calc((100% - 30px) / 2);
  }
  .pair-with-links .collapsible-subcontent-singlestyles:nth-child(2) {
    margin-right: 0;
  }
  .pair-with-links-container-elephant .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 30px;
  }
  .pair-with-links-container-choreostencil .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: 30px;
  }
  .pair-with-links-container-choreostencil .collapsible-subcontent-singlestyles:nth-child(4) {
    display: flex;
  }
  .pair-with-links-container-choreo .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 30px;
  }
  .pair-with-links-container-choreocollection .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: 30px;
  }
  .pair-with-links-container-choreocollection .collapsible-subcontent-singlestyles:nth-child(4) {
    display: flex;
  }
  .pair-with-links-container-egen .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 30px;
  }
  .pair-with-links-container-scytheserif .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: 30px;
  }
  .pair-with-links-container-scytheserif .collapsible-subcontent-singlestyles:last-child {
    display: flex;
  }
  .pair-with-links-container-vol .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 30px;
  }
  .font-selector,
  .font-selector-elephant,
  .font-selector-scytheserif {
    width: calc((100% - 34px) / 3);
    margin-right: 13.75px;
    margin-bottom: 20px;
    font-size: 17.25px;
  }
  .font-selector:nth-child(3n) {
    margin-right: 0;
  }
  .font-selector-choreo-collection {
    width: calc((100% - 18px) / 2);
    margin-right: 13.75px;
  }
  .font-selector-choreo-collection:nth-child(even) {
    margin-right: 0;
  }
  .font-selector-choreo-collection:nth-child(3n) {
    margin-right: 13.75px;
  }
  .font-selector-choreo-text {
    width: calc((100% - 18px) / 2);
    margin-right: 13.75px;
  }
  .font-selector-choreo-text:nth-child(even) {
    margin-right: 0;
  }
  .font-selector-choreo-text:nth-child(3),
  .font-selector-choreo-text:nth-child(9) {
    margin-right: 13.75px;
  }
  .font-selector-choreo-stencil {
    width: calc((100% - 18px) / 2);
    margin-right: 13.75px;
  }
  .font-selector-choreo-stencil:nth-child(even) {
    margin-right: 0;
  }
  .font-selector-choreo-stencil:nth-child(3) {
    margin-right: 13.75px;
  }
  .font-selector-choreo-display {
    width: calc((100% - 18px) / 2);
    margin-right: 13.75px;
  }
  .font-selector-choreo-display:nth-child(2) {
    margin-right: 0;
  }
  #buttonVarianzLowSerif,
  #buttonChoreoDisplayBlackItalic,
  #buttonElephant,
  #buttonScytheSerif,
  #buttonVarianzLowMix,
  #buttonVarianzLowSans,
  #buttonVarianzLowSerif,
  #buttonVol600 {
    margin-bottom: 30px;
  }
  .body-choreo-collection #buttonChoreoDisplayBlackItalic {
    margin-bottom: 0;
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 784px) {
  .linebreak-new-release-singlestyles::after {
    content: '';
    white-space: pre;    
  }
  .body-typefaces .collapsible-subcontent-singlestyles {
    width: calc((100% - 30px) / 2);
  }
  .body-typefaces .collapsible-subcontent-singlestyles:nth-child(2n) {
    margin-right: 0;
  }
  .body-typefaces .collapsible-subcontent-singlestyles:nth-child(3n) {
    margin-right: auto;
  }
  .character {
    width: calc((100% + 13px) / 14);;
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 768px) {
  nav {
    padding-left: 15px;
  }
  .menu-button-container {
    margin-right: 10px;
  }
  .toggle-container {
    margin-right: 10px;
  }
  .index-title-animation-container {
    padding: 50px 15px 0px 15px;
  }
  main {
    padding: 27.5px 15px 30px 15px;
  }
  .title-index {
    font-size: 110px;
  }
  .typefaces-family-title-choreobanner {
    text-transform: none;
  }
  .title-choreo-collection-index {
    padding-bottom: 32.5px;
  }
  .title-choreo-text-index {
    padding-bottom: 32.5px;
  }
  .title-choreo-stencil-index {
    padding-bottom: 32.5px;
  }
  .title-choreo-banner-thin-index {
    text-transform: none;
    padding-bottom: 32.5px;
  }
  .title-choreo-display-black-index {
    padding-bottom: 32.5px;
  }
  .title-choreo-display-thin-index {
    padding-bottom: 32.5px;
  }
  .title-egen-index {
    padding-bottom: 32.5px;
  }
  .title-varianz-superfamily-index {
    padding-bottom: 50px;
  }
  .title-varianz-sans-index {
    padding-bottom: 50px;
  }
  .title-varianz-mix-index {
    padding-bottom: 50px;
  }
  .title-varianz-serif-index {
    padding-bottom: 50px;
  }
  .title-vol-index {
    padding-bottom: 45px;
  }
  .title-elephant-index {
    padding-bottom: 25px;
  }
  .title-scytheserif-index {
    padding-bottom: 20px;
  }
  .title {
    font-size: 110px;
  }
  .title-choreo-display {
    padding-bottom: 0;
  }
  .title-varianz-superfamily {
    padding-bottom: 0;
  }
  .title-varianz-sans {
    padding-bottom: 0;
  }
  .title-varianz-mix {
    padding-bottom: 0;
  }
  .title-varianz-serif {
    padding-bottom: 0;
  }
  .title-vol {
    padding-top: calc(30vh + 5px);
  }
  .title-elephant {
    padding-top: 25px;
  }
  .title-scytheserif {
    padding-top: 25px;
  }
  :root {
    --fontSizeFamilyOverviewTitle: 82.5px;
    --fontSizePageHeadline: 37.5px;
  }
  .disappear-on-768 {
    display: none;
  }
  .appear-on-768 {
    display: block;
  }
  .typefaces-visuals-index-half-width {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .body-index .typefaces-visuals-index-tripple-width {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .body-index .typefaces-visuals-index-tripple-width:last-child {
    margin-right: 0;
  }
  .footer-content {
    padding-left: 15px;
    padding-right: 15px;
  }
  footer .with-flex {
    display: flex;
    flex-wrap: wrap;
  }
  footer .with-flex-content-div {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .footer-last-line {
    display: block;
  }
  .footer-last-line-left {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .footer-last-line-right {
    width: 100%;
  }
  .page-big-text {
    font-size: 17.6px;
  }
  .page-big-text-italic {
    margin-left: 0;
  }
  .body-licensing .with-flex-for-tripple {
    display: block;
  }
  .body-licensing .with-flex-content-div-tripple {
    width: 100%;
    margin-right: 0;
  }
  .collapsible-subcontent-singlestyles {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .body-index .collapsible-subcontent-singlestyles:nth-child(2) {
    margin-right: 0;
  }
  .body-index .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: auto;
  }
  .body-index .collapsible-subcontent-singlestyles:last-child {
    display: flex;
    margin-right: 0;
  }
  .body-typefaces .collapsible-subcontent-singlestyles {
    width: calc((100% - 14px) / 2);
  }
  .families-collections .with-flex {
    display: block;
  }
  .families-collections .with-flex-content-div {
    width: 100%;
    margin-right: 0;
  }
  .with-flex-content-div-double-container {
    width: 100%;
    display: block;
  }
  .letterings-half-width {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .letterings-tripple-width {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .with-flex {
    display: block;
  }
  .with-flex-content-div {
    width: 100%;
    margin-right: 0;
  }
  #rightButtonVariable {
    margin-right: -9.25px;
  }
  .rightButton {
    margin-right: -9.25px;
  }
  .typetester-bedienung-container {
    display: block;
  }
  .typetester-container-variable .typetester-bedienung-container:nth-child(2) {
    display: flex;
  }
  .typetester-bedienung {
    width: 100%;
    margin-right: 0;
  }
  .typetester-bedienung-slider {
    width: 100%;
    margin-right: 0;
  }
  .typetester-bedienung-variable-slider {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .typetester-bedienung-variable-slider:last-child {
    margin-right: 0;
  }
  .typetester-container-variable {
    margin-bottom: 60px;
  }
  .typetester-container {
    margin-bottom: 30px;
  }
  .specimen-full-width {
    margin-bottom: 14px;
  }
  .specimen-full-width-melt-bottom {
    margin-bottom: 14px;
  }
  .specimen-half-width {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
    margin-bottom: 14px;
  }
  .specimen-altar-width-container {
    margin-bottom: 14px;
  }
  .specimen-altar-width {
    margin-right: 14px;
  }
  .specimen-altar-width-big {
    width: calc(66.66% - 15px);
  }
  .specimen-altar-width-small {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(16.67% - 7.5px);
    box-sizing: border-box;
    border-radius: var(--rounding-general);
  }
  .specimen-third-width-container {
    margin-bottom: 14px;
  }
  .specimen-third-width:first-child {
    margin-right: 14px;
  }
  .specimen-third-width-big {
    width: calc(66.66% - 7.5px);
  }
  .specimen-third-width-small {
    width: calc(33.33% - 7.5px);
  }
  .specimen-tripple-width {
    width: calc((100% - 28px) / 3);
    margin-right: 14px;
  }
  .specimen-quarter-width {
    width: calc((100% - 14px) / 2);
	margin-right: 14px;
	margin-bottom: 14px;
  }
  .specimen-quarter-width:nth-child(3),
  .specimen-quarter-width:nth-child(6) {
	margin-right: 14px;
  }
  .specimen-quarter-width:nth-child(2),
  .specimen-quarter-width:nth-child(4),
  .specimen-quarter-width:nth-child(7) {
	margin-right: 0;
  }
  .opentypefeatures .collapsible-subcontent-opentypefeatures div {
    font-size: 32.5px;
  }
  .opentypefeatures-visuals-vol p{
    font-size: 42.5px;
  }
  .opentypefeatures-visuals-elephant p{
    font-size: 45px;
  }
  .opentypefeatures-visuals-scytheserif p{
    font-size: 45px;
  }
  .character {
    width: calc((100% + 11px) / 12);;
  }
  #technical td:nth-child(2n) {
    padding-left: 7.5px;
  }
  .multi-row-list-subcontainer1 {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
    display: block;
  }
  .multi-row-list-subcontainer2 {
    width: 100%;
  }
  .pair-with-links {
    padding-left: 14px;
    padding-right: 14px;
  }
  .pair-with-links .collapsible-subcontent-singlestyles {
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
  }
  .pair-with-links .collapsible-subcontent-singlestyles:nth-child(2) {
    margin-right: 0;
  }
  .pair-with-links-container-elephant .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 14px;
  }
  .pair-with-links-container-choreostencil .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 14px;
  }
  .pair-with-links-container-choreo .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: 14px;
  }
  .pair-with-links-container-choreocollection .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: 14px;
  }
  .pair-with-links-container-egen .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 14px;
  }
  .pair-with-links-container-scytheserif .collapsible-subcontent-singlestyles:nth-child(3) {
    margin-right: 14px;
  }
  .pair-with-links-container-scytheserif .collapsible-subcontent-singlestyles:last-child {
    display: flex;
  }
  .pair-with-links-container-vol .collapsible-subcontent-singlestyles:nth-child(3) {
    display: flex;
    margin-right: 14px;
  }
  .font-family-styles-overview-vol {
    display: flex;
  }
  .body-index .infokasten {
    font-size: var(--fontSizeGeneral);
  }
/*BESTELLFORMULAR*/
  .bestellformular {
  	padding: 22.5px 14px 30px 14px;
  }
  .bestellformular-close-container {
	  max-width: calc(100% - 28px);
	  width: 100%;
  }
  .bestellformular-modal-content {
	  max-width: calc(100% - 28px);
	  width: 100%;
	  padding: 22.5px 14px 30px 14px;
  }
  .bestellformular-nav-button-container div {
	  width: calc((100% - 28px) / 3);
  }
  .bestellformular-message {
	max-width: calc((100% - 28px));
    width: 100%;
  }
/*BESTELLFORMULAR*/
/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/
  .early-access {
  	padding: 22.5px 14px 30px 14px;
  }
  .email-for-early-access {
  	width: calc((100% - 14px) / 2);
  	margin-right: 14px;
  }
  .get-early-access-button {
  	width: calc((100% - 14px) / 2);
  }
  .early-access-progress {
  	width: calc((100% - 32px) / 4);
  	margin-right: 14px;
  }
  .early-access-progress:last-child {
  	margin-right: 0;
  }
/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 620px) {
  .title-index {
    font-size: 82.5px;
  }
  .title {
    font-size: 82.5px;
  }
  .linebreak-new-release-singlestyles::after {
    content: '\A';
    white-space: pre;    
  }
  :root {
    --fontSizePageHeadline: 30px;
  }
  .infokasten,
  .get-varianz-superfamily,
  .get-choreo-collection,
  .get-choreo-text,
  .get-choreo-stencil,
  .get-choreo-display,
  .get-varianz-sans,
  .get-varianz-mix,
  .get-varianz-serif,
  .get-vol,
  .get-elephant,
  .get-scytheserif,
  .get-egen {
    font-size: 9.25px;
  }
/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/
  .email-for-early-access-container {
	display: flex;
	flex-direction: column;
  }
  .email-for-early-access {
  	width: 100%;
  	margin-right: 0;
	margin-bottom: 30px;
  }
  .get-early-access-button {
  	width: 100%;
  }
  .early-access-progress-container {
	display: flex;
	flex-direction: column;
  }
  .early-access-progress {
  	width: 100%;
  	margin-right: 0;
	margin-bottom: 15px;
  }
  .early-access-progress:last-child {
	margin-bottom: 0;
  }
/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 520px) {
  .table-with-border-pricelist td:nth-child(2) {
    padding-left: 0;
  }
  .table-with-border-pricelist td:nth-child(3) {
    padding-left: 0;
  }
  .table-with-border-pricelist td:nth-child(4) {
    padding-left: 0;
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 500px) {
  .linebreak-new-release-singlestyles::after {
    content: '';
    white-space: pre;    
  }
  .linebreak-early-access::after {
    content: '\A';
    white-space: pre;   
  }
}

/*MEDIAQUERIES RESPONSIVE BREAK */
@media (max-width: 480px) {
  :root {
    --fontSizeFamilyOverviewTitle: 55px;
    --fontSizePageHeadline: 20px;
    --fontSizeGeneral: 10.5px;
  }
  .disappear-on-480 {
    display: none;
  }
  .title-index {
    font-size: 125px;
  }
  .title {
    font-size: 55px;
  }
  .linebreak-new-release-singlestyles::after {
    content: '';
    white-space: pre;    
  }
  footer .with-flex {
    display: block;
  }
  footer .with-flex-content-div {
    width: 100%;
    margin-right: 0;
  }
  .infokasten {
    height: 33.75px;
  }
  .see-vzwo-typefaces {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .infokasten-footer div {
    display: flex;
    justify-content: center;
    height: 33.75px;
  }
  .appear-on-480 {
    display: flex;
    justify-content: center;
    height: 33.75px;
  }
  .get-varianz-superfamily,
  .get-choreo-collection,
  .get-choreo-text,
  .get-choreo-stencil,
  .get-choreo-display,
  .get-elephant,
  .get-scytheserif,
  .get-vol,
  .get-varianz-sans,
  .get-varianz-mix,
  .get-varianz-serif,
  .get-egen {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: var(--fontSizeGeneral);
  }
  .body-vol .font-family-styles-overview-vol {
    font-size: 12.5px;
  }
  .specimen-half-width-container {
    display: block;
  }
  .specimen-half-width {
    width: 100%;
    margin-right: 0;
  }
  .specimen-third-width-container {
    display: block;
  }
  .specimen-third-width {
    width: 100%;
    margin-right: 0;
    margin-bottom: 14px;
  }
  .specimen-tripple-width {
    width: 100%;
    margin-right: 0;
  }
  .specimen-quarter-width {
    width: 100%;
	margin-right: 0;
  }
  .specimen-quarter-width:nth-child(3),
  .specimen-quarter-width:nth-child(6) {
	margin-right: 0;
  }
  .opentypefeatures .collapsible-subcontent-opentypefeatures div {
    font-size: 21px;
  }
  .opentypefeatures-visuals-choreo-banner p{
    font-size: 18.75px;
  }
  .opentypefeatures-visuals-vol p{
    font-size: 27.5px;
  }
  .opentypefeatures-visuals-elephant p{
    font-size: 33.5px;
  }
  .opentypefeatures-visuals-scytheserif p{
    font-size: 33.5px;
  }
  .font-selector,
  .font-selector-elephant,
  .font-selector-scytheserif {
    font-size: 9.25px;
  }
  .character {
    width: calc((100% + 9px) / 10);
  }
  .body-index .specimen-half-width-container {
    display: block;
  }
  .typefaces-visuals-index-half-width {
    width: 100%;
    margin-right: 0;
  }
  .pair-with-links .collapsible-content-singlestyles {
    display: block;
  }
  .pair-with-links .collapsible-subcontent-singlestyles {
    width: 100%;
    margin-right: 0;
  }
  .body-index .typefaces-visuals-index-tripple-width:first-child {
    display: block;
  }
  .body-index .specimen-tripple-width-container {
    display: block;
  }
  .body-index .typefaces-visuals-index-tripple-width {
    width: 100%;
    margin-right: 0;
  }
  .body-typefaces .collapsible-subcontent-singlestyles {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .body-typefaces .collapsible-subcontent-singlestyles:last-child {
    margin-bottom: 0;
  }
  .linebreak-button-collapsible-p {
    line-height: 1.625;
    margin-top: -3.75px;
    margin-bottom: -3.75px;
  }
  .linebreak-button-collapsible-480::after {
    content: '\A';
    white-space: pre;    
  }
  .about-picture {
    width: 100%;
  }
  .page-big-text {
    font-size: 12.5px;
  }
  .body-imprint-data-privacy .table-with-border td:nth-child(2n-1) {
    width: 22.5%;
  }
  .body-imprint-data-privacy td:nth-child(2n-1) {
    padding-right: 0;
  }
  .body-letterings-logos .specimen-half-width-container {
    display: block;
  }
  .letterings-half-width {
    width: 100%;
    margin-right: 0;
  }
  .body-letterings-logos .specimen-tripple-width-container {
    display: block;
    flex-wrap: wrap;
  }
  .letterings-tripple-width {
    width: 100%;
    margin-right: 0;
  }
/*BESTELLFORMULAR*/
  .bestellformular-nav-button-previous {
      font-size: 15px;
  }
  .bestellformular-nav-button-next {
      font-size: 15px;
  }
  .step {
	  font-size: 15px;
  }
/*BESTELLFORMULAR*/
}

@media (max-width: 400px) {
  .linebreak-pricelist-400::after {
    content: '\A';
    white-space: pre;    
  }
}




/*/*LIGHTMODE STYLING*//*LIGHTMODE STYLING*//*LIGHTMODE STYLING*//*LIGHTMODE STYLING*//*LIGHTMODE STYLING*/
.light-mode nav {
  background-color:  rgba(var(--white), 0.99);
  border: 1px solid var(--white), 0.75;
  -webkit-backdrop-filter: blur(37.5px);
  backdrop-filter: blur(37.5px);
}
.light-mode nav a {
  text-decoration: none;
  color: var(--black);
}
.light-mode nav a:hover {
  filter: opacity(40%);
  transition: var(--transitionGeneral);
}
.light-mode .menu-button {
  background-color: var(--black);
}
.light-mode .menu-button::before {
  background-color: var(--black);
}
.light-mode .menu-button::after {
  background-color: var(--black);
}
.light-mode .menu-button-container:hover .menu-button {
  filter: opacity(40%);
}
.light-mode .toggle-svg {
  fill: var(--black);
}
.light-mode .toggle-svg:hover {
  filter: opacity(40%);
}
.body-light-mode {
  background-color: var(--white);
}
.light-mode .title {
  color: var(--black);
}
.light-mode .title-egen {
  background-color: var(--egen);
  background-image: var(--egen-gradient-light);
}
.light-mode .title-choreo-collection {
  background-color: var(--choreo-collection);
  background-image: var(--choreo-collection-gradient-light);
}
.light-mode .title-choreo-banner {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-light);
}
.light-mode .title-choreo-display {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-light);
}
.light-mode .title-choreo-text {
  background-color: var(--choreo-text);
  background-image: var(--choreo-text-gradient-light);
}
.light-mode .title-choreo-stencil {
  background-color: var(--choreo-stencil);
  background-image: var(--choreo-stencil-gradient-light);
}
.light-mode .title-varianz-superfamily {
  background-color: var(--varianz-superfamily);
  background-image: var(--varianz-superfamily-gradient-light);
}
.light-mode .title-varianz-sans {
  background-color: var(--varianz-sans);
  background-image: var(--varianz-sans-gradient-light);
}
.light-mode .title-varianz-mix {
  background-color: var(--varianz-mix);
  background-image: var(--varianz-mix-gradient-light);
}
.light-mode .title-varianz-serif {
  background-color: var(--varianz-serif);
  background-image: var(--varianz-serif-gradient-light);
}
.light-mode .title-vol {
  background-color: var(--vol);
  background-image: var(--vol-gradient-light);
}
.light-mode .title-elephant {
  background-color: var(--elephant);
  background-image: var(--elephant-gradient-light);
}
.light-mode .title-scytheserif {
  background-color: var(--scytheserif);
  background-image: var(--scytheserif-gradient-light);
}
.light-mode .see-vzwo-typefaces {
  position: absolute;
  right: 0px;
  transition: var(--transitionGeneral);
}
.light-mode .see-vzwo-typefaces:hover {
  color: var(--grey-light-info);
}
.light-mode main {
  background-color: var(--white);
  color: var(--black);
}
.light-mode main a {
  color: var(--black);
}
.light-mode .sticky-on-scroll {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
}
.light-mode .border-only-right {
  border-right: 1px solid var(--black);
}
.light-mode .line-horizontal {
  background-color: var(--black);
}
.light-mode .text-with-small-headline-and-line a:hover {
  color: var(--grey-light-info);
}
.light-mode .text-with-small-headline-and-line a:hover .font-family-styles-overview {
  color: var(--black);
}
.light-mode #menu-toggle:checked ~ .menu li {
    border-top: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    background-color: var(--grey-light);
}
.light-mode #menu-toggle:checked ~ .menu li:hover {
    background-color: var(--white);
  }
.light-mode .font-dropdown {
    color: var(--black);
}
.light-mode .font-dropdown-choreocollection:hover {
    color: var(--choreo-collection);
}
.light-mode .font-dropdown-choreotext:hover {
    color: var(--choreo-text);
}
.light-mode .font-dropdown-choreostencil:hover {
    color: var(--choreo-stencil);
}
.light-mode .font-dropdown-choreodisplay:hover {
    color: var(--choreo-display);
}
.light-mode .font-dropdown-varianzsuperfamily:hover {
    color: var(--varianz-superfamily);
}
.light-mode .font-dropdown-varianzsans:hover {
    color: var(--varianz-sans);
}
.light-mode .font-dropdown-varianzmix:hover {
    color: var(--varianz-mix-hell);
}
.light-mode .font-dropdown-varianzserif:hover {
    color: var(--varianz-serif);
}
.light-mode .font-dropdown-vol:hover {
    color: var(--vol);
}
.light-mode .alignment-buttons {
  stroke: var(--black);
}
.light-mode .alignment-buttons:hover {
  stroke: var(--hover-color, var(--choreo-display));
}
.light-mode .alignment-buttons.selected {
  stroke: var(--selected-color, var(--choreo-display));
}
.light-mode .alignment-buttons-variable {
  stroke: var(--black);
}
.light-mode .alignment-buttons-variable:hover {
  stroke: var(--hover-color, var(--choreo-display));
}
.light-mode .alignment-buttons-variable.selected {
  stroke: var(--selected-color, var(--choreo-display));
}
.light-mode .typetester-slider-info p, .light-mode .typetester-slider-info span {
  color: var(--grey-light-info);
}
.light-mode input[type="range"] {
  background: var(--black);
}
.light-mode .background-grey {
  background-color: var(--grey-light);
}
.light-mode .background-white-grey {
  background-color: var(--grey-light);
}
.light-mode .background-red-grey {
  background-color: var(--grey-light);
}
.light-mode .background-white-black {
  background-color: var(--black);
}
.light-mode .background-white-varianz-serif {
  background-color: var(--varianz-serif);
}
.light-mode .background-grey-black {
  background-color: var(--black);
}
.light-mode .background-grey-white {
  background-color: var(--white);
}
.light-mode .background-varianz-serif-grey {
  background-color: var(--grey-light);
}
.light-mode .background-egen-gradient {
  background-image: var(--egen-gradient-light);
}
.light-mode .background-choreo-stencil-gradient {
  background-image: var(--choreo-stencil-gradient-dark);
}
.light-mode .background-choreo-stencil-black {
  background: var(--black);
  fill: var(--black);
}
.light-mode .background-grey-choreo-stencil {
  background: var(--choreo-stencil);
  fill: var(--black);
}
.light-mode .specimen-svg path {
  fill: var(--black);
}
.light-mode .specimen-svg-black-white-fill {
  fill: var(--white);
}
.light-mode .specimen-svg-black-red-fill {
  fill: #ff0000;
}
.light-mode .specimen-svg-white-black-fill {
  fill: var(--black);
}
.light-mode .specimen-svg-grey-fill {
  fill: var(--grey-light);
}
.light-mode .specimen-svg-grey-info-fill path {
  fill: var(--grey-light-info);
}
.light-mode .specimen-svg-black-choreo-stencil-fill {
  fill: var(--choreo-stencil);
}
.light-mode .specimen-svg-choreo-stencil-black-fill {
  fill: var(--black);
}
.light-mode .highlight-white-varianz-serif {
  fill: var(--varianz-serif);
}
.light-mode .specimen-container .highlight-varianz-sans {
  fill: var(--varianz-sans);
}
.light-mode .highlight-varianz-serif-white {
  fill: var(--white);
}
.light-mode .highlight-varianz-mix-hell-dunkel {
  fill: var(--varianz-mix);
}
.light-mode .choreo-racing-contour-1,
.light-mode .choreo-racing-contour-2,
.light-mode .choreo-racing-contour-3 {
  stroke: var(--black);
}
.light-mode .choreo-racing-contour-4 {
  fill: var(--white);
}
.light-mode .choreo-racing-contour-5 {
  fill: var(--black);
}
.light-mode .cls-2 {
  fill: #000;
}
.light-mode .cls-3 {
  fill: url(#Unbenannter_Verlauf_5-3_light);
}
.light-mode .cls-4 {
  fill: url(#Unbenannter_Verlauf_5-2_light);
}
.light-mode .cls-5 {
  fill: url(#Unbenannter_Verlauf_5_light);
}
.light-mode .text-abdeckung-grey-dark-light {
  fill: var(--grey-light);
}
.light-mode .varianz-mix-verlauf-01 {
  fill: url(#Unbenannter_Verlauf_5-3-light);
}
.light-mode .varianz-mix-verlauf-02 {
  fill: url(#Unbenannter_Verlauf_5-2-light);
}
.light-mode .varianz-mix-verlauf-03 {
  fill: url(#Unbenannter_Verlauf_5-light);
}
.light-mode .collapsible-container {
  background-color: var(--white);
  color: var(--black);
}
.light-mode .collapsible-container::before,
.light-mode .collapsible-container::after {
  background-color: var(--black);
}
.light-mode .collapsible-plus-minus-icon {
  background-color: var(--black);
}
.light-mode .collapsible-subcontent > div {
  background-color: var(--grey-light);
  color: var(--black);
}
.light-mode .collapsible-subcontent div {
  background-color: var(--grey-light);
}


/*OPENTYPE*/
.light-mode .collapsible-subcontent-opentypefeatures div {
  background-color: var(--grey-light);
}
.light-mode .info {
  color: var(--grey-light-info);
}
/*OPENTYPE*/


.light-mode .font-selector {
    border: 1px solid var(--black);
    background: var(--white);
    color: var(--black);
  }
.light-mode .font-selector-egen:hover {
    color: var(--egen);
    border: 1px solid var(--egen);
  }
.light-mode .font-selector-egen[selected] {
    color: var(--egen);
    border: 1px solid var(--egen);
  }
.light-mode .font-selector-choreo-collection:hover {
    color: var(--choreo-collection);
    border: 1px solid var(--choreo-collection);
  }
.light-mode .font-selector-choreo-collection[selected] {
    color: var(--choreo-collection);
    border: 1px solid var(--choreo-collection);
  }
.light-mode .font-selector-choreo-text:hover {
    color: var(--choreo-text);
    border: 1px solid var(--choreo-text);
  }
.light-mode .font-selector-choreo-text[selected] {
    color: var(--choreo-text);
    border: 1px solid var(--choreo-text);
  }
.light-mode .font-selector-choreo-stencil:hover {
    color: var(--choreo-stencil);
    border: 1px solid var(--choreo-stencil);
  }
.light-mode .font-selector-choreo-stencil[selected] {
    color: var(--choreo-stencil);
    border: 1px solid var(--choreo-stencil);
  }
.light-mode .font-selector-choreo-display:hover {
    color: var(--choreo-display);
    border: 1px solid var(--choreo-display);
  }
.light-mode .font-selector-choreo-display[selected] {
    color: var(--choreo-display);
    border: 1px solid var(--choreo-display);
  }
.light-mode .font-selector-varianz-superfamily:hover {
  color: var(--varianz-superfamily);
  border: 1px solid var(--varianz-superfamily);
}
.light-mode .font-selector-varianz-superfamily[selected] {
  color: var(--varianz-superfamily);
  border: 1px solid var(--varianz-superfamily);
}
.light-mode .font-selector-varianz-sans:hover {
  color: var(--varianz-sans);
  border: 1px solid var(--varianz-sans);
}
.light-mode .font-selector-varianz-sans[selected] {
  color: var(--varianz-sans);
  border: 1px solid var(--varianz-sans);
}
.light-mode .font-selector-varianz-mix:hover {
  color: var(--varianz-mix-hell);
  border: 1px solid var(--varianz-mix-hell);
}
.light-mode .font-selector-varianz-mix[selected] {
  color: var(--varianz-mix-hell);
  border: 1px solid var(--varianz-mix-hell);
}
.light-mode .font-selector-varianz-serif:hover {
  color: var(--varianz-serif);
  border: 1px solid var(--varianz-serif);
}
.light-mode .font-selector-varianz-serif[selected] {
  color: var(--varianz-serif);
  border: 1px solid var(--varianz-serif);
}
.light-mode .font-selector-vol:hover {
  color: var(--vol);
  border: 1px solid var(--vol);
}
.light-mode .font-selector-vol[selected] {
  color: var(--vol);
  border: 1px solid var(--vol);
}
.light-mode .font-selector-elephant {
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
}
.light-mode .font-selector-elephant:hover {
  color: var(--elephant);
  border: 1px solid var(--vol);
}
.light-mode .font-selector-elephant[selected] {
  color: var(--elephant);
  border: 1px solid var(--elephant);
}
.light-mode .font-selector-scytheserif {
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
}
.light-mode .font-selector-scytheserif:hover {
  color: var(--scytheserif);
  border: 1px solid var(--scytheserif);
}
.light-mode .font-selector-scytheserif[selected] {
  color: var(--scytheserif);
  border: 1px solid var(--scytheserif);
}
.light-mode .character {
      border: 1px solid var(--black);
      background-color: var(--white);
      fill: var(--black);
  }
.light-mode .character:hover {
      background-color: var(--black);
      fill: var(--white);
      border: none;
  }
.light-mode .character::after {
      color: var(--grey-dark-info);
  }
.light-mode .info {
  color: var(--grey-light-info);
}
.light-mode .table-with-border tr {
  border-bottom: 1px solid var(--black);
}
.light-mode .coming-soon p {
  color: var(--grey-light-info);
}
.light-mode .line-horizontal-coming-soon {
  background-color: var(--grey-light-info);
}
.light-mode .table-with-border tr:last-child {
  border-bottom: none;
}

/*TYPEFACES*/
.light-mode .typefaces-family-overview-varianzsuperfamily:hover .typefaces-family-info-varianz {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-choreocollection:hover .typefaces-family-info-choreocollection {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-choreotext:hover .typefaces-family-info-choreotext {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-choreostencil:hover .typefaces-family-info-choreostencil {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-choreobanner:hover .typefaces-family-info-choreobanner {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-choreodisplay:hover .typefaces-family-info-choreodisplay {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-elephant:hover .typefaces-family-info-elephant {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-egen:hover .typefaces-family-info-egen {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-scytheserif:hover .typefaces-family-info-scytheserif {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-vol:hover .typefaces-family-info-vol {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-varianzsans:hover .typefaces-family-info-varianzsans {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-varianzmix:hover .typefaces-family-info-varianzmix {
  color: var(--grey-light-info);
}
.light-mode .typefaces-family-overview-varianzserif:hover .typefaces-family-info-varianzserif {
  color: var(--grey-light-info);
}
.light-mode .single-style-svg-before,
.light-mode .single-style-svg-after {
  fill: var(--black);
}
.light-mode .single-style-svg-before {
  background: var(--grey-light);
}
.light-mode .single-style-svg-after-choreotext {
  background: var(--choreo-text-gradient-light);
}
.light-mode .single-style-svg-after-choreostencil {
  background: var(--choreo-stencil-gradient-light);
}
.light-mode .single-style-svg-after-choreodisplay {
  background: var(--choreo-display-gradient-light);
}
.light-mode .single-style-svg-after-egen {
  background: var(--egen-gradient-light);
}
.light-mode .single-style-svg-after-varianzsuperfamily {
  background: var(--varianz-superfamily-gradient-light);
}
.light-mode .single-style-svg-after-varianzsans {
  background: var(--varianz-sans-gradient-light);
}
.light-mode .single-style-svg-after-varianzmix {
  background: var(--varianz-mix-gradient-light);
}
.light-mode .single-style-svg-after-varianzserif {
  background: var(--varianz-serif-gradient-light);
}
.light-mode .single-style-svg-after-elephant {
  background: var(--elephant-gradient-light);
}
.light-mode .single-style-svg-after-scytheserif {
  background: var(--scytheserif-gradient-light);
}
.light-mode .single-style-svg-after-vol {
  background: var(--vol-gradient-light);
}
.light-mode .collapsible-subcontent-singlestyles:hover p {
  color: var(--grey-light-info);
}
.light-mode .families-collections .text-with-small-headline-and-line:hover .small-headline p{
  color: var(--grey-light-info);
}
/*TYPEFACES*/


.light-mode .pair-with-links-container a {
  color: var(--white);
}
.light-mode .pair-with-links-line-horizontal {
  background-color: var(--white);
}
.light-mode .big-headline {
  color: var(--white);
}
.light-mode .pair-with-links .collapsible-subcontent-singlestyles:hover p {
  color: var(--black);
}
.light-mode .pair-with-links .collapsible-subcontent-singlestyles-choreotext:hover span:nth-child(2) {
  color: var(--white);
  filter: opacity(62.5%);
}
.light-mode .pair-with-links .collapsible-subcontent-singlestyles-choreodisplay:hover span:nth-child(2) {
  color: var(--white);
  filter: opacity(62.5%);
}
.light-mode .pair-with-links .collapsible-subcontent-singlestyles-choreostencil:hover span:nth-child(2) {
  color: var(--white);
  filter: opacity(62.5%);
}
.light-mode .varianz-superfamily-image {
  fill: var(--black);
  stroke: var(--black);
}

/*INDEX*/
.light-mode .title-index {
  color: var(--white);
}
.light-mode .title-choreo-collection-index {
  background-color: var(--choreo-collection);
  background-image: var(--choreo-collection-gradient-dark);
}
.light-mode .title-choreo-text-index {
  background-color: var(--choreo-text);
  background-image: var(--choreo-text-gradient-dark);
}
.light-mode .title-choreo-stencil-index {
  background-color: var(--choreo-stencil);
  background-image: var(--choreo-stencil-gradient-dark);
}
.light-mode .title-choreo-banner-thin-index {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-dark);
}
.light-mode .title-choreo-display-black-index {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-dark);
}
.light-mode .title-choreo-display-thin-index {
  background-color: var(--choreo-display);
  background-image: var(--choreo-display-gradient-dark);
}
.light-mode .title-egen-index {
  background-color: var(--egen);
  background-image: var(--egen-gradient-dark);
}
.light-mode .title-varianz-superfamily-index {
  background-color: var(--varianz-superfamily);
  background-image: var(--varianz-superfamily-gradient-dark);
}
.light-mode .title-varianz-sans-index {
  background-color: var(--varianz-sans);
  background-image: var(--varianz-sans-gradient-dark);
}
.light-mode .title-varianz-mix-index {
  background-color: var(--varianz-mix);
  background-image: var(--varianz-mix-gradient-dark);
}
.light-mode .title-varianz-serif-index {
  background-color: var(--varianz-serif);
  background-image: var(--varianz-serif-gradient-dark);
}
.light-mode .title-vol-index {
  background-color: var(--vol);
  background-image: var(--vol-gradient-dark);
}
.light-mode .title-elephant-index {
  background-color: var(--elephant);
  background-image: var(--elephant-gradient-dark);
}
.light-mode .title-scytheserif-index {
  background-color: var(--scytheserif);
  background-image: var(--scytheserif-gradient-dark);
}
.light-mode .typefaces-visuals-index-full-width:hover a {
  transition: var(--transitionGeneral);
  color: var(--grey-light-info);
}
.light-mode .typefaces-visuals-index-half-width:hover a {
  transition: var(--transitionGeneral);
  color: var(--grey-light-info);
}
.light-mode .typefaces-visuals-index-tripple-width:hover a {
  transition: var(--transitionGeneral);
  color: var(--grey-light-info);
}
.light-mode .background-varianz-superfamily-gradient {
  background-image: var(--varianz-superfamily-gradient-lightmode);
}
.light-mode .highlight-varianz-superfamily-morecontrast {
  fill: #ffeb7c;
}
.light-mode .typefaces-visuals-index-tripple-width.collapsible-subcontent-singlestyles-choreodisplay:hover span:nth-child(2) {
  color: var(--black);
}
/*INDEX*/

.light-mode .letterings-full-width:hover .letterings-info,
.light-mode .letterings-half-width:hover .letterings-info,
.light-mode .letterings-tripple-width:hover .letterings-info {
  color: var(--grey-light-info);
}
.light-mode .page-big-text a:hover {
  color: var(--grey-light-info);
}

/*LICENSING*/
.light-mode .table-with-border-pricelist tr {
  border-bottom: 1px solid var(--black);
}
.light-mode .table-with-border-pricelist tr:last-child {
  border-bottom: none;
}
.light-mode .pricing-egen-highlight-color:hover,
.light-mode .pricing-choreo-highlight-color:hover,
.light-mode .pricing-varianz-superfamily-highlight-color:hover,
.light-mode .pricing-varianz-sans-highlight-color:hover,
.light-mode .pricing-varianz-mix-highlight-color:hover,
.light-mode .pricing-varianz-serif-highlight-color:hover,
.light-mode .pricing-elephant-highlight-color:hover,
.light-mode .pricing-scytheserif-highlight-color:hover,
.light-mode .pricing-vol-highlight-color:hover {
  background-color: var(--black);
  color: var(--white);
}
.light-mode .mail-link:hover {
  color: var(--grey-light-info);
}
/*LICENSING*/

/*BESTELLFORMULAR*/
.light-mode .bestellformular {
	background-color: var(--black);
}
.light-mode .bestellformular-big-headline {
    color: var(--white);
}
.light-mode .bestellformular-line-horizontal {
	background-color: var(--white);
}
.light-mode .bestellformular-big-headline-main {
	color: var(--white);
}
.light-mode .bestellformular-start-button {
	background-color: var(--white);
	color: var(--black);
}
.light-mode .bestellformular-start-button:hover {
	background-color: var(--check-green);
	color: var(--black);
	transition: var(--transitionGeneral);
}
.light-mode .bestellformular-modal {
	background-color: rgba(255, 255, 255, 0.875);
}
.light-mode .bestellformular-close {
	background: var(--grey-light-info);
}
.light-mode .bestellformular-close:hover{
 	background: var(--cancel-red);
}
.light-mode .bestellformular-close::before,
.light-mode .bestellformular-close::after {
	background-color: var(--white);
}
.light-mode .bestellformular-modal-content {
	background-color: var(--black);
}
.light-mode .style-selection-container {
	color: var(--white);
}
.light-mode .checkboxes-style-selection {
    border: 1px solid var(--white);
}
.light-mode .checkboxes-style-selection:hover {
	background: var(--selection-hover);
	color: var(--black);
	cursor: pointer;
}
.light-mode .checkboxes-style-selection:has(input:checked) {
    background: var(--selection-clicked);
	color: var(--black);
}
.light-mode .bestellformular-info {
	color: var(--grey-dark-info);
	filter: opacity(100%);
}
.light-mode .bestellformular-container input[type="text"] {
    border: 1px solid var(--white);
	background-color: var(--black);
	color: var(--grey-dark-info);
}
.light-mode .bestellformular-container input[type="text"]:hover {
	background-color: var(--selection-hover);
}
.light-mode .bestellformular-container input[type="text"]:focus {
	background-color: var(--selection-hover);
	color: var(--black);
}
.light-mode .bestellformular-container input[type="text"]:not(:placeholder-shown) {
    background-color: var(--selection-clicked);
    color: var(--black);
}
.light-mode .bestellformular-dropdown-container {
    border: 1px solid var(--white);
	background-color: var(--black);
}
.light-mode .bestellformular-dropdown-container:hover {
	background-color: var(--selection-hover);
}
.light-mode .bestellformular-dropdown-container:hover .bestellformular-dropdown-arrow {
    border-color: var(--black) transparent transparent transparent;
    pointer-events: none;
}
.light-mode .bestellformular-dropdown-arrow {
    border-color: var(--white) transparent transparent transparent;
    pointer-events: none;
}
.light-mode .bestellformular-dropdown-container select {
	color: var(--white);
	background-color: transparent;
}
.light-mode .bestellformular-dropdown-container:hover select {
	color: var(--black);
	transition: var(--transition-general);
}
.light-mode .bestellformular-dropdown-container.selected {
    background-color: var(--selection-clicked);
}
.light-mode .bestellformular-dropdown-container.selected .bestellformular-dropdown-arrow {
    border-color: var(--black) transparent transparent transparent;
}
.light-mode .bestellformular-dropdown-container.selected select{
	color: var(--black);
}
.light-mode .bestellformular-info-zusatzebene {
	color: var(--grey-dark-info);
}
.light-mode .bestellformular-link-zusatzebene {
	color: var(--white);
}
.light-mode .bestellformular-link-zusatzebene:hover {
	color: var(--grey-dark-info);
}
.light-mode .bestellformular-optional-message input[type="text"] {
    border: 1px solid var(--white);
	color: var(--grey-dark-info);
}
.light-mode .bestellformular-optional-message input[type="text"]:hover {
	background-color: var(--selection-hover);
}
.light-mode .bestellformular-optional-message input[type="text"]:focus {
	background-color: var(--selection-hover);
	color: var(--black);
}
.light-mode .bestellformular-optional-message input[type="text"]:not(:placeholder-shown) {
    background-color: var(--selection-clicked);
    color: var(--black);
}
.light-mode .bestellformular-nav-button-previous {
	background-color: var(--black);
    color: var(--grey-dark-info);
    border: 1px solid var(--grey-dark-info);
}
.light-mode .bestellformular-nav-button-previous:hover {
	background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--white);
}
.light-mode .bestellformular-nav-button-next {
	background-color: var(--white);
	color: var(--black);
}
.light-mode .bestellformular-nav-button-next:hover {
    background-color: var(--check-green);
	color: var(--black);
}
.light-mode .bestellformular-nav-button-next.last-step {
    background-color: var(--white);
    color: var(--black);
}
.light-mode .bestellformular-nav-button-next.last-step:hover {
    background-color: var(--check-green);
    color: var(--black);
}
.light-mode .step {
	color: var(--grey-dark-info);
}
.light-mode .step.active {
	color: var(--white);
}
.light-mode .bestellformular-message.success {
  background-color: var(--check-green);
  color: var(--black);
}
.light-mode .bestellformular-message.error {
  background-color: var(--cancel-red);
  color: var(--black);
}
/*BESTELLFORMULAR*/

/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/
.light-mode .early-access {
	background-color: var(--black);
}
.light-mode .email-for-early-access-container input[type="email"] {
    border: 1px solid var(--white);
	color: var(--grey-dark-info);
	background-color: var(--black);
}
.light-mode .email-for-early-access-container input[type="email"]:hover {
	background-color: var(--selection-hover);
}
.light-mode .email-for-early-access-container input[type="email"]:focus {
	background-color: var(--selection-hover);
	color: var(--black);
}
.light-mode .email-for-early-access-container input[type="email"]:not(:placeholder-shown) {
    background-color: var(--selection-clicked);
    color: var(--black);
}
.light-mode .get-early-access-button {
	background-color: var(--white);
	color: var(--black);
}
.light-mode .get-early-access-button:hover {
	background-color: var(--check-green);
	color: var(--black);
	transition: var(--transitionGeneral);
}
.light-mode .early-access-progress-info {
	color: var(--white);
}
.light-mode .early-access-progress-track {
  border: 1px solid var(--white);
  background: var(--grey-dark);
}
.light-mode .early-access-progress-bar {
  background: var(--white);
}
.light-mode .early-access-progress-percentage-info {
	color: var(--white);
}
/*EARLY ACCESS*//*EARLY ACCESS*//*EARLY ACCESS*/



/*FOOTER*/
.light-mode footer {
  background-color: var(--white);
  color: var(--black);
}
.light-mode footer a {
  color: var(--black);
}
.light-mode footer a:hover {
  color: var(--grey-light-info);
}
.light-mode .VZWO-logo {
  fill: var(--black);
}
.light-mode .footer-content-container {
  background-color: var(--grey-light);
  background-image: var(--grey-light-gradient);
}
.light-mode .infokasten-footer {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
}

.light-mode .big-headline-main {
  color: var(--black);
}



@media (min-width: 851px) {
    .light-mode #menu-toggle:checked ~ .menu li {
        border: none;
        background-color: transparent;
    }
    .light-mode #menu-toggle:checked ~ .menu li:hover {
        background-color: transparent;
    }
}

@media (min-width: 2400px) {
  .vzwo-atmosphere-image-normal {
    display: none;
  }
  .vzwo-atmosphere-image-wide {
    display: block;
    width: 100%;
    margin-bottom: -125px;
  }
}
/*FOOTER*/
/*LIGHTMODE STYLING*//*LIGHTMODE STYLING*//*LIGHTMODE STYLING*//*LIGHTMODE STYLING*//*LIGHTMODE STYLING