#bra-size-chooser {
	float: left;
	width: 66%;
}
#bra-size-chooser h2 {
	margin-top: 10px;		/* contain Korrektur */
}
#step-1, #step-2 {
	white-space: nowrap;
	display: none;
}
#step-1.on, #step-2.on {
	display: inline;
}
#size-nav {
	position: relative;		/* pos Bezugspunkt */
  float: left;					/* contain */
	width: 100%;
}
#size-nav .u-plus-cups {
	float: left;
}
/* U + Cup Buttons */
#size-nav .bra-u, #size-nav .bra-cup {
	display: block;
  font-family: "Century Gothic", "CenturyGothicRegular", "Avant Garde", "URW Gothic L", "Futura", "sans-serif";
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 16px 0px;
	width: 41px;
	line-height: 21px;
	margin: 0 0 15px 15px;
	background: #fff;
	-ms-user-select: none;		/* for a Test */
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
#size-nav .bra-cup {
	text-decoration: none;
	font-weight: normal;
}
/* U + Cup Buttons interaktiv*/
#size-nav .bra-u:hover, #size-nav .bra-u:active, #size-nav .bra-u.on,
#size-nav .bra-cup:hover, #size-nav .bra-cup:active {
	cursor: pointer;
	color: #fff;
	background: #ea0c8b;
	border-color: #ea0c8b;
}
#size-nav .bra-u:active, #size-nav .bra-cup:active {
	transform: translateY(2px);
}
/* Cups Untermenüs */
#size-nav .bra-cup-sizes {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 0 15px 0;
	padding: 15px 0 0 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #f6f6f6;
}
#size-nav .bra-cup-sizes.on {
	display: block;
}
#size-nav .bra-cup-sizes li {
	float: left;
}
/* | | Info, Hilfe, Beratung */
#bra-size-help {
	width: 30%;
	float: right;
}
#bra-question {
	width: 225px;
	margin-bottom: 20px;
}
/* Mobile */
@media only screen and (max-width: 639px) { /* breakpoint */
	#bra-size-chooser, #bra-size-help {
		/* float: none; 	nicht, für contain */
		width: 100%;
	}
	#bra-size-help {
		margin-top: 14px;
	}
	#bra-question {
		width: auto;
	}
}

/* NEW LAYOUT */
/* .lms : [l]ace [m]odern [s]tyles */

/* Basis */
.lms h1 {
	font-size: 24px;
	line-height: 31px;
	margin: 28px 0 16px;
}
.lms h2, .block-content-inner .lms h2 {
	font-size: 18px;
	line-height: 23px;
	margin: 20px 0 14px;
}
.block-content-inner .lms .bigger {
	font-size: 21px;
}
.lms p, .lms ol, .lms ul {
	font-size: 14px;
	line-height: 1.4;
	margin: 14px 0;
}
.lms .spacious {
	line-height: 1.6;		/* fluffy (22,4 statt 19,6) */
}
.lms .classic {				/* ol & ul */
	padding-left:	26px;
}
.lms .classic li {		/* ol & ul */
	margin:	4px 0 4px 4px;
}
.lms ul.classic li {
	list-style: disc;
}
.lms hr {
	margin: 28px 0;
}
.lms p + hr {
	margin-top: 34px;
}
.lms .space {
	margin-top: 36px;
	margin-bottom: 36px;
}
.lms .no-space {
	margin-top: 0;
	margin-bottom: 0;
}
.lms figure {		/* Illu/Block Bildunterschrift */
	margin:		0;
}
.lms .flex {		/* responsive image: max. original px, sonst 100% verfügbar */
	max-width: 100%;
	width: auto;
	height: auto;
}
.lms .contain {		/* clear old-fashioned + containing blocks */
	width: 100%;
	float: left;
}
.light {
	color: #999;
}
#main .no-underline a,		/* Links nicht unterschreichen | ungünstig ... durch alte CSS! */
#main a.no-underline {
	text-decoration: none;
}
.lms .arrow {		/* plus Pfeil (a href) */
	color: #ea0c8b;
	text-decoration: none;
}
.lms .arrow::after {
	content: "â–¸";
	padding: 0 0 0 6px;
}
.lms .gingham {			/* Lace Karo-Muster (beliebiges Element) */
	background: #fff url(/files/lace-gingham-4x.png) repeat;
	background-size: 24px;
}
.lms .plane {				/* heller auf Karo */
	background-color: rgba(255,255,255, 0.85);
}

/* Daten-Tabellen, simpel */
.lms .daten {
	margin: 20px 0 20px;
	border-collapse: collapse;
}
.lms .stripe {		/* (.daten) oben + unten Border (sonst keine) */
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.lms .daten th, .lms .daten td {
	font: 14px/19px "Century Gothic", "CenturyGothicRegular", "Avant Garde", "URW Gothic L", "Futura", sans-serif;
	text-align: center;
	border-top: 1px solid #ccc;
	padding: 10px;
}
.lms .daten th {
	font-weight: bold;
}
.lms .daten th .no-bold {
	font-weight: normal;		/* abweichend; flexibel */
}
.lms .daten tbody th {
	text-align: right;
}
.lms .daten thead th {		/* Kopf oben = oben keine Linie */
	border-top: none;
}
.lms .rows-marked tbody tr:nth-child(odd) {		/* Zebra-Streifen Tabelle */
	background: #f6f6f6;
}
.lms .cols-marked td:nth-child(even) {				/* Spezial*: Spalten Zebra-Streifen */
	background: #f6f6f6;
}
.lms .gingham th, .lms .gingham td {					/* Lace Karo-Muster */
	border: 1px solid #ea0c8b;
	border-width: 1px 1px 0;
	background-color: rgba(255,255,255, 0.85);
	color: #ea0c8b;
	/* font-size: 16px; */
	font-weight: bold;
}
.lms .gingham.stripe {
	border-color: #ea0c8b;
}
/* Mobile: flip Table (.daten) lr -> tb !BE CAREFULL! :
   few rows (2-3!) + head ONLY left */
@media (max-width: 640px) {
	.lms .flip thead,
  .lms .flip tbody, .lms .flip tr {
		float: left;
	}
	.lms .flip th, .lms .flip td {
		display: block;
	}
	.lms .flip tbody th {
		text-align: center;
		height: 19px;
		overflow: auto;
	}
	/* maybe + %-width for trs (+table=100%) = stable (2=50%), but line-break! */
}
/* Special Table | Desktop 1 -> Mobile 2 parts */
/* head ONLY left */
.lms .mobile-part1,
.lms .mobile-part2 {
	float: left;
	margin-top:	6px;
}
.lms .mobile-part2 tbody th {
	display: none;
}
.lms .two-lines td {
	height: 38px;		/* keep 2x height without th */
}
@media (max-width: 640px) {
	.lms .mobile-part1,
	.lms .mobile-part2 {
		width: 100%;
	}
	.lms .mobile-part2 tbody th {
		display: table-cell;
	}
}

/* großer Aufzählungspunkt (1) */
.lms .step-point,
.lms .step-pointed li::before {
	display: inline-block;
	color: #fff;
	background: #ea0c8b;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
	width: 28px;
	line-height: 28px;
	font-size: 16px;
	margin: 4px 4px -4px 4px;
}
.lms .step-pointed {		/* ol/ul */
	counter-reset: step-pointed;
}
.lms .step-pointed li {
	margin: 22px 0 22px 40px;
	position: relative;
}
.lms .step-pointed li::before {
	counter-increment: step-pointed;
	content: counter(step-pointed);
	position: absolute;
	margin: -4px 0 0 -36px;
}
ol.step-pointed, ol.step-pointed li {
	padding: 0;
	list-style: none;
}

/* Iconic Round Buttons */
.lms .iconic {
	display: block;
	overflow: hidden;
	font-family: "Century Gothic", "CenturyGothicRegular", "Avant Garde", "URW Gothic L", "Futura", "sans-serif";
	font-size: 16px;
	text-align: center;
	margin: 0 auto;
	width: 60px;		/* Größe: klein */
	height: 60px;		/* safety (bigger content) */
	line-height: 60px;
	border: solid 1px #ccc;
	border-radius: 50%;
	background: #fff;
}
.lms .iconic.tinny,
.lms .tinny .iconic {	/* Größe: sehr klein */
	width: 46px;
	height: 46px;
	line-height: 46px;
}
.lms .iconic.mid,
.lms .mid .iconic {		/* Größe: mittel */
	width: 90px;
	height: 90px;
	line-height: 90px;
}
.lms .iconic.big,
.lms .big .iconic {		/* Größe: groß */
	width: 120px;
	height: 120px;
	line-height: 120px;
}
.lms a:hover .iconic {
	background: #ea0c8b;
	border-color: #ea0c8b;
	color: #fff;
}
.lms .iconic img {		/* zu kleine Bilder */
	display: inline;
	vertical-align: middle;
	margin-top: -4px;		/* Korrektur (Schriftart line-height) */
}
.lms .iconic .logo {
	display: block;
  margin-top: 0;
	width: 100%;		/* Icon passt sich Größe an! */
}
.lms a:hover .logo {		/* Grau -> Weiß */
	filter: brightness(150%)
}
/* Icon-List (full width, 4 or 5) */
.lms .iconic-buttons {
	float: left;
  width: 100%;		/* contain und arrangement */
  margin-top: -4px;
  overflow: hidden;
}
.lms .iconic-buttons li {		/* 4 Buttons */
	float: left;
	width: 25%;		/* arrangement */
}
.lms .five li {  /* 5 Buttons */
	width: 20%;
}
#main .iconic-buttons a {		/* ungünstig ... durch alte CSS! */
	text-decoration: none;
}

/* Teaser Gingham */
.lms .teaser-gingham {
	position: relative;		/* pos-rev-point */
	background: #fff url(/files/lace-gingham-4x.png) repeat;
	background-size: 24px;
}
.lms .teaser-gingham .plane {
	background: rgba(255,255,255, 0.85);
}
/* round */
.lms .teaser-gingham.round {
	margin: 20px auto;
	width: 225px;
	height: 225px;
	border-radius: 50%;
	background-position: -12px -12px;
	overflow: hidden;
}
.lms .teaser-gingham.round .plane {
	position: absolute;
	top: 16px;
	right: 16px;
	bottom: 16px;
	left: 16px;
	font-family: "Century Gothic", "CenturyGothicRegular", "Avant Garde", "URW Gothic L", "Futura", "sans-serif";
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	color: #ea0d8b;
	border-radius: 50%;
}
.lms .teaser-gingham .one-line {		/* einzeilig */
	line-height: 1;
	margin-top: 31%;
}
.lms .teaser-gingham .two-lines {		/* zweizeilig */
	margin-top: 55%;
	line-height: 1;
}
.lms .two-lines .one {
	display: block;
	margin-top: -1em;
}
.lms .two-lines .two {
	display: block;
	font-weight: normal;
}
.lms .teaser-gingham .xxpercent {		/* XX % Rabatt */
	line-height: 1;
}
.lms .xxpercent .bignum {
	position: absolute;
	top: 48px;
	left: 20px;
	font-size: 93px;
	letter-spacing: -5px;
}
.lms .xxpercent .percent {
	position: absolute;
	top: 61px;
	left: 121px;
	font-size: 70px;
	font-weight: normal;
}
/* square */
.lms .teaser-gingham.square {
	margin: 20px 0;
	padding: 18px;
}
.lms .teaser-gingham.square .plane {
	padding: 1px 14px;
}

/* Product Labels (img popup e.g.) */
.lms .labels br {
	clear: none;		/* ?! */
}
.lms .labels figure,
.lms .label-much-text figure {
	float: left;
	margin: 14px 0;
	box-sizing: border-box;
	width: 33.333333%;
	padding: 0 8px 0;
}
.lms .label-much-text figure {
	padding: 0 14px 0 0;
}
.lms .labels figcaption p {
	margin: 10px 0 0;
}
@media (min-width: 481px) {
	.lms .labels figure:nth-child(3n+1) {
		clear: left;
	}
}
@media (max-width: 480px) {
	.lms .labels figure,
	.lms .label-much-text figure {
		width: 50%;
	}
	.lms .labels figure:nth-child(2n+1) {
		clear: left;
	}
}

/* Toggle */
.toggler {
	cursor: pointer;
}
.toggler::before {
	content: "+";
	display: inline-block;
	vertical-align: middle;
	font-size: 24px;
	color: #ea0c8b;
	margin: -10px 6px -7px 0;
}
.toggler.on::before {
	content: "–";
}
.more-content {
	display: none;
}
.more-content.on {
	display: block;
}
/* Toggle */
	
	.small-tablet.more-content
	.small-tablet-hide {
		display: none;
	}
	.small-tablet.more-content.on {
		display: block;
	}

/* Toggle*/

	.mobile.more-content,
	.mobile-hide {
		display: none;
	}
	.mobile.more-content.on {
		display: block;
	}
</style>