/*
Theme Name: spielwerk wp theme 
Author: grosshans und arsad
Description: 
Version: 0.1
Requires at least: 5.0
Tested up to: 6.4.1
Requires PHP: 7.4
License: No
*/


/* Variablen festlegen */
:root {
  --USPhintergrund:#0095C7;
  --USPgruen: #619B31;
  --USPhellgruen: #C8D75A;
  --USPhellblau: #0095C7;
  --USPdunkelblau: #035F85;
  --USPlink: #035F85;
  --USPfooter: #363636;
  --USPtext: #035F85;
  --USPtitel: #035F85;
  --USPkachel: #035F85;
  --USPstudio: #552B2D;
  --USPtennis: #2BBAD9;
  --USPbadminton: #2BBAD9;
  --USPsquash: #2BBAD9;
  --USPgolf: #619B31;
  --USPsauna: #F6A117;
  --USPbistro: rgb(123,123,123);
  --USPeventhalle: rgb(123,123,123);
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;

  --card-color: #ffffff;
  --card-hover: #619B31;
  --accent-color: #7bbd45;
  --text-color: #035F85;
  --muted-text: #035F85;
  --border-color: #baec90;
  --shadow-color: rgba(0, 0, 0, 0.3);
}
.USPhintergrund { background-color: var(--USPhintergrund) !important;}
.USPgruen { background-color: var(--USPgruen) !important;}
.USPgruen:after { border-top-color: var(--USPgruen) !important;}
.USPorange { background-color: var(--USPsauna) !important;}
.USPorange:after { border-top-color: var(--USPsauna) !important;}
.USPhellgruen { background-color: var(--USPhellgruen) !important;}
.USPhellgruen:after { border-top-color: var(--USPhellgruen) !important;}
.USPhellblau { background-color: var(--USPhellblau) !important;}
.USPhellblau:after { border-top-color: var(--USPhellblau) !important;}
.USPdunkelblau { background-color: var(--USPdunkelblau) !important;}
.USPlink { background-color: var(--USPlink) !important;}
.USPfooter { background-color: var(--USPfooter) !important;}
.USPtext { background-color: var(--USPtext) !important;}
.USPtitel { background-color: var(--USPtitel) !important;}
.USPkachel { background-color: var(--USPkachel) !important;}
.USPstudio { background-color: var(--USPstudio) !important;}
.USPtennis { background-color: var(--USPtennis) !important;}
.USPbadminton { background-color: var(--USPbadminton) !important;}
.USPsquash { background-color: var(--USPsquash) !important;}
.USPgolf { background-color: var(--USPgolf) !important;}
.USPsauna { background-color: var(--USPsauna) !important;}
.USPbistro { background-color: var(--USPbistro) !important;}
.USPeventhalle { background-color: var(--USPeventhalle) !important;}

/*

@font-face {
  font-family: 'Frutiger';
  font-style: normal;
  font-weight: normal;
  src: local('Frutiger'), url('https://unsersportpark.de/wp-content/themes/unsersportpark/fontawesome/webfonts/Frutiger.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Frutiger Bold';
  font-style: normal;
  font-weight: bold;
  src: local('Frutiger Bold'), url('https://unsersportpark.de/wp-content/themes/unsersportpark/fontawesome/webfonts/Frutiger_bold.woff') format('woff');
  }
*/

/*  */
* {
  margin: 0px;
  padding: 0px;
}

html, body { 
  font-family: 'Frutiger', "Frutiger", 'Arial', system-ui, -apple-system;
  scroll-behavior: smooth;
  text-rendering: geometricPrecision;
  text-align: left; 
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, table { font-size: 0.8em; color: var(--USPtext); text-decoration: none; line-height:normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h1 { font-size: 1.4em; font-weight: 700; font-kerning:normal; color: var(--USPtitel);  }
h2 { font-size: 1.3em; font-weight: 700; font-kerning:normal; color: var(--USPtitel);  }
h3 { font-size: 1.2em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
h4 { font-size: 1.0em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
h5 { font-size: 0.8em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
h6 { font-size: 0.7em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
strong { font-weight: bold;}
li { margin: 0px 0px 0px 0px;  list-style-type: none; } 
a:hover { color: var(--USPlink); }
p, a, a:visited { font-size: 1em; margin-top: 0.3em; text-decoration: none; color: var(--USPlink);
}
p a  {  
	background: var(--USPhellgruen);
}
p a:hover {
	position: relative;
	color: white;
	display: inline;
	background: var(--USPdunkelblau);
}







.liste {}
.liste li { font-size: 1.1em; margin: 10px 0px 10px 25px;  list-style-type: disc; }

hr { background-color: var(--USPhintergrund);}
#minikacheln .active { filter:grayscale(100); }

#page { position: absolute; top: 0px; left: 0px; width: 100%; background: var(--USPfooter);
  width: 100%; 
  min-width: 100%; 
  max-width: 100%; }  
.site {}

header { background-color: white; }
.site-header { width: 100%; height: 123px; }
.seitentitel { font-size: 2.5em; color: var(--USPhellblau); position: absolute; bottom: 0px; font-weight: 600; }
.logo { text-align: left; text-wrap: nowrap; padding-top: 40px;  position: absolute; right: 0px; bottom: 20px;  }
.logo a { font-size: 2em; font-weight: 800; line-height: 0.8em; padding: 0 0 0 0;}
.logo img { height: 44px; width: auto;}
.logo img:hover { padding: 1px 1px 1px 1px;}

.USPlogounser { color: var(--USPgruen); padding: 0 0 0 0; } 
.USPlogosportpark { color: var(--USPdunkelblau); padding: 0 0 0 0; } 
.USPlogonuembrecht { color: var(--USPhellblau); padding: 0 0 0 0; }




  


#menu-minimenu { 
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden; 
	float: left;
	display: inline;
	height: 150px;
}

#menu-minimenu li {
	position: relative;
	float: left;
	display: inline;
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
	background: white;
	border-radius: 12px;
	padding:6px 6px 6px 6px; 
  }
  
#menu-minimenu li:hover {
	background: var(--USPhellblau);
	border-radius: 12px;
	padding:6px 6px 6px 6px; 
  }
  #menu-minimenu li:hover a {
  color: white;
  }



  .kbnews, .kbfitness, .kbtennis, .kbbadminton, .kbsquash, .kbgolf, .kbsauna, .kbgaeste, .kbbistro, .kbebike  { }

  .kbnews, .kbfitness, .kbtennis, .kbsquash, .kbgolf, .kbsauna, .kbb2b{ background-position: bottom; }

  
#gaestehaus-bistro { margin-left: 25px; }























section { background:var(--USPhintergrund);  }
.container { position: relative; }



.inhalt {  }





/* Textblasen */

.textblase { border-right: 10px;
	position: relative;
	font-size: 18px;
	line-height: 24px;
	background: #fff;
	border-radius: 40px;
	padding:24px 24px 24px 24px;
	margin-bottom: 50px;
  }

.texteck-links-special:after {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 24px solid #fff;
	border-right: 12px solid transparent;
	border-bottom: 12px solid #fff;
	border-top: 20px solid transparent;
	left: 15%;
	top: -24px;
}

.texteck-links-10:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 10%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-20:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 20%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-30:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 30%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-40:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 40%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-50:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 50%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-60:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 60%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-70:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 70%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-80:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 80%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-links-90:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 90%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-10:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 10%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-20:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 20%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-30:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 30%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-40:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 40%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-50:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 50%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-60:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 60%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-70:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 70%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-80:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 80%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}

.texteck-rechts-90:after {
	content: '';
	position: absolute;
	bottom: 1%;
	left: 90%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -1em;
	margin-bottom: -2em;
}
 
/* buchung */

.buchung a {
  color: var(--USPgruen);
  margin-left: 75px;
  padding: 20px; 
  border-radius: 44px;
  width: 444px;
  height: 123px;
  font-size: 22px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color:#fff ;
}

.buchung a:hover {

  background-color: var(--USPhellgruen);
color: white;
}


/* Kachel -------------------------------------- */

#kacheln { padding-top: 50px; padding-bottom: 50px; }

.kachelfeld {  
  padding: 0 0 0 0;
  border:8px;
  border-radius: 20px 20px 20px 20px;
  margin-bottom: 20px;
  background-color: rgb(123,123,123);
  height: 200px; 
}



.kacheltitel { position: relative; top: 0px; z-index: 1;
width: 100%;
height: 75px;
background-color: var(--USPdunkelblau);
  border-radius: 20px 20px 0 0; 
}
.kacheltitel h2 { color: white; padding-left: 25px; padding-top: 20px; white-space: nowrap; font-size: 1.4em;}
 
.kachelbild { width: 100%; height: 200px; object-position: top center; background-size: cover; border-radius: 20px 20px 20px 20px; position: relative; top: -75px; z-index: 0; }

  .kachelfeld:hover .kacheltitel h2 { color: var(--USPhellblau) }
  .kachelfeld:hover .kachelbild {
  
    filter: brightness(123%) contrast(123%);

  }
  .kachelfeld:hover .kacheltitel {
  
    filter: brightness(123%);

  }
  .kachelfeld:active .kachelbild {
  
    filter: contrast(250%);
 
  }
  











.kacheltitel-mini { 
  width: 100%;
  height: 30px;
  background-color: var(--USPdunkelblau);
    border-radius: 10px 10px 0 0;
	color: white; font-size: 1.2em; padding-left: 10px; padding-top: 5px;
  }
.kacheltitel-extra { 
  width: 100%;
  height: 45px;
   background-color: var(--USPdunkelblau);
    border-radius: 10px 10px 0 0;
	color: white; font-size: 1.2em; padding-left: 10px; padding-top: 5px;
  }
  
  .kachelbild-mini { width: 100%; height: 70px; background-size: cover; border-radius: 0 0 10px 10px; }
.kachelbild-extra { width: 100%; height: 55px; background-size: cover; border-radius: 0 0 10px 10px; }

.senfgelb {  background-color:  rgb(212, 175, 54); }

/* Flexbox */
.flex-container { 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;


} 


.minimenu { justify-content: flex-start; }


.kbminiflex:hover .kachelbild-mini, .kbminiflex:hover .kachelbild-extra  {  
  filter: brightness(123%) contrast(123%);
 }
 .kbminiflex:active .kachelbild-mini, .kbminiflex:active .kachelbild-extra   {  
  filter: contrast(250%);
 }
  .kbminiflex:hover .kacheltitel-mini, .kbminiflex:hover .kacheltitel-extra   { color: var(--USPhellblau); }
  

.kbminiflex { width: 100px; }
.flex-item { 
  margin: 15px 0 0 5px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: left; 
}



















/* X-Small (telefone etc, weniger als 576px) ist "default" in Bootstrap */

/* Miniphones (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	.seitentitel { font-size: 3em; color: var(--USPhellblau); position: absolute; bottom: 0px; font-weight: 600; }
	.kacheltitel { height: 55px; }
	.kacheltitel h2 { padding-top: 10px; }
	.kachelbild { height: 150px; position: relative; top: -55px; z-index: 0; }
	.kachelfeld {  
	  margin-bottom: 15px;
	  height: 150px;
	} 
	p, a { font-size: 1em;}
	.logo img { height: 55px; width: auto;}
   } 
   
  /* Tablets (tablets, 768px and up) */
  @media (min-width: 768px) { 
	  .kachelbild { 
		height: 150px;
	}  
	.kachelfeld {  
	  height: 150px;
	}
	.site-header { height: 146px; }
	.logo { bottom: 25px;  }
	.seitentitel { font-size: 4em; color: var(--USPhellblau); position: absolute; bottom: 0px; font-weight: 600; }
	.logo img { height: 66px; width: auto;}

	h1 { font-size: 1.8em; font-weight: 700; font-kerning:normal; color: var(--USPtitel);  }
h2 { font-size: 1.5em; font-weight: 700; font-kerning:normal; color: var(--USPtitel);  }


   } 
  
  /* Fancytablets, Laptops etc (desktops, 992px and up) */
  @media (min-width: 992px) { 
	  .kachelbild { 
		height: 150px;
	}
	.kachelfeld {  
	  margin-bottom: 30px;
	  height: 150px;
	}
	.site-header { width: 100%; height: 200px; }
	.seitentitel { font-size: 6em; color: var(--USPhellblau); position: absolute; bottom: 0px; font-weight: 600; }
	.logo { bottom: 30px;  }
	.logo img { height: 88px; width: auto;}

	h1 { font-size: 2em; font-weight: 700; font-kerning:normal; color: var(--USPtitel);  }
h2 { font-size: 1.6em; font-weight: 700; font-kerning:normal; color: var(--USPtitel);  }
h3 { font-size: 1.4em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
h4 { font-size: 1.2em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
h5 { font-size: 1em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
h6 { font-size: 0.8em; font-weight: 600; font-kerning:normal; color: var(--USPtitel);  }
.kacheltitel h2 { font-size: 2em;}
   } 
  
  /* Noob PC (large desktops, 1200px a nd up) */
  @media (min-width: 1200px) { 
	  .kachelbild { 
		height: 200px;
	}
	.kachelfeld { 
  
	  height: 200px;
	}
	.logo { bottom: 35px;  }
	.logo img { height: 100px; width: auto;}

   }
  
  /* Leet PC (larger desktops, 1400px and up) */
  @media (min-width: 1400px) { 
	  .kachelbild { 
		height: 250px;
	}
	.kachelfeld { 
  
	  height: 250px;
	}
	.logo img { height: 123px; width: auto;}

   }
  
  
  




























.text-rechts { text-align: right;  }

.preisliste { position: relative;  }
.preisliste td {

}
.preisliste td:nth-child(1) {
width: 80%;
}
.preisliste td:nth-child(2) {
text-align: right;
}
.preisliste-heller { background-color: rgb(240,247,253); padding: 10px 10px 10px 10px; margin: 2px 2px 12px 2px; width: 100%;}
.preisliste-dunkler {background-color: rgb(193, 223, 250); padding: 10px 10px 10px 10px; margin: 2px 2px 12px 2px; width: 100%;}

.button-gelb { position: absolute; top: 40px; right: 50px;  background-color: rgba(246,161,23,0.8); border-radius: 75px; height: 150px; width: 150px; transform: rotate(-15deg);
  /* Legacy vendor prefixes that you probably don't need... */
  /* Safari */
  -webkit-transform: rotate(-15deg);
  /* Firefox */
  -moz-transform: rotate(-15deg);
  /* IE */
  -ms-transform: rotate(-15deg);
  /* Opera */
  -o-transform: rotate(-15deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
} 

.button-gelb p { text-align: center; 
  color: white; padding-top: 10px;}



  .button-blau { position: absolute; top: 40px; right: 50px; border-radius: 75px; height: 150px; width: 150px; transform: rotate(-15deg); background-color: rgba(0,149,199,0.6);
    /* Legacy vendor prefixes that you probably don't need... */
    /* Safari */
    -webkit-transform: rotate(-15deg);
    /* Firefox */
    -moz-transform: rotate(-15deg);
    /* IE */
    -ms-transform: rotate(-15deg);
    /* Opera */
    -o-transform: rotate(-15deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  } 
  
  .button-blau p { text-align: center; 
    color: white; padding-top: 10px;}
  



 




/* Table Tabellen*/

table { margin-top: 1em; width: 100%; 
  border-collapse: collapse; 
}

th,
caption {
	text-align: start; height: 3rem;
}

thead th:not(:first-child),
td {
	text-align: end;
}


tr { 
  border-bottom: 2pt dotted darkgrey; min-width: 33%; white-space: nowrap;
}
.noline { border-bottom: none; }

thead {
	border-block-end: 2px solid;
	background: whitesmoke;
}

tfoot {
	border-block: 2px solid;
	background: whitesmoke;
}

th,
td {
	border: 1px solid lightgrey;
	padding: 0.25rem 0.75rem;
}


.preisemonfr, .preiseferien, .ermaessigung, .sockenpreise { max-width: 400px; min-width: 200px; background-color: #d3e9f3;}
.preisesaso { max-width: 400px; min-width: 200px; background-color: #ccd9dd; }
.sonntagsblau {  color: rgb(168, 12, 142); }


/* X-Small (telefone etc, weniger als 576px) ist "default" in Bootstrap */

/* Miniphones (landscape phones, 576px and up) */
@media (min-width: 576px) { 

	
   } 
   
  /* Tablets (tablets, 768px and up) */
  @media (min-width: 768px) { 
	  
   } 
  
  /* Fancytablets, Laptops etc (desktops, 992px and up) */
  @media (min-width: 992px) { 

   } 
  
  /* Noob PC (large desktops, 1200px a nd up) */
  @media (min-width: 1200px) { 
	td {  font-size: 1.4em;
	 }
   }
  
  /* Leet PC (larger desktops, 1400px and up) */
  @media (min-width: 1400px) { 
	
   }
  
  
  










#footer { border-top: 100px var(--USPhintergrund) solid; border-bottom: 100px var(--USPfooter) solid; padding-top: 25px; width: 100%; background-color: var(--USPfooter);}

#footer a, #footer a:hover, #footer a:visited { 
	color: white;
	position: relative;
	font-size: 18px;
	line-height: 24px;
	border-radius: 8px;
	padding:6px 6px 6px 6px;
	margin-top: 10px;
	margin-bottom: 10px;
  }
  
#footer a:hover {

	background: var(--USPhellblau);
	border-radius: 8px;
	padding:6px 6px 6px 6px; 
  }
  









/* ++++++++++++++++++++++++++++++ Team Cards +++++++++++++++++++++++++++++++++++++++++ */
 
.card { margin-top: 25px; margin-bottom: 25px; }

.cardperson { height: 525px; }


.card-body h2 {  
line-height: 1em;
} 
.parken {border: springgreen 1px solid;  border: skyblue 1px solid;

} 

.card-custom {
  overflow: hidden; 
  min-height: 450px;
  border: 0;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}

.card-custom-img {
  transition: transform 2s;
  height: 200px;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: inherit; z-index: 10;
}


.card-title { margin-bottom: 0px;}
.card-text { margin-bottom: 10px;}
.card-email { white-space: nowrap; overflow: hidden; }

/* First border-left-width setting is a fallback */
.card-custom-img::after {
  position: absolute;
  content: '';
  top: 161px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 40px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 545px;
  border-left-width: calc(575px - 5vw);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: inherit;
}
.card-custom-img:hover {
  transform: scale(1.04) rotate(-1deg);
}

.card-custom-avatar img {
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
  position: absolute;
  top: 100px;
  left: 1.25rem;
  width: 100px;
  height: 100px;
}














.accordion-item p { }
.rund {  border-radius: 50%;
	background: var(--USPdunkelblau);
	padding-left: 13px; 
	padding-top: 8px;
	width: 40px;
	height: 40px;
	font-size: 1.4em;
	font-weight: 700;
	color: white !important;
 } 

 .rundzwo {  border-radius: 10px;
	background: var(--USPdunkelblau);
	padding-left: 13px; 
	padding-right: 13px; 
	padding-top: 8px;
	padding-bottom: 8px;
	width: 40px;
	height: 40px;
	font-size: 1.4em;
	font-weight: 700;
	color: white !important;
	
 } 

 .rundzwo:hover {  
	background: var(--USPgolf);
	
 } 




















 


/* ++++++++++++++++++++++++++++++ Team Cards +++++++++++++++++++++++++++++++++++++++++ */
 
.card { margin-top: 25px; margin-bottom: 25px; font-size: 0.8em; }

.cardperson { height: 525px; }


.card-body h2 {  
line-height: 1em;
} 
.parken {border: springgreen 1px solid;  border: skyblue 1px solid;

} 

.card-custom {
  overflow: hidden; 
  min-height: 450px;
  border: 0;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}

.card-custom-img {
  transition: transform 2s;
  height: 200px;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: inherit; z-index: 10;
}


.card-title { margin-bottom: 0px;}
.card-text { margin-bottom: 10px;}
.card-email { white-space: nowrap; overflow: hidden; }

/* First border-left-width setting is a fallback */
.card-custom-img::after {
  position: absolute;
  content: '';
  top: 161px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 40px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 545px;
  border-left-width: calc(575px - 5vw);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: inherit;
}
.card-custom-img:hover {
  transform: scale(1.04) rotate(-1deg);
}

.card-custom-avatar img {
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
  position: absolute;
  top: 100px;
  left: 1.25rem;
  width: 100px;
  height: 100px;
}



















































.hidden { background-color: none; color: none; background: none;}
.hidden:hover { background-color: none; color: none; background: none;}



.wpcf7-response-output { position: relative;
	font-size: 18px;
	line-height: 24px;
	background: #fff;
	border-radius: 30px;
	padding:24px 24px 24px 24px; 
}
.awooga { position: absolute; top: 50%; left: auto; transform: rotate(-30deg);
	/* Legacy vendor prefixes that you probably don't need... */
	/* Safari */
	-webkit-transform: rotate(-30deg);
	/* Firefox */
	-moz-transform: rotate(-30deg);
	/* IE */
	-ms-transform: rotate(-30deg);
	/* Opera */
	-o-transform: rotate(-30deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }





 .bildtop {   background-position: top; }












.slb_template_tag_item_title { font-family: 'Frutiger', "Frutiger", 'Arial', system-ui, -apple-system; text-rendering: geometricPrecision; text-align: left; }


.slb_template_tag {  font-family: 'Frutiger', "Frutiger", 'Arial', system-ui, -apple-system; text-rendering: geometricPrecision; text-align: right;  }

 .gallery-caption { background-color: white; border-width: 0px 1px 0px 1px; border-color: white; border-style: solid; text-align: left; overflow-wrap: break-word;
  hyphens: auto; font-size: small;} 
 
/* Miniphones (landscape phones, 576px and up) */
@media (min-width: 576px) { 

	 .gallery-caption { border-width: 0px 1px 0px 1px; } 

   } 
   
  /* Tablets (tablets, 768px and up) */
  @media (min-width: 768px) { 
	   .gallery-caption { border-width: 0px 4px 0px 4px; } 
   } 
  
  /* Fancytablets, Laptops etc (desktops, 992px and up) */
  @media (min-width: 992px) { 
 .gallery-caption { border-width: 0px 8px 0px 8px; } 

   } 
  
  /* Noob PC (large desktops, 1200px a nd up) */
  @media (min-width: 1200px) { 
	.gallery-caption { border-width: 0px 12px 0px 12px; }
   }
  
  /* Leet PC (larger desktops, 1400px and up) */
  @media (min-width: 1400px) { 
	.gallery-caption { border-width: 0px 22px 0px 22px; }
   }
  
  

 .slb_slideshow {display: none;}


 .teamiframe { display:block;  min-height: 8000px; width:100%; background-color: #f2f0ea; border: none;}
 
/* Miniphones (landscape phones, 576px and up) */
@media (min-width: 576px) { 
 .teamiframe { min-height: 8000px;  }
   } 
  /* Tablets (tablets, 768px and up) */
  @media (min-width: 768px) { 
 .teamiframe { min-height: 8000px;}
   } 
  /* Fancytablets, Laptops etc (desktops, 992px and up) */
  @media (min-width: 992px) { 
 .teamiframe { min-height: 8000px; }
   } 
  /* Noob PC (large desktops, 1200px a nd up) */
  @media (min-width: 1200px) { 
 .teamiframe { min-height: 5000px; }
   }
  /* Leet PC (larger desktops, 1400px and up) */
  @media (min-width: 1400px) { 
 .teamiframe { min-height: 4000px; }
   }
  














   /** Details FAQ **/



  :root {
	interpolate-size: allow-keywords;
}


details:open summary::after {
  transform: rotate(0deg);
}

/* Let's animate the height on open. Set the Psuedo element to height of 0. This currently only works in Chrome */
details::details-content {
    block-size: 0;
    transition:
        block-size 0.3s ease,
        content-visibility 0.3s ease;
    transition-behavior: allow-discrete;
}

/* Again, this only works in Chrome as of November 2025 */
details[open]::details-content {
    block-size: auto;
}

details summary {
			position: relative;
  		/* Hide the default marker */
      &::marker {
        content: "";
      }

      &::before,
      &::after {
        /* Custom marker dimensions */
        content: "";
        border-block-start: 3px solid black;
        height: 0;
        width: 1rem;

        /* Positions the lines */
        inset-block-start: 50%;
        inset-inline-end: 1em;

        /* Anchor the shape to the summary */
        position: absolute;
        position-anchor: --summary;
        position-area: top end;
      }

      /* Rotate just the ::after line to create a "+"" shape */
      &::after {
        transform: rotate(90deg);
        transform-origin: 50%;
      }
}




details {
  border: 2px solid transparent;
  padding: 20px 20px 40px 20px;
  border-radius: 10px;
  background-image: 
    linear-gradient(white, white), 
    linear-gradient(to right, rgb(77, 0, 139), rgb(68, 2, 173));
  background-origin: border-box;
  background-clip: padding-box, border-box;

}
details {
  border: 5px solid violet;
  background-color: green;
  margin-bottom: 20px;
}








/* ---------- FAQ Section ---------- */
.faq-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* ---------- FAQ List ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
} 

.faq-item { 
  overflow: hidden;
  align-items: center;
  background: var(--card-color);

 border-radius: 15px;

}
.faq-item:nth-child(even) {
	border: 3px solid;
	border-color:  var(--border-color);
}
.faq-item:nth-child(odd) {
	border: 3px solid;
	border-color:  var(--border-color);
}
.faq-item:hover {
border: 3px solid;
border-color:  var(--accent-color);
 border-radius: 10px;
}
 

/* ---------- FAQ Question ---------- */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  width: 100%;
 
  border: none;
  background: var(--card-color);
  color: var(--text-color);

  font-size: 1rem;
  font-weight: 700;
  text-align: left;

  cursor: pointer;
  transition: background-color 0.25s ease;
  
  display: flex;
  justify-content: space-between;
}




/* ---------- Plus / Minus Icon ---------- */
.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center; 

  flex-shrink: 0;

  width: 34px;
  height: 34px;

  border: 2px solid var(--accent-color);
  border-radius: 50%;

  color: var(--accent-color);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;

  transition: 
    transform 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
 
  color: var(--bg-color);
}

/* ---------- FAQ Answer ---------- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-content {
  overflow: hidden;
}

.faq-answer-content p, .faq-answer-content h4 {
  padding: 33px 22px 0px 22px;
  color: var(--muted-text);
}


/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .faq-section {
    padding: 50px 16px;
  }

  .faq-heading {
    margin-bottom: 30px;
  }

  .faq-question {
    padding: 18px;
    font-size: 0.95rem;
  }

  .faq-answer-content p {
    padding: 0 18px 18px;
  }

  .faq-icon {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
  }
}

/* ---------- Reduced Motion Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-icon,
  .faq-question {
    transition: none;
  }
}


.main { 
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.main div {
	padding-top:15px;
align-content: center;
}























.startseitetitel {width: 400px; height: 108px;}

#eingangstext p { margin-top: 25px;}
#eingangstext .offset-xl-2 { margin-top: 3em;  }

#eingangstext .offset-xl-1 { margin-bottom: 2em;  }


@media (max-width: 768px) {
  #eingangstext .col-12 { margin-bottom: 1em; margin-top: 1em;  }
  .startseitetitel {width: 300px; height: 81px;}
}

@media (max-width: 500px) {
  .startseitetitel {width: 200px; height: 54px;}
  #logo img { }
  #menu-minimenu li {
	font-size: 12px;
	line-height: 18px;
	  }
.kacheltitel-mini { width: 77px;}
      .kachelbild-mini { width: 77px; height: 55px; }
.kachelbild-extra {  height: 44px;  }
.kbminiflex { width: Auto; }
.seitentitel { font-size: 2em; }
}







.warnung { font-weight: bold; }



.insert-page {  }