/*
Theme Name: EXKLUSIV VC
Theme URI: https://www.exklusiv-vc.de
Author: EXKLUSIV VC Developer
Author URI: https://www.exklusiv-vc.de
Description: WordPress-Theme mit Bootstrap 5, Font Awesome 7 und JS
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: bo5fo7
*/

/* assistant-200 - latin */
/* @font-face {
  font-display: swap;
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200;
  src: url('assets/fonts/assistant/assistant-v23-latin-200.woff2') format('woff2');
} */
/* assistant-regular - latin */
/* @font-face {
  font-display: swap;
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/assistant/assistant-v23-latin-regular.woff2') format('woff2');
} */
/* assistant-700 - latin */
/* @font-face {
  font-display: swap;
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/assistant/assistant-v23-latin-700.woff2') format('woff2');
} */

@font-face {
    font-family: 'Belgiano';
    src: url('assets/fonts/belgiano/belgiano.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-display: swap;
	font-family: 'Petrona';
	font-style: normal;
	font-weight: 300;
	src: url('assets/fonts/petrona/petrona-v32-latin-300.woff2') format('woff2');
  }
  @font-face {
	font-display: swap;
	font-family: 'Petrona';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/petrona/petrona-v32-latin-regular.woff2') format('woff2'); 
  }
  @font-face {
	font-display: swap;
	font-family: 'Petrona';
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/petrona/petrona-v32-latin-700.woff2') format('woff2');
  }

:root {
  /* Fonts */
  --font-headings: 'Belgiano', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', 'Liberation Sans', sans-serif;
  --font-sans: 'Petrona', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', 'Liberation Sans', sans-serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
    sans-serif;

  /* colors */
  --color-text: #333;
  --color-text-light: #666;

  --color-black: #000;
  --color-white: #fff;
  --color-gray: #ddd;
  --color-gray-light: #fafafa;
  --color-gray-dark: #f0f0f0;
  --color-gray-darker: #c0c0c0;

  --color-green: #35d98a; /* success */
  --color-green-light: #42eb99;
  --color-green-dark: #2ebc77;

  --color-petrol: #216e77; /* info */

  --color-orange: #e87722; /* CTA-Buttons, Akzent */

  --color-purple: #b442eb; /* Akzent */

  --color-red: #b23a48; /* Warnung, Akzent */

  /* Bootstrap-Variable-Mapping */
  --bs-primary: var(--color-green-light);
  --bs-secondary: var(--color-green-dark);
  --bs-success: var(--color-green);
  --bs-warning: var(--color-purple);
  --bs-danger: var(--color-red);
  --bs-info: var(--color-petrol);

  --gradient-btn-primary: linear-gradient(
    180deg,
    rgba(180, 66, 235, 1) 0%,
    rgba(160, 56, 212, 1) 100%
  );

  /* --gradient-btn-secondary: linear-gradient(
    180deg,
    rgba(142, 158, 128, 1) 0%,
    rgba(119, 137, 101, 1) 50%,
    rgba(61, 80, 43, 1) 100%
  ); */
  --gradient-btn-secondary: linear-gradient(180deg,rgba(66, 235, 153, 1) 0%, rgba(53, 217, 138, 1) 100%);

  --box-shadow: rgba(125, 125, 125, 0.2) 0px 4px 6px;
  --box-shadow-hover: rgba(125, 125, 125, 0.4) 0px 6px 8px;
}

html {
  font-size: 18px;
} /* ~16px */
@media (min-width: 768px) {
  html {
    font-size: 106.25%;
  }
} /* ~17px */
@media (min-width: 1400px) {
  html {
    font-size: 112.5%;
  }
  .container {
    max-width: 1200px;
  }
} /* 18px */

/* @media (min-width: 1600px) {
  .container {
    max-width: 1200px;
  }
} */

.rounded-1 {
  border-radius: 1rem;
}

body {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-headings);
  font-weight: normal;
  line-height: 1.2;
}

.h5, h5 {
    font-size: 1.1rem;
}

a {
  color: var(--color-text);
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-weight: 400;
}

a.btn {
  color: var(--color-black);
  font-size: 0.9rem;
  display: inline-block;
  width: auto;
  border: 1px solid var(--color-green-light);
  background: var(--color-green-light);
}
a.btn:hover,
a.btn:focus,
/* a.btn:visited, */
a.btn:focus {
  color: var(--color-green-dark);
  border: 1px solid var(--color-green-light);
  background:  none;
}

a.btn.invert {
  color: var(--color-white);
  display: inline-block;
  width: auto;
  border: 1px solid var(--color-green-light);
  background: var(--color-green-light);
}
a.btn.invert:hover,
a.btn.invert:active,
a.btn.invert:focus {
  border: 1px solid var(--color-white);
  background: none;
}

header {
  position: fixed;
  display: block;
  width: 100%;
  top: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--color-gray);
}
body {
  padding-top: 60px !important;
}
header {
  height: 60px;
}
header img {
  height: 40px;
  width: auto;
}

@media (min-width: 768px) {
  body {
    padding-top: 80px !important;
  }
  header {
    height: 80px;
  }
  header img {
    height: 60px;
  }
}
@media (min-width: 1200px) {

}

main {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-wrap: break-word; /* Fallback */
}

main ul,
main ol,
main p {
  margin-bottom: 1.5rem;
}

main ul li,
main ol li {
  margin-bottom: 0.75rem;
}

section {
  padding: 2rem 0;
}

section.bg-color-primary {
  background-color: var(--bs-primary);
}
section.bg-color-light {
  background-color: #f9f9f9;
}

/* bootstrap */
@media (max-width: 991px) {
  .container {
    max-width: inherit;
  }
}

.card {
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
}
.card-img-top {
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.card:hover {
    box-shadow: var(--box-shadow-hover);
}

/* fontawesome */
/* .fa-stack {
  font-size: 1.4rem;
} */
.icon-green-light,
.fa-stack .fa-circle {
  color: var(--color-green-light);
}

/* aside hero */
.hero {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hero-picture {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

.hero-picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(25, 25, 25, 0.1);
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: clamp(1rem, 1.5vw, 2rem);
  color: var(--color-black);
  gap: 1rem;
}

.hero-panel {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.75rem;
  padding: 1rem;
  max-height: 80vh;
  overflow: auto;
}

.hero.no-form {
  min-height: 150px;
}
.hero.no-form .hero-picture > img {
  object-position: center center;
}
@media (min-width: 768px) {
  .hero.no-form {
    min-height: 250px;
  }
}
@media (min-width: 992px) {
  .hero.no-form {
    min-height: 350px;
  }
}

/* images */
img.alignright {
  float: right;
  margin-top: 2rem;
  margin-left: 3rem;
}
img.alignleft {
  float: left;
  margin-top: 2rem;
  margin-right: 3rem;
}
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (min-width: 576px) {
  img.alignright,
  img.alignleft {
    max-width: 50%;
  }
}

@media (max-width: 576px) {
  img.alignright,
  img.alignleft {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}

img.alignright,
img.alignleft,
img.aligncenter,
img.alignnone {
  margin-bottom: .5rem;
}

/* @media (max-width: 767px) {
  .hero {
    min-height: 420px;
  }
}
@media (min-width: 1400px) {
  .hero {
    min-height: 700px;
  }
} */

/* Basis: Tabelle immer volle Breite */
.table {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--bs-secondary);
  border-collapse: collapse;
}

/* Kopfzeile */
.table thead th {
  background-color: var(--bs-primary);
  color: var(--color-white);
  border: 1px solid var(--bs-secondary);
}

/* Tabellenzellen */
.table th,
.table td {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  word-wrap: normal;
  overflow-wrap: normal;
  white-space: normal;
  padding: 0.5rem;
  border: 1px solid var(--bs-secondary);
  vertical-align: middle;
}

/* Zebra-Streifen */
.table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) th {
  --bs-table-bg: var(--color-gray-light);
}

/* Responsive Verhalten */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
  }
  .table-responsive > .table {
    min-width: 700px; /* ggf. anpassen nach Spaltenanzahl */
  }
}

/* main */

/* footer */
footer .container-fluid:first-child {
  background-color: var(--color-gray-darker);
}
footer .container-fluid:last-child {
  background-color: var(--color-green-light);
}
footer a {
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer,
footer a {
  color: var(--color-black);
}
footer .container-fluid:last-child {
  /* border-top: 1px solid var(--color-black); */
}
/* footer .container-fluid:first-child {
  background-color: var(--color-green-light);
}
footer .container-fluid:last-child {
  background-color: var(--color-green-dark);
} */

/*
lila background-image: linear-gradient(to top, #a7a6cb 0%, #8989ba 52%, #8989ba 100%);
lila
background: #d3cce3;
background: -webkit-linear-gradient(to right, #e9e4f0, #d3cce3);
background: linear-gradient(to right, #e9e4f0, #d3cce3);

blue
background: #C9D6FF;
background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF);
background: linear-gradient(to right, #E2E2E2, #C9D6FF);

*/
/* .breadcrumb {
  background-color: var(--color-gray-light) !important;
} */
#breadcrumbs {
  color: var(--color-text-light);
  white-space: nowrap; /* kein Umbruch */
  overflow-x: auto; /* horizontal scrollen */
  -webkit-overflow-scrolling: touch; /* smooth scroll auf iOS */
  display: block;
  max-width: 100%;
  padding: 0.5rem 0;
}

#breadcrumbs a {
  text-decoration: none;
  color: var(--bs-secondary);
}

/* bootstrap accordion */
.accordion-item:first-of-type,
.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-radius: 0;
}
.accordion-button::after {
  content: '\f078';
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  color: var(--color-black);
  width: auto;
  margin-left: auto;
  transition: transform 0.3s;
  background-image: none !important; /* Bootstrap-Icon entfernen */
}
.accordion-button:not(.collapsed) {
  color: var(--color-black);
  box-shadow: none;
  background-color: var(--bs-primary);
}
.accordion-button:is(.collapsed) {
  background-color: var(--color-gray-light);
}
.accordion-button:is(.collapsed)::after {
  color: var(--bs-primary);
}
.accordion-button:not(.collapsed)::after {
  color: var(--color-black);
  transform: rotate(180deg);
}
.accordion-button[aria-expanded='true'] .fa-chevron-down {
  transform: rotate(180deg);
  transition: transform 0.3s;
}
.accordion-item {
  margin-bottom: 0.5rem;
  border-radius: 0;
  border: none;
}
.accordion-body {
  background-color: var(--color-gray-light);
}

.btnScrollToOffer {
  font-size: 0.9rem;
  left: auto;
  right: 1rem;
  bottom: 4rem;
  width: auto;
  background: var(--gradient-btn-primary);
}

.btnScrollToPage {
  top: 50%;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--color-green) !important;
  background: var(--color-green);
}

.btnScrollToOffer,
.btnScrollToPage {
  position: fixed;
  border: none;
  border-radius: 0.5rem;
  text-transform: uppercase;
  z-index: 2;
}

.btnScrollToOffer {
    color: var(--color-white);
}
.btnScrollToPage {
  color: var(--color-black);
}
.btnScrollToPage i {
  padding-top: 1rem;
}

.btnScrollToOfferBlock i,
.btnScrollToOfferBlock {
  color: var(--color-white);
}
.btnScrollToOfferBlock {
  border-radius: 0.5rem;
  box-shadow: var(--box-shadow-hover);
  background: var(--gradient-btn-primary);
  text-transform: uppercase;
  width: auto;
}

.btnScrollToOfferBlock:hover,
.btnScrollToOfferBlock:focus,
.btnScrollToOffer:hover,
.btnScrollToOffer:focus{
  color: var(--color-white);
  box-shadow: var(--box-shadow);
}

.btnScrollToPage:hover,
.btnScrollToPage:focus {
  color: var(--color-green);
  background: none;
}

#CookiebotWidget {
  min-width: 25px !important;
  min-height: 25px !important;
}
#CookiebotWidget:not(.CookiebotWidget-open) button.CookiebotWidget-logo svg {
  width: 25px !important;
  height: 25px !important;
}

/* .evc-content-article {
  background-color: rgb(215, 229, 202, 0.3 );
} */