/*
Theme Name: Innometrics Marketing
Theme URI: https://www.technomerger.com/free-marketing-wordpress-theme/
Author: ionicthemes
Author URI: 
Description: Introducing our free marketing WordPress theme, harnessing the power of block patterns to effortlessly enhance your online presence. Designed for marketers, this theme seamlessly blends functionality with style, allowing you to create stunning layouts and designs without any coding knowledge. From captivating hero sections to compelling call-to-action blocks, every aspect is optimized to drive results and maximize engagement. With built-in social media integration and SEO-friendly design, this theme empowers you to boost online visibility and reach your target audience effectively. The theme is great for marketing websites, businesses, seo agencies and many more. Whether you're a seasoned marketer or just starting out, our free WordPress theme provides the perfect solution for creating a professional and polished online presence, elevating your marketing strategy to new heights.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, e-commerce, full-site-editing, block-patterns, full-width-template, rtl-language-support, threaded-comments, translation-ready, block-styles, wide-blocks
Version: 1.0.6
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: innometrics-marketing
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
.wp-block-comments textarea#comment {
  border-radius: 0;
}

input[type="submit"] {
  transition: all ease 0.23s;
  -o-transition: all ease 0.23s;
  -moz-transition: all ease 0.23s;
  -webkit-transition: all ease 0.23s;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-number.wpcf7-validates-as-number,
.wpcf7-form-control.wpcf7-select {
  border-radius: 5px;
  border: 1px solid #dad7d7;
  padding: 15px;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

.wpcf7-form-control.wpcf7-select {
  appearance: none;
  position: relative;
}

.wpcf7-form-control.wpcf7-select:after {
  content: ">";
  font-size: 20px;
  position: absolute;
  right: 20px;
  top: 10px;
}

form.wpcf7-form *::placeholder {
  font-size: 14px;
}

form.wpcf7-form *::-moz-placeholder {
  font-size: 14px;
}

form.wpcf7-form *::-webkit-input-placeholder {
  font-size: 14px;
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-form-control.wpcf7-submit {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light-color);
  border-radius: 0;
  border: 0;
  font-size: 16px;
  padding: 15px 40px;
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-form-control.has-spinner.wpcf7-submit:hover {
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--light-color);
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-form input,
.wp-block-contact-form-7-contact-form-selector .wpcf7-form select,
.wp-block-contact-form-7-contact-form-selector .wpcf7-form textarea {
  border-radius: 0;
  border: 1px solid var(--wp--preset--color--foreground);
  background: transparent;
}

.wp-block-contact-form-7-contact-form-selector.innometrics-marketing-newsletter .wpcf7-form input {
  border-radius: 0;
  border: 0;
  border: 1px solid var(--wp--preset--color--light-color);
  background: transparent;
}

form.comment-form {
  border-radius: 20px;
  margin-top: 24px;
}

.wp-block-post-comments-form {
  border-radius: 20px;
}

form.comment-form input[type="email"],
form.comment-form input[type="text"],
form.comment-form input[type="url"],
form.comment-form textarea {
  border-radius: 0;
  margin: 12px 0 25px;
}

form.comment-form .form-submit.wp-block-button {
  margin-top: 25px;
}

.wp-block-comment-author-name {
  font-weight: 600;
}

.wp-block-comment-date a {
  color: var(--wp--preset--color--foreground);
  font-size: 13px;
}

.wp-block-comment-template li {
  margin-top: 50px;
}

.wp-block-comment-template li li {
  margin-top: 10px;
  padding-left: 60px;
}

a.comment-reply-link {
  border: 1px solid;
  padding: 5px 13px;
  border-radius: 40px;
  font-size: 13px;
  opacity: 0.6;
}

.wp-block-post-comments-form {
  margin-top: 30px;
  display: inline-block;
  width: 100%;
}

.woocommerce ul.products li.product a img {
  border-radius: 5px;
  height: 350px;
  object-fit: cover;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  margin: 0 2.5% 2.992em 0;
  width: 23.1%;
}

.woocommerce ul.products li.last,
.woocommerce-page ul.products li.last {
  margin-right: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:after {
  border: 0;
}

.woocommerce #reviews #comments ol.commentlist {
  padding: 0;
  margin-top: 20px !important;
}

.woocommerce-page .input-text {
  padding: 11px 30px;
  border: 1px solid #817e7e;
  border-radius: 5px;
}

.wp-block-post-excerpt__excerpt a,
.entry-content.wp-block-post-content a,
p a {
  text-decoration: underline;
}

nav.wp-block-navigation ul li a:hover {
  color: var(--wp--preset--color--secondary) !important;
}

.wp-block-button.innometrics-marketing-scrollto-top .wp-block-button__link.wp-element-button {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: inline-block;
  z-index: 999;
  text-indent: -5000px;
  display: none;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.089);
}

.wp-block-button.innometrics-marketing-scrollto-top .wp-block-button__link.wp-element-button:after,
.wp-block-button.innometrics-marketing-scroll-down a.wp-block-button__link:after {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #fff;
  -webkit-mask-image: url(assets/images/up-arrow.svg);
  mask-image: url(assets/images/up-arrow.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
}

.wp-block-button.innometrics-marketing-scroll-down a.wp-block-button__link {
  width: 50px;
  height: 50px;
  display: inline-block;
  text-indent: -5000px;
  position: relative;
  animation: publishtiyBounce 2s infinite;
}

.wp-block-button.innometrics-marketing-scroll-down a.wp-block-button__link:after {
  transform: rotate(180deg);
}

@keyframes publishtiyBounce {
  0% {
    top: 0px;
  }

  50% {
    top: 15px;
  }

  100% {
    top: 0;
  }
}

.wp-block-button.innometrics-marketing-scrollto-top .wp-block-button__link.wp-element-button:hover:after {
  background-color: var(--wp--preset--color--light-color) !important;
}

.wp-block-group.innometrics-marketing-main-header {
  position: relative;
}

.innometrics-marketing-footer-categories.wp-block-categories li {
  margin: 7px 0;
}

.innometrics-marketing-footer-categories.wp-block-categories li a {
  color: #fff;
  margin-right: 10px;
}

.innometrics-marketing-footer-categories.wp-block-categories li a:hover {
  color: var(--wp--preset--color--secondary);
}

p.innometrics-marketing-footer-categories.wp-block-tag-cloud a {
  background: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--light-color);
  text-decoration: none;
  padding: 4px 10px;
  margin: 0 0 4px;
  border-radius: 3px;
}

p.innometrics-marketing-footer-categories.wp-block-tag-cloud a:hover {
  background: var(--wp--preset--color--secondary);
}

.wp-block-contact-form-7-contact-form-selector.innometrics-marketing-newsletter-section input.wpcf7-form-control.wpcf7-submit {
  width: 100%;
  margin-top: 20px;
}

nav.publishtiy-pagination .page-numbers {
  padding: 5px 20px;
  font-size: 20px;
}

.wp-block-contact-form-7-contact-form-selector.innometrics-marketing-newsletter-section input.wpcf7-form-control.wpcf7-email {
  border-color: #1d50d0;
  background: #fff;
}

.wp-block-contact-form-7-contact-form-selector.innometrics-marketing-newsletter.minimal-footer-layout input.wpcf7-form-control.wpcf7-submit {
  width: 100%;
  margin-top: 15px;
}

.wp-block-contact-form-7-contact-form-selector.innometrics-marketing-newsletter.white-scheme .wpcf7-form input {
  border-color: var(--wp--preset--color--heading-color);
}

.wp-block-contact-form-7-contact-form-selector.white-scheme .wpcf7-form-control.wpcf7-submit {
  color: var(--wp--preset--color--heading-color);
}

:where(.wp-block-columns) {
  margin-bottom: 0 !important;
}

:where(.wp-block-columns.has-background) {
  padding: 0.15em 1.0em !important;
}

a:-webkit-any-link:focus-visible {
  outline: var(--wp--preset--color--black) solid 4px;
}

/* ============================================================
   CUSTOM ENHANCEMENTS – Schulprojekt
   ============================================================ */

/* --- 1. Smooth Scroll --- */
html {
  scroll-behavior: smooth;
}

/* --- 2. Interactive Feature-Boxen (Hover-Effekt) --- */
.innometrics-marketing-main-header .wp-block-columns .wp-block-column {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 12px;
  overflow: hidden;
}

.innometrics-marketing-main-header .wp-block-columns .wp-block-column:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(28, 80, 208, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Hover-Box generell (auch Blog-Cards etc.) */
.innometrics-marketing-hover-box {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.innometrics-marketing-hover-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(28, 80, 208, 0.15),
    0 6px 20px rgba(0, 0, 0, 0.06);
}

/* --- 3. Glasmorphismus-Effekt für Hero-Bereich --- */
.innometrics-marketing-main-header .wp-block-cover__inner-container {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 48px 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* --- 4. Gradient-Buttons --- */
.innometrics-marketing-main-header .wp-block-button__link.wp-element-button,
.innometrics-marketing-main-header .wp-block-button .wp-block-button__link {
  background: linear-gradient(135deg, #1C50D0 0%, #02ABCC 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 40px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  position: relative;
  overflow: hidden;
}

.innometrics-marketing-main-header .wp-block-button__link.wp-element-button:hover,
.innometrics-marketing-main-header .wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(28, 80, 208, 0.35);
  filter: brightness(1.08);
}

/* Outline-Button im Header → Glas-Stil */
.innometrics-marketing-main-header .is-style-outline .wp-block-button__link {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  border-radius: 10px !important;
  transition: all 0.3s ease;
}

.innometrics-marketing-main-header .is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* --- 5. Allgemeine Button Micro-Interactions --- */
.wp-block-button__link.wp-element-button {
  transition: transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

.wp-block-button__link.wp-element-button:hover {
  transform: translateY(-2px);
}

.wp-block-button__link.wp-element-button:active {
  transform: translateY(0px) scale(0.98);
}

/* --- 6. Fade-In Animation beim Laden --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.innometrics-marketing-main-header .wp-block-cover__inner-container {
  animation: fadeInUp 0.8s ease-out both;
}

.innometrics-marketing-main-header .wp-block-columns {
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* --- 7. Navigation Hover-Underline Effekt --- */
nav.wp-block-navigation ul li a {
  position: relative;
  transition: color 0.3s ease;
}

nav.wp-block-navigation ul li a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #1C50D0, #02ABCC);
  transition: width 0.3s ease, left 0.3s ease;
  border-radius: 2px;
}

nav.wp-block-navigation ul li a:hover::after {
  width: 100%;
  left: 0;
}

/* --- 8. Bild-Hover in Feature-Boxen --- */
.innometrics-marketing-hover-box .wp-block-post-featured-image img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.innometrics-marketing-hover-box:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}

.innometrics-marketing-hover-box .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

/* --- 9. Scroll-to-Top Button verbessert --- */
.wp-block-button.innometrics-marketing-scrollto-top .wp-block-button__link.wp-element-button {
  background: linear-gradient(135deg, #1C50D0 0%, #02ABCC 100%) !important;
  border-radius: 50% !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-button.innometrics-marketing-scrollto-top .wp-block-button__link.wp-element-button:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(28, 80, 208, 0.4);
}

/* --- 10. Sanfte Focus-Styles (Accessibility) --- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid #02ABCC;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 11. Media-Text Icons in Feature-Boxen --- */
.innometrics-marketing-main-header .wp-block-media-text__media img {
  transition: transform 0.4s ease;
}

.innometrics-marketing-main-header .wp-block-column:hover .wp-block-media-text__media img {
  transform: scale(1.12) rotate(3deg);
}

/* --- 12. Responsive Verbesserungen --- */
@media (max-width: 768px) {
  .innometrics-marketing-main-header .wp-block-cover__inner-container {
    padding: 28px 20px;
  }

  .innometrics-marketing-main-header .wp-block-columns .wp-block-column:hover {
    transform: translateY(-4px) scale(1.01);
  }

  nav.wp-block-navigation ul li a::after {
    display: none;
  }
}

/* ============================================================
   TECH PORTFOLIO DESIGN – IT / Netzwerk / Coding Ästhetik
   ============================================================ */

/* --- HERO SECTION --- */
.tech-hero-bg {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1e3e 40%, #0d1f3c 70%, #0a1628 100%);
  position: relative;
  overflow: hidden;
}

/* Animated Grid Pattern */
.tech-hero-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(28, 80, 208, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 80, 208, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
  z-index: 0;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(60px, 60px);
  }
}

/* Glowing orbs */
.tech-hero-bg::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(2, 171, 204, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: orbFloat 8s ease-in-out infinite;
  z-index: 0;
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-30px, 20px) scale(1.1);
  }
}

.tech-hero-content {
  position: relative;
  z-index: 1;
}

/* Badge */
.tech-badge {
  color: #02ABCC !important;
  background: rgba(2, 171, 204, 0.1);
  border: 1px solid rgba(2, 171, 204, 0.25);
  border-radius: 30px;
  display: table !important;
  padding: 8px 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tech-hero-title {
  color: #fff !important;
}

.tech-gradient-text {
  background: linear-gradient(135deg, #1C50D0, #02ABCC, #06d6a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.tech-hero-subtitle {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Hero Buttons */
.tech-btn-primary .wp-block-button__link {
  background: linear-gradient(135deg, #1C50D0 0%, #02ABCC 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(28, 80, 208, 0.4);
  transition: all 0.3s ease !important;
}

.tech-btn-primary .wp-block-button__link:hover {
  box-shadow: 0 8px 32px rgba(28, 80, 208, 0.6) !important;
  transform: translateY(-3px);
}

.tech-btn-outline .wp-block-button__link {
  background: transparent !important;
  color: #02ABCC !important;
  border: 1.5px solid rgba(2, 171, 204, 0.4) !important;
  transition: all 0.3s ease !important;
}

.tech-btn-outline .wp-block-button__link:hover {
  background: rgba(2, 171, 204, 0.1) !important;
  border-color: #02ABCC !important;
  transform: translateY(-3px);
}

/* --- ABOUT SECTION --- */
.tech-about-section {
  background: #fafbff;
}

/* Profile Photo Showcase */
.tech-profile-showcase {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tech-profile-ring {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #1C50D0, #02ABCC, #06d6a0, #1C50D0);
  background-size: 300% 300%;
  animation: ringRotate 4s ease-in-out infinite;
  margin-bottom: 20px;
  box-shadow: 0 8px 40px rgba(28, 80, 208, 0.25), 0 0 80px rgba(2, 171, 204, 0.1);
}

@keyframes ringRotate {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.tech-profile-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #e8ecf4;
  border: 3px solid #fafbff;
}

.tech-profile-name {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #0a0e27;
  margin: 0 0 6px 0;
}

.tech-profile-role {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: #6C6C6C;
  letter-spacing: 1px;
  margin: 0;
}

.tech-section-label {
  color: #02ABCC !important;
  font-family: 'Outfit', monospace !important;
}

.tech-section-title {
  color: #0a0e27 !important;
}

/* Terminal Card */
.tech-terminal-card {
  background: #1a1e3e !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tech-terminal-header {
  background: #252a4a;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Outfit', monospace !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.terminal-dot.red {
  background: #ff5f57;
}

.terminal-dot.yellow {
  background: #ffbd2e;
}

.terminal-dot.green {
  background: #28c840;
}

.tech-terminal-code {
  background: transparent !important;
  border: none !important;
  padding: 24px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.tech-terminal-code code {
  color: #06d6a0 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  text-shadow: 0 0 10px rgba(6, 214, 160, 0.3);
}

/* Stat Row */
.tech-stat-row {
  margin-top: 32px !important;
  gap: 24px !important;
}

.tech-stat-item {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  padding: 20px 24px !important;
  text-align: center;
  transition: all 0.3s ease;
  min-width: 120px;
}

.tech-stat-item:hover {
  border-color: #02ABCC;
  box-shadow: 0 8px 24px rgba(2, 171, 204, 0.12);
  transform: translateY(-4px);
}

.tech-stat-number {
  font-size: 32px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #1C50D0, #02ABCC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.tech-stat-label {
  font-size: 12px !important;
  color: #6C6C6C !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 4px 0 0 0 !important;
  font-weight: 600 !important;
}

/* --- SKILLS SECTION --- */
.tech-skills-section {
  background: #0a0e27;
}

.tech-skills-section .tech-section-label {
  color: #02ABCC !important;
}

.tech-skills-section .tech-section-title {
  color: #fff !important;
}

.tech-skill-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px !important;
  padding: 36px 24px !important;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.tech-skill-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1C50D0, #02ABCC);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tech-skill-card:hover::before {
  opacity: 1;
}

.tech-skill-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(2, 171, 204, 0.3);
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(2, 171, 204, 0.15);
}

.tech-skill-icon {
  font-size: 40px !important;
  margin-bottom: 8px !important;
  display: block;
  transition: transform 0.3s ease;
}

.tech-skill-card:hover .tech-skill-icon {
  transform: scale(1.2) rotate(5deg);
}

.tech-skill-card h4 {
  color: #fff !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

.tech-skill-card p:not(.tech-skill-icon) {
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.7 !important;
}

/* --- TIMELINE SECTION --- */
.tech-timeline-section {
  background: #fafbff;
}

.tech-timeline {
  position: relative;
  padding-left: 40px !important;
}

/* Vertical Line */
.tech-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #1C50D0, #02ABCC, rgba(2, 171, 204, 0.1));
}

/* Timeline Items */
.tech-timeline-item {
  position: relative;
  background: #fff !important;
  border: 1px solid #e8ecf4;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  margin-bottom: 24px !important;
  transition: all 0.35s ease;
}

/* Timeline Dot */
.tech-timeline-item::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 32px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 3px solid #1C50D0;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s ease;
}

.tech-timeline-item:hover::before {
  background: #1C50D0;
  box-shadow: 0 0 0 6px rgba(28, 80, 208, 0.15);
}

.tech-timeline-item:hover {
  border-color: rgba(28, 80, 208, 0.2);
  box-shadow: 0 12px 40px rgba(28, 80, 208, 0.08);
  transform: translateX(6px);
}

/* Active Timeline Item (current school) */
.tech-timeline-active {
  border-color: rgba(28, 80, 208, 0.15) !important;
  border-left: 3px solid #1C50D0 !important;
}

.tech-timeline-active::before {
  background: linear-gradient(135deg, #1C50D0, #02ABCC) !important;
  border-color: #02ABCC !important;
  box-shadow: 0 0 0 6px rgba(2, 171, 204, 0.15);
}

.tech-timeline-active::after {
  content: 'AKTUELL';
  position: absolute;
  top: -14px;
  left: 32px;
  right: auto;
  background: linear-gradient(135deg, #1C50D0, #02ABCC);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
}

.tech-timeline-header {
  align-items: center;
}

.tech-timeline-header h4 {
  color: #0a0e27 !important;
  margin: 0 !important;
}

.tech-timeline-date {
  color: #02ABCC !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Outfit', monospace !important;
  white-space: nowrap;
  margin: 0 !important;
  background: rgba(2, 171, 204, 0.08);
  padding: 4px 14px !important;
  border-radius: 20px;
}

/* Tags */
.tech-tag-row {
  gap: 8px !important;
  margin-top: 16px !important;
}

.tech-tag {
  background: rgba(28, 80, 208, 0.06) !important;
  color: #1C50D0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  margin: 0 !important;
  border: 1px solid rgba(28, 80, 208, 0.12);
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.tech-tag:hover {
  background: #1C50D0 !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* --- CODE RAIN ANIMATION (Subtle Background) --- */
@keyframes codeRain {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  10% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* --- PRINT STYLES --- */
@media print {
  .tech-hero-bg {
    background: #fff !important;
  }

  .tech-hero-title,
  .tech-section-title {
    color: #000 !important;
  }

  .tech-gradient-text {
    -webkit-text-fill-color: #1C50D0;
  }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .tech-hero-bg {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }

  .tech-hero-title {
    font-size: 34px !important;
  }

  .tech-hero-subtitle {
    font-size: 15px !important;
  }

  /* Profile photo larger on mobile */
  .tech-profile-ring {
    width: 250px !important;
    height: 250px !important;
  }

  /* Badge smaller */
  .tech-badge {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    padding: 6px 16px !important;
  }

  /* Buttons stack on mobile */
  .tech-hero-bg .wp-block-buttons {
    flex-direction: column !important;
    align-items: center;
    gap: 12px !important;
  }

  /* About section */
  .tech-about-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .tech-about-section .wp-block-columns {
    flex-direction: column !important;
  }

  .tech-about-section .wp-block-column {
    flex-basis: 100% !important;
  }

  .tech-section-title {
    font-size: 28px !important;
  }

  .tech-section-label {
    font-size: 12px !important;
    letter-spacing: 3px !important;
  }

  /* Terminal card */
  .tech-terminal-card {
    margin-bottom: 24px;
  }

  .tech-terminal-code code {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

  /* Skills section */
  .tech-skills-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .tech-skills-section .wp-block-columns {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .tech-skill-card {
    padding: 28px 20px !important;
  }

  /* Timeline */
  .tech-timeline {
    padding-left: 30px !important;
  }

  .tech-timeline::before {
    left: 10px;
  }

  .tech-timeline-item {
    padding: 20px 20px !important;
  }

  .tech-timeline-item::before {
    left: -28px;
    width: 12px;
    height: 12px;
  }

  .tech-timeline-active::after {
    position: static;
    display: inline-block;
    margin-bottom: 8px;
  }

  .tech-timeline-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* Stat items */
  .tech-stat-row {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .tech-stat-item {
    min-width: 90px;
    padding: 14px 16px !important;
  }

  .tech-stat-number {
    font-size: 24px !important;
  }

  /* Tags */
  .tech-tag-row {
    flex-wrap: wrap !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .tech-hero-title {
    font-size: 28px !important;
  }

  .tech-hero-bg {
    padding-top: 60px !important;
    padding-bottom: 50px !important;
  }

  .tech-profile-ring {
    width: 170px !important;
    height: 170px !important;
  }

  .tech-section-title {
    font-size: 24px !important;
  }

  .tech-skill-card h4 {
    font-size: 16px !important;
  }
}