/* ============================================================
   SWCS.IT – Lokale Schriftarten (Raleway, Google Fonts DSGVO-konform)
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/1Ptug8zYS_SKggPNyCAIT5lu.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/1Ptug8zYS_SKggPNyCkIT5lu.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/1Ptug8zYS_SKggPNyCIIT5lu.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/1Ptug8zYS_SKggPNyC0ITw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ============================================================
   Basis
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ============================================================
   Hero-Hintergrund
   ============================================================ */

.hero-bg {
  background-color: #0d1117;
  background-image:
    radial-gradient(ellipse at 15% 60%, rgba(243,146,0,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(0,122,193,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(0,122,193,.08) 0%, transparent 45%);
}

/* ============================================================
   Navigation – Unterstrich-Animation
   ============================================================ */

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background: #F39200;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* ============================================================
   Service-Karten – Hover-Effekt
   ============================================================ */

.service-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(243,146,0,.12);
  border-color: rgba(243,146,0,.3);
}

/* ============================================================
   Animationen
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-up { animation: fadeUp .7s ease both; }
.anim-fade-in { animation: fadeIn .6s ease both; }

.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }
.delay-600 { animation-delay: .6s; }

/* ============================================================
   Scroll-Reveal (opacity 0 bis JS greift)
   ============================================================ */

[data-reveal] {
  opacity: 0;
}

/* ============================================================
   Schwebende Blob-Animationen
   ============================================================ */

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

.blob   { animation: float 7s ease-in-out infinite; }
.blob-2 { animation-duration: 9s; animation-delay: -3s; }

/* ============================================================
   Verlaufstext (Hero "IT")
   ============================================================ */

.text-gradient {
  background: linear-gradient(135deg, #F39200 0%, #f7aa33 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Formularfelder – Focus-Ring
   ============================================================ */

.form-input:focus {
  outline: none;
  border-color: #F39200;
  box-shadow: 0 0 0 3px rgba(243,146,0,.15);
}

/* ============================================================
   Scrollbar
   ============================================================ */

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #F39200; border-radius: 3px; }

/* Macht die Logos grau und leicht transparent */
.tech-logo {
  filter: grayscale(100%);
  opacity: 0.5; /* Passe diesen Wert zwischen 0.1 und 1.0 an für mehr/weniger Dezents */
  transition: all 0.3s ease-in-out;
  cursor: pointer; /* Optional: Zeigt an, dass man interagieren kann */
}

/* Optional: Bringt die Farbe beim Hovern zurück */
.tech-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}