/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

.ambivio_icons  .avia-icon-list-container {
	width: 100% !important;
}


.av-compare {
  --av-text: #1c1f24;
  --av-muted: #5f6670;
  --av-line: #e6e8eb;
  --av-green: #2ee59d;
  --av-card-gap: 32px;   /* Abstand zwischen grauer Spalte und grüner Karte */
  --av-card-pad: 40px;   /* Innenabstand der grünen Karte */
  //font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--av-text);
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}
.av-compare *,
.av-compare *::before,
.av-compare *::after { box-sizing: border-box; }
 
/* Raster: feste Zeilen, damit jede Zelle exakt in ihrer Zeile landet */
.av-compare .av-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: repeat(7, auto);
  margin-bottom: 32px;
}
 
/* Grüne Karte: absolut positioniert über die gesamte dritte Spalte */
.av-compare .av-card-bg {
  position: absolute;
  grid-column: 3;
  grid-row: 1 / -1;
  top: 0;
  bottom: -32px;          /* Luft unter der letzten Zeile */
  left: var(--av-card-gap);
  right: 0;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 85% 75%, #12a072 0%, rgba(18,160,114,0) 60%),
    radial-gradient(80% 60% at 20% 10%, #2a5a57 0%, rgba(42,90,87,0) 70%),
    linear-gradient(160deg, #0f4f4a 0%, #0b6b55 55%, #0d8a66 100%);
  z-index: 0;
}
 
.av-compare .av-row { display: contents; }
.av-compare .av-cell {
  position: relative;
  z-index: 1;
  grid-row: var(--av-r);   /* Zeilennummer kommt aus dem HTML */
  margin-top: 0;
}
 
/* Kopfzeile */
.av-compare .av-head-classic {
  grid-column: 2;
  align-self: end;
  padding: 44px 24px 28px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9aa1aa;
}
.av-compare .av-head-voice {
  grid-column: 3;
  margin: 0 var(--av-card-pad) 0 calc(var(--av-card-gap) + var(--av-card-pad));
  padding: 32px 0 20px;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: #fff;
}
.av-compare .av-head-voice span { color: var(--av-green); }
 
/* Datenzellen */
.av-compare .av-label,
.av-compare .av-classic,
.av-compare .av-voice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  font-size: 18px;
  line-height: 1.45;
}
.av-compare .av-label {
  grid-column: 1;
  font-weight: 600;
  padding-right: 24px;
  border-bottom: 1px solid var(--av-line);
}
.av-compare .av-classic {
  grid-column: 2;
  color: var(--av-muted);
  padding-right: 24px;
  border-bottom: 1px solid var(--av-line);
}
.av-compare .av-voice {
  grid-column: 3;
  margin: 0 var(--av-card-pad) 0 calc(var(--av-card-gap) + var(--av-card-pad));
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.av-compare .av-row:last-child .av-label,
.av-compare .av-row:last-child .av-classic,
.av-compare .av-row:last-child .av-voice { border-bottom: 0; }
 
/* Icons */
.av-compare .av-icon-x {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #b3b9c1;
}
.av-compare .av-icon-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  color: var(--av-green);
}
.av-compare .av-icon-check svg { width: 14px; height: 14px; }
 
.av-compare .av-mobile-tag { display: none; }

.ambivio_table > .container {
    max-width: 100% !important;
}
 
/* Tablet */
@media (max-width: 1100px) {
  .av-compare { --av-card-gap: 20px; --av-card-pad: 28px; }
  .av-compare .av-label,
  .av-compare .av-classic,
  .av-compare .av-voice { font-size: 16px; padding-top: 20px; padding-bottom: 20px; }
  .av-compare .av-label,
  .av-compare .av-classic { padding-right: 16px; }
	.av-compare .av-grid {
	  grid-template-columns: minmax(150px, 180px) minmax(0, 1fr) minmax(0, 1.15fr);
	}
}
 
/* Mobil: jede Zeile wird zu einer eigenen Karte */
@media (max-width: 900px) {
  .av-compare { padding: 16px; }
  .av-compare .av-grid { display: block; margin-bottom: 0; }
  .av-compare .av-card-bg,
  .av-compare .av-row.av-head { display: none; }
 
  .av-compare .av-row {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--av-line);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
  }
  .av-compare .av-label,
  .av-compare .av-classic,
  .av-compare .av-voice {
    margin: 0;
    border-bottom: 0;
    font-size: 16px;
  }
  .av-compare .av-label { padding: 18px 20px 6px; font-size: 18px; }
  .av-compare .av-classic { flex-wrap: wrap; gap: 6px 12px; padding: 8px 20px 18px; }
  .av-compare .av-voice {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 16px 20px 20px;
    background: linear-gradient(135deg, #0f4f4a 0%, #0d8a66 100%);
  }
  .av-compare .av-mobile-tag {
    display: block;
    flex: 1 0 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .av-compare .av-classic .av-mobile-tag { color: #9aa1aa; }
  .av-compare .av-voice .av-mobile-tag { color: var(--av-green); }
  .av-compare .av-classic > span:last-child,
  .av-compare .av-voice > span:last-child { flex: 1; min-width: 0; }
}