/*
Theme Name: NineZeroSeven Child
Theme URI: http://www.webcreations907.com
Author: webcreations907
Author URI: http://themeforest.net/user/webcreations907
Template: ninezeroseven
Description: One Page Parallax Theme ~ If you need support please use the <a href="http://support.webcreations907.com/">Theme's Support Forum</a>
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: black,white,orange,flexible-width,custom-background,custom-colors,featured-images,full-width-template,theme-options,translation-ready,left-sidebar,right-sidebar
*/

@import url("../ninezeroseven/style.css");

/********** FIX ********/
.flex-direction-nav a.flex-prev:before  { content: '\f001'; }
.fa-cart-shopping, .fa-shopping-cart {display: none !important;}
.count {display:none;}
.wbc-shop-cart {display: none;}
/************************************************************************
* Custom CSS code below
*************************************************************************/


.side-intro h3 {
  color:#fff !important;
}

.side-intro h4{
   color:#fff !important;
}


.special-heading-4 {
  color: #ff0000 !important;
  text-align:center !important;
}

.nd-intro-row {
  margin:30px 0;
}

.nd-intro-claim {
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  padding: 60px 20px;
  letter-spacing: 0.05em;
  color: #999;
}

.nd-intro-claim {
text-align: center;
margin:auto;
margin-bottom:40px;
}

.nd-intro-section {
width:100%;
/*background-color: #f9f9f9 !important;*/
border-left:5px solid #999;
padding:20px 0;
margin:0;
}

.nd-intro-section,
.nd-intro-section .vc_column-inner,
.nd-intro-section .wpb_wrapper,
.nd-intro-section .wpb_text_column,
.nd-intro-section .et_pb_text,
.nd-intro-section .et_pb_text_inner {
 /*background-color: #fff !important;*/
 /*background-image: none !important;*/
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
  position: relative !important;
  z-index: 10 !important;
}


.nd-intro-section .wpb_text_column {
  /*background-color: #f9f9f9 !important;*/
}

.nd-intro-section {
  outline: 2px dashed red;
}
.nd-intro-section .wpb_text_column {
  outline: 2px dashed blue;
}



.about-claim-sub {
text-align:center;
}

.about-claim-icon {
color:#999;
text-align:center;
}

/*
 .wbc-main-logo {
  max-width: 120px;
  height: auto;
}
*/
/******** PORTFOLIO - SLIDER  ******/
.wpb_heading.wpb_gallery_heading {
  display: none;
}

/******** KI - Grid ***********/
.ki-toolkits {
  padding: 4rem 0;
  background: var(--bg-light);
  text-align: center;
}

.ki-toolkits h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.toolbox-subline {
  font-size: 1.5rem;
  color: var(--text-mid);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.tool-item img {
  width: 80px;
  height: 80px;
  margin-bottom: 0.5rem;
  object-fit: contain; 
   --gs: 1;
  filter: grayscale(var(--gs));
  cursor: pointer;
  transition: 
    filter 0.3s ease-in-out,
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.tool-item .tool-name {
  font-size: 0.9rem;
  color: var(--text-dark);
}

.tool-item img:hover,
.tool-item img:focus 
{
  transform: scale(1.1);
  filter: brightness(1.1);
   --gs: 0;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.tool-item img.reveal {
  opacity: 0;
  transform: translateY(20px);
}


.tool-item img.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}


/* Tablet: 2 Spalten */
@media (max-width: 900px) {
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);}
 .ueber-mich {
    margin:50px 0 !important;}
 .ihk  {
    margin-top:50px !important;
    margin-bottom:50px !important;}
 
}

/* Mobile: 1 Spalte */
@media (max-width: 500px) {
  .tool-grid {
    grid-template-columns: 1fr 1fr;}
  .ueber-mich p {
    margin-top:30px !important;}
}

/* 1. Initialzustand: versteckt + verschoben */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. Sobald .visible dazu kommt: einblenden + zurück an Ort */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}