/* enable auto word breaks */
.site{
  hyphens: auto;
}

/* no breaks */
.no-breaks {
  white-space: nowrap;
}

.body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px; line-height: normal;
}

/* burger menu */
.burger-icon>span {
  background: #ffffff;
}

/*background for menu for sticky overlay*/
#sp-menu{
  background: #ffffff;
}

/* small screens: height adjustment for top bar */
#sp-header .container {
  background: #333333
}

/* size social icons */
ul.social-icons {
  font-size: 20px;
}


/* to see full banner pic */
@media (min-width: 300px){
  #sp-slider{
    --padding-top: 10px;
  }
  #sp-menu{
    background: #333333;
  }
}

@media (min-width: 992px){
  #sp-slider{
    padding-top: 50px;
  }
  #sp-menu{
    background: #ffffff;
  }
}



/* h2 colors */
.article-list .article .article-header h2 a {
  color:#ec430f;
}

/*not to many frames around main*/
#sp-left .sp-module, #sp-right .sp-module{
  border: none;
}

/* article */
.article-list .article .article-intro-image{
  border: none;
}

.article  {
  box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.article-details {
  padding: 20px;
  margin-bottom: 20px;
}

/* artcile full mode: reduce space between pic and author */
.article-details .article-full-image{
  margin: 0;
}

/*hide featured tag*/
.article-list .article .featured-article-badge {
  display: none; visibility: hidden;
}
.article-details .featured-article-badge {
  display: none; visibility: hidden;
}

/* for single article: place pic below title */
.view-article .article-details {
    display: flex;
    flex-direction: column;
}
.view-article .article-header {
    order: -1;
    margin-bottom: 10px;
}


/* for articles list: place pic below title */
.article-list .articleBody, .article-list .article-body {
    display: contents;
}
.article-list .article {
    display: flex;
    flex-direction: column;
}
.article-list .article-header {
    order: -1;
    --margin-bottom: 10px;
}

/*align article pic with article title (left)*/
.article-list .article .article-intro-image{
  margin: 0
}

/*some space between article pic and info*/
.article-info {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* some space between banner and h1 */
.view-article .article-header {
  margin-top: 20px;
}

.sp-megamenu-parent > li > a{
  color: #333333;
}

.article-details .article-header h1{
  font-size: 1.5rem;
  color: #ec430f;
}

/* highlight boxes */
.highlight{
  width: 80%;
  color: red;
  margin: 20px;
	--b: .2em; /* border width */
	--c: 2em; /* corner size */
	--r: 1em; /* corner rounding */
	place-self: center; /* middle align along both axes */
	position: relative; /* needed for pseudo border */
	/* reserve space for border*/
	border: solid var(--b) #0000;
	padding: calc(var(--r) - var(--b));
	font: 1em ubuntu, sans-serif;
	
	&::before {
		position: absolute;
		z-index: -1; /* place behind text content */
		/* cover border-box = outside padding box by border-width */
		inset: calc(-1*var(--b));
		border: inherit; /* inherit border space */
		border-radius: var(--r);
		/* the gradient used */
		background: linear-gradient(red, deeppink, #555555) border-box;
		mask: 
			/* the corners */
			conic-gradient(from -90deg at var(--c) var(--c), red 25%, #0000 0) 
				0 0/ calc(100% - var(--c))  calc(100% - var(--c)) border-box subtract, 
			/* padding-box area subtracted from corner squares */
			conic-gradient(red 0 0) padding-box;
		content: ''
	}
}


.highlight li {
  padding-bottom: 20px;
}

/* Read more link */
.article-list .article .readmore a{
  font-weight: 700;
  
}



/* Ueber uns: shadow and margins */
.persons, .personsMobile{
  box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.persons td, .personsMobile td, .vehicleStripe td{
padding: 7px;
}

/* Ueber uns: mobile version */
/* Historical vehicles: mobile version */
@media (max-width: 600px){
  .personsMobile, .vehicles_hist_mobile {
    visibility: visible;
    width: 100%;
  }
  .persons, .vehicles_hist{
    visibility: collapse;
  }
}

@media (min-width:600px){
  .personsMobile, .vehicles_hist_mobile {
    visibility: collapse;
  }
  .article-details  {
  box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
/* historical vehicles: mobile table */
.vehicles_hist_mobile>img {
  border = 1px solid #f333333;
  --style="width: 822px;
  --cellspacing=1 
  --cellpadding=1
}

/* Fahrzeuge: Short info next to image */
.img_vehicles {
  margin-right: 10px;
  float: left;
}

.info_vehicles {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px; 
  line-height: normal;
}