/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/


    @font-face {
    font-family: 'Acumin Pro';
    font-style: normal;
    font-weight: normal;
    src: local('Acumin Pro'), url('font/Acumin-RPro.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Acumin Pro Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Acumin Pro Italic'), url('font/Acumin-ItPro.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Acumin Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Acumin Pro Bold'), url('font/Acumin-BdPro.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Acumin Pro Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Acumin Pro Bold Italic'), url('font/Acumin-BdItPro.woff') format('woff');
    }

p {
	line-height: 1.6rem;
}

.text-lead p {
  line-height: 1.4!important;
}

p strong {
	color: #f27c00;
	font-family: 'Acumin Pro Bold';
	font-weight: 200!important;
}

.style-dark p strong {
	color: #fff!important;
	font-family: 'Acumin Pro Bold';
	font-weight: 200!important;
}

.img-round > img {
	border-radius: 20px;
}

.btn-color-xsdn.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover, .btn-color-xsdn.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):focus, btn-color-xsdn.btn-outline:active {
  color: #f27c00 !important;
}

.title-badge .badge-style {
	padding: 40px;
	border-radius: 20px;
    background-clip: padding-box;
	position: relative;
    top: 50px;
	z-index: 9999;
}

.social-icon i {
	color: #fff;
}


#header-startseite .style-dark .btn-default, #header-startseite .style-light .style-dark .btn-default, #header-startseite .tmb-dark .t-entry-text .btn-default, #header-startseite .style-light .tmb-dark .t-entry-text .btn-default, #header-startseite .tmb-light .t-overlay-inner .btn-default {
  color: #fff !important;
  background-color: transparent !important;
  border-color: transparent !important;
}


/* =========================================================
   NUMMERIERTES UNCODE-ACCORDION
   Extra Class: accordion-numbered
   ========================================================= */


/* ---------------------------------------------------------
   ZÄHLER
   --------------------------------------------------------- */

.accordion-numbered .panel-group {
	counter-reset: accordion-item;
}

.accordion-numbered .panel-group > .panel {
	counter-increment: accordion-item;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}


/* ---------------------------------------------------------
   ACCORDION-HEADER
   --------------------------------------------------------- */

.accordion-numbered .panel-group > .panel > .panel-heading {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.accordion-numbered .panel-title {
	margin: 0 !important;
	padding: 0 !important;
}


/* Komplette Titelzeile */

.accordion-numbered .panel-title > a {
	display: grid !important;
	grid-template-columns: 150px minmax(0, 1fr) 48px;
	align-items: center;

	min-height: 170px;
	padding: 0 !important;
	margin: 0 !important;

	/* Trennlinie oberhalb jedes Eintrags */
	border-top: 1px solid rgba(95, 95, 95, 0.45) !important;
	border-bottom: 0 !important;

	color: #707070 !important;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none !important;

	transition:
		color 0.25s ease,
		background-color 0.25s ease;
}


/* ---------------------------------------------------------
   AUTOMATISCHE NUMMERIERUNG: 01, 02, 03 ...
   --------------------------------------------------------- */

.accordion-numbered .panel-title > a::before {
	content: counter(accordion-item, decimal-leading-zero);

	display: block;
	align-self: center;
	color: #35a9dd;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
}


/* ---------------------------------------------------------
   TITELTEXT
   --------------------------------------------------------- */

.accordion-numbered .panel-title > a > span {
	display: block;
	min-width: 0;
}


/* Uncode-Standardpfeil ausblenden */

.accordion-numbered .panel-title > a > span::after {
	display: none !important;
	content: none !important;
}


/* ---------------------------------------------------------
   RUNDER PFEIL RECHTS
   Geschlossen: nach rechts
   --------------------------------------------------------- */

.accordion-numbered .panel-title > a::after {
	content: "" !important;

	position: static !important;
	display: block !important;
	justify-self: end;
	align-self: center;

	width: 44px;
	height: 44px;

	/* Pfeil etwas vom rechten Rand einrücken */
	margin: 0 24px 0 0 !important;

	border: 1px solid #707070;
	border-radius: 50%;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;

	transform: rotate(0deg) !important;
	transform-origin: center;

	transition: transform 0.25s ease;
}


/* ---------------------------------------------------------
   AKTIVER ZUSTAND
   Pfeil zeigt nach unten
   --------------------------------------------------------- */

.accordion-numbered .panel-title > a[aria-expanded="true"]::after,
.accordion-numbered .panel-title.active > a::after {
	transform: rotate(90deg) !important;
}


/* ---------------------------------------------------------
   ACCORDION-INHALT
   --------------------------------------------------------- */

.accordion-numbered .panel-collapse {
	border: 0 !important;
}

.accordion-numbered .panel-body {
	padding: 75px 48px 80px 150px !important;

	/*
	 * Entfernt die Linie zwischen dem aktiven
	 * Accordion-Titel und seinem Inhalt.
	 */
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
}


/* Zusätzliche Uncode-Selektoren gegen die Trennlinie */

.accordion-numbered .panel-heading + .panel-collapse,
.accordion-numbered .panel-heading + .panel-collapse.in,
.accordion-numbered .panel-heading + .panel-collapse > .panel-body,
.accordion-numbered .panel-heading + .panel-collapse.in > .panel-body {
	border-top: 0 !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 959px) {

	.accordion-numbered .panel-title > a {
		grid-template-columns: 100px minmax(0, 1fr) 48px;
		min-height: 140px;
		font-size: 30px;
	}

	.accordion-numbered .panel-title > a::before {
		font-size: 26px;
	}

	.accordion-numbered .panel-title > a::after {
		margin-right: 16px !important;
	}

	.accordion-numbered .panel-body {
		padding: 60px 40px 70px 100px !important;
	}
}


/* ---------------------------------------------------------
   MOBIL
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.accordion-numbered .panel-title > a {
		grid-template-columns: 48px minmax(0, 1fr) 38px;
		column-gap: 12px;

		min-height: 100px;

		font-size: 23px;
		line-height: 1.25;
	}

	.accordion-numbered .panel-title > a::before {
		font-size: 20px;
	}

	.accordion-numbered .panel-title > a::after {
		width: 36px;
		height: 36px;

		margin-right: 4px !important;

		background-size: 20px 20px;
	}

	.accordion-numbered .panel-body {
		padding: 40px 0 55px 60px !important;
	}
}



/* =========================================================
   ANATOMIEGRAFIK PROSTATA
   ========================================================= */

.prostata-anatomie {
	display: grid;
	grid-template-columns:
		minmax(250px, 0.8fr)
		minmax(430px, 1.45fr)
		minmax(320px, 1fr);

	align-items: center;
	column-gap: 48px;

	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}


/* ---------------------------------------------------------
   ZENTRALE GRAFIK
   --------------------------------------------------------- */

.prostata-anatomie__grafik {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.prostata-anatomie__grafik img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}


/* ---------------------------------------------------------
   NUMMERIERTE HOTSPOTS AUF DER SVG
   --------------------------------------------------------- */

.prostata-hotspot {
	position: absolute;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 54px;
	height: 54px;

	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.82);

	color: #35add7;
	font-size: 27px;
	font-weight: 400;
	line-height: 1;

	transform: translate(-50%, -50%);
	pointer-events: none;
}


/*
 * Positionen innerhalb der Grafik.
 * Diese Werte kannst Du später feinjustieren.
 */

.prostata-hotspot--01 {
	top: 35%;
	left: 17%;
}

.prostata-hotspot--02 {
	top: 89%;
	left: 50%;
}

.prostata-hotspot--03 {
	top: 43%;
	left: 79%;
}

.prostata-hotspot--04 {
	top: 10%;
	left: 50%;
}


/* ---------------------------------------------------------
   TEXTBEREICHE LINKS UND RECHTS
   --------------------------------------------------------- */

.prostata-anatomie__texte {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.prostata-anatomie__texte--links {
	gap: 44px;
}

.prostata-anatomie__texte--rechts {
	justify-content: center;
}


/* ---------------------------------------------------------
   TEXTKARTEN
   --------------------------------------------------------- */

.prostata-info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 18px;

	width: 100%;
	padding: 38px 34px;

	border-radius: 18px;
	background-color: #ffffff;
}

.prostata-info--gross {
	padding: 42px 40px;
}


/* Nummer in der Textkarte */

.prostata-info__nummer {
	color: #35add7;
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}


/* Text */

.prostata-info__text {
	color: #707070;
	font-size: 20px;
	line-height: 1.45;
}

.prostata-info__text strong {
	font-weight: 700;
}

.prostata-info__text p {
	margin: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {

	.prostata-anatomie {
		grid-template-columns:
			minmax(210px, 0.8fr)
			minmax(350px, 1.3fr)
			minmax(260px, 1fr);

		column-gap: 28px;
	}

	.prostata-anatomie__texte--links {
		gap: 24px;
	}

	.prostata-info {
		padding: 28px 24px;
		border-radius: 15px;
	}

	.prostata-info--gross {
		padding: 32px 28px;
	}

	.prostata-info__nummer {
		font-size: 31px;
	}

	.prostata-info__text {
		font-size: 17px;
	}

	.prostata-hotspot {
		width: 46px;
		height: 46px;
		font-size: 23px;
	}
}


/* =========================================================
   MOBIL UND KLEINES TABLET
   Grafik oben, Textkarten darunter
   ========================================================= */

@media (max-width: 959px) {

	.prostata-anatomie {
		display: flex;
		flex-direction: column;
		gap: 35px;
	}

	.prostata-anatomie__grafik {
		order: 1;
		width: min(100%, 650px);
	}

	.prostata-anatomie__texte--links {
		order: 2;

		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.prostata-anatomie__texte--rechts {
		order: 3;
	}

	.prostata-info {
		height: 100%;
	}

	.prostata-info--gross {
		max-width: none;
	}
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 599px) {

	.prostata-anatomie {
		gap: 24px;
	}

	.prostata-anatomie__texte--links {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.prostata-info {
		padding: 24px 22px;
		column-gap: 14px;
		border-radius: 12px;
	}

	.prostata-info--gross {
		padding: 26px 22px;
	}

	.prostata-info__nummer {
		font-size: 28px;
	}

	.prostata-info__text {
		font-size: 16px;
	}

	.prostata-hotspot {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
}