/* ==========================================================================
   VC Migrated Styles (from VC shortcode parser)
   - Scope: .vc-row, .vc-column, .vc-single-image, .vc-message, etc.
   - Assumes your global CSS already sets font-family, base colors, etc.
   ========================================================================== */

/* --- Row / Container ----------------------------------------------------- */

.vc-row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.vc-row--grid .vc-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.vc-row--full .vc-row__inner {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Inner row layout: columns are flex items */
.vc-row__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;

  /* Gutter-System (statt gap) */
  margin-left: -12px;
  margin-right: -12px;
}

/* On very small screens, keep gaps but stack columns naturally */
@media (max-width: 640px){
  .vc-row__inner{
    margin-left: -8px;
    margin-right: -8px;
  }
  .vc-column{
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* --- Column -------------------------------------------------------------- */

.vc-column{
  box-sizing: border-box;
  min-width: 0;
  flex: 1 1 0%;
  padding-left: 12px;
  padding-right: 12px;
}

/* If width styles are applied inline (flex-basis/max-width), they will win.
   But ensure columns can still shrink properly. */
.vc-column[style*="flex: 0 0"] {
  flex-grow: 0;
}

/* Optional: support VC bootstrap-ish classes in case you keep them around */
.vc-col {
  box-sizing: border-box;
  min-width: 0;
}

/* --- Column Text --------------------------------------------------------- */

.vc-column-text {
  width: 100%;
  box-sizing: border-box;
}

/* Basic typography normalization inside migrated content */
.vc-column-text p {
  margin: 0 0 1em 0;
}

.vc-column-text p:last-child {
  margin-bottom: 0;
}

.vc-column-text ul,
.vc-column-text ol {
  margin: 0 0 1em 1.25em;
  padding: 0;
}

.vc-column-text li {
  margin: 0.25em 0;
}

/* Images inside column text */
.vc-column-text img {
  max-width: 100%;
  height: auto;
}

/* --- Single Image -------------------------------------------------------- */
.vc-single-image{
  margin-bottom: 18px;
}

.vc-single-image.align-left {
  text-align: left;
}

.vc-single-image.align-center {
  text-align: center;
}

.vc-single-image.align-right {
  text-align: right;
}

.vc-column-text img{
  margin-bottom: 16px;
}

.vc-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Optional: rough approximations of VC image styles (class hooks from parser) */
.vc-single-image.style-vc_box_shadow_3d .vc-img {
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

/* --- Empty Space --------------------------------------------------------- */

.vc-empty-space {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/* --- Message Box (vc_message) ------------------------------------------- */

.vc-message {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-sizing: border-box;

  padding: 18px 20px;
  border-radius: 10px;

  /* 3D-ish shadow */
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.10);

  border: 1px solid rgba(0, 0, 0, 0.06);

  /* default "info" look */
  background: #f3f8ff;
  margin-top:16px;
}

.vc-message__icon {
  flex: 0 0 auto;
  font-size: 34px; /* large icon as requested */
  line-height: 1;
  padding-top: 2px;
  opacity: 0.95;
}

.vc-message__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Make sure content inside message looks consistent */
.vc-message__body p {
  margin: 0 0 0.9em 0;
}
.vc-message__body p:last-child {
  margin-bottom: 0;
}

/* Variants (if you later map message types) */
.vc-message--info { background: #f3f8ff; }
.vc-message--danger { background: #eabcb3; }
.vc-message--success { background: #f2fbf5; }
.vc-message--warning { background: #fff8e8; }

/* If Font Awesome is not loaded, the <i> will render nothing; this is fine.
   You can alternatively replace it with an SVG or a pseudo-element. */

/* --- Practical defaults for layout fidelity ------------------------------ */

/* Avoid rows collapsing into each other; old VC often had vertical rhythm. */
.vc-row + .vc-row {
  margin-top: 18px;
}

/* If you want grid rows to have more breathing room */
.vc-row--grid {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Inner rows: usually tighter vertical rhythm */
.vc-row--inner{
  margin-top: 0;
  margin-bottom: 0;
}

/* Gallery: image grid */
.vc-gallery--grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.vc-gallery__item{
  display: block;
  text-decoration: none;
}

.vc-gallery__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow:
    0 14px 24px rgba(0,0,0,.14),
    0 2px 6px rgba(0,0,0,.10);
}

/* eltdf_section_title approximation */
.eltdf-section-title{
  margin: 0 0 18px 0;
}

.eltdf-section-title__logo-wrap{
  margin: 0 0 12px 0;
}

.eltdf-section-title__logo{
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.eltdf-section-title__title{
  margin: 0 0 10px 0;
}

.eltdf-section-title__text{
  margin: 0 0 10px 0;
}

.eltdf-section-title__text:last-child{
  margin-bottom: 0;
}

/* ==========================================================================
   VC Gallery: type="image_grid"  -> square tiles, side-by-side
   ========================================================================== */

/* VC Gallery: type="image_grid" -> 2 columns by default, wrap automatically */
.vc-gallery.vc-gallery--image-grid{
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.vc-gallery--image-grid .vc-gallery__item{
  box-sizing: border-box;
  width: 50%;            /* genau 2 nebeneinander */
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;   /* vertikaler Abstand */

  display: block;
  text-decoration: none;
}

.vc-gallery--image-grid .vc-gallery__item img{
  width: 100%;
  aspect-ratio: 1 / 1;   /* Quadrat */
  height: auto;
  display: block;
  object-fit: cover;

  border-radius: 10px;
  box-shadow:
    0 14px 24px rgba(0,0,0,.14),
    0 2px 6px rgba(0,0,0,.10);
}

/* Optional: ab größerer Breite 3 Spalten (wie häufig im Original) */
@media (min-width: 900px){
  .vc-gallery--image-grid .vc-gallery__item{
    width: 33.3333%;
  }
}

@media (min-width: 900px){
  .vc-gallery.vc-gallery--image-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
  .vc-gallery.vc-gallery--image-grid{ grid-template-columns: repeat(4, 1fr); }
}

.eltdf-dropcaps{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  font-weight: 700;
  font-size: 22px;
  line-height: 1;

  margin-right: 12px;
  vertical-align: middle;

  /* Fallback-Farben, falls nicht per Attribut gesetzt */
  color: #ffffff;
  background-color: #000080;
}

.eltdf-dropcaps--square{
  border-radius: 6px;
}

.eltdf-dropcaps--circle{
  border-radius: 999px;
}

/* Damit es sauber vor Text in <p> sitzt */
.vc-column-text p .eltdf-dropcaps{
  float: left;
  margin-right: 12px;
  margin-top: 2px;
}

/* ==========================================================================
   VC Message Boxes – pastel variants
   ========================================================================== */

.vc-message{
  display: flex;
  gap: 16px;
  align-items: flex-start;

  padding: 18px 20px;
  border-radius: 10px;

  box-shadow:
    0 18px 28px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.08);

  border: 1px solid rgba(0,0,0,.06);
}

/* INFO – pastel blue (default) */
.vc-message--info{
  background: #f3f8ff;
  border-color: #d6e6ff;
}
.vc-message--info .vc-message__icon{
  color: #2f6fd6;
}

/* WARNING – pastel orange */
.vc-message--warning{
  background: #fff6e5;
  border-color: #ffe2b3;
}
.vc-message--warning .vc-message__icon{
  color: #d97a00;
}

/* ERROR – pastel red */
.vc-message--error{
  background: #fff1f1;
  border-color: #ffd0d0;
}
.vc-message--error .vc-message__icon{
  color: #c62828;
}

.vc-message__icon{
  font-size: 34px;
  line-height: 1;
  padding-top: 2px;
}

.vc-message__body{
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   VC TTA Tabs (vc_tta_tabs / vc_tta_section) - CSS-only (radio)
   ========================================================================== */
/* ==========================================================================
   VC TTA Tabs (vc_tta_tabs / vc_tta_section) - CSS-only (radio)
   ========================================================================== */

.vc-tta{
  width: 100%;
  box-sizing: border-box;
}

/* Hide radio inputs */
.vc-tta__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Nav */
.vc-tta__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* Tab labels */
.vc-tta__label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;

  padding: 10px 12px;
  border-radius: 10px;

  background: #f3f3f3;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 14px rgba(0,0,0,.08);

  user-select: none;
}

.vc-tta__icon{
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

.vc-tta__title{
  font-weight: 500;
  font-size: .8em;
}

/* Panels */
.vc-tta__content{
  position: relative;
}

.vc-tta__panel{
  display: none;
  padding: 14px 16px;
  border-radius: 10px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 22px rgba(0,0,0,.10);
}

/* Show active panel (up to 10 tabs; extend if needed) */
#tta-1-tab-1:checked ~ .vc-tta__content #tta-1-panel-1,
#tta-1-tab-2:checked ~ .vc-tta__content #tta-1-panel-2,
#tta-1-tab-3:checked ~ .vc-tta__content #tta-1-panel-3,
#tta-1-tab-4:checked ~ .vc-tta__content #tta-1-panel-4,
#tta-1-tab-5:checked ~ .vc-tta__content #tta-1-panel-5,
#tta-1-tab-6:checked ~ .vc-tta__content #tta-1-panel-6,
#tta-1-tab-7:checked ~ .vc-tta__content #tta-1-panel-7,
#tta-1-tab-8:checked ~ .vc-tta__content #tta-1-panel-8,
#tta-1-tab-9:checked ~ .vc-tta__content #tta-1-panel-9,
#tta-1-tab-10:checked ~ .vc-tta__content #tta-1-panel-10{
  display: block;
}

/* Active label styling (matches the checked input via [for=...]) */
#tta-1-tab-1:checked ~ .vc-tta__nav label[for="tta-1-tab-1"],
#tta-1-tab-2:checked ~ .vc-tta__nav label[for="tta-1-tab-2"],
#tta-1-tab-3:checked ~ .vc-tta__nav label[for="tta-1-tab-3"],
#tta-1-tab-4:checked ~ .vc-tta__nav label[for="tta-1-tab-4"],
#tta-1-tab-5:checked ~ .vc-tta__nav label[for="tta-1-tab-5"],
#tta-1-tab-6:checked ~ .vc-tta__nav label[for="tta-1-tab-6"],
#tta-1-tab-7:checked ~ .vc-tta__nav label[for="tta-1-tab-7"],
#tta-1-tab-8:checked ~ .vc-tta__nav label[for="tta-1-tab-8"],
#tta-1-tab-9:checked ~ .vc-tta__nav label[for="tta-1-tab-9"],
#tta-1-tab-10:checked ~ .vc-tta__nav label[for="tta-1-tab-10"]{
  background: #ffffff;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 14px 22px rgba(0,0,0,.10);
}

/* ==========================================================================
   Auto tables (pricing)
   ========================================================================== */

.vc-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.vc-table th,
.vc-table td{
  padding: 10px 12px;
  vertical-align: top;
}

.vc-table thead th{
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.vc-table tbody tr + tr td{
  border-top: 1px solid rgba(0,0,0,.06);
}

.vc-table--pricing{
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

.vc-table--pricing th{
  background: rgba(0,0,0,.03);
}

.vc-table .is-right{
  text-align: right;
  white-space: nowrap;
}

.vc-table .is-strong{
  font-weight: 700;
}

.vc-column-text table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.vc-column-text table th,
.vc-column-text table td{
  padding: 10px 12px;
}
.vc-column-text table thead th{
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.vc-column-text table tbody tr + tr td{
  border-top: 1px solid rgba(0,0,0,.06);
}
.vc-column-text table td:last-child,
.vc-column-text table th:last-child{
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
}

.vc-single-image + p,
.vc-single-image + .vc-column-text{
  margin-top: 6px;
}

/* Mobile: VC columns stack (override inline flex-basis/max-width) */
@media (max-width: 768px){
  .vc-row__inner{
    margin-left: -8px;
    margin-right: -8px;
  }
  .vc-message__body {
    font-size: .85em;
  }
  .vc-column-text p {
    font-size: .9em;
  }
  .eyecatcher .title h1 {
    font-size: 1.2em;
  }
  h2 {
    font-size: 1.0em;
  }
  .vc-row__inner > .vc-column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
.eltdf-pricing-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.eltdf-pricing-table.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eltdf-pricing-table.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eltdf-pricing-table.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.eltdf-pricing-table__item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 28px 24px;
  text-align: center;
}

.eltdf-pricing-table__title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 18px;
}

.eltdf-pricing-table__price {
  font-size: 44px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.eltdf-pricing-table__currency { font-size: 22px; }
.eltdf-pricing-table__period { font-size: 16px; opacity: .75; margin-left: 6px; }

.eltdf-pricing-table__line {
  width: 90px;
  height: 2px;
  margin: 18px auto 0;
  background: #d7a07b;
}

.eltdf-pricing-table.gap-tiny { gap: 12px; }
.eltdf-pricing-table.gap-small { gap: 16px; }
.eltdf-pricing-table.gap-normal { gap: 24px; }