/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


/* Icon für Homepage */
.fusion-panel.pp-icon-payment .fusion-toggle-heading::before {
  font-family: "Font Awesome 6 Pro"; 
  font-weight: 400; /* Light */
  content: "\f1ad"; 
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
  font-size: 1em;
  color: var(--awb-color5);
}

.fusion-panel.pp-icon-merchants .fusion-toggle-heading::before {
  font-family: "Font Awesome 6 Pro"; 
  font-weight: 400; /* Light */
  content: "\f54e"; 
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
  font-size: 1em;
  color: var(--awb-color5);
}

.fusion-panel.pp-icon-reseller .fusion-toggle-heading::before {
  font-family: "Font Awesome 6 Pro"; 
  font-weight: 400; /* Light */
  content: "\f500"; 
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
  font-size: 1em;
  color: var(--awb-color5);
}

/*Tageline */
.fusion-title.pp_tagline {
display: table !important; /* shrink-to-fit, centers with margin:auto */
margin: 15px auto !important;
float: none !important; /* override any floats */
background-color: #d2e000;
padding: 5px 10px 5px 10px;
border-radius: 6px;
white-space: nowrap;

}

/* Container ohne Hintergrund */
.fusion-title.pp_tagline_links {
  background: none !important;
}

/* Der gelbe „Badge“ nur um den Text */
.fusion-title.pp_tagline_links .fusion-title-heading {
  display: inline-block !important;   /* verhindert volle Breite */
  background-color: #d2e000;
  padding: 5px 10px !important;;
  border-radius: 6px;
  white-space: nowrap;                 /* nicht umbrechen */
  margin: 0;                           /* Sicherheit */
  width: auto;                         /* falls Theme etwas setzt */
  max-width: max-content;              /* falls nötig */
}






/* Preistabelle */
.pp-most-popular {
  position: relative;
}

.pp-most-popular::before {
  content: "Most Popular";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--awb-color5);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 18px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}



.pp-rows{
  margin-bottom: 16px;
}

.pp-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
}

.pp-label{
  font-size: 15px;
}

.pp-value{
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.pp-value-small {
	font-size: 12px;
	font-weight: normal;
}
.pp-section-title{
  font-size: 16px;
  font-weight: 700;
  margin: 25px 0 6px 0;
}

.pp-table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  
}

.pp-table td{
  padding: 3px 0;
  font-size: 15px;
}

.pp-table td:first-child{
  text-align: left;
}

.pp-table td:last-child{
  text-align: right;
  font-weight: normal; 
}


/* API Code Design */
.pp-code {
  background: #0b1220;
  color: #e2e8f0;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.55;
  padding: 0px 20px 20px 20px;
  border-radius: 8px;
  display: block;
  white-space: pre;
  overflow-x: auto;
}

.pp-code .pp-method { color:#34d399; font-weight:700; } /* grün */
.pp-code .pp-header { color:#94a3b8; }                  /* grau */
.pp-code .pp-json-k { color:#34d399; }                  /* grün */
.pp-code .pp-json-s { color:#fde68a; }                  /* gelb */
.pp-code .pp-json-n { color:#60a5fa; }                  /* blau */





.pp-contentbox .heading {
  margin-bottom: 5px !important;
}



/* Section Divider – global CSS */
:root{
--angle: 4deg; /* fester Winkel: links unten → rechts oben */
--gray: #f6f9fc; /* oben (grau) */
--white: #ffffff; /* unten (weiß) */
--base: 10px; /* Mindesthöhe am rechten Rand unter der Schräge */
--bar-h: 12px; /* Dicke der Streifen */
--lime: #d6e63a; /* grün */
--blue: #169bd6; /* blau */
--bars-w: 200px; /* Länge der blauen Streifen rechts */
--lime-extra: 40px; /* grün = blau + 40px */
}


/* Divider mit fester Winkel-Schräge über gesamte Breite */
.divider{
position: relative;
background: var(--white);
overflow: hidden;
/* Anstieg der Naht wächst mit der Breite (Winkel bleibt konstant) */
--rise: calc(tan(var(--angle)) * 100vw);
height: calc(var(--base) + var(--rise));
}
.divider::before{
content: "";
position: absolute; inset: 0;
background: var(--gray); z-index: 1;
/* oberen grauen Bereich schräg abschneiden */
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rise)), 0 100%);
}


/* Nur oben rechts: grüne & blaue Streifen, exakt parallel zur Naht */
.bars{
position: absolute; right: 0; top: calc(100% - var(--rise));
/* eigene Geometrie innerhalb des schmalen rechten Bereichs */
--bars-rise: calc(tan(var(--angle)) * var(--bars-w));
--lime-w: calc(var(--bars-w) + var(--lime-extra));
--lime-rise: calc(tan(var(--angle)) * var(--lime-w));
width: var(--lime-w);
height: calc(var(--lime-rise) + 2 * var(--bar-h));
z-index: 2; pointer-events: none;
}
.bars__lime, .bars__blue{ position: absolute; top: 0; right: 0; height: 100%; }
.bars__lime{
width: var(--lime-w); background: var(--lime);
clip-path: polygon(0 var(--lime-rise), 100% 0, 100% var(--bar-h), 0 calc(var(--lime-rise) + var(--bar-h)));
}
.bars__blue{
width: var(--bars-w); background: var(--blue);
clip-path: polygon(0 calc(var(--bars-rise) + var(--bar-h)), 100% var(--bar-h), 100% calc(2 * var(--bar-h)), 0 calc(var(--bars-rise) + 2 * var(--bar-h)));
}