body { font-family: 'PT Sans', sans-serif; font-size:1rem; margin:0; color:#575756; line-height:1.4 }	
input, button { font-family: 'PT Sans', sans-serif; font-size: 1rem; line-height: 1.4; }
button { line-height: 1.125; }

a { color:#E6007E }
.bg_grau a, .frame-bg-grau a { color: #fff; }


body:not(.bg_grau) > header {
    background-color: white;
    padding-bottom: 28px;
}

#content a[href^="https://"]:not([href*="sw-media.de"]):not([href*="sw.media"]):after {
    background-image: url(img/link_extern.svg);
    background-size: 10px 10px;
    background-repeat:no-repeat;
    background-position:top right;
    display: inline-block;
    width: 20px; 
    height: 10px;
    content:"";
}

/* Container-Breite Statisches HTML */	
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: auto; }	

/* Raster: 12 Spalten á 80px; Gap 30px; Gesamtbreite 1290px */

/* Container-Breite Typo3 */	
:root { --container-max-width: auto; --col-1:calc(100% + 10px / 12 ); --gap:10px }
@media (min-width: 992px) {  :root { --container-max-width: 930px; --col-1:50px; --gap:30px }}
@media (min-width: 1200px) { :root { --container-max-width: 1122px; --col-1:66px; --gap:30px }}
/*
@media (min-width: 1400px) { :root { --container-max-width: 1290px; --col-1:80px; --gap:30px }}
*/
:root { --col-1_5:calc(var(--col-1) * 1.5 + var(--gap) *1); }
:root { --col-2:calc(var(--col-1) * 2 + var(--gap) *1); }
:root { --col-3:calc(var(--col-1) * 3 + var(--gap) *2); }
:root { --col-4:calc(var(--col-1) * 4 + var(--gap) *3); }
:root { --col-5:calc(var(--col-1) * 5 + var(--gap) *4); }
:root { --col-6:calc(var(--col-1) * 6 + var(--gap) *5); }
:root { --col-7:calc(var(--col-1) * 7 + var(--gap) *6); }
:root { --col-8:calc(var(--col-1) * 8 + var(--gap) *7); }
:root { --col-9:calc(var(--col-1) * 9 + var(--gap) *8); }
:root { --col-10:calc(var(--col-1) * 10 + var(--gap) *9); }
:root { --col-11:calc(var(--col-1) * 11 + var(--gap) *10); }
:root { --col-12:calc(var(--col-1) * 12 + var(--gap) *11); }

.col-1 { width:var(--col-1); }   /* 66 */
.col-1_5 { width:var(--col-1); }   /* 66 */
.col-2 { width:var(--col-2); }   /* 162 */
.col-3 { width:var(--col-3); }   /* 258 */
.col-4 { width:var(--col-4); }   /* 354 */
.col-5 { width:var(--col-5); }   /* 450 */
.col-6 { width:var(--col-6); }   /* 546 */
.col-7 { width:var(--col-7); }   /* 642 */
.col-8 { width:var(--col-8); }   /* 738 */
.col-9 { width:var(--col-9); }   /* 834 */
.col-10 { width:var(--col-10); } /* 930 */
.col-11 { width:var(--col-11); } /* 1062 */
.col-12 { width:var(--col-12); } /* 1122 */

.container,
.frame-default,
.frame-bg-grau p,
.frame-linke-spalte-33prozent,
.frame-rechts-spalte-67prozent 
{ margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; max-width:var(--container-max-width); }

.frame-bg-grau { background-color:#575756; overflow:auto }


header .container { position:relative }

@media (min-width:992px) {
header .container { padding-left: 30px; padding-right: 30px; max-width:100% }
}

#headerlogo { padding-top:25px; }
#headerlogo img { width:268px; height:auto; }

/* */	
/* */	

#suchfeld { position:absolute; top:75px; right:10px; width:clamp(271px, 24.3vw, 345px); }
#suchfeld input[type=text], #suchfeld_mobil input[type=text]  { border:0.5px solid #575756; padding:12px; padding-bottom:11px; padding-left:10px; padding-right:28px; font-size:16px; width:calc(100% - 40px) }   
#suchfeld input[type=image], #suchfeld_mobil input[type=image] { color: #000; position:absolute; right:17px; top:16px; cursor: pointer; border:0; width:16px; height:16px }
#suchfeld_mobil { display:none }

#hauptmenue { float:right; margin-right:-5px; margin-top:-57px; font-size:12px; width:var(--col-7); z-index:1; letter-spacing: 1px; text-transform: uppercase; }
#hauptmenue ul { list-style-type:none; margin:0; padding:0; display:flex; justify-content: space-between; }
#hauptmenue ul > li { display:block;  }

#hauptmenue ul > li > a { text-decoration:none; padding:12px; display:inline-block; color:#575756; font-weight:700; }
#hauptmenue ul > li:hover > a:after { margin-top: 20px; position:absolute; left:0; width:100%; height:45px; content: '' }
#hauptmenue ul > li > a.active,
#hauptmenue ul > li:hover > a { color:#E6007E }

         
#hauptmenue ul > li > ul { position:absolute; margin-top:28px; left:0; width:100%; padding:0px; padding-top:30px; padding-bottom:30px; background-color:#E6007E; display:none; z-index:2 }
#hauptmenue ul > li > ul a { color:white;  font-size:16px; padding-top:5px; padding-bottom:5px }
#hauptmenue ul > li > ul a:hover { color:white; text-decoration:underline }
#hauptmenue ul > li > ul > li > ul { position:static; width:auto; border:0; padding:0; display:block }
#hauptmenue ul > li > ul > li > ul a { letter-spacing:0; font-weight:normal; text-transform:none }
#hauptmenue ul > li > ul > li > a.active,
#hauptmenue ul > li:hover > ul > li > a  { color:white }
#hauptmenue ul > li:hover > ul > li > a:after { height:0; content:none }

/* Aufklappen bei Hover nur in Desktopversion */

@media (min-width: 993px) { 
#hauptmenue ul > li:hover > ul { display:flex; animation: fade_in_show 0.5s }   /* 0.5 s Verzögerung bei Mouseover, damit das Menü nicht unbeabsichtigt aufklappt */
#hauptmenue ul > li:hover > ul > li > ul { display:block; animation:none } 
}

/*
#hauptmenue ul > li  > ul > li > ul { min-width: 100%; margin-top:-50px; left:80px }
*/

#hauptmenue ul li:nth-child(3) ul.lev2 { display:none !important }


@keyframes fade_in_show {
     0% { opacxity: 0; height:0; min-height:0; overflow:hidden }
     100% { opacxity: 1; height:auto; min-height:inherit; overflow:auto }
}
#hauptmenue ul > li  > ul > li { display:block; flex: 1 1 0 } 

.visually-hidden { position: absolute; position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;	}

#content { margin-bottom:50px; margin-top:50px }
#content .container { position:relative }

#breadcrumb { margin-top:40px; margin-bottom:20px; color:#575756; font-size:14px; }
#breadcrumb ul { list-style-type:none; margin:0; padding:0; }
#breadcrumb li { display:inline-block; padding:5px; padding-right:10px; margin-right:3px; padding-left:0 }
#breadcrumb li a { color:#575756; text-decoration:none; }
#breadcrumb li a:hover { color:#E6007E; }
#breadcrumb li { background-image:url(icons/breadcrumb-arrow-right.svg); background-size:auto 12px; background-repeat:no-repeat; background-position:right center; 
	padding-right:16px; }
#breadcrumb li:last-child { background-image:none }

footer { background-color:#575756; color:white }
.footer_main { text-align:center; padding:20px; padding-top:75px; padding-bottom:25px }
.herz_icon { height: 1.6em; position: relative; top: 0.5em; margin-left:5px; margin-right:5px }
footer .gross { font-family:Abhaya Libre, Times, serif; font-weight: 700; font-size:50px; margin: 10px; padding-bottom:3px }
footer a:-webkit-any-link { color:white }
.footer_sw_text1 { color:#BCBCBB; text-transform:uppercase; margin-bottom: 6px; }
.footer_sw_text2 { color:#BCBCBB; margin-bottom:65px }
footer .button_standard_m { padding: 16px; padding-left: 65px; padding-right: 65px; }
footer .button_standard_m:hover, form .btn:hover { padding:19px; padding-left: 70px; padding-right: 70px }
footer hr { border:0; border-top:1px solid #BCBCBB; margin-bottom:0 }

.footer_copyright { color:#BCBCBB; margin-top:80px }
.footer_nav { display:grid; grid-template-columns: auto auto auto; height:182px }
#footermenue { font-size:14px; text-align:center }
#footermenue ul { list-style-type:none; margin:0; padding:0; margin-top:40px; }
#footermenue li { display:inline-block }
#footermenue a { text-decoration:none; text-transform:uppercase; color:#BCBCBB; display:inline-block; padding:8px }
#footermenue a:hover { text-decoration:underline }
#footerlogo img { width:196px; height:auto; margin-top:35px; }
 
#footer_icons { text-align:right }
#footer_icons ul,#mobil_menu_icons ul { display:inline-block; list-style-type:none; margin:0; padding:0; margin-top:34px }
#footer_icons li,#mobil_menu_icons li { display:inline-block; margin-left:23px }

@keyframes pulse { 
	0% { transform: scale(1); }
  50% { transform: scale(1.1);  }
  100% { transform: scale(1); }
}

/* 0.75s = Pulsschlag 80/Min */
.herz_icon:hover { animation: pulse 0.75s infinite; }


#content h1 { font-size:40px; margin-bottom:0.5em; text-transform: uppercase; }
#content h2 { font-size:32px; margin-bottom:0.5em }
#content h3 { font-size:24px; margin-bottom:0.5em; margin-top:15px }
#content h4 { font-size:20px; }
#content h5 { font-size:1em; }

#content hr { border:0; border-top:1px solid #DADADA; margin-top:1em; margin-bottom:1em }

#content p { margin-top:0px }
#content p + ul { margin-top:-10px }

#content table { border-collapse:collapse }
#content table th { background-color:#004994; border:1px solid white; text-align:left; color:white; padding:10px }
#content table tr td { background-color:#ffffff; border:1px solid #DADADA; :white; padding:10px  }
#content table tr:nth-child(odd) td { background-color:#EDEDED; }

.frame-linke-spalte-33prozent header { float:left; width:var(--col-4); margin-right:var(--col-1); }
.frame-rechte-spalte-67prozent { overflow: auto; width: var(--col-7); margin: 0; max-width:auto }
#content .frame-linke-spalte-33prozent h1 { margin-top:15px; text-transform:uppercase; line-height: 1.125; }
#content .frame-linke-spalte-33prozent h2 { margin-top:15px; text-transform:uppercase; font-size:32px }
#content .frame-rechte-spalte-67prozent h2 { font-size:20px; }

#content .ce-gallery .ce-row { display:flex } /* Referenzen 2-spaltig */

button.button_standard_m, form .btn { padxding-inline: 0; border:0 }
button.button_standard_m:hover {}
.button_standard_m, form .btn { position: relative; top: 10px; color:#fff; font-weight:600; font-size:18px; 
	  text-decoration:none; 
	  min-width:190px; border-radius:5px;
	  margin:1px; padding:10px; padding-left:23px; padding-right:23px; background-color:#E6007E }
.button_standard_m:hover, form .btn:hover {margin:0px; padding:11px; padding-left:24px; padding-right:24px; }
/*.button_standard_m:active { }*/

.link_pfeil { padding-left:40px; background-image:url(icons/pfeil-rechts.svg); background-size:auto 20px; background-repeat:no-repeat; background-position:left center;
	 text-decoration:none; font-size: 20px; }
.link_pfeil:hover {	 text-decoration:underline }

.kacheln_3spaltig { column-count:3; gap:30px }
.kachel { color:white; margin-bottom:40px; break-inside:avoid }
.kachel img { width:100%; height:auto; border-radius: 4px; }
.kacheln_3spaltig a  { text-decoration:none }
#content .kachel h3 { margin-top:5px; margin-bottom:0.2em; font-size:24px; font-weight:normal;  }
.kachel p { margin-top:0; font-size:16px; color:#D9D9D9; margin:0; padding-left:0; padding-right:0; max-width:100% }

body.bg_grau { background-color:#575756; border:1px solid green; color: #fff;}


@media (min-width:993px) {
.bg_grau #headerlogo img { opacity:0;  }
.bg_grau #headerlogo { background-image:url(img/swmedia_weiss.svg); background-size:268px auto; background-repeat:no-repeat; background-position:0 25px; }
.bg_grau #hauptmenue ul > li > a { color:#ffffff; }
.bg_grau #hauptmenue ul > li > a.aktiv,
.bg_grau #hauptmenue ul > li:hover > a { color:#E6007E }
.bg_grau #hauptmenue ul > li > ul { background-color:#575756 }
.bg_grau #hauptmenue ul > li > ul { border-bottom:1px solid white }
.bg_grau #hauptmenue ul > li > ul > li > ul{ border-bottom:0 }
}

#content form {	background-color:#D9D9D9; width:calc(44.6%); margin-left:6.7%; padding:6.6%;  }
#content form h2 { font-weight:normal; font-size:24px; line-height:1.0; margin:0; text-transform:uppercase; margin-bottom:10px }
#content form h3 { font-size:24px; line-height:1.0; margin-top:0; margin-bottom:2em; text-transform:uppercase; }
#content form b, .form-label { display:inline-block; width:40%; margin-right:2%; font-weight:normal }
#content form input { border:0; padding:5px; padding-left:10px; padding-right:10px; border-radius:5px; min-width:100px }
#content form input[type=number] { text-align:center; min-width:80px}
#content form select { border:0; padding:5px; padding-left:10px; padding-right:10px; Border-radius:5px; min-width:100px   }
#content form option { text-align:center; }
#content form button { }

#content form div.input { display:inline-block }
#content form .form-group { margin-bottom:1em }
#content form div.input input { min-width: 50%; }
#content form div.input textarea { border:0; padding:5px; padding-left:10px; padding-right:10px; border-radius:5px; min-width:50% }
.inputs-list { width:var(--col-2) }
#content form div.input input[type=radio] { width:auto; min-width: auto; }

#content figure.image img { max-width:100%; height: auto; }

.error.form-text { background-color:#ff2222; color:white }
.input .error { border:1px solid red!important }

/* Mobil */

@media (max-width: 1399px) {
}

@media (max-width: 1200px) {
}

#mobil_menu_button { display:none }
#mobil_menu_footer { display:none }

@media (max-width: 992px) {
   #mobil_menu_button { display:block; position:absolute; top:0; right:0; z-index:2  }
   #mobil_menu_button img { width:6vw; padding:5vw; height:auto;  }

   #headerlogo { margin-left:4.4vw; padding-top:6.3vw; margin-top:0 }
   #headerlogo img { width: min(35vw, 268px); }
   body > header { background-color: white; padding-bottom: min(4vw, 28px) !important; }

   #hauptmenue { display:none; background-color:#DB007C }
   #hauptmenue { margin-top: 0;
   	position:absolute; right:0px; top:0; left:0; font-size:18px; width:100%; padding-top: 12vw; padding-bottom:10vw }
   #hauptmenue > ul.lev1 { padding-left: 27vw; }
   #hauptmenue a { font-size:24px }
   #hauptmenue ul > li > a { color:white; font-weight:normal }
   #hauptmenue ul > li > a.active, #hauptmenue ul > li:hover > a { color:white; font-weight:bold }
   #hauptmenue > ul { display:block }
   #mobil_menu_footer { display:block; text-align:center }
   #mobil_menu_footer  a { font-size: 16px; color: white; text-decoration: none; }
   #mobil_menu_footer  a:hover { font-weight:bold }
   #mobil_menu_footer ul > li { display:inline-block }
   #mobil_menu_icons { text-align:center }


   .frame-linke-spalte-33prozent header { float:none; width:auto; margin-right:0 }
   .frame-rechte-spalte-67prozent { overflow: visible; width:auto; padding-left: 15px; padding-right: 15px; }
   
   .kacheln_3spaltig {column-count: 2; }
   .kacheln_3spaltig .kachel { max-width:290px }
   
   footer .gross { font-size: 36px; }
   footer .container { position:relative; }
   .footer_nav { display:block; height:auto; text-align:center }
   #footermenue { position:absolute; bottom:20px }
   #footermenue a { padding: 5px; text-transform: none;}
   #footer_icons { text-align: center; }
   #footer_icons ul { margin-top: 30px; }
   #footer_icons li { margin-left: 13px; margin-right: 13px; margin-bottom:70px }
   #content form {	width:min(500px, 90%); margin-left:0;  }
}

@media (max-width: 640px) {
   .kacheln_3spaltig {column-count: 1; }
}

.frame-volle-breite { margin-left:15px; margin-right:15px }
.kacheln_volle_breite { column-count: 7; }
@media (max-width: 1920px) { .kacheln_volle_breite {column-count: 5; } }
@media (max-width: 1470px) { .kacheln_volle_breite {column-count: 4; } }
@media (max-width: 1020px) { .kacheln_volle_breite {column-count: 3; } }
@media (max-width: 770px)  { .kacheln_volle_breite {column-count: 2; } }
@media (max-width: 540px)  { .kacheln_volle_breite {column-count: 1; } }

.ce-gallery .ce-row { margin-bottom: 30px; }
.ce-gallery .ce-column { margin-right: 30px; }
.bg_grau footer { border-top:10px solid white }
.referenzen { margin-bottom:30px }