/*
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: 2.0
License: GNU General Public License v2 or later
Text Domain: bo5fo7v2
*/

/* lora-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/lora/lora-v37-latin-600.woff2') format('woff2');
}

/* dm-sans-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/dm-sans/dm-sans-v17-latin-300.woff2') format('woff2');
}
/* dm-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/dm-sans/dm-sans-v17-latin-regular.woff2') format('woff2');
}
/* dm-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/dm-sans/dm-sans-v17-latin-500.woff2') format('woff2');
}

:root {
  /* Fonts */
  --font-sans: 'DM Sans', 'Assistant', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
    sans-serif;

  /* neu */
  --dark: #3a4232;
  --darker: #2a2f24;
  --mid: #5e6b50;
  --accent: #839470;
  --accent-light: #f4f6f1;
  --light: #e8ede4;
  --lighter: #f4f6f1;
  --white: #fff;
  --text: #2a2f24;
  --muted: #6b7560;
  --border: #d4dac8;
  --gold: #c5a94b;

  --global-border-radius: 12px;
  --global-border-radius-sm: 6px;
  --sidebar-box-pa: 1.25rem 1.5rem;

  /* neu ende */

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

  --color-white: #fff;
  --color-gray: #ddd;
  --color-gray-light: #fafafa;
  --color-gray-dark: #c9c9c9;
  --color-gray-darker: #c0c0c0;

  --color-green: #5c946e;
  --color-green-light: #778965;
  --color-green-lighter: #8b997d;
  --color-green-dark: #3d502b;

  --color-petrol: #216e77;

  --color-orange: #e87722;

  --color-red: #b23a48; */

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

  /* --gradient-btn-primary: linear-gradient(
    180deg,
    rgba(235, 135, 59, 1) 0%,
    rgba(232, 119, 34, 1) 50%,
    rgba(217, 110, 28, 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(215, 230, 203, 1) 0%, rgba(186, 204, 170, 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: 16px;
}

body {
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--dark);
  /* margin-top: 2rem;
  margin-bottom: 1.5rem; */
  line-height: 1.25;
}

/* Mobile-first: feste rem-Größen statt vw-Clamp - bei den alten Clamp-Werten
   erreichte h2 (min 16px) auf so gut wie jedem Handy-Viewport ihre Untergrenze
   und war dadurch genauso groß wie der Fließtext. */
h1 {
  font-size: 1.6rem; /* 28px */
  letter-spacing: -.5px;
}

h2 {
  font-size: 1.4rem; /* 24px */
  letter-spacing: -.3px;
  margin-top: 2rem !important;
  margin-bottom: 1.5rem;
  display: inline-block;
}

h2:first-of-type {
  margin-top: 0 !important;
}

h3 {
  font-size: 1.2rem; /* 20px */
  color: var(--mid);
  margin-bottom: 1rem;
}

h4 {
  font-size: 1.125rem; /* 18px */
}

h5 {
  font-size: 1rem; /* 16px */
}

h6 {
  font-size: 0.875rem; /* 14px */
}

/* Ab Desktop (lg) einen Tick größer */
@media (min-width: 992px) {
  h1 {
    font-size: 2.2rem; /* 40px */
  }

  h2 {
    font-size: 1.8rem; /* 32px */
  }

  h3 {
    font-size: 1.4rem; /* 24px */
  }

  h4 {
    font-size: 1.25rem; /* 20px */
  }

  h5 {
    font-size: 1.125rem; /* 18px */
  }

  h6 {
    font-size: 1rem; /* 16px */
  }
}

b, strong {
    font-weight: 600;
}

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

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

/* Bootstrap Rounded, Fokus-Ring (box-shadow, per CSS-Variable gesetzt) global deaktivieren */
.rounded-1 {
  border-radius: 1rem;
}
.btn {
  --bs-btn-focus-box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  box-shadow: none;
}

/* Accordion nutzt eigene Variablen, nicht --bs-btn-* */
.accordion-button:focus {
  --bs-accordion-btn-focus-box-shadow: none;
}
.accordion-button:not(.collapsed) {
  box-shadow: none;
}

a.btn {
  color: var(--white);
  display: inline-block;
  font-size: 13px;
  width: auto;
  border: 1px solid var(--dark);
  background-color: var(--dark);
}

a.btn.highlight {
  color: var(--white);
  border: 1px solid var(--mid);
  background: var(--mid);
}

a.btn.invert {
  color: var(--dark);
  display: inline-block;
  width: auto;
  border: 1px solid var(--dark);
  background: var(--light);
}

a.btn:hover,
a.btn:focus,
/* a.btn:visited, */
a.btn:focus {
  color: var(--white);
  border: 1px solid var(--muted);
  background-color: var(--muted);
}

/* Kompakter Text-Button im Header ("Jetzt vergleichen" auf Mobile, siehe
   header.php) - platzsparend neben dem Mega-Menü-Toggle statt der
   ausgeschriebenen .header-cta-Variante, die erst ab md erscheint. */
a.btn.header-cta-mobile {
  padding: 0.35rem 0.75rem;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Header-Layout (header.php). Logo immer links, Menü-Toggle immer rechts
   (mobil: .mega-nav-toggle/.nav-toggle, ab md per CSS ausgeblendet - dort
   steht die Nav stattdessen inline, siehe unten). Der CTA-Button (falls
   Formular vorhanden) sitzt mobil direkt links neben dem Toggle. Gesteuert
   über flex "order" plus margin-right:auto auf dem Logo, das den gesamten
   freien Platz zwischen Logo und CTA/Toggle aufsaugt - .mega-nav-wrapper/
   .simple-nav sind beim Zuklappen position:fixed und nehmen dadurch
   ohnehin keinen Platz in der Flex-Reihe ein.
   Breakpoint bewusst md (768px), nicht lg: das Mega-Menü selbst schaltet
   schon dort von Off-Canvas auf Inline um (siehe .mega-nav-toggle/
   .mega-nav-wrapper in evc-mega-menu.css) - ein abweichender Breakpoint
   hätte zwischen 768-991px eine kaputte Zwischenzone erzeugt (Nav schon
   inline sichtbar, Header-Anordnung aber noch auf "mobil"). */
.header-row {
  display: flex;
  align-items: center;
}

.header-logo a {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}
.header-logo a span {
  color: var(--accent);
}

@media (max-width: 767.98px) {
  .header-logo {
    order: 1;
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-cta-mobile {
    order: 2;
  }

  .mega-nav-toggle,
  .nav-toggle {
    order: 3;
    margin-left: 0.75rem;
  }
}

@media (min-width: 768px) {
  .header-logo {
    order: -1;
  }

  .mega-nav,
  .header-simple-nav {
    margin-left: auto;
  }
}

/* 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(--border);
}
body {
  padding-top: 51px !important; /* Nav LI A - line-height */
}
header {
  /* height: 50px; */
}

@media (min-width: 768px) {
  body {
    /* padding-top: 65px !important; */
  }
  header {
    /* height: 65px; */
  }
}
@media (min-width: 1200px) {

}

/* Sidebar (Inhaltsverzeichnis + weitere Boxen wie .evc-cta, siehe page.php)
   bleibt beim Scrollen im Viewport sichtbar, statt mit dem Content mit nach
   oben rauszuscrollen. align-self:flex-start ist nötig, weil Bootstraps
   .row per Flexbox align-items:stretch die Spalte sonst auf die volle Höhe
   der (viel längeren) Content-Spalte streckt - dann hätte sticky keinen
   Spielraum zum "Kleben". top = Höhe des fixed Headers (51px) + Abstand. */
.evc-sidebar-sticky {
  position: sticky;
  /* 85px - gleicher top-Wert, den vorher schon .evc-tovs allein im Plugin
     (evc-topic-overview-sidebar/evc-tov-sidebar.css) genutzt hat. */
  top: 85px;
  align-self: flex-start;
}

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

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

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

section {
  padding: 2rem 0;
}

@media (max-width: 767.98px) {
  section {
    padding: 1rem 0 2rem;
  }
}

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

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

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

img.alignright,
img.alignleft,
img.aligncenter,
img.alignnone {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Basis: Tabelle immer volle Breite */
.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

/* Kopfzeile */
.table thead th {
  color: var(--white);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  background-color: var(--dark);
}

/* Tabellenzellen */
.table th,
.table td {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  word-wrap: normal;
  overflow-wrap: normal;
  white-space: normal;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  font-size: 14px;
}

/* Zebra-Streifen */
.table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) th {
  background-color: var(--lighter);
}

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

/* main */

/* footer */
footer .evc-footer {
  font-size: 1rem;
  color: var(--muted);
  padding: 1rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}
footer a:hover {
  text-decoration: underline;
}
footer,
footer a {
  color: var(--muted);
  text-decoration: none;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--white) !important;
}
#breadcrumbs {
  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(--muted);
}

/* bootstrap accordion */
.accordion-header {
  margin-top: 0;
  margin-bottom: 0;
}
.accordion-item:first-of-type,
.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-radius: 0;
}
.accordion-button {
  font-size: 15px;

}
.accordion-button::after {
  content: '\2b';
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  color: var(--accent);
  width: auto;
  margin-left: auto;
  transition: transform 0.3s;
  background-image: none !important;
}
.accordion-button:is(.collapsed),
.accordion-button:not(.collapsed) {
  color: var(--dark);
  background-color: var(--white);
}
.accordion-button:not(.collapsed) {
  background-color: var(--light);
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(135deg);
}
.accordion-item {
  font-size: 14px;
  /*margin-bottom: 0.5rem;*/
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background-color: var(--white);
}
.accordion-body {
  padding: 1rem 1rem .5rem 1.2rem;
  background-color: var(--white);
}
.accordion-body p {
  margin-bottom: .5rem;
}

#kundenstimmen-section .container {
  border-top: 1px solid var(--border);
  padding-top: 3rem;
}

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

/* evc-specific */
.fa-stack .fa-circle {
  color: var(--light);
}

.fa-stack .fa-inverse {
  color: var(--muted);
}

.evc-featured-image img {
  width: 100%;
  border-radius: var(--global-border-radius);
}

.evc-meta-bar {
  font-size: 0.8125rem;
  color: var(--muted);
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 992px) {
  .evc-meta-bar {
    margin: 1rem 0 3rem;
  }
}

.evc-broker-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--lighter);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  white-space: nowrap;
}

.evc-eyebrow {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.evc-eyebrow-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.evc-author-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.evc-author-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mid);
}

.evc-author-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark);
}

.evc-author-role {
  font-size: 0.75rem;
  color: var(--muted);
}

.evc-children-box {
  background-color: var(--lighter);
  border-radius: var(--global-border-radius);
  padding: 2.5rem;
}
.evc-children-box h2 {
  color: var(--dark);
}
.evc-children-box p {
  color: var(--text);
}
.evc-children-box .card {
  background-color: var(--light);
  border: 1px solid var(--border);
}

@media (max-width: 767.98px) {
  .evc-children-box {
    padding: 1.5rem;
  }
}

.card {
  border-radius: var(--global-border-radius);
  border: 1px solid var(--border);
}
.card-img-top {
  overflow: hidden;
  border-top-left-radius: var(--global-border-radius);
  border-top-right-radius: var(--global-border-radius);
}
.card-body {
  padding: 1.5rem;
}

/* Horizontale Card-Variante (Bild links, Inhalt rechts, siehe page.php
   "Weiterführende Ratgeber"): Bild füllt seine Spalte per object-fit und
   rundet oben (mobil gestackt) bzw. links (ab sm nebeneinander) ab. */
.evc-child-card-img {
  overflow: hidden;
}
.evc-child-card-img img {
  width: 100%;
  border-radius: var(--global-border-radius) var(--global-border-radius) 0 0;
}
@media (min-width: 576px) {
  /* Ab hier stehen Bild- und Inhaltsspalte nebeneinander in der Row (g-0) -
     dank align-items:stretch (Flexbox-Default) hat die Bildspalte dann eine
     definite Höhe (die der Inhaltsspalte), gegen die height:100% auflösen
     kann - erst dadurch funktioniert object-fit:cover sauber. */
  .evc-child-card-img img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--global-border-radius) 0 0 var(--global-border-radius);
  }
}
.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
}
.card-text {
  font-size: 0.9rem;
  line-height: 1.5;
}
.card:hover {
}

/* sidebar */
.evc-sidebar-box {
  font-size: 13px;
  background: var(--lighter);
  border: 1px solid var(--border);
  border-radius: var(--global-border-radius);
  padding: var(--sidebar-box-pa);
  margin-bottom: 2rem;
}

.evc-sidebar-box.dark {
  border-color: var(--dark);
  background: var(--dark);
  color: var(--white);
}

.evc-sidebar-box .title {
  font-size: 16px;
  font-weight: 500;
}
.evc-sidebar-box.dark .title {
  font-family: var(--font-serif);
}

.evc-sidebar-box ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  position: relative;
}

.evc-sidebar-box ul li {
  color: var(--muted);
  line-height: 1.3;
  margin-left: 1.5rem;
}
.evc-sidebar-box.dark ul li {
  color: var(--lighter);
}

.evc-sidebar-box ul li i {
  color: var(--muted);
  margin-top: 0.6rem;
  position: absolute;
  left: 0;
}
.evc-sidebar-box.dark ul li i {
  color: var(--accent);
}

.evc-sidebar-box li + li {
  margin-top: 0.5rem;
}

.evc-sidebar-box ul li a {
  color: var(--muted);
  text-decoration: none;
}


.evc-sidebar-box ul li a.is-active {
  font-weight: 700;
}

/* modal */
.modal-backdrop.show {
  opacity: 0.75;
}
.modal-header {
  font-size: 0.75rem;
  color: var(--muted);
  border-bottom: none;
}
.modal-body {
  padding-top: 0;
}
.modal-footer {
  font-size: 0.75rem;
  color: var(--muted);
  padding-top: .25rem;
  padding-bottom: 0.25rem;
}