@font-face {
 font-family:'Open Sans Variable';
 src:url('/css/brs/fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
 font-weight:100 900;
 font-stretch:50% 400%;
 font-display:swap;
}

:root{
 --ciFarbe1:   #222;
 --ciFarbe2:   #ffd300;
 --ciFarbe3:   #eee;

 --maxBreite:  1500px;      /* max Seitenbreite */
--headHeight: 50px;        /* Header Höhe */
--headGap:    20px;        /* Grid-gap im Header, benötigt f dynamische anpassungen */
--headGapAnz: 2;           /* Anzahl an grid-gaps MINUS 1 ! ... im Header, benötigt f dynamische anpassungen */
--leftWidth:  60px;        /* Breite headLogo und logoLeft */
--overlayBreite:1000px;

--formLabelBg:  #aaa;
--formRequired: var(--ciFarbe2);           /* Kennzeichnungsfarbe für erfoderliche Formularelemnete */
 --formRadioBg:  #ddd;

 --formTextCol:  #222;
 --formBgCol:    #cab82d00;
 --formLabelText:#fff;
 --formLabelBorder:#fff;
 --formLabelBgChecked: #222;
}
 
html                                                         {font-size:100%; line-height:100%; scroll-behavior:smooth; overscroll-behavior:none;}
body                                                         {width:100vw; min-height:100vh; overflow-x:hidden; background:#fff;}
*,*::after,*::before                                         {margin:0; padding:0; font-family:'Open Sans Variable', sans-serif; font-size:1rem; line-height:1.4rem; color:var(--ciFarbe1); font-weight:400; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;	box-sizing:border-box;}
span                                                         {font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit; font-style:inherit;}
span.nowrap                                                  {white-space:nowrap;}
a, img                                                       {border-style:none; text-decoration:underline; border:0;}
a                                                            {text-decoration-color:#bbb; text-underline-offset:3px; text-decoration-thickness:1px;}
h1, .titel                                                   {font-family:'Open Sans Variable', sans-serif; width:100%; margin:0; font-size:2.25rem; line-height:2.5rem; font-weight:550; color:var(--ciFarbe1);}
   h2, .untertitel                                              {font-family:'Open Sans Variable', sans-serif; margin:10px 0 30px; padding:0; font-size:1.5rem; line-height:1.75rem; font-weight:550; color:var(--ciFarbe1); text-decoration:underline; text-decoration-color:#bbb; text-underline-offset:6px; text-decoration-thickness:10px;}
h3, .untertitel                                              {font-family:'Open Sans Variable', sans-serif; margin:0 0 .5rem; font-size:1.25rem; line-height:1.65rem; font-weight:550; color:var(--ciFarbe1);}
h4                                                           {font-size:1.25rem; line-height:1.75rem; font-weight:500; margin:1rem 0;}
.kleiner                                                     {font-size:.8rem; line-height:1.5rem;}
.clr                                                         {clear:both; width:0; height:0; position:relative; display:block; line-height:0;}
hr                                                           {height:1px; margin:1rem 0; background-color:var(--ciFarbe1); border:none;}
form, ol, ul, li                                             {margin:0; padding:0;}
ul, ol                                                       {margin:.5rem 0 .5rem 20px; text-align:left; list-style-position:outside;}
li                                                           {padding-bottom:.5em;}
li:last-child                                                {border-bottom:none;}

b,strong                                                     {font-family:inherit; font-weight:550; font-variation-settings:'wght' 550; font-size:inherit; color:inherit; line-height:inherit;}
i,em                                                         {font-style:italic;}

/* -------------------------------------------- */
/* ----------- BASIS LAYOUT - start ----------- */
/* -------------------------------------------- */
#head                                                        {position:fixed; display:grid; width:100vw; height:var(--headHeight); top:0; Left:0; z-index:3; grid-template-columns:1fr; align-items:center; justify-items:center; background-color:#fff;}
#headWrap                                                    {position:relative; display:grid; max-width:var(--maxBreite); width:100vw; height:var(--headHeight); grid-template-columns:var(--leftWidth) 1fr 32px; grid-gap:10px; align-items:center; justify-content:center;}

#headLogo                                                    {display:grid; justify-content:center; text-align:center;}
#headLogo img                                                {max-width:60px; width:100%; height:100%; padding-left:min(2vw,5px); object-fit:cover;}

#hamburger                                                   {display:none;}

 .button                                                    {display:block; padding:10px 20px; background:#000; color:var(--ciFarbe2); text-decoration:none; text-align:center; border-radius:25px; transition:.25s ease;}
/* ----------- FORMULAR ELEMENTE - start ----------- */
form                                                        {width:100%; margin:0 auto 50px; padding:0; position:relative;}
label                                                       {display:block; margin:0 0 0 10px; font-size:1rem; font-weight:600; text-transform:uppercase;}
input,
textarea,
select                                                      {display:block; max-width:800px; width:100%; margin:5px 0 20px; padding:10px; font-size:1rem; color:#000; border:2px solid #aaa; border-radius:10px; background-color:#fff;}
input                                                       {display:grid;}
.selectWrap::before                                         {content:url(/images/brs/selectPfeil.svg); position:absolute; display:grid; z-index:2; top:10px; right:10px; width:25px; height:25px; pointer-events:none;}
option                                                      {margin:0; position:relative; border:2px solid #aaa; border-radius:10px;}
select                                                      {position:relative; -moz-appearance:none; -webkit-appearance:none; appearance:none;}
select:focus                                                {outline:none;}
input[required], textarea[required], select[required],
input[type="checkbox"][required]::after                     {border-color:var(--formRequired);}
.pflichtfelder                                              {margin:0 10px 20px; font-size:.8rem; line-height:1.5rem; color:var(--ciFarbe2);}
/* CHECKBOX - start */
.checkboxWrap                                               {position:relative;}
input[type=checkbox]                                        {display:grid; width:20px; height:20px; margin:0; padding:0; max-width:20px; line-height:10px;	text-align:center;	cursor:pointer;	border:0;	appearance:none; -webkit-appearance:none;}
input[type=checkbox]::after                                 {width:25px; height:25px; max-width:25px; max-height:25px; grid-area:1/1;	align-items:center; border-radius:5px;	pointer-events:none; content:' ';  border-radius:5px; box-shadow:inset 2px 2px 4px -2px rgba(0, 0, 0, .25); box-shadow:inset 0 0 0 2px var(--formLabelBg);}
input[type=checkbox][required]::after                       {box-shadow:inset 0 0 0 2px var(--formRequired);}
input[type=checkbox]:checked::after                         {content:url(/images/brs/checkbox.svg); display:grid; background:var(--formLabelBgChecked);}
input[type=checkbox][required]:checked::after               {background:var(--formRequired);}

.checkboxItem                                               {position:relative; display:grid; width:100%; margin:5px 0 20px; align-items:center; grid-template-columns:25px 1fr; grid-gap:10px;}
.checkboxItem label                                         {margin:0; text-transform:unset; font-weight:500;}
.checkboxItem label + input[type="checkbox"]:checked span,
input[type=checkbox]:checked + label                        {color:#000;}
.checkboxItem input[type="checkbox"]                        {width:25px; height:25px; max-width:25px;}
 /* umgekeherte Reihung:label-checkbox */
.checkboxItem.labelFirst                                   {grid-template-columns:auto 1fr;}
.checkboxItem.labelFirst label                             {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2;}
.checkboxItem.labelFirst input                             {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2;}
/* CHECKBOX - ende */
/* ----------- FORMULAR ELEMENTE - ende ----------- */


#suche form                                                  {position:relative; margin:0 auto;}
input#inputSuche                                             {position:relative; max-width:100%; width:100%; margin:0; padding:5px 40px 5px 10px; z-index:1; border:none; border-radius:5px; background-color:#fafafa; box-shadow:0 0 20px -10px #ccc inset;}
#lupe                                                        {position:absolute; display:block; width:34px; height:34px; top:0; right:0; padding:6px; z-index:2;}

.startlogo 													 {display: inline-block; width: 100%; max-width: 200px; margin: 10px;}

#nav                                                         {display:grid; text-align:center; grid-template-columns: repeat(4,1fr);}
#hamburger img                                               {vertical-align:middle;}
#page                                                        {position:relative; display:block; width:100vw; min-height:100vh; height:100%; padding-top:var(--headHeight); grid-template-columns:1fr; align-items:start; justify-items:start;}

#pageWrap                                                    {position:relative; max-width:100vw; width:100vw; height:100%; left:0; padding:0;}

#content                                                     {position:relative; width:100%; height:100%; padding:0px;}


#logoLeft                                                    {position:fixed; display:grid; width:var(--leftWidth); height:calc(100vh - var(--headHeight)); top:var(--headHeight); left:calc(50vw - var(--maxBreite)/2); grid-template-columns:1fr; justify-content:center; align-content:start; background:#fff;}
#logoLeftWrap                                                {position:relative; display:grid; height:calc(100vh - var(--headHeight)); writing-mode:vertical-lr; transform-origin:center; transform:rotate(180deg); justify-items:center; justify-self:center;} 
#logoLeftWrap *                                              {font-size:1.5rem; text-rendering:optimizeLegibility;}
/* -------------------------------------------- */
/* ----------- BASIS LAYOUT - ende ------------ */
/* -------------------------------------------- */

.hova                                                        {filter:grayscale(.85) brightness(.5) ; box-shadow:none; transform:scale(.985); transition:.5s ease;} 
.overviewItem:not(.hova)                                     {pointer-events:all; cursor:pointer;}

/* ----------- HOME - start ----------- */
#contentWrap                                                 {display:grid; height:calc(100vh - var(--headHeight)); grid-template-rows:1fr 1fr; padding:0;}
#contentWrap.sammlung                                        {padding:3rem 0;}
#contentWrap.sammlung > h2                                   {margin:0 0 3rem; text-decoration:none; background:var(--ciFarbe2); padding:1rem 2rem;}
#media                                                       {position:relative; width:100%; margin:0 auto;}
#media img                                                   {width:100%; height:100%; object-fit:cover;}
#homeFoot                                                    {width:100%; margin:0 auto; text-align:center; background:var(--ciFarbe2);}
#homeFoot a                                                  {margin:1.5rem 1.5rem 1.5rem 0;}
#homeFoot a:last-child                                       {margin-right:0;}
#homeFoot h1                                                 {font-size:clamp(1.5rem,5vw,4rem); margin:2rem 0;}
#homeFoot h1                                                 {display:grid; font-size:clamp(2.35rem,4.8vw,3rem); justify-content:center; justify-items:left; line-height:clamp(2.25rem,3.6vw,3rem); margin:0 0 min(4vw,2.5rem);}
#foot a                                                      {margin:0 10px 0 0;}
#footLinks a                                                 {display:inline-block; font-size:.8rem; margin:0 10px 0 0; white-space: nowrap;}
#footLinks                                                   {margin:10px 0 20px;}
#homeFoot > a                                                {background:var(--ciFarbe1); color:var(--ciFarbe2); margin:0 0 30px; border-radius:25px; text-decoration:none; text-transform:uppercase; display:inline-grid; font-weight:450; padding:min(1vw,15px) min(3vw,25px); font-size:clamp(1.2rem,2vw,1.875rem); align-content:center; align-items:center; letter-spacing:3px; transition:.5s ease;}
/* ----------- HOME - ende ----------- */


/* ----------- Menue - start -----------*/
#menu                                                    {position:absolute; display:none; z-index:10; width:300px; height:100%; top:-100%; left:calc(100vw - 300px); padding:70px 20px 30px; background:#fff; box-shadow:0 0 0px 7px #fff,-9px 0 15px 0 #00000050; border-left:3px solid var(--ciFarbe2); overflow-y:scroll;}
#menu.aktivMobmenu                                       {display:block; top:0;}
#menu ul                                                 {list-style-type:none; margin:0;} 
#menu ul li ul                                           {margin:.5rem 0 0 .5rem;}
#menu a                                                  {text-decoration:none;}
#menu a.active                                           {font-weight:550;}
#menuClose                                               {position:absolute; display:block; width:30px; height:30px; top:25px; right:8px; border-radius:5px; box-shadow:0 0 15px -5px #888;}

/* ----------- Menue - ende -----------*/


/* ----------- LOGIN FORMULAR - start ----------- */
div.form-singin                                              {max-width:500px; padding:0 5px; margin:0 auto;}
.form-signin                                                 {max-width:500px; margin:0 auto; padding:0 5px; text-align:left;}
a.passwordforgot                                             {padding:0 0 0 10px; font-size:.9rem;}
.rememberme                                                  {display:grid; width:100%; margin:40px 0; padding:0 0 0 10px; grid-template-columns:25px 1fr; grid-gap:0 10px; align-items:center;} 
input#remember-me                                            {display:inline-block; width:25px; height:25px; border-radius:5px; background:var(--formLabelBg);}
.rememberme label                                            {margin:0; white-space:nowrap;}
button.loginButton,a.loginButton                             {display:inline-block; width:100%; padding:15px 40px; color:#fff; font-size:1.5em; font-weight:600; letter-spacing:5px; text-decoration:none; text-align:center; text-shadow:0 0 20px #02403d; border:3px solid #ffffff00; background-color:var(--ciFarbe2); border-radius:10px; transition:.5s;}
.invalid-feedback                                            {color:red; font-weight:600;}
#loginFormWrap                                               {display:grid; max-width:1000px; width:100%; margin:80px auto; padding:0 20px; grid-template-columns:1fr; grid-gap:min(30px,3vw); align-content:start; }
/* ----------- LOGIN FORMULAR - ende ----------- */

#foot                                                        {width:100%; margin:50px 0 0; padding:0 10px; display:grid; grid-gap:1rem; justify-content:center; justify-items:left;}


 #bcn                                                     {padding:10px 10px 0; font-size:.8rem; text-transform:uppercase; background:#fff; box-shadow:0 -10px 23px -10px #ccc inset;}
 #bcn *, #bcn a                                           {font-size:.8rem; text-underline-offset:5px;}
 #contentWrap.detail2d .info #bcn                         {width:calc(100% + 20px); margin:0 0 20px -10px; padding:10px 10px 0px; border-bottom:20px solid #fff;}



#contentWrap.sammlung                                        {position:relative; width:100%; grid-template-rows:auto 1fr; grid-gap:1px; justify-items:center;}
.overviewItemWrap                                            {display:flex; max-width:min(90%,1200px); height:fit-content; flex-flow:wrap; background:var(--ciFarbe2); grid-gap:1px;}
.overviewItem                                                {display:grid; flex:1 1 25%; padding:min(5vw,50px); align-content:center; background:#fff; transition:.5s ease;}
#contentWrap.sammlung.bildtext .overviewItem                 {align-content:start;}

.ovText                                                      {display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3;}
.overviewBild                                                {display:none;}  

#contentWrap.sammlung .overviewItem div:nth-child(2)        {padding:10px 1.5rem 0;}
#contentWrap.sammlung .overviewItem div:nth-child(2):not(h3)      {font-size:.9rem !important; text-transform:uppercase;}


h2 a                                                         {font-size:inherit; font-weight:400; color:#333; line-height:inherit; text-decoration:underline; text-decoration-color:#333; }

/* NUR TEXT - start */
.sammlung.text .overviewItem                                 {flex:1 1 100%;}
#contentWrap.sammlung.text h3                                {text-align:left;}
#contentWrap.sammlungen.text h3                              {text-align:center;}
#contentWrap.sammlung.text .overviewItem div:nth-child(2)  {padding:.0;}

/* NUR TEXT - ende */

/* BILD-TEXT - start */
#nav a:not(.sizebutt)                                        {display:inline-grid; margin-right:20px;}
#contentWrap.sammlung.bildtext .overviewItemWrap             {display:flex; max-width:min(90%,1200px); height:fit-content; flex-flow:wrap; justify-content:center; background:var(--ciFarbe3); grid-gap:20px; border-bottom:50px solid #fff; box-shadow:inset 0 0 0 25px #fff;}
#contentWrap.sammlung.bildtext .overviewItem                 {padding:0; box-shadow:0 0 15px -5px #aaa;}                                      

#contentWrap.sammlung.liste .overviewBild                    {display:block; overflow:hidden; background: #333;}                                      
#contentWrap.sammlung.bildtext .overviewBild                 {display:block; overflow:hidden; aspect-ratio:1.66; background: #333;}                                      
#contentWrap.sammlung.bildtext .overviewBild img             {width:100%; height:100%; object-fit:cover; transition:.5s ease;}

#contentWrap.sammlung.bildtext .overviewItem                 {flex:0 1 calc(33.3333% - 40px/3); padding:0; background:#fff;}
#contentWrap.sammlung.bildtext .overviewItem                 {flex:1 1 100%; padding:0; background:#fff;}

#contentWrap.sammlung.bildtext .overviewItem h3              {margin:0; padding: 1.5rem; text-transform:uppercase; font-weight:500; transition: .5s ease;}
#contentWrap.sammlung.bildtext .overviewItem .ovText         {padding:0 1.5rem 2rem;}

#contentWrap.sammlung.bildtext .overviewItem div:nth-child(2)    {padding:10px 1.5rem 0;}

#contentWrap.sammlungen.bildtext h3                          {text-align:center; margin:0;}
#contentWrap.sammlungen.bildtext .overviewItem .ovText       {display:none;}

/* BILD-TEXT - ende */

/* LISTE - start */
#contentWrap.sammlung.liste .overviewItemWrap               {max-width:min(98%,800px); width:100%;}
#contentWrap.sammlung.liste .overviewItemWrap               {display:grid;}
#contentWrap.sammlung.liste .overviewItem                   {padding:10px 0; display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr auto 1fr; grid-gap:0 15px; align-content:center;  transition:.25s ease; box-shadow: inset 0 0 0 10px #fff;}
#contentWrap.sammlung.liste .overviewItem .overviewBild     {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:4; display:block; width:100px; height:100%;}
#contentWrap.sammlung.liste .overviewItem div:nth-child(2)  {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; align-content:flex-end; padding:10px 0 0;}
#contentWrap.sammlung.liste .overviewItem h3                {grid-column-start:2; grid-column-end:3; grid-row-start:2; grid-row-end:3; margin:0; align-self:end;}
#contentWrap.sammlung.liste .overviewItem .ovText           {grid-column-start:2; grid-column-end:3; grid-row-start:3; grid-row-end:4; /*padding:0 10px 10px 0;*/ -webkit-line-clamp:1; line-clamp:1; align-self:start;}
#contentWrap.sammlung.liste .overviewBild img               {width:100%; height:0100%; object-fit:cover; background-color: white;}
#contentWrap.sammlung.liste .overviewBild                   {transition:.25s ease;}
/* LISTE - ende */

.media iframe ,.media iframe #document,
.media iframe #document html,.media iframe #document body,
.media iframe #document body *                              {width:100%; height:100%; border:none;}
.media iframe #document body img                            {object-fit: cover; width:100%; height:100%;}
.wAnsicht                                                   {display:grid; grid-template-rows:70% 1fr; grid-gap:0;}
#downloadsWrap                                              {display:grid; grid-gap:10px; grid-template-columns:1fr 1fr; align-items:start;}
.wAnsTxt                                                    {padding:0px 10px 10px 10px; display:grid; /*align-content:center;*/ box-shadow:0 0 20px -10px #cfcfcf inset;}
.wAnsicht.aktiv .wAnsTxt                                    {box-shadow:0 0 20px -10px #cfcfcf inset; background-color:var(--ciFarbe2);}
.wAnsTxt *                                                  {font-size:.9rem}

/* ----------- DETAILSEITE - start ----------- */
#contentWrap.detail2d                                        {position:relative; width:100%; grid-template-rows:2fr 1fr; grid-gap:3vw; transition:.5s ease;}
#contentWrap.detail2d .media                                 {position:fixed; top:var(--headHeight); width:100%; height:calc(66vh - var(--headHeight)); z-index:2; line-height:0; box-shadow:0 0 0 15px #fff; background-color: white;}
   #contentWrap.detail2d .media img                             {width:100%; height:calc(100% - 25px); object-fit:cover;} /* aka iframe */
/*#contentWrap.detail2d .infoWrap                              {position:relative; width:100%; padding:calc(66vh - var(--headHeight)) 10px 20px; z-index:1;}*/
#contentWrap.detail2d .infoWrap                              {position:relative; width:100%;  z-index:1; height: calc(33vh - var(--headHeight)); top: calc(66vh - var(--headHeight)); overflow-y: scroll; padding: 0 10px;}
#contentWrap.detail2d .info                                  {position:relative; z-index:1;padding:10px 0 40px;}
#contentWrap.detail2d .info h1                               {margin:10px 0 15px;}
#infoBlende                                                  {position:fixed; top:calc(100vh - 20px); left:0; width:100%; height:20px; background:#fff; z-index:2;}
#downloadsWrap a img                                         {width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
#downloadsWrap a                                             {flex:0 0 calc(50% - 1px);}
   #contentWrap.detail2d .media .form-control-label             {height:25px; padding:3px 10px 0; font-size:.85rem;}
#contentWrap.detail2d.size1                                 {grid-template-columns:3fr 2fr;}
#contentWrap.detail2d.size2                                 {grid-template-columns:3fr 0fr;}
#contentWrap.detail2d.size3                                 {grid-template-columns:3fr 1fr;}
   #nav a                                                      {display:none; height:32px; width:32px; align-content:center; justify-content:center; color:transparent; text-decoration:none; border-radius:5px; box-shadow:0 0 15px -5px #888; background-repeat:no-repeat; background-position:center; color:transparent; transition:.5s ease;}
#nav a.active                                               {border-color:var(--ciFarbe2); background-color:var(--ciFarbe2); box-shadow:0 0 20px -10px #aaa inset; transition:.5s ease;}
#nav a.size1butt                                            {background-image:url(/images/brs/ic_liste.png);}
#nav a.size2butt                                            {background-image:url(/images/brs/ic_bildtext.png);} 
#nav a.size3butt                                            {background-image:url(/images/brs/ic_nurtext.png);}
#nav a:not(.sizebutt)                                           {background-image:url(/images/brs/ic_back.png);}

/* ----------- DETAILSEITE - ende ------------ */


/* ****************************************** */
/*                 MEDIAQUERIES               */
/* ****************************************** */

@media(hover:hover) and (pointer:fine) {
 a:hover                                                    {color:darkred; cursor:pointer;}
 #homeFoot > a:hover                                        {background:var(--ciFarbe2); color:#000; box-shadow:inset 0 0 0 3px #000; font-weight:550; transition:.5s ease;}
 #nav a:not(.sizebutt):hover                                {border-color:var(--ciFarbe2); background-color:var(--ciFarbe2); box-shadow:0 0 20px -10px #aaa inset; transition:.5s ease;}    
 #nav a:not(.active):hover                                  {border-width:1px; background-color:var(--ciFarbe2); transition:.5s ease;}
 .overviewItem:hover                                        {background-color:var(--ciFarbe2); transition:.75s ease; box-shadow:inset 0 0 0 10px #fff;}
 #contentWrap.sammlung.liste .overviewItem:hover            {box-shadow:inset 10px 0 0 10px #fff; transform:scale(1.025);}
 #contentWrap.sammlung.liste .overviewBild:hover            {width:min(300px,33vw) !important; z-index:2; position:relative; transition:.25s ease;}
 h2 a:hover                                                 {text-decoration-color:darkred;}
 .button:hover                                              {font-weight:550; background-color:var(--ciFarbe2); color:#000; box-shadow:inset 0 0 0 3px #000; transition:.25s ease;}
 #contentWrap.sammlungen.bildtext .overviewItem:hover h3                                  {transform:scale(1.05); transition: .5s ease; letter-spacing:2px; font-weight:650;}
 #contentWrap.sammlungen.bildtext .overviewItem:hover .overviewBild img                   {transform:scale(1.05); transition: .5s ease; }
}

@media screen and (min-width:550px){
 #contentWrap.sammlung.bildtext .overviewItem               {flex:0 1 calc(50% - 10px);}
 #downloadsWrap                                             {grid-template-columns:1fr 1fr 1fr;}
 .sammlung.text .overviewItem                               {flex:1 1 calc(50% - .5px);}
}

@media screen and (min-width:600px){
 #homeFoot h1                                               {display:block;}
	#loginFormWrap                                             {grid-template-columns:1fr 1fr;}
 #downloadsWrap a                                           {flex:0 0 calc(33.3333% - 2px);}

}

@media screen and (min-width:750px){
 #nav a                                                     {display:inline-grid;}
 #downloadsWrap a                                           {flex:0 0 calc(25% - 3px/2);}
 #headWrap                                                  {grid-template-columns:var(--leftWidth) 1fr 180px 40px; grid-gap:20px;}
 #headWrap                                                    {position:relative; display:grid; max-width:var(--maxBreite); width:100vw; height:var(--headHeight); grid-template-columns:var(--leftWidth) 1fr 180px 40px; grid-gap:10px; align-items:center; justify-content:center;}
 .sammlung.text .overviewItem                               {flex:1 1 calc(33.3333% - 1px);}
}

@media screen and (min-width:850px){
 #contentWrap.sammlung.bildtext .overviewItem                {flex:0 1 calc(33.3333% - 40px/3);}
  #downloadsWrap                                             {grid-template-columns:1fr 1fr 1fr 1fr;}
}
                                                   
@media screen and (min-width:1000px){ 
 :root{
  --headHeight: 50px;        /* Header Höhe */
  --leftWidth:  100px;
 }

    #bcn                                                        {display:block; font-size: .9rem; background: none; box-shadow: none;}
    #contentWrap.detail2d .info #bcn                            {padding:0 0 30px;}

 #overlayClose                                                            {right:calc(50vw - 5px - var(--overlayBreite)/2);}

 #foot                                                       {padding:0 10px 0 0;}
 #contentWrap.home #media,
 #contentWrap.home #homeFoot                                 {max-width:min(90vw,1000px);}
 #content                                                    {position:-webkit-sticky; position:sticky; top:80px; }
 #headLogo img                                               {max-width:63px; padding-left:0;}
 #contentWrap.detail2d .media                                {position:-webkit-sticky; position:sticky;/* top:80px;*/}
 #contentWrap.detail2d                                       {grid-template-rows:1fr; grid-template-columns:3fr 2fr; height:100%;}
 #contentWrap.detail2d .media                                {height:calc(100vh - var(--headHeight)); box-shadow:none;}
 #contentWrap.detail2d .info                                 {height:100%; padding:0 0 20px;}
 #contentWrap.detail2d .infoWrap                             {overflow-y:visible; padding:0; top:0px}
 #contentWrap.detail2d .infoWrap                             {height:100%;}
 #contentWrap.detail2d                                       {display:grid; height:100%;}
 #contentWrap.sammlung.bildtext .overviewItemWrap            {max-width:min(100%,1200px);}
 #logoLeft                                                   {left:0;}
 #pageWrap                                                   {left:calc(var(--leftWidth) + var(--headGap)); width:calc(100vw - var(--leftWidth) - var(--headGapAnz)*var(--headGap));} 
 #downloadsWrap                                              {grid-template-columns:1fr 1fr;}

}

@media screen and (min-width:1300px){
 #downloadsWrap a                                           {flex:0 0 calc(33.3333% - 2px);}
}

@media screen and (min-width:1500px){
 #logoLeft                                                  {left:calc(50vw - var(--maxBreite)/2);}
 #pageWrap                                                  {left:calc(50vw - var(--maxBreite)/2 + var(--leftWidth) + var(--headGap)); max-width:calc(var(--maxBreite) - var(--leftWidth) - var(--headGapAnz)*var(--headGap));}
 #menu                                                      {right:auto; left:calc(50vw + var(--maxBreite)/2 - 300px);}

}

/* OVERLAY - start */
#overlayWrapper                                             {position:fixed; display:grid; z-index:-1; width:100vw; height:100vh; top:0; left:0; padding:2vh; background-color:#000000db; opacity:0; transition:opacity .5s ease;}
#overlay                                                    {position:relative; display:grid; max-width:var(--overlayBreite); /*width:100%; height:100%;*/ margin:0 auto; padding:5vw; border-radius:15px; background-color:#f0f0f0; overflow:hidden auto;}
#overlayClose                                               {position:absolute; display:grid; width:40px; height:40px; top:calc(2vh - 6px); right:calc(2vh - 5px); border-radius:0 10px 0 0; align-items:center; justify-items:center; background:#fff; cursor:pointer;}
#overlayWrapper.overlayaktiv                                {z-index:11; opacity:1; transition:opacity .5s ease;}
/* OVERLAY - ende */

/* Snapshot Button */

#capture-btn-model              {padding:2px 10px; text-transform:uppercase; font-size:14px; font-weight: 600; background:var(--ciFarbe2); border:2px solid var(--ciFarbe2); border-radius:5px;}
#capture-btn-model:hover    {background:var(--ciFarbe1); border:2px solid var(--ciFarbe2); color:var(--ciFarbe2);}
#capture-btn-360              {padding:2px 10px; text-transform:uppercase; font-size:14px; font-weight: 600; background:var(--ciFarbe2); border:2px solid var(--ciFarbe2); border-radius:5px;}
#capture-btn-360:hover    {background:var(--ciFarbe1); border:2px solid var(--ciFarbe2); color:var(--ciFarbe2);}