:root {
	--blau:#21174b;
	--hellblau:#291f55;
	--dunkelblau:#0a0427;
	
	--pink:#ff3eb5;
	--hellpink:#c52487;
	
	--gruen:#5bc68d;
	--dunkelgruen:#3aa06a;
	
	--weiss:#ffffff;
	--hellgrau:#f4f4f4;
	--grau:#a6a6a6;
	--dunkelgrau:#888888;
}

* {
	outline:none;
}

::selection {
	background:var(--pink);
    color: #ffffff;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
}

body {
	background:var(--blau);
	margin:0px;
	padding:2.5% 5% 2.5% 5%;
	color:var(--weiss);
	font-family:"Montserrat";
	font-size:12px;
	line-height:24px;
}

.full-width {
	width:100%;
	position:relative;
	margin:0px auto 0px auto;
}

.wrapper {
	width:100%;
	max-width:480px;
	margin:100px auto 100px auto;
}

h1 {
	font-family:"Bebas Neue";	
	font-weight:normal;
	font-size:40px;
}

h2 {
	font-family:"Bebas Neue";
	font-weight:normal;
	color:var(--pink);
	font-size:30px;
	margin-bottom:0px;
	padding-bottom:0px;
}

.card h2 {
	color:var(--grau);
}

h3 {
	font-family:"Bebas Neue";
	font-weight:normal;
	color:var(--pink);
	font-size:30px;
	margin-bottom:0px;
	padding-bottom:0px;
}


		/********** MIN. 320px - MAX. 480px **********/
        @media screen and (min-width: 320px) and (max-width: 480px) {
			body {
				font-size:12px;
				line-height:20px;
			}
			
			h2 {
				font-size:20px;
			}
		
		}

a {
	
}

a.button {
	
}


/****************************** HEADER ******************************/

header {
	padding-top:22px;
	position:relative;
}

header .header-inner {
	width:100%;
	max-width:480px;
	background:var(--pink);
	border-radius:20px 20px 0 0; 
	height:160px;
	margin:0px auto 50px auto;
	position:relative;
	overflow:hidden;
	contain: layout paint;
} 

body.single-partner header {
	height:160px;
	margin:0px auto 0px auto;
}

header .header-inner::after {
	content:"";
	position:absolute;
	left:50%;
	bottom:-80px;  
	width:140%;
	height:160px;	
	background:var(--blau);     
	border-radius:50%;
	transform:translateX(-50%);
}

header .profil-pic-wrap{
  width:120px;
  height:120px;
  border-radius:50%;
  border:5px solid var(--blau);
  background:var(--weiss);
  position:absolute;
  bottom:0px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  overflow:hidden; /* wichtig, damit Overlay & Bild rund bleiben */
}

header .profil-pic-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.0) 70%);
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}

header img.profil-pic{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  position:relative;
  z-index:1;
  display:block;
} 

body.single-partner header img.profil-pic {
	object-fit: contain; 
	background:var(--weiss);
	width:70px;
	height:70px;
	padding:25px;
}

header nav.icon-nav {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;

  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

header nav.icon-nav a.nav-btn {
  transition: all .25s ease-in;
  background: var(--pink);
  border-radius: 50%;
  padding: 5px;

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

  width: 26px;
  height: 26px;

  text-decoration: none;
  color: var(--weiss);

  border: 4px solid var(--blau);
}

header nav.icon-nav a.nav-btn:hover {
  background: var(--hellpink);
}

header nav.icon-nav a.nav-btn i {
  font-size: 14px;
  line-height: 1;
}

header nav.icon-nav a.nav-btn.active {
  background: var(--hellpink);
}

header nav.icon-nav a.nav-btn.active i {
	transform:scale(1.15);
}

section.bio,
section.partner-intro.wrapper {
	width:100%;
	max-width:480px;
	margin:50px auto 50px auto;	
}

section.bio {
	text-align:center;
}

section.bio .links ul {
  	display: flex;
  	gap: 10px;
 	padding: 0;
  	margin: 16px 0 0;
  	list-style: none;
  	width: 100%;
}

section.bio .links ul li {
  	flex: 1; /* <-- alle gleich breit, volle Breite */
  	background: var(--hellblau);
  	border-radius: 10px;
  	display: flex;
  	align-items: center;
}

section.bio .links ul li a {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width: 100%;
  	height: 48px; /* definierte Klickfläche */
  	text-decoration: none;
}

section.bio .links ul li img {
  	max-width: 30px;
  	max-height: 30px;
}

.brands { 
  width:100%;
  max-width:480px;
  margin:50px auto;
  overflow:hidden; /* verhindert Browser-Scrollbars */
}

.brands h3 {
	text-align:center;
	margin:0px;
	padding:0px;
}

.brands ul { 
  list-style:none;
  padding:0;
  margin:25px 0px 0px 0px;
}

.brands ul .slick-slide {
  aspect-ratio: 1 / 1;      /* <-- entscheidend */
  height: auto;

  background: var(--hellblau);
  border-radius: 10px;

  filter: blur(5px);
  transform: scale(0.75);
	transition: 0.5s;	

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

  padding: 25px;
  margin: 0 5px;
}

.brands ul .slick-slide.slick-current.slick-active {
	filter:blur(0px);
	transform: scale(1);
}

.brands ul li img {
	max-width:100%;
	max-height:100%;
}

/****************************** BREADCRUMB ******************************/
.breadcrumbs ul {
  display:flex;
  gap:6px;
  list-style:none;
  padding:0;
  margin:10px 0;
  font-size:11px;
	color:var(--pink);
}

.breadcrumbs li::after {
  content:"/";
  margin-left:6px;
  opacity:;
}

.breadcrumbs li:last-child::after {
  content:"";
}

.breadcrumbs a {
  text-decoration:none;
  color:var(--pink);
}

.breadcrumbs [aria-current="page"] {
font-weight:bold;

}


/****************************** SLIDER GENERAL ******************************/
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.slickify{ visibility: hidden; }
.slickify.slick-initialized{ visibility: visible; }

.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

.slick-list:focus {
	outline: none;
}

.slick-list.dragging {
	cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
	transform: translate3d(0, 0, 0);
}

.slick-track {
	position: relative;
    top: 0px;
    left: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
	display: table;
    content: '';
}

.slick-track:after {
	clear: both;
}

.slick-loading .slick-track {
	visibility: hidden;
}

.slick-slide {
	display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
	display: none;
}

.slick-slide.dragging img {
	pointer-events: none;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-loading .slick-slide {
	visibility: hidden;
}

.slick-vertical .slick-slide {
	display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
	display: none;
}

.slick-prev,
.slick-next {
	font-size: 0!important;
    line-height: 0!important;
    position: absolute!important;
    top: 50%!important;
    z-index:10!important;
    display: flex!important;
    padding: 0!important;
    transform: translate(0, -50%)!important;
    cursor: pointer!important;
    color: transparent!important;
    outline: none!important;
    background: #efefef!important;
	justify-content:center!important;
	align-items:center!important;
	transition: all .4s ease-in;
	border:none!important;
	border-radius:50%!important;
	width: 35px!important;
    height: 35px!important;
}

.slick-prev {
	left:10px!important;
}

.slick-next {
	right:10px!important;
}

.slick-prev:before,
.slick-next:before {
	opacity:1!important;
	color:#a6a6a6!important;
	font-size:25px!important;
	display: flex!important;
	justify-content:center!important;
	align-items:center!important;
	font-family:"Font Awesome 6 Sharp"!important;	
	transition: all .4s ease-in;
}

.slick-prev:before {
	content:"\f137"!important;
}

.slick-next:before {
	content:"\f138"!important;
}

.slick-prev:hover:before,
.slick-next:hover:before {
	color:#89cbaa!important;
}

ul.slick-dots {
	display:block;
	margin:0px 0px 20px 0px;
	padding:0px;
	list-style:none;
	display:flex;
	align-items:center;
	justify-content:center;
	height:20px;
}

ul.slick-dots li {
	float:left;
	width:10px;
	height:10px;
	border-radius:100%;
	background:#e4e4e4;
	margin:0px 5px 0px 5px;
    transition: all .5s ease-in;
}

ul.slick-dots li.slick-active {
	background:#e97791;
	width:15px;
	height:15px;
}

ul.slick-dots li button {
	display:none;
}

		/********** MIN. 320px - MAX. 480px **********/
        @media screen and (min-width:320px) and (max-width:480px) {
			.slick-prev,
            .slick-prev:hover {
				left: -35px;
             }

			.slick-next,
            .slick-next:hover {
				right: -35px;
             }
         }

/****************************** CARD ******************************/

.card {
	position:relative;
	background:var(--weiss);
	border-radius:20px;
	color:var(--grau);
}

.card .card-inner {
	padding:20px;
	width:calc(100% - 40px);
	max-width:calc(480px - 40px);	
}

.card .card-header {
	position:relative;
	padding:10px 0px 0px 20px;
	margin-bottom:20px;
}

.card .card-header .partner {
	width: 80px;
  	height: 80px;
  	padding: 10px;
  	border-radius: 10px;
  	background: var(--hellgrau);
  	position: absolute;
  	top: -50px;
  	left: 20px;
  	box-shadow: 5px 5px 10px rgba(0,0,0,0.10);
  	display: flex;               
  	align-items: center;        
  	justify-content: center;    
  	overflow: hidden;          
}

.card .card-header .partner:after {
  	border-radius: 8px;
  	content: "";
  	height: calc(100% - 10px);
  	width: calc(100% - 10px);
  	position: absolute;
  	top: 3px;
  	left: 3px;
  	border: 2px solid var(--weiss);
  	pointer-events: none;  
}

.card .card-header .partner a.partner-logo-link {
  	display: flex;
  	width: 100%;
  	height: 100%;
  	align-items: center;
  	justify-content: center;
  	position: relative;
  	z-index: 2;                
}

.card .card-header .partner img {
  	max-width: 100%;
  	max-height: 100%;
  	width: 100%;
  	height: 100%;
  	object-fit: contain;        
}

.card .card-header > img,
.card .card-header > .title-image {
  	max-width: 150px;
  	max-height: 30px;
}

.card .card-header .badge {
	position:absolute;
	top:0px;
	right:0px;
	background:var(--pink);
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-left:5px solid var(--blau);
	border-bottom:5px solid var(--blau);
	color:var(--weiss);
	font-size:12px;
	padding:10px 20px;
}

.card .card-header .badge i {
	margin-right:10px;
}

.card .card-inner .media {
	position:relative;
	margin-bottom:20px;
}

.card .card-inner .media img.title-image {
	border-radius:10px;
	max-width:100%;
}

.card ul.benefits {
	padding:0px;
	margin:0px;
	list-style:none;
}

.card ul.benefits li {
  position: relative;
}

.card ul.benefits li i {
	margin-right:10px;
	color:var(--gruen);
}

.card .accordion {
	border-top:1px solid var(--hellgrau);
	border-bottom:1px solid var(--hellgrau);
	margin:20px 0px;
	padding:10px 0px;
	position:relative;
}

.card .accordion:before {
	content:"";
	position:absolute;
	bottom:-15px;
	left:-35px;
	width:30px;
	height:30px;
	border-radius:50%;
	background:var(--blau);
	z-index:99;
}

.card .accordion:after {
	content:"";
	position:absolute;
	bottom:-15px;
	right:-35px;
	width:30px;
	height:30px;
	border-radius:50%;
	background:var(--blau);
	z-index:99;
}

.card .accordion span.acc-partner {
	padding:0px;
	margin:0px;
	position:relative;
	width:100%;
	display:block;
	font-weight:bold;
	font-size:12px;
}

.card .accordion span.acc-partner:hover {
	cursor:pointer;
}

.card .accordion span.acc-partner i {
	position:absolute;
	right:0px;
	top:5px;
}

.card .accordion .acc-content {
  	display:none;
	padding:20px 0px 0px 0px;
}

.card .accordion.ui-accordion .acc-content {
  	display:block;
}

.card a.button {
	background:var(--gruen);
	text-align:center;
	padding:15px 0px;
	border-radius:10px;
	display:block;
	color:var(--weiss);
	text-decoration:none;
	transition: all .25s ease-in;	
}

.card a.button span {
	margin:0px 10px;
}

.card a.button i {
	margin-left:0px;
}

.card a.button:hover {
	background:var(--dunkelgruen);
}

.card .share {
  	border-top: 1px solid var(--hellgrau);
}

.card .share ul {
  	display: flex;
  	width: 100%;
  	padding: 0;
  	margin: 0;
  	list-style: none;
}

.card .share ul li {
  	flex: 1;
	min-height:60px;
  	padding:0px 0px;            
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.card .share ul li + li {
  	border-left: 1px solid var(--hellgrau);
}

.card .share ul li a {
  	width: 100%;
  	height: 100%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: .4rem;
  	text-decoration: none;
  	font-weight: 600;
  	color: inherit;
}

.card .share ul li a:active {
  	background-color: rgba(0, 0, 0, 0.05);
}

/****************************** PARTNER ******************************/
.partner-grid ul {
margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* ersetzt column + row gap */
}

.partner-grid ul li {
	display: flex;
  flex-direction: column;
	width:100%;
	height:100%;
}

.partner-grid ul li a {
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
	display:flex;
	aspect-ratio:1;
	background:var(--hellblau);
	border-radius:10px;
}

.partner-grid ul li a img {
	max-width:100px;	
	object-fit: contain;
}
/****************************** UNTERNEHMENSPROFIL ******************************/

.partner-content {
	margin-bottom:50px;
}

.partner-head .partner-socials a.partner-website {
	display:block;
	border-radius:10px;
	background:var(--pink);
	text-align:center;
	color:var(--weiss);
	text-decoration:none;
	padding:10px 0px 5px 0px;
	transition: background .2s ease;
}

.partner-head .partner-socials a.partner-website:hover {
	background:var(--hellpink);
}

.partner-head .partner-socials a.partner-website img {
	max-height:25px;
	max-width:25px;
}

.partner-socials .social-list {
  	display: flex;
  	gap: 10px;
 	padding: 0;
  	margin: 16px 0 0;
  	list-style: none;
  	width: 100%;
}

.partner-socials .social-list li {
  	flex: 1; /* <-- alle gleich breit, volle Breite */
  	background: var(--hellblau);
  	border-radius: 10px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.partner-socials .social-list li a {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width: 100%;
  	height: 48px; /* definierte Klickfläche */
  	text-decoration: none;
}

.partner-socials .social-list li img {
  	width: 22px;
  	height: 22px;
}

.partner-faq .faq-list {
	margin-top:20px;
}

.partner-faq .faq-list .accordion {
	padding:20px 20px;
	background:var(--hellblau);
	border-bottom:1px solid var(--blau);
}

.partner-faq .faq-list .accordion:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.partner-faq .faq-list .accordion:last-child {
	border-bottom:none;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.partner-faq .faq-list .accordion span.faq-nr {
	font-weight:bold;
	width: 28px;
  	height: 28px;
  	border-radius: 50%;
  	background: var(--pink);
  	color: var(--weiss);
	margin-right:10px;

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

  	transition: background .2s ease;
}

.partner-faq .faq-list .accordion span.acc-partner {
	display:block;
	width:100%;
	cursor:pointer;
}

.partner-faq .faq-list .accordion span.acc-partner.active {
	font-weight:bold;
}

.partner-faq .faq-list .accordion div.acc-content {
	padding-left:43px;
}
/****************************** REVIEW CARD ******************************/
.partner-review-row{
  display:grid;
  grid-template-columns: 90px 1fr 24px;
  gap:14px;

  align-items:center;

  padding:10px;
  border-radius:10px;
  background:var(--hellblau);
  text-decoration:none;
  color:inherit;
	margin-bottom:50px;
}

.review-thumb{
  width:90px;
  height:90px;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.review-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.review-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.review-date{
  font-size:11px;
	opacity:0.25;
}

.review-title{
  margin:0;
  font-size:20px;
	margin:0px;
	padding:0px;
	line-height:10px;
}

.review-teaser{
  margin:0;
  font-size:12px;
	line-height:20px;
}

.review-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:var(--weiss);
	background:var(--gruen);
	border-radius:50%;
	width:30px;
	height:30px;
}

.partner-review-row:hover{
  background:var(--hellblau);
}

.partner-review-row:hover .review-arrow{
  transform:scale(1.25);
  transition:transform .75s ease;
}

/****************************** PAGINATION ******************************/
nav.pagination {
  	display: flex;
  	justify-content: center;
  	margin: 20px 0;
}

nav.pagination ul {
  	display: flex;
  	gap: 8px;
  	list-style: none;
  	padding: 0;
  	margin: 0;
}

nav.pagination ul li {
  	width: 28px;
  	height: 28px;
  	border-radius: 50%;
  	background: var(--pink);
  	color: var(--weiss);

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

  	transition: background .2s ease;
}

nav.pagination ul li:hover {
  	background: var(--hellpink);
}

nav.pagination ul li a {
  	color: inherit;
  	text-decoration: none;
  	width: 100%;
  	height: 100%;

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

/****************************** NEWSLETTER ******************************/
section.newsletter {
	background:var(--hellblau);
	border-radius:20px;
	padding:20px;
	width:calc(100% - 40px);
	max-width:calc(480px - 40px);	
	margin:0px auto;
}

section.newsletter input {
	border-radius:10px;
	padding:10px 20px!important;
	font-family:"Montserrat";
	color:#888;
}

section.newsletter .tnp-field-email {
	margin-top:20px;
}

section.newsletter input.tnp-submit {
	background:#ccc;
	width:100%;
}

/****************************** FOOTER ******************************/

footer {
	width:100%;
	max-width:480px;
	margin:50px auto 50px auto;
}

footer ul {
	padding:0px;
	margin:0px;
	list-style:none;
	display:flex;
	gap:20px;
	justify-content:center;
	align-items:center;
}

footer ul li {
	
}

footer ul li a {
	text-decoration:none;
	color:var(--dunkelgrau);
	font-size:12px;
}