/* ===================================================================================

* Theme Name: Diego Child
* Theme URI: https://wp.hixstudio.net/diego/
* Author: Theme_Pure
* Author URI: https://themeforest.net/user/theme_pure/
* Description: Diego - Creative Personal Portfolio & Resume WordPress Theme
* Version: 1.0.0
* Template: diego
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */
.tp-portfolio-img-wrapper {
  position: relative;
}

.tp-portfolio-overlay-text {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  padding: 15px 20px;
  font-size: 14px;
  border-radius: 20px;
  z-index: 2;
  pointer-events: none;
  font-size: 1.6em;
  font-weight: bold; 
}
.theme-bg-2, .black-bg-3 {
	background-color: #225b61;
}
.theme-footer-bg {
	background-color: #1e2f41;	
}
.ab-hero__shape-1 img {
	display: none;
}
.tp-page-wrapper, .tp-skill-area  {
	background-image: none !important;
}
.porfolio-details__overview-thumb {
	border-radius: 20px;
}
.tp-hero-shape-2 {
	display: none; 
}
.tp-hero-thumb-shape-3 {
	display: none; 
}
.tp-award-shape-1 {
display: none; 
}
.tp-footer-circle-1 span {
	display: none; 
}
.tp-footer-circle-2 {
	display: none;
}
.tp-footer-circle-3 {
	display: none !important;
}
.tp-btn-circle-dot{
	background-color: #82cc51; 
}
.tp-section-subtitle {
	background-clip: none !important;
	background-image: none !important; 
	color: #82cc51; 
}
.tp-award-item.tp-hover-reveal-item .tp-hover-reveal-b {
	border: 1px solid black !important;
}
.admin-bar .tp-header-transparent{
	margin-top: 0 !important;
} 
.contact-inner__area {
	background-color: #225b61;  
}
.tp-service-3__shape-1 {
	display: none; 
}
.tp-btn-green {
 background-color: #82cc51;	
}
/* CF7 Submit-Button stylen */
.wpcf7-submit {
    background-color: #82cc51 !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 16px !important;
    cursor: pointer !important;
    width: auto !important;
    display: inline-block;
    text-align: center;
    box-shadow: none !important;
}

/* Optional: Hover-Effekt */
.wpcf7-submit:hover {
    background-color: #6db33f !important;
}
.tp-hero-content p {
	padding-left: 0 !important
}
li {
	font-size: 14px;
	font-weight: 300 !important; 
	margin-bottom: 10px !important;
	line-height: 1.3;
	margin-left: 20px !important;
}
.tp-course-subtitle, .tp-el-box-subtitle {
	font-size: 16px !important; 
	line-height: 1.3;
}
.primary-image {
  /* Variablen */
  --pi-outer: var(--tp-grey-dark);
  --pi-thickness: 1px;
  --pi-radius: 12px;
  --pi-out: 6px;
  --pi-in: 4px;

  --pi-base-color: transparent;
  --pi-base-thickness: 0px;

  position: relative;
  display: inline-block;
  background: transparent;
  border: var(--pi-base-thickness) solid var(--pi-base-color);
  border-radius: var(--pi-radius);
  overflow: visible;
}

.primary-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pi-radius);
  position: relative;
  z-index: 1;
}

.primary-image::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--pi-out));
  left: calc(-1 * var(--pi-out));
  right: var(--pi-in);
  bottom: var(--pi-in);
  border: var(--pi-thickness) solid var(--pi-outer);
  border-radius: var(--pi-radius);
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0);
  transition: top .3s ease, left .3s ease, right .3s ease, bottom .3s ease, border-color .2s ease;
}

/* Symmetrisch (optional) */
.primary-image--even::after {
  right: calc(-1 * var(--pi-out));
  bottom: calc(-1 * var(--pi-out));
}

/* Hover-Animation aktivieren (optional) */
.primary-image--hover:hover::after,
.primary-image--hover:focus-visible::after {
  top: var(--pi-hover-top, 6px);
  left: var(--pi-hover-left, 4px);
  right: var(--pi-hover-right, -8px);
  bottom: var(--pi-hover-bottom, -8px);
}

@media (prefers-reduced-motion: reduce) {
  .primary-image::after { transition: none; }
}

/* Basis: nur versetzter Rahmen sichtbar */
.primary-card{
  --pc-outer: var(--tp-grey-dark);
  --pc-thickness: 1px;
  --pc-radius: 12px;
  --pc-out: 6px;
  --pc-in: 4px;

  /* innere (nicht versetzte) Border standardmäßig AUS */
  --pc-base-color: transparent;
  --pc-base-thickness: 0px;

  position: relative;
  background: transparent;
  border: var(--pc-base-thickness) solid var(--pc-base-color);
  border-radius: var(--pc-radius);
  overflow: visible;
}
.primary-card > * { position: relative; z-index: 1; }

.primary-card::after{
  content:"";
  position:absolute;
  top: calc(-1 * var(--pc-out));
  left: calc(-1 * var(--pc-out));
  right: var(--pc-in);
  bottom: var(--pc-in); /* ✅ FIX: Klammer entfernt */
  border: var(--pc-thickness) solid var(--pc-outer);
  border-radius: var(--pc-radius);
  pointer-events:none;
  z-index:0;
  transform: translateZ(0);
  transition: top .3s ease, left .3s ease, right .3s ease, bottom .3s ease, border-color .2s ease;
}

/* Symmetrisch (optional) */
.primary-card--even::after{
  right: calc(-1 * var(--pc-out));
  bottom: calc(-1 * var(--pc-out));
}

/* Hover (optional) */
.primary-card--hover:hover::after,
.primary-card--hover:focus-visible::after{
  top: var(--pc-hover-top, 6px);
  left: var(--pc-hover-left, 4px);
  right: var(--pc-hover-right, -8px);
  bottom: var(--pc-hover-bottom, -8px);
}

/* Wenn du AUSNAHMSWEISE auch die innere Border sichtbar willst */
.primary-card--base{
  --pc-base-thickness: var(--pc-thickness);
  --pc-base-color: var(--pc-outer); /* oder eigene Farbe setzen */
}

@media (prefers-reduced-motion: reduce){
  .primary-card::after{ transition:none; }
}
.porfolio-details__color-customize .tp-hero-3__scrool-down {
	display: none !important;
}