/* ------------------------------------------------------------
   Section Backgrounds
   ------------------------------------------------------------ */

#service {
  background-image: radial-gradient(
    900px 500px at 50% 60%,
    var(--pp-glow-teal)                  0%,
    rgba(var(--pp-accent-a-rgb), 0.035) 30%,
    rgba(var(--pp-accent-a-rgb), 0.014) 55%,
    rgba(var(--pp-accent-a-rgb), 0.003) 70%,
    transparent                         65%
  ) !important;
}

#portfolio {
  background-image:
    radial-gradient(
      900px 500px at 30% 45%,
      var(--pp-glow-teal)                  0%,
      rgba(var(--pp-accent-a-rgb), 0.035) 30%,
      rgba(var(--pp-accent-a-rgb), 0.014) 55%,
      rgba(var(--pp-accent-a-rgb), 0.003) 70%,
      transparent                         65%
    ),
    radial-gradient(
      700px 400px at 75% 60%,
      var(--pp-glow-mint)                  0%,
      rgba(var(--pp-accent-b-rgb), 0.02)  35%,
      rgba(var(--pp-accent-b-rgb), 0.007) 60%,
      transparent                         75%
    ) !important;
}

#compare {
  background-image:
    radial-gradient(
      1000px 600px at 35% 30%,
      var(--pp-glow-teal)                  0%,
      rgba(var(--pp-accent-a-rgb), 0.035) 30%,
      rgba(var(--pp-accent-a-rgb), 0.014) 55%,
      rgba(var(--pp-accent-a-rgb), 0.003) 70%,
      transparent                         75%
    ),
    radial-gradient(
      700px 500px at 70% 80%,
      var(--pp-glow-mint)                  0%,
      rgba(var(--pp-accent-b-rgb), 0.02)  35%,
      rgba(var(--pp-accent-b-rgb), 0.007) 60%,
      transparent                         75%
    );
}

#reviews {
  background-image: radial-gradient(
    1000px 600px at 50% 50%,
    var(--pp-glow-mint)                  0%,
    rgba(var(--pp-accent-b-rgb), 0.02)  35%,
    rgba(var(--pp-accent-b-rgb), 0.007) 60%,
    transparent                         75%
  ) !important;
}

#faq {
  background-image: radial-gradient(
    800px 500px at 35% 65%,
    rgba(var(--pp-accent-a-rgb), 0.07)  0%,
    rgba(var(--pp-accent-a-rgb), 0.02)  35%,
    rgba(var(--pp-accent-a-rgb), 0.007) 60%,
    transparent                         75%
  ) !important;
}

#blog {
  background-image: radial-gradient(
    500px 400px at 75% 40%,
    rgba(var(--pp-accent-a-rgb), 0.042) 0%,
    rgba(var(--pp-accent-a-rgb), 0.014) 40%,
    transparent                         75%
  ) !important;
}


/* ------------------------------------------------------------
   Reviews – Glow Lines
   ------------------------------------------------------------ */

#reviews { position: relative; }

#reviews::before,
#reviews::after {
  content: '';
  position: absolute;
  left: 50%; width: 50%; height: 1px;
  border-radius: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, var(--pp-accent-b) 50%, transparent 100%);
  box-shadow:
    0 0  2px 0px rgba(255, 255, 255, 0.8),
    0 0  4px 1px rgba(var(--pp-accent-b-rgb), 0.55),
    0 0 12px 3px rgba(var(--pp-accent-b-rgb), 0.3),
    0 0 28px 6px rgba(var(--pp-accent-b-rgb), 0.12);
  animation: pp-glow-pulse 2.8s ease-in-out infinite;
}
#reviews::before { top:    0; transform: translateX(-50%) scaleX(0.85); }
#reviews::after  { bottom: 0; transform: translateX(-50%) scaleX(0.85); }


/* ------------------------------------------------------------
   Portfolio – Glow Lines
   ------------------------------------------------------------ */

#portfolio .flexslider {
  position: relative;
  overflow: visible !important;
}

#portfolio .flexslider::before,
#portfolio .flexslider::after {
  content: '';
  position: absolute;
  left: 50%; width: 60%; height: 1px;
  border-radius: 1px; pointer-events: none; z-index: 10;
  background: linear-gradient(
    90deg,
    transparent         0%,
    var(--pp-accent-a) 15%,
    var(--pp-accent-b) 50%,
    var(--pp-accent-a) 85%,
    transparent        100%
  );
  box-shadow:
    0 0  2px 0px rgba(255, 255, 255, 0.3),
    0 0  4px 1px rgba(var(--pp-accent-b-rgb), 0.3),
    0 0 12px 3px rgba(var(--pp-accent-b-rgb), 0.3),
    0 0 28px 6px rgba(var(--pp-accent-a-rgb), 0.2);
  animation: pp-glow-pulse 2.8s ease-in-out infinite;
}
#portfolio .flexslider::before { top:    2px; transform: translateX(-50%) scaleX(0.85); }
#portfolio .flexslider::after  { bottom: 2px; transform: translateX(-50%) scaleX(0.85); }



/*-----------------------------------------------*/
/*  Service Tiles                                */
/*-----------------------------------------------*/
 
.pp-svc-deck {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px;
}
 
.pp-svc-head {
	display:       flex;
	align-items:   center;
	gap:           9px;
	margin-bottom: 10px;
	position:      relative;
	z-index:       2;
}
.pp-svc-head .pp-svc-ic     { color: var(--pp-accent-a); display: inline-flex; }
.pp-svc-head .pp-svc-ic svg { width: 19px; height: 19px; display: block; }
.pp-svc-head h4             { margin: 0; }
 
.pp-svc-cap {
	margin:     10px 0 0;
	min-height: 2.8em;
	position:   relative;
	z-index:    2;
}
 
.pp-svc-stage {
	height:          120px;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	background:      var(--pp-card-bg);
	border:          1px solid var(--pp-border);
	border-radius:   8px;
	padding:         12px;
	box-sizing:      border-box;
	position:        relative;
	z-index:         2;
	overflow:        hidden;
}
 
/*-----------------------------------------------*/
/*  Tile: Webdesign                              */
/*-----------------------------------------------*/
 
.pp-web {
	width:         100%;
	background:    var(--pp-card-bg);
	border-radius: 6px;
	overflow:      hidden;
}
.pp-web-bar {
	display:       flex;
	align-items:   center;
	gap:           5px;
	padding:       7px 9px;
	border-bottom: 1px solid var(--pp-border);
}
.pp-web-bar span      { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-border); }
.pp-web-url           { flex: 1; height: 6px; margin-left: 5px; border-radius: 4px; background: rgba(255,255,255,0.10); }
.pp-web-body          { padding: 10px; }
.pp-web-top           { display: flex; align-items: center; margin-bottom: 8px; }
.pp-web-logo          { width: 18px; height: 18px; border-radius: 5px; background: var(--pp-accent-a); }
.pp-web-nav           { display: flex; gap: 5px; margin-left: auto; }
.pp-web-nav i         { width: 16px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.16); }
.pp-web-hero          { height: 8px; width: 68%; border-radius: 4px; background: var(--pp-accent-a); margin-bottom: 6px; }
.pp-web-ln            { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); margin-bottom: 5px; }
.pp-web-ln:last-child { margin-bottom: 0; }
 
/*-----------------------------------------------*/
/*  Tile: Marketing                              */
/*-----------------------------------------------*/
 
.pp-mk-chart {
	display:     flex;
	align-items: flex-end;
	gap:         7px;
	height:      52px;
}
.pp-mk-chart span { flex: 1; background: var(--pp-accent-a); border-radius: 3px 3px 0 0; }
.pp-mk-trend      { display: flex; align-items: center; color: var(--pp-accent-a); margin-top: 9px; }
.pp-mk-trend svg  { width: 16px; height: 16px; }
 
/*-----------------------------------------------*/
/*  Tile: Printmedien                            */
/*-----------------------------------------------*/
 
.pp-pr-stack {
	position: relative;
	height:   72px;
}
.pp-pr-back {
	position:      absolute;
	top:           6px;
	left:          14px;
	width:         60px;
	height:        64px;
	background:    var(--pp-card-bg);
	border:        1px solid var(--pp-border);
	border-radius: 5px;
}
.pp-pr-front {
	position:      absolute;
	top:           0;
	left:          0;
	width:         60px;
	height:        64px;
	background:    var(--pp-card-bg);
	border:        1px solid var(--pp-border);
	border-radius: 5px;
	padding:       7px;
	box-sizing:    border-box;
	overflow:      hidden;
}
.pp-pr-banner { height: 16px; border-radius: 3px; background: var(--pp-accent-a); margin-bottom: 6px; }
.pp-pr-h      { height: 4px; width: 80%; border-radius: 2px; background: rgba(255,255,255,0.3); margin-bottom: 5px; }
.pp-pr-l      { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.13); margin-bottom: 3px; }
.pp-pr-side   { position: absolute; left: 88px; right: 2px; top: 7px; }
.pp-pr-side i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.13); margin-bottom: 7px; }
 
/*-----------------------------------------------*/
/*  Tile: E-Commerce                             */
/*-----------------------------------------------*/
 
.pp-ec-img {
	height:          36px;
	border-radius:   6px;
	background:      rgba(255,255,255,0.08);
	margin-bottom:   9px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           rgba(255,255,255,0.2);
}
.pp-ec-img svg { width: 20px; height: 20px; }
.pp-ec-t       { height: 6px; width: 64%; border-radius: 3px; background: rgba(255,255,255,0.18); margin-bottom: 10px; }
.pp-ec-row     { display: flex; align-items: center; gap: 9px; }
.pp-ec-price   { height: 13px; width: 42px; border-radius: 4px; background: rgba(255,255,255,0.14); }
.pp-ec-buy {
	flex:            1;
	height:          28px;
	border-radius:   8px;
	background:      var(--pp-accent-a);
	color:           var(--pp-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.pp-ec-buy svg { width: 15px; height: 15px; }
 
/*-----------------------------------------------*/
/*  Mobile: Sticky-Stack                         */
/*-----------------------------------------------*/
 
@media (max-width: 767px) {
	.pp-svc-deck { display: block; }
	.pp-svc-deck > .pp-card {
		position:      sticky;
		width:         100%;
		box-sizing:    border-box;
		margin-bottom: 18px;
		box-shadow:    0 -7px 18px rgba(0,0,0,0.45);
	}
	.pp-svc-deck > .pp-card:last-child   { margin-bottom: 0;  }
	.pp-svc-deck > .pp-card:nth-child(1) { top: 90px;  }
	.pp-svc-deck > .pp-card:nth-child(2) { top: 132px; }
	.pp-svc-deck > .pp-card:nth-child(3) { top: 174px; }
	.pp-svc-deck > .pp-card:nth-child(4) { top: 216px; }
}


/* ------------------------------------------------------------
   Logos
   ------------------------------------------------------------ */

.logos p .wp-image-13092 { margin-right: 30px; }

@media (max-width: 767px) {
  .logos .wpb_wrapper p { text-align: center; }
}