/* ===================== Farb- & Effekt-Variablen ===================== */
:root{
  --bg:#0b0f14; --card:#121822; --muted:#94a3b8; --text:#e6edf3; --brand:#6ee7b7; --brand-2:#22d3ee; --ring:rgba(110,231,183,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ===================== Global/Reset ===================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background: var(--bg); /* neutral */
  color:var(--text);
}
a{color:inherit;text-decoration:none}

/* ===================== Layout-Helfer ===================== */
.container{max-width:1100px;margin:0 auto;padding:28px}

/* ===================== Navigation / Header ===================== */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px}
.badge{padding:6px 10px;border:1px solid #233044;border-radius:999px;font-size:12px;color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;font-weight:600;
  border:1px solid #233044;box-shadow:var(--shadow);
  transition:.2s ease;backdrop-filter:saturate(1.2)
}
.btn:hover{transform:translateY(-1px);}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#03201a;border-color:transparent
}

/* ===================== Hero / Karten / Grids ===================== */
.hero{
  display:block;
  margin-top:36px;
}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid #1f2937;
  border-radius:22px;
  padding:22px;
  box-shadow:var(--shadow);
}

.hero h1{
  font-size: clamp(26px, 5vw, 46px);
  line-height: 1.15;
  margin: 10px 0 12px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.muted{color:var(--muted)}

.kpis{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}

.kpi{
  flex:1 1 140px;
  background:#0f1520;
  border:1px solid #1f2937;
  border-radius:16px;
  padding:14px;
}

.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.section{margin:56px 0}


h2{font-size:28px;margin:0 0 10px}
.tag{
  font-size:12px;
  border:1px solid #273448;
  border-radius:999px;
  padding:4px 10px;
  color:#9fb2c8;
  display:inline-block;
  margin-right:6px;
}


/* Einheitliche Höhe & Button am unteren Rand */
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card ul {
  flex-grow: 1; /* Füllt den verbleibenden Platz zwischen Inhalt und Button */
}

.card .btn {
  margin-top: auto; /* Schiebt den Button nach unten */
  align-self: flex-start; /* optional: hält ihn linksbündig */
}


/* ===================== Projekte & Services ===================== */
.project{display:flex;flex-direction:column;gap:12px}
.project .thumb{
  height:160px;border-radius:14px;
  background:
    radial-gradient(80% 100% at 20% 0%,rgba(34,211,238,.22),transparent),
    radial-gradient(80% 100% at 120% 100%,rgba(110,231,183,.18),transparent),
    #0e1522;
  border:1px solid #213047
}
.project h3{margin:6px 0 2px;font-size:18px}
.project p{margin:0;color:#a7b5c6}

.service{display:flex;gap:12px}
.service .icon{
  width:42px;height:42px;border-radius:12px;background:#0f1624;
  border:1px solid #213047;display:grid;place-items:center
}
.stack{display:flex;gap:10px;flex-wrap:wrap}

.price{display:flex;align-items:flex-end;gap:8px}
.price .num{font-size:28px;font-weight:800}

/* ===================== Footer ===================== */
.footer{margin:60px 0 20px;color:#8fa3b8}

/* ===================== Responsive ===================== */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}

  .nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nav nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .nav .btn{
    padding:10px 14px;
  }
}

/* ===================== Accessibility ===================== */
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:10px}

/* Fullscreen Intro Overlay */
.intro {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 32px 0;

  /* Hintergrund: optional, passt zu deinem Stil */
  background:
    radial-gradient(80% 100% at 20% 0%, rgba(34,211,238,.18), transparent),
    radial-gradient(80% 100% at 120% 100%, rgba(110,231,183,.14), transparent),
    #0b1220;
}

.intro-inner {
  text-align: left;
  position: relative;
  z-index: 10;
}

.intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* DUNKLER OVERLAY */
.intro::after {
  content: "";
  position: absolute;
  inset: 0;

  /* HIER dunkler machen */
  background:
    radial-gradient(
      80% 60% at 50% 40%,
      rgba(0,0,0,0.40),  /* war 0.2 -> höher = dunkler */
      rgba(0,0,0,0.90)   /* war 0.7 -> höher = dunkler */
    ),
    rgba(11,18,32,0.70); /* war 0.5 -> höher = dunkler */

  z-index: 1;
}



.intro h1 {
  margin: 12px 0 10px;
  line-height: 1.05;
  font-size: clamp(34px, 5vw, 58px);
}

.intro p {
  margin: 0;
  font-size: 16px;
}

.intro-down {
  display: inline-block;
  margin-top: 26px;
  text-decoration: none;
  opacity: .8;
  transition: opacity .15s ease, transform .15s ease;
}
.intro-down:hover {
  opacity: 1;
  transform: translateY(2px);
}

/* Smooth scrolling für Anchor Links */
html {
  scroll-behavior: smooth;
}

#page{
  padding-top: 0;
  position: relative;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 700px at 85% 22%, rgba(110,231,183,.08), transparent 60%),
    linear-gradient(180deg, #0b0f14 0%, #0d1117 45%, #0b0f14 100%);
  background-repeat: no-repeat;
  background-attachment: scroll; /* wichtig: nicht fixed */
}

/* ======================
   Custom Cursor Ring
   ====================== */

#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  border: 2px solid gray;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease;
  transform: translate(-9999px, -9999px);
}

.intro-active #cursor-ring {
  opacity: 1;
}

.intro-brand{
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 20; /* über Overlay und Video */
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 30px;
  padding: 10px 14px;
  border-radius: 14px; 
}

@media (max-width: 700px){
  .intro-brand{
    left: 24px;          /* näher an den Rand */
    font-size: 22px;     /* etwas kleiner */
    padding: 8px 12px;
  }
}

/* =====================
   Liquid Glass Button
   ===================== */

.btn-glass {
  position: relative;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);

  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    0 8px 30px rgba(0,0,0,0.35);

  transition: 
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.btn-glass::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(
      60% 40% at 30% 20%,
      rgba(255,255,255,0.45),
      transparent 60%
    );
  opacity: 0.7;
  transform: rotate(12deg);
  pointer-events: none;
}

.btn-glass:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    0 14px 40px rgba(0,0,0,0.45);
}

.btn-glass:hover::before {
  opacity: 0.9;
  transform: rotate(12deg) translateX(12%);
}

.btn-glass:active {
  transform: translateY(0) scale(0.98);
}


.btn-glass-liquid{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* wichtig: eigene Layer */

  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);

  border: 1px solid rgba(255,255,255,0.22);
  color: var(--text);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    0 10px 30px rgba(0,0,0,0.35);

  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

/* “Liquid highlight” der mit der Maus wandert */
.btn-glass-liquid::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(40% 30% at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.10) 35%,
      transparent 60%);
  opacity: .85;
  filter: blur(10px);
  transform: translateZ(0);
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 0;
}

/* “Wellen/Flow”-Layer (animiert) */
.btn-glass-liquid::after{
  content:"";
  position:absolute;
  inset:-80%;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(255,255,255,0.0),
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.0),
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.0));
  opacity: .35;
  filter: blur(18px);
  transform: translate(var(--lx, 0px), var(--ly, 0px)) rotate(var(--rot, 0deg));
  pointer-events:none;
  z-index: 0;
}

/* Text immer oben */
.btn-glass-liquid > *{
  position: relative;
  z-index: 1;
}

.btn-glass-liquid:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.45),
    0 16px 45px rgba(0,0,0,0.45);
}

/* =====================
   Scroll Reveal
   ===================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  will-change: opacity, transform;
}

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

/* leicht versetzte Kinder (Stagger-Effekt) */
.reveal-stagger > * {
  transition-delay: calc(var(--i, 0) * 120ms);
}


/* Fullscreen Black Fade-In Overlay */
#page-fade{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100000;           /* über allem */
  opacity: 1;
  pointer-events: none;
  transition: opacity 900ms ease; /* "auflösen" */
}

/* wenn die Seite bereit ist -> ausblenden */
body.is-loaded #page-fade{
  opacity: 0;
}

body:not(.is-loaded){
  overflow: hidden; /* verhindert Scroll während Fade */
}
body.is-loaded{
  overflow: auto;
}

.tech-icons{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.tech-icons img{
  width:22px;
  height:22px;
  opacity:.85;
  filter: brightness(0) invert(1);
  transition: transform .2s ease, opacity .2s ease;
}

.tech-icons img:hover{
  opacity:1;
  transform: translateY(-1px);
}

.thumb {
  position: relative;
  height: 180px;           /* oder was du nutzt */
  border-radius: 14px;
  overflow: hidden;
}

.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.card.project:hover .thumb::after {
  opacity: 0.25;
}

.tech-stack {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tech-stack a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  transition: transform .2s ease, background .2s ease;
}

.tech-stack a:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.08);
}

.tech-stack img {
  width: 22px;
  height: 22px;
  opacity: .9;
  filter: invert(1);
}

.card .tech-stack {
  justify-content: center;
}

/* =====================
   Pricing Cards Hover
   ===================== */

/* Optional: Karten in dieser Section sollen "hoverbar" sein */
.pricing .card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  will-change: transform;
}

/* Hover Effekt: leicht anheben + "silber" Schimmer */
.pricing .card:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255,255,255,0.22);

  /* leicht silberne Oberfläche */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
    radial-gradient(90% 70% at 25% 0%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(255,255,255,0.06), transparent 55%);

  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* (Optional) kleiner Glow nur bei Pricing */
.pricing .card:hover .price .num{
  text-shadow: 0 0 14px rgba(255,255,255,0.18);
}

/* Mobile: kein "Hover-Lift" wenn Touch */
@media (hover: none){
  .pricing .card:hover{
    transform: none;
  }
}

/* ===== Pricing: 4 cards in one row on desktop ===== */
.grid-4{
  grid-template-columns: repeat(4, 1fr);
}

/* Auf kleineren Screens wieder 2/1 Spalten */
@media (max-width: 1100px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .grid-4{ grid-template-columns: 1fr; }
}

/* Custom card (4. Karte) als kompakte Card darstellen */
.pricing .pricing-custom{
  display:flex;
  flex-direction:column;      /* statt 2-spaltig */
  gap:10px;
}

.pricing .pricing-custom-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
  min-width: 0;               /* wichtig für Grid */
}

/* damit in der Custom-Card die Buttons unten sitzen */
.pricing .pricing-custom{
  height: 100%;
}
.pricing .pricing-custom-cta{
  margin-top: auto;
}

/* ===================== Über mich – Layout mit Profilbild ===================== */

.about-content{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}

.about-text{
  flex:1;
  min-width:240px;
}

.about-photo{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
}

.about-photo img{
  width:180px;
  height:180px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #1f2937;
  box-shadow:var(--shadow);
}

/* Mobile: untereinander, Bild oben & mittig */
@media (max-width:700px){
  .about-content{
    flex-direction:column;
    align-items:flex-start;
  }

  .about-photo{
    width:100%;
    justify-content:center;
    margin:0 auto 12px;
  }

  .about-photo img{
    margin:0 auto;
  }
}

html, body {
  overflow-x: hidden;
}



/* ===================== Intro Type Effect ===================== */
.intro-title {
  text-align: center;
}

.type-wrapper {
  position: relative;
  display: inline-grid;
  align-items: center;
}

.type-wrapper > * {
  grid-area: 1 / 1;
}

.type-measure {
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  font-kerning: none;
  font-variant-ligatures: none;
}

.type-live {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  width: 100%;
}

#intro-typed,
#intro-cursor {
  font-kerning: none;
  font-variant-ligatures: none;
}

#intro-typed {
  white-space: nowrap;
  text-align: left;
}

#intro-cursor {
  display: inline-block;
  margin-left: 2px;
  opacity: 0.85;
  animation: introCursorBlink 0.7s step-end infinite;
}

#intro-cursor.cursor-finished {
  animation: introCursorBlink 1.2s step-end infinite;
}

@keyframes introCursorBlink {
  0%, 50% { opacity: 0.85; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 640px) {
  .type-measure,
  .type-live,
  #intro-typed {
    white-space: normal;
  }
}


/* ===================== Card Icons ===================== */

.card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #213047;
  margin-bottom: 14px;
}

.card-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.95;
  filter: invert(79%) sepia(31%) saturate(576%) hue-rotate(111deg) brightness(98%) contrast(93%);
}

.hero-card {
  max-width: 820px;
}

.hero-copy {
  max-width: 680px;
  margin-top: 10px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-benefits {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 14px;
}

.hero-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}