.desktop-only {
	display: inherit;
}

.mobile-only {
	display: none;
}

@media (max-width: 1240px) {
	p {
		font-size:1.1em;
	}

	html body #main .Kapiteleinleitung .image-header,
	html body #main > div > .csc-default,
	html body #main > .csc-default,
	html body #main-wrapper #shop-info-wrapper #shop-info {
		max-width:968px;
	}

	html body #main-wrapper #main .classListWrapper .classList .classNameWrapper > input {
		width:500px;
	}

	html body .classListWrapper .classList .classStudentList .classStudent {
		width:280px;
	}

	html #main .two-col-wrapper h3,
	html #main .two-col-wrapper .Geschichte-nutzen {
		font-size:1.5rem;
	}

	.kapitelnavi > ul {
		width:100%;
		border-left:solid 64px transparent;
		border-right:solid 64px transparent;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	html body #main > div > .intro-image,
	html body #main > div > .csc-default,
	html body #main > .csc-default
	html body #main h1 {
		max-width:none;
	}
}

@media (max-width: 1004px) {
	h4.teaser,
	html body #main ol,
	html body #main ul,
	p {
		font-size:1em;
	}

	html body #main > div > .csc-default,
	html body #main > .csc-default,
	html body #main-wrapper #shop-info-wrapper #shop-info {
		max-width:none;
		width:calc(100% - 32px);
		box-sizing:border-box;

		margin-left:auto;
		margin-right:auto;
	}

	#main {
		padding-bottom:48px;
	}

	html #main .two-col-wrapper h3,
	html #main .two-col-wrapper .Geschichte-nutzen {
		font-size:1.3rem;
	}


	html body #main-wrapper #main .classListWrapper .classList .classNameWrapper > input {
		width:400px;
	}

	html body .classListWrapper .classList {
		font-size:0.85em;
	}

	html body .classListWrapper .classList .classStudentList .classStudent .studentName {
		width:100px;
	}

	.quellen-angabe a {
		overflow: hidden;
		width: 100%;
		display:block;
	}

	.col25 h3,
	.col50 h3,
	.col25 a.fancy,
	.col50 a.fancy {
		margin-bottom:0px;
	}

	html body #main #c10459 .csc-textpic-text a[href="inhaltsverzeichnis/"]:after,
	html body #main #c10459 .csc-textpic-text a[href="faqs/"]:after,
	html body #main #c10459 .csc-textpic-text a.videoLB:after {
		width:20px;
		height:20px;
		top:0px;
	}

	html body #shop-info-wrapper #shop-info a.fancy:after,
	html body #shop-info-wrapper #shop-info p a:after {
		font-size:1em;
		line-height:1em;
		width:auto;
		height:1em;
		top:0px;
	}
}
@media (max-width: 900px) {

	.two-col-wrapper > .col50 {
		float:none !important;
		width:100% !important;
		box-sizing:border-box;
	}

	.two-col-wrapper > .col50:first-child:after {
		content:'';
		display:block;
		background:#95989a;
		border-left:solid 32px #fff;
		border-right:solid 32px #fff;
		position:absolute;
		bottom:0px;
		left:0px;
		right:0px;
		height:1px;
	}

	.two-col-wrapper:before {
		display:none;
	}
}

@media (min-width: 851px) {
	html #main .button-container {
		text-align: right;
	}
	html #main .button-container a.desktop-only {
		display: inline-block;
	}
}

@media (max-width: 850px) {
	.two-col-wrapper > .col25,
	.two-col-wrapper > .col50 {
		padding:16px 24px;
	}

	.two-col-wrapper .Geschichte-nutzen,
	.two-col-wrapper h3 {
		left:30%;
	}

	#main .csc-default h2 {
		font-size:2em;
	}

	html body #main .classListWrapper .classList .classNameWrapper {
		padding-left:16px;
	}

	html #main .two-col-wrapper h3,
	html #main .two-col-wrapper .Geschichte-nutzen {
		font-size:1.2rem;
	}

	html #main .csc-default p.button-container a.mobile-only {
		float:left;
		margin-bottom:0;
		margin-top:1em;
	}

	html #main .csc-default p.button-container a.mobile-only:first-of-type {
		margin-left:0;
	}

	html #main .button-container a.mobile-only {
		display: inline-block;
	}

	.desktop-only {
		display: none;
	}
	.mobile-only {
		display: inherit;
	}
}

@media (max-width: 800px) {
	html body #main-wrapper #main .classListWrapper .classList .classNameWrapper > input {
		width:300px;
	}

	html body .classListWrapper .classList > span {
		font-size:1.5em;
	}

	html body .classListWrapper .classList .classArrow:before {
		font-size:2em;
		top:1em;
	}

	html body .kapitelnavi > ul {
		border-left:solid 8px transparent;
		border-right-width:52px;
	}

	.kapitelnavi > ul > li > ul > li > a,
	.kapitelnavi > ul > li > a {
		font-size:1.3em;
	}

	html body h3 {
		font-size:1.2em;
	}

	.two-col-wrapper > .col50 {
		min-height:318px;
	}

	.two-col-wrapper > .col50 iframe {
		height:268px;
	}

	html .pswp__caption__center {
		max-width:80%;
	}
}

@media (max-width: 750px) {
	a.Registrieren,
	a.Anmelden,
	a.backButton,
	#header input[type="submit"],
	#main input[type="submit"] {
		font-size:1.1rem;
		padding:4px 12px;
	}

	html #main .csc-default p.button-container a.mobile-only:not(:first-of-type) {
		float: right;
	}

	html #main .two-col-wrapper h3,
	html #main .two-col-wrapper .Geschichte-nutzen {
		font-size:1.5rem;
	}

	.col50 {
		height:auto !important;
	}

	.two-col-wrapper > .col50 .csc-textpic {
		padding-bottom:2rem;
	}

	html body .classListWrapper .classList .classStudentList .classStudent .studentName {
		margin-top:0px;
	}

	html body #main .classListWrapper .classList .classStudentList .classStudent .classStudentLinks a {
		display:inline-block;
		margin-left:8px;
	}

	html body .classStudentListWrapper .classHeader .classHeaderRightCol,
	html body .classStudentListWrapper .classHeader .classHeaderLeftCol,
	html body .classListWrapper .classList .classStudentList .classStudent {
		width:100%;
		float:none;
	}

	html body .two-col-wrapper > .col50 {
		width:100%;
		float:none;
		margin-bottom:24px;
		padding-bottom:24px;
		height:auto;
	}

	html body .two-col-wrapper > .col50:last-child {
		margin-bottom:0px;
	}

	#main .csc-default .akkordion-wrapper h2,
	#main .csc-default h2 {
		font-size:1.7em;
		margin-left:1em;
	}

	#shop-info > .csc-default {
		width:100%;
		float:none;
		padding:8px 0px !important;
	}
}

@media (max-width: 700px) {
	html body .classListWrapper .classList {
		padding-right:48px;
		padding-left:16px;
	}

	#main .csc-default h2 {
		font-size:2em;
	}

	html body #main-wrapper #main .classListWrapper .classList .classNameWrapper > input {
		width:200px;
	}
}

@media (max-width: 600px) {
	html body .two-col-wrapper > .col50 {
		height:auto;
		width:100%;
		float:none;
	}

	#main .csc-default table.contenttable {
		display:block;
		width:100%;
		-webkit-overflow-scrolling: touch;
		overflow-x:auto;
		overflow-y:hidden;
	}

	html body  .kapitelnavi > ul > li ul > li > a {
		font-size:1em;
	}
	.kapitelnavi > ul > li > a {
		font-size:1.1em;
	}

	html body #omni-wrapper #main-wrapper #main h1 {
		font-size:1.5em;
		padding-right:0px;
	}

	html body .csc-textpic-image.noFigcaption .bildunterschrift,
	html body figcaption.csc-textpic-caption .bildunterschrift {
		font-size:0.9em;
	}

	html body #omni-wrapper #main-wrapper #shop-info-wrapper {
		position:relative;
	}

	html body #omni-wrapper #main-wrapper #shop-info-wrapper #shop-info {
		margin-bottom:0px;
	}

	html body #omni-wrapper #main-wrapper #shop-info-wrapper #shop-info > .csc-default {
		float:none;
		width:100%;
		padding:0px;
		padding-bottom:24px;
		text-align:center;
	}
}

@media (max-width: 550px) {

	.two-col-wrapper .col50,
	.csc-textpic .csc-textpic-text {
		padding: 8px 8px;
	}

	html body .classListWrapper .classList .classArrow:before {
		top:0.85em;
	}

	html body #main .classListWrapper .classList .classNameWrapper > input {
		width:200px;
	}

	html body .classListWrapper .classList > span {
		font-size:1.2em;
	}

	html body .classListWrapper .classList .classStudentList .classStudent {
		font-size:1em;
	}

	.kapitelnavi > ul ul li.hasChildren > .kapitelnaviArrow {
		top:0px;
	}

	.kapitelnavi > ul ul li.hasChildren > .kapitelnaviArrow:before {
		font-size:20px;
	}
}

@media (max-width: 500px) {

	html body .classListWrapper .classList .classStudentList .classStudent .studentName {
		width:44px;
	}

	html body .classListWrapper .classList .classStudentList .classStudent .classStudentLinks {
		padding-left:52px;
	}

	html body {
		font-size:16px !important;
	}

	html body .classListWrapper .classList > span {
		font-size:1.1em;
	}

	html body .classListWrapper .classList .classArrow:before {
		top:1.25em;
	}

	html body #main .classListWrapper .classList .classNameWrapper {
		padding-left:0px;
		position:absolute;
		left:16px;
		top:2.2em;
	}

	html body .classListWrapper .classList > span.classNumber {
		display:inline-block;
		padding-bottom:1.5em;
	}

	html body #main ol li,
	html body #main ul li {
		font-size:0.9em;
	}

	html body #omni-wrapper ul li ul li,
	html body #omni-wrapper ul li ol li,
	html body #omni-wrapper ol li ul li,
	html body #omni-wrapper ol li ol li{
		font-size:1em;
	}

	#main .two-col-wrapper .csc-textpic-imagewrap {
		display:block;
		width:100%;
		margin:0px !important;
		float:none;
	}

	#main .two-col-wrapper .csc-textpic-text {
		width:100%;
		float:none;
	}

	#main .csc-default .akkordion-wrapper h2,
	#main .csc-default h2 {
		font-size:1.5em;
	}

	.modalWrapper {
		width:100% !important;
		box-sizing:border-box;
		left:0px;
		top:82px;
		margin-top:0px !important;
		margin-left:0px !important;
		border-left:solid 8px transparent;
		border-right:solid 8px transparent;
	}

	.modalWrapper .modalClose {
		margin-left:-0.7em;
		margin-top:-42px;
	}

	.csc-textpic.image-size-preset-50 .csc-textpic-imagewrap ,
	.csc-textpic.image-size-preset-30 .csc-textpic-imagewrap {
		float:none;
		width:100%;
	}
}

@media (max-width: 450px) {
	a.Registrieren,
	a.Anmelden,
	a.backButton,
	#header input[type="submit"],
	#main input[type="submit"] {
		font-size:1rem;
		padding:4px 4px;
	}

	html #main .two-col-wrapper h3 {
		font-size: 1.25rem;
	}

	html body .classListWrapper .classList .classStudentList .classStudent .studentName {
		margin-top:7px;
	}

	.modalWrapper.modalSizeSmall {
		width:310px;
	}

	.modalContent h4 {
		font-size:1.1em;
	}

	html #main .two-col-wrapper .csc-textpic-text h3 {
		font-size:1.4em;
	}

	html body .kapitelnavi > ul > li ul > li > a {
		font-size:0.9em;
	}

	.kapitelnavi > ul > li > a {
		font-size:1em;
	}

	.kapitelnavi > ul > li > a > span.kapitelNummer span.nummer {
		width:48px;
	}
}

@media (max-width: 400px) {
	p {
		font-size:0.9em;
		line-height:1.35em;
	}

	a.Registrieren,
	a.Anmelden,
	a.backButton,
	#header input[type="submit"],
	#main input[type="submit"] {
		font-size:0.9rem;
		padding:4px 4px;
	}

	html body .classListWrapper .classList .classStudentList .classStudent .studentName {
		width:60px;
	}

	html body .classListWrapper .classList .classStudentList .classStudent {
		font-size:0.9em;
	}

	#main .csc-default .akkordion-wrapper h2,
	#main .csc-default h2 {
		font-size:1.4em;
	}
}