@charset "UTF-8";
/* 
 *	VARS.SCSS for Jive Backend
 *	Each theme provides its own variables
 */
/* türkis */
/* hover */
/* 
	MIXINS.SCSS 
*/
/* transitions: ... allows multiple attributes seperated with a comma */
/* transforms: ... allows multiple attributes seperated with a comma */
/* transform-origin: ... allows multiple attributes seperated with a comma */
/* filter */
/* gradients */
/* animations */
/* https://www.w3schools.com/css/css3_animations.asp
@include keyframes(fadein) {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@include animation('fadein 5s linear 2s infinite alternate');
*/
/* https://gist.github.com/mattgreenfield/80139552f60979310d79d9bb2931b9b9 */
/* 
	RESET.SCSS 
*/
/* box-sizing, not on pseudo-elements: would assign a pseudo-element to each element. https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  /* for smartphones */
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%; }

*,
::after,
::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  margin: 0;
  padding: 0; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/* Make sure videos and embeds fit their containers */
embed, iframe, object {
  max-width: 100%; }

a,
a:link,
a:active,
a:hover,
a:focus {
  outline: none; }

h1, .h1 {
  margin: 0 0 .67em 0; }

h2, .h2 {
  margin: 1.67em 0 .67em 0; }

h3, .h3 {
  margin: 1.34em 0 .34em 0; }

h4, .h4 {
  margin: 1em 0 .34em 0; }

h5, .h5 {
  margin: .67em 0 .34em 0; }

h6, .h6 {
  margin: .34em 0 .34em 0; }

img {
  border: none;
  vertical-align: middle;
  max-width: 100%;
  height: auto; }

p {
  margin: .67em 0 1.34em 0; }

em, i {
  letter-spacing: .025em; }

blockquote,
q {
  quotes: "„" "“" "‚" "‘"; }
  blockquote::before,
  q::before {
    content: open-quote; }
  blockquote::after,
  q::after {
    content: close-quote; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -.4em;
  font-size: .7em; }

sub {
  top: .4em; }

/* https://css-tricks.com/overriding-default-button-styles/ */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0; }
  button:focus:not([type=checkbox]):not([type=radio]),
  input:focus:not([type=checkbox]):not([type=radio]),
  optgroup:focus:not([type=checkbox]):not([type=radio]),
  select:focus:not([type=checkbox]):not([type=radio]),
  textarea:focus:not([type=checkbox]):not([type=radio]) {
    outline: none; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

input[type=text],
teatxarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* for smartphone form elements */ }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button; }

/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/playfair-display-v13-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Playfair Display Regular"), local("PlayfairDisplay-Regular"), url("/fonts/playfair-display-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/playfair-display-v13-latin-regular.woff2") format("woff2"), url("/fonts/playfair-display-v13-latin-regular.woff") format("woff"), url("/fonts/playfair-display-v13-latin-regular.ttf") format("truetype"), url("/fonts/playfair-display-v13-latin-regular.svg#PlayfairDisplay") format("svg");
  /* Legacy iOS */ }

/* playfair-display-700 - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/playfair-display-v13-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Playfair Display Bold"), local("PlayfairDisplay-Bold"), url("/fonts/playfair-display-v13-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/playfair-display-v13-latin-700.woff2") format("woff2"), url("/fonts/playfair-display-v13-latin-700.woff") format("woff"), url("/fonts/playfair-display-v13-latin-700.ttf") format("truetype"), url("/fonts/playfair-display-v13-latin-700.svg#PlayfairDisplay") format("svg");
  /* Legacy iOS */ }

/* playfair-display-900 - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/playfair-display-v13-latin-900.eot");
  /* IE9 Compat Modes */
  src: local("Playfair Display Black"), local("PlayfairDisplay-Black"), url("/fonts/playfair-display-v13-latin-900.eot?#iefix") format("embedded-opentype"), url("/fonts/playfair-display-v13-latin-900.woff2") format("woff2"), url("/fonts/playfair-display-v13-latin-900.woff") format("woff"), url("/fonts/playfair-display-v13-latin-900.ttf") format("truetype"), url("/fonts/playfair-display-v13-latin-900.svg#PlayfairDisplay") format("svg");
  /* Legacy iOS */ }

/* cormorant-garamond-300 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/cormorant-garamond-v5-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Cormorant Garamond Light"), local("CormorantGaramond-Light"), url("/fonts/cormorant-garamond-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("/fonts/cormorant-garamond-v5-latin-300.woff2") format("woff2"), url("/fonts/cormorant-garamond-v5-latin-300.woff") format("woff"), url("/fonts/cormorant-garamond-v5-latin-300.ttf") format("truetype"), url("/fonts/cormorant-garamond-v5-latin-300.svg#CormorantGaramond") format("svg");
  /* Legacy iOS */ }

/* cormorant-garamond-regular - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/cormorant-garamond-v5-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Cormorant Garamond Regular"), local("CormorantGaramond-Regular"), url("/fonts/cormorant-garamond-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/cormorant-garamond-v5-latin-regular.woff2") format("woff2"), url("/fonts/cormorant-garamond-v5-latin-regular.woff") format("woff"), url("/fonts/cormorant-garamond-v5-latin-regular.ttf") format("truetype"), url("/fonts/cormorant-garamond-v5-latin-regular.svg#CormorantGaramond") format("svg");
  /* Legacy iOS */ }

/* cormorant-garamond-500 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/cormorant-garamond-v5-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Cormorant Garamond Medium"), local("CormorantGaramond-Medium"), url("/fonts/cormorant-garamond-v5-latin-500.eot?#iefix") format("embedded-opentype"), url("/fonts/cormorant-garamond-v5-latin-500.woff2") format("woff2"), url("/fonts/cormorant-garamond-v5-latin-500.woff") format("woff"), url("/fonts/cormorant-garamond-v5-latin-500.ttf") format("truetype"), url("/fonts/cormorant-garamond-v5-latin-500.svg#CormorantGaramond") format("svg");
  /* Legacy iOS */ }

/* cormorant-garamond-600 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/cormorant-garamond-v5-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Cormorant Garamond SemiBold"), local("CormorantGaramond-SemiBold"), url("/fonts/cormorant-garamond-v5-latin-600.eot?#iefix") format("embedded-opentype"), url("/fonts/cormorant-garamond-v5-latin-600.woff2") format("woff2"), url("/fonts/cormorant-garamond-v5-latin-600.woff") format("woff"), url("/fonts/cormorant-garamond-v5-latin-600.ttf") format("truetype"), url("/fonts/cormorant-garamond-v5-latin-600.svg#CormorantGaramond") format("svg");
  /* Legacy iOS */ }

/* cormorant-garamond-700 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/cormorant-garamond-v5-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Cormorant Garamond Bold"), local("CormorantGaramond-Bold"), url("/fonts/cormorant-garamond-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/cormorant-garamond-v5-latin-700.woff2") format("woff2"), url("/fonts/cormorant-garamond-v5-latin-700.woff") format("woff"), url("/fonts/cormorant-garamond-v5-latin-700.ttf") format("truetype"), url("/fonts/cormorant-garamond-v5-latin-700.svg#CormorantGaramond") format("svg");
  /* Legacy iOS */ }

/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/roboto-condensed-v16-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Condensed Light"), local("RobotoCondensed-Light"), url("/fonts/roboto-condensed-v16-latin-300.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-condensed-v16-latin-300.woff2") format("woff2"), url("/fonts/roboto-condensed-v16-latin-300.woff") format("woff"), url("/fonts/roboto-condensed-v16-latin-300.ttf") format("truetype"), url("/fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed") format("svg");
  /* Legacy iOS */ }

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/roboto-condensed-v16-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"), url("/fonts/roboto-condensed-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-condensed-v16-latin-regular.woff2") format("woff2"), url("/fonts/roboto-condensed-v16-latin-regular.woff") format("woff"), url("/fonts/roboto-condensed-v16-latin-regular.ttf") format("truetype"), url("/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed") format("svg");
  /* Legacy iOS */ }

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/roboto-condensed-v16-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"), url("/fonts/roboto-condensed-v16-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-condensed-v16-latin-700.woff2") format("woff2"), url("/fonts/roboto-condensed-v16-latin-700.woff") format("woff"), url("/fonts/roboto-condensed-v16-latin-700.ttf") format("truetype"), url("/fonts/roboto-condensed-v16-latin-700.svg#RobotoCondensed") format("svg");
  /* Legacy iOS */ }

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url("/fonts/roboto-v18-latin-100.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Thin"), local("Roboto-Thin"), url("/fonts/roboto-v18-latin-100.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-v18-latin-100.woff2") format("woff2"), url("/fonts/roboto-v18-latin-100.woff") format("woff"), url("/fonts/roboto-v18-latin-100.ttf") format("truetype"), url("/fonts/roboto-v18-latin-100.svg#Roboto") format("svg");
  /* Legacy iOS */ }

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/roboto-v18-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Light"), local("Roboto-Light"), url("/fonts/roboto-v18-latin-300.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-v18-latin-300.woff2") format("woff2"), url("/fonts/roboto-v18-latin-300.woff") format("woff"), url("/fonts/roboto-v18-latin-300.ttf") format("truetype"), url("/fonts/roboto-v18-latin-300.svg#Roboto") format("svg");
  /* Legacy iOS */ }

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/roboto-v18-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Roboto"), local("Roboto-Regular"), url("/fonts/roboto-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-v18-latin-regular.woff2") format("woff2"), url("/fonts/roboto-v18-latin-regular.woff") format("woff"), url("/fonts/roboto-v18-latin-regular.ttf") format("truetype"), url("/fonts/roboto-v18-latin-regular.svg#Roboto") format("svg");
  /* Legacy iOS */ }

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/roboto-v18-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Medium"), local("Roboto-Medium"), url("/fonts/roboto-v18-latin-500.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-v18-latin-500.woff2") format("woff2"), url("/fonts/roboto-v18-latin-500.woff") format("woff"), url("/fonts/roboto-v18-latin-500.ttf") format("truetype"), url("/fonts/roboto-v18-latin-500.svg#Roboto") format("svg");
  /* Legacy iOS */ }

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/roboto-v18-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Bold"), local("Roboto-Bold"), url("/fonts/roboto-v18-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-v18-latin-700.woff2") format("woff2"), url("/fonts/roboto-v18-latin-700.woff") format("woff"), url("/fonts/roboto-v18-latin-700.ttf") format("truetype"), url("/fonts/roboto-v18-latin-700.svg#Roboto") format("svg");
  /* Legacy iOS */ }

/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/roboto-v18-latin-900.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Black"), local("Roboto-Black"), url("/fonts/roboto-v18-latin-900.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-v18-latin-900.woff2") format("woff2"), url("/fonts/roboto-v18-latin-900.woff") format("woff"), url("/fonts/roboto-v18-latin-900.ttf") format("truetype"), url("/fonts/roboto-v18-latin-900.svg#Roboto") format("svg");
  /* Legacy iOS */ }

/* oswald-200 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url("/fonts/oswald-v16-latin-200.eot");
  /* IE9 Compat Modes */
  src: local("Oswald ExtraLight"), local("Oswald-ExtraLight"), url("/fonts/oswald-v16-latin-200.eot?#iefix") format("embedded-opentype"), url("/fonts/oswald-v16-latin-200.woff2") format("woff2"), url("/fonts/oswald-v16-latin-200.woff") format("woff"), url("/fonts/oswald-v16-latin-200.ttf") format("truetype"), url("/fonts/oswald-v16-latin-200.svg#Oswald") format("svg");
  /* Legacy iOS */ }

/* oswald-300 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/oswald-v16-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Oswald Light"), local("Oswald-Light"), url("/fonts/oswald-v16-latin-300.eot?#iefix") format("embedded-opentype"), url("/fonts/oswald-v16-latin-300.woff2") format("woff2"), url("/fonts/oswald-v16-latin-300.woff") format("woff"), url("/fonts/oswald-v16-latin-300.ttf") format("truetype"), url("/fonts/oswald-v16-latin-300.svg#Oswald") format("svg");
  /* Legacy iOS */ }

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/oswald-v16-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Oswald Regular"), local("Oswald-Regular"), url("/fonts/oswald-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/oswald-v16-latin-regular.woff2") format("woff2"), url("/fonts/oswald-v16-latin-regular.woff") format("woff"), url("/fonts/oswald-v16-latin-regular.ttf") format("truetype"), url("/fonts/oswald-v16-latin-regular.svg#Oswald") format("svg");
  /* Legacy iOS */ }

/* oswald-500 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/oswald-v16-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Oswald Medium"), local("Oswald-Medium"), url("/fonts/oswald-v16-latin-500.eot?#iefix") format("embedded-opentype"), url("/fonts/oswald-v16-latin-500.woff2") format("woff2"), url("/fonts/oswald-v16-latin-500.woff") format("woff"), url("/fonts/oswald-v16-latin-500.ttf") format("truetype"), url("/fonts/oswald-v16-latin-500.svg#Oswald") format("svg");
  /* Legacy iOS */ }

/* oswald-600 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/oswald-v16-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Oswald SemiBold"), local("Oswald-SemiBold"), url("/fonts/oswald-v16-latin-600.eot?#iefix") format("embedded-opentype"), url("/fonts/oswald-v16-latin-600.woff2") format("woff2"), url("/fonts/oswald-v16-latin-600.woff") format("woff"), url("/fonts/oswald-v16-latin-600.ttf") format("truetype"), url("/fonts/oswald-v16-latin-600.svg#Oswald") format("svg");
  /* Legacy iOS */ }

/* oswald-700 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/oswald-v16-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Oswald Bold"), local("Oswald-Bold"), url("/fonts/oswald-v16-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/oswald-v16-latin-700.woff2") format("woff2"), url("/fonts/oswald-v16-latin-700.woff") format("woff"), url("/fonts/oswald-v16-latin-700.ttf") format("truetype"), url("/fonts/oswald-v16-latin-700.svg#Oswald") format("svg");
  /* Legacy iOS */ }

html, body {
  background: #444;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; }

.card-data::before, .card-data::after,
.form-section::before,
.form-section::after,
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table; }

.card-data::after,
.form-section::after,
.clearfix::after {
  clear: both; }

.loader {
  display: none;
  height: 30px;
  width: 30px;
  background: url(/img/loader.gif) no-repeat center left; }

#page-header {
  padding: 20px 0; }

fieldset {
  border: none; }
  fieldset .form-section {
    margin: 3px 0; }
  fieldset label {
    width: 90px;
    float: left;
    padding-top: 3px; }
  fieldset select {
    margin-top: 3px; }
  fieldset input[type=text] {
    border: 1px solid #333;
    width: 140px;
    padding: 3px; }
  fieldset input[type=button],
  fieldset input[type=submit] {
    padding: 5px 10px;
    border: none;
    background: #333;
    color: #fff;
    cursor: pointer; }
    fieldset input[type=button]:hover,
    fieldset input[type=submit]:hover {
      background-color: #9c0; }
    fieldset input[type=button].lg,
    fieldset input[type=submit].lg {
      font-size: 20px;
      font-size: 1.25rem;
      line-height: 1.4em;
      padding: 8px 15px; }
  fieldset#fldDatenschutz {
    margin-top: 1em; }
    fieldset#fldDatenschutz label {
      width: 90%;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 1.4em;
      padding-top: 0; }
  fieldset #sedcard-error,
  fieldset #paymentError {
    color: red; }
    fieldset #sedcard-error .inner,
    fieldset #paymentError .inner {
      margin-top: 1em; }

.mehrAbstand {
  padding-top: 20px; }

#page {
  padding: 0 50px; }

#conf-panel {
  float: left;
  width: 250px;
  background: #fff;
  padding: 0 10px 20px 10px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.4em; }

#conf-preview {
  float: left;
  width: 1002px;
  margin-left: 10px; }
  #conf-preview .conf-preview__outer {
    position: relative;
    padding-top: calc(100% / (300 / 210));
    /* DIN A4 quer */ }
  #conf-preview .conf-preview__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden; }
  #conf-preview .conf-preview__left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    bottom: 0;
    z-index: 2;
    background: #eee; }
  #conf-preview .conf-preview__right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    bottom: 0;
    z-index: 3;
    background: #fff; }
  #conf-preview .image-editor {
    display: none;
    position: absolute;
    top: 35px;
    right: 15px;
    display: none;
    width: 50px; }
    #conf-preview .image-editor a {
      display: inline-block;
      width: 40px;
      padding: 5px;
      margin-top: 5px;
      border-radius: 5px;
      border: 1px solid #333;
      text-align: center;
      text-decoration: none;
      background-color: #f1f1f1;
      color: #333; }
    #conf-preview .image-editor .quality.high {
      color: #0c0 !important; }
    #conf-preview .image-editor .quality.medium {
      color: #f90 !important; }
    #conf-preview .image-editor .quality.low {
      color: #f00 !important; }
  #conf-preview .image-selector {
    position: relative;
    left: 50%;
    margin-left: -75px;
    width: 150px;
    padding-bottom: 2em; }
    #conf-preview .image-selector button {
      padding: 5px 10px;
      border: none;
      background: #333;
      color: #fff;
      cursor: pointer; }
      #conf-preview .image-selector button:hover {
        background-color: #9c0; }
    #conf-preview .image-selector span {
      user-select: none;
      text-align: center;
      text-overflow: ellipsis;
      display: block;
      position: absolute;
      top: 30px;
      width: 100%;
      overflow: hidden;
      white-space: nowrap; }
  #conf-preview .mover {
    cursor: move; }

/* COVER */
.sedcard-front-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: calc(100% * (210 / 148));
  /* DIN A5 hoch */
  overflow: hidden;
  z-index: 1;
  cursor: pointer; }
  .sedcard-front-frame .sedcard-front {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    .sedcard-front-frame .sedcard-front .sedcard-cover {
      position: relative;
      background-color: #ccc; }
    .sedcard-front-frame .sedcard-front #sedcard-cover {
      height: 100%;
      width: 100%; }
    .sedcard-front-frame .sedcard-front input[type=file] {
      position: absolute;
      top: -1000px; }
    .sedcard-front-frame .sedcard-front form {
      position: absolute;
      bottom: 20%;
      left: 20px;
      right: 20px;
      z-index: 2;
      text-align: center; }

#sedcard-name {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  font-size: 2vw;
  line-height: 1em; }

/* SMALL IMAGES */
.sedcard-frame {
  position: absolute;
  width: 30%;
  padding-top: calc(30% * (210 / 148));
  /* DIN A5 hoch */
  overflow: hidden;
  z-index: 1;
  cursor: pointer; }
  .sedcard-frame-1 {
    top: 0;
    left: 3%; }
  .sedcard-frame-2 {
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%); }
  .sedcard-frame-3 {
    top: 0;
    right: 3%; }
  .sedcard-frame-4 {
    bottom: 0;
    left: 3%; }
  .sedcard-frame-5 {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%); }
  .sedcard-frame-6 {
    bottom: 0;
    right: 3%; }
  .sedcard-frame .sedcard-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    .sedcard-frame .sedcard-box .sedcard-image {
      position: relative;
      background-color: #ccc;
      height: 100%; }
    .sedcard-frame .sedcard-box input[type=file] {
      position: absolute;
      top: -1000px; }
    .sedcard-frame .sedcard-box form {
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      z-index: 2;
      text-align: center; }

#sedcard-data {
  position: absolute;
  top: 35%;
  left: 3%;
  right: 3%;
  font-size: 14px;
  line-height: 1.2em; }
  #sedcard-data .card-data {
    position: relative;
    border-bottom: 1px solid #eee;
    padding: 2px 0; }
    #sedcard-data .card-data.optional {
      display: none; }
      #sedcard-data .card-data.optional.show {
        display: block; }
    #sedcard-data .card-data .card-data__label {
      float: left;
      width: 60px;
      font-size: 10px;
      line-height: 1.2em;
      padding-top: 0.4em; }
    #sedcard-data .card-data .card-data__value {
      float: left;
      width: calc(100% - 60px);
      font-size: 14px;
      line-height: 1.2em; }
  #sedcard-data .sedcard-data__left {
    float: left;
    width: 30%;
    margin-left: 5%;
    margin-right: 5%; }
  #sedcard-data .sedcard-data__right {
    float: left;
    width: 55%; }
    #sedcard-data .sedcard-data__right .card-data__label {
      width: 75px; }
    #sedcard-data .sedcard-data__right .card-data__value {
      width: calc(100% - 75px); }

.branding {
  position: absolute;
  right: 3%;
  bottom: 32%;
  width: 5vw;
  z-index: 3; }
  .branding img {
    width: 100%;
    height: auto;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    filter: grayscale(1); }

#conf-checkout {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2; }
  #conf-checkout #checkout {
    display: none;
    color: #333;
    padding: 30px 40px;
    position: relative;
    top: 30px !important;
    bottom: 30px !important;
    z-index: 10000;
    background-color: #f1f1f1;
    width: 700px;
    min-height: 200px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    margin-left: auto;
    margin-right: auto;
    border: 8px solid #fff;
    border-radius: 20px;
    -moz-box-shadow: 0 0 90px #000;
    -webkit-box-shadow: 0 0 90px #000;
    box-shadow: 0 0 90px #000; }
    #conf-checkout #checkout fieldset {
      border-radius: 10px;
      background: #fff none;
      padding: 20px 10px 20px 20px; }
      #conf-checkout #checkout fieldset#fldAnschrift p {
        margin-top: 5px;
        margin-bottom: 5px; }
        #conf-checkout #checkout fieldset#fldAnschrift p label {
          width: 115px; }
      #conf-checkout #checkout fieldset#fldAGB label[for=chkAgb] {
        width: auto;
        float: none;
        padding: 0 0 0 20px; }
      #conf-checkout #checkout fieldset#fldPayment label {
        width: auto;
        float: none;
        margin-left: 1em; }
    #conf-checkout #checkout input[type="text"],
    #conf-checkout #checkout select,
    #conf-checkout #checkout textarea {
      width: 200px;
      padding: 3px;
      background-color: #f1f1f1;
      border: 1px solid #f1f1f1; }
      #conf-checkout #checkout input[type="text"]:focus,
      #conf-checkout #checkout select:focus,
      #conf-checkout #checkout textarea:focus {
        border: 1px solid #CCCCCC; }
    #conf-checkout #checkout .btn {
      text-decoration: none;
      border: none;
      color: white;
      background: #333;
      padding: 5px 10px;
      cursor: pointer; }
      #conf-checkout #checkout .btn:hover {
        background: #9c0; }
    #conf-checkout #checkout #cmdBackToConfig,
    #conf-checkout #checkout #cmdBackToPage1,
    #conf-checkout #checkout #cmdOrderFinal {
      float: left; }
    #conf-checkout #checkout #cmdOrder,
    #conf-checkout #checkout #cmdOrderFinal {
      float: right; }
    #conf-checkout #checkout #checkout-error-page1 {
      color: red; }
    #conf-checkout #checkout #sedcardPayment {
      display: none; }
      #conf-checkout #checkout #sedcardPayment #formPayment #paymentAPI {
        padding-top: 2em;
        display: none; }

#page-footer {
  margin: 3em 0;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.4em; }
  #page-footer a {
    color: #000; }