/* ══════════════════════════
   LOCAL FONT
══════════════════════════ */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_24pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════
   VARIABLES
══════════════════════════ */
:root {
  --navy:    #0F1C2E;
  --deep:    #070708;
  --white:   #FDFAFB;
  --pink:    #C1178A;
  --pink-dk: #9B1360;
  --pink-gl: rgba(193,23,138,.22);
  --pink-xs: rgba(193,23,138,.06);
  --muted:   rgba(253,250,251,.52);
  --border:  rgba(193,23,138,.16);
  --borderw: rgba(253,250,251,.08);
  --orb: 'Orbitron', sans-serif;
  --dm:  'Inter', sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --eout: cubic-bezier(0,.55,.45,1);
}

/* ══════════════════════════
   RESET
══════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--dm); font-weight:400; background:var(--navy); color:var(--white); line-height:1.7; overflow-x:hidden; }
img  { display:block; max-width:100%; }
a    { color:inherit; }
button { font-family:inherit; }
strong { font-weight:500; color:var(--white); }

/* ══════════════════════════
   TYPE HELPERS
══════════════════════════ */
.eyebrow {
  font-family: var(--orb);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .7rem;
}

h2 {
  font-family: var(--orb);
  font-size: clamp(1.55rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .02em;
}
h2 em { font-style:normal; color:var(--pink); }
h3    { font-family:var(--orb); font-weight:700; letter-spacing:.04em; color:var(--white); }
p     { color:var(--muted); font-weight:400; line-height:1.8; }

.sec-head { margin-bottom:3.5rem; }

/* ══════════════════════════
   REVEAL
══════════════════════════ */
.reveal {
  opacity:0;
  transform:translateY(26px);
  transition: opacity .75s var(--eout), transform .75s var(--eout);
}
.reveal.in { opacity:1; transform:translateY(0); }

/* ══════════════════════════
   BUTTONS
══════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.9rem;
  min-height: 44px;
  font-family: var(--orb);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .3s var(--ease), box-shadow .3s, color .3s, border-color .3s, transform .2s;
  white-space: nowrap;
}
.btn--pink {
  background: var(--pink);
  color: var(--white);
  clip-path: polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
.btn--pink:hover { background:var(--pink-dk); box-shadow:0 0 36px var(--pink-gl); transform:translateY(-1px); }
.btn--ghost { background:transparent; color:rgba(253,250,251,.8); border:1px solid rgba(253,250,251,.28); }
.btn--ghost:hover { border-color:var(--pink); color:var(--pink); }
.btn--full { width:100%; justify-content:center; }

/* ══════════════════════════
   NAV
══════════════════════════ */
.nav {
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:90px;
  padding:0 7%;
  border-bottom:1px solid transparent;
  transition:height .4s var(--ease), background .4s, border-color .4s;
}

.nav.scrolled {
  height:72px;
  background:rgba(7,7,8,.85);
  backdrop-filter:blur(16px);
  border-color:var(--border);
}

.nav__logo {
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--white);
  height:100%;
  flex-shrink:0;
  overflow:visible;
}

.nav__logo-img {
  display:block;
  height:26px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  transform:none;
}

.nav__links { display:flex; align-items:center; gap:2.2rem; }
.nav__links a { font-family:var(--orb); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:rgba(253,250,251,.82); transition:color .25s; }
.nav__links a:hover { color:var(--pink); }
.nav__cta { padding:.5rem 1.2rem !important; border:1px solid var(--pink) !important; color:var(--white) !important; border-radius:2px; }
.nav__cta:hover { background:var(--pink) !important; }

.nav__burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav__burger span { display:block; width:22px; height:1.5px; background:var(--white); transition:.3s var(--ease); }
.nav__burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity:0; }
.nav__burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════
   HERO
══════════════════════════ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }

.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__photo { width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:brightness(.4) saturate(.7); }
.hero__dim {
  position:absolute; inset:0;
  background:
    linear-gradient(108deg, rgba(7,7,8,.92) 30%, rgba(15,28,46,.5) 100%),
    linear-gradient(to top, rgba(7,7,8,.8) 0%, transparent 45%);
}
.hero__noise {
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px; opacity:.04; pointer-events:none;
}

.hero__deco { position:absolute; inset:0; z-index:1; pointer-events:none; }
.dv { position:absolute; top:0; bottom:0; width:1px; }
.dv1 { left:7%; background:linear-gradient(to bottom, transparent, rgba(193,23,138,.3) 40%, transparent); }
.dv2 { right:7%; background:linear-gradient(to bottom, transparent, rgba(193,23,138,.12) 50%, transparent); }
.dh  { position:absolute; top:63%; left:7%; right:0; height:1px; background:linear-gradient(to right, rgba(193,23,138,.3), transparent 55%); }
.dc  { position:absolute; bottom:12%; left:calc(7% + 18px); width:40px; height:40px; border-left:1px solid rgba(193,23,138,.45); border-bottom:1px solid rgba(193,23,138,.45); }

.hero__inner { position:relative; z-index:2; padding:0 7%; padding-top:100px; max-width:860px; }

.hero__tag { font-family:var(--orb); font-size:.58rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--pink); margin-bottom:1.6rem; opacity:0; animation:fadeUp .7s .15s forwards; }

.hero__hl { display:flex; flex-direction:column; font-family:var(--orb); font-weight:900; line-height:1.08; }
.hl  { display:block; opacity:0; }
.hl1 { font-size:clamp(1.8rem,4.5vw,3.8rem); animation:fadeUp .8s .3s forwards; }
.hl2 { font-size:clamp(1.8rem,4.5vw,3.8rem); animation:fadeUp .8s .45s forwards; }
.hl2 em { font-style:normal; color:var(--pink); }
.hl3 { font-size:clamp(1.8rem,4.5vw,3.8rem); color:rgba(253,250,251,.22); animation:fadeUp .8s .6s forwards; }

.hero__sub { margin-top:1.2rem; font-size:.92rem; color:rgba(253,250,251,.58); max-width:520px; line-height:1.85; opacity:0; animation:fadeUp .8s .75s forwards; }
.hero__sub strong { color:rgba(253,250,251,.9); }

.hero__btns { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; opacity:0; animation:fadeUp .8s .9s forwards; }

.hero__kpi {
  display:flex;
  align-items:center;
  gap:2rem;
  margin-top:1.8rem;
  margin-bottom:1rem;
  opacity:0;
  animation:fadeUp .8s 1.05s forwards;
}.kpi strong { display:block; font-family:var(--orb); font-size:1rem; font-weight:900; color:var(--white); line-height:1; }
.kpi span   { font-size:.68rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-top:.2rem; display:block; }
.kpi__sep   { width:1px; height:36px; background:var(--border); }

.hero__arrow { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:2; color:rgba(253,250,251,.35); text-decoration:none; animation:bounce 2.2s infinite; transition:color .3s; }
.hero__arrow:hover { color:var(--pink); }

/* ══════════════════════════
   STATEMENT
══════════════════════════ */
.statement {
  padding: 7rem 7%;
  background: rgba(7,7,8,.6);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.statement__inner { max-width:800px; margin:0 auto; }
.statement__inner h2 { margin-bottom:1.5rem; font-size:clamp(1.5rem,3vw,2.2rem); }
.statement__inner p  { font-size:.92rem; }

/* ══════════════════════════
   LEISTUNGEN
══════════════════════════ */
.leistungen { padding:8rem 7%; max-width:1300px; margin:0 auto; }

.l2col { display:grid; grid-template-columns:1fr auto 1fr; gap:0; border:1px solid var(--border); }

.lcol { padding:3rem 2.5rem; }
.lcol:first-child { border-right:1px solid var(--border); }

.lcol__head {
  display:flex; align-items:center; gap:1rem;
  padding-bottom:2rem;
  margin-bottom:2rem;
  border-bottom:1px solid var(--border);
}
.lcol__icon { color:var(--pink); flex-shrink:0; }
.lcol__head h3 { font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.2rem; }
.lcol__head span { font-size:.75rem; color:var(--muted); }

.llist { list-style:none; display:flex; flex-direction:column; gap:0; }

.litem {
  display:flex; gap:1.2rem; align-items:flex-start;
  padding:1.4rem 0;
  border-bottom:1px solid var(--borderw);
  transition:background .3s;
}
.litem:last-child { border-bottom:none; }
.litem:hover { background:var(--pink-xs); margin:0 -1rem; padding-left:1rem; padding-right:1rem; }

.litem { cursor: pointer; }
.litem__n { font-family:var(--orb); font-size:.58rem; font-weight:900; color:var(--pink); letter-spacing:.1em; flex-shrink:0; margin-top:.3rem; }
.litem strong { display:block; font-family:var(--orb); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.35rem; }
.litem p { font-size:.84rem; }

/* Plus divider */
.l2col__plus { display:flex; align-items:center; justify-content:center; width:80px; background:var(--pink-xs); position:relative; }
.plus__circle {
  width:52px; height:52px;
  border:1px solid var(--pink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--orb); font-size:1.4rem; font-weight:900;
  color:var(--pink);
  background:var(--navy);
}

/* ══════════════════════════
   PROZESS
══════════════════════════ */
.prozess { background:rgba(7,7,8,.5); padding:8rem 7%; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.prozess__inner { max-width:1100px; margin:0 auto; }

.steps {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border:1px solid var(--border);
}

.step {
  padding:2rem 1.5rem;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:.8rem;
  position:relative; transition:background .3s;
  background:var(--navy);
}
.step:last-child { border-right:none; }
.step:hover { background:var(--pink-xs); }

.step__n { font-family:var(--orb); font-size:.58rem; font-weight:900; color:var(--pink); letter-spacing:.1em; }

.step__bar { width:24px; height:2px; background:linear-gradient(to right,var(--pink),var(--pink-dk)); }
.step__bar--last { background:var(--pink); }

.step strong { font-family:var(--orb); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--white); }
.step span   { font-size:.82rem; color:var(--muted); line-height:1.7; }

/* ══════════════════════════
   ÜBER MICH
══════════════════════════ */
.about { padding:8rem 7%; }
.about__inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:6rem; align-items:center; }

.about__visual { position:relative; height:380px; }

.ab1 { position:absolute; inset:0 2.5rem 2.5rem 0; border:1px solid var(--border); }
.ab2 { position:absolute; bottom:0; right:0; width:55%; height:55%; background:rgba(193,23,138,.08); border:1px solid rgba(193,23,138,.35); }
.ab3 { position:absolute; top:2rem; left:2rem; width:30px; height:30px; border-top:2px solid var(--pink); border-left:2px solid var(--pink); }

.about__text-deco {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--orb); font-size:1.4rem; font-weight:900;
  color:rgba(253,250,251,.06); text-align:center; line-height:1.3;
  pointer-events:none; white-space:nowrap;
}
.about__text-deco span { color:rgba(193,23,138,.15); font-size:2rem; }

.about__content h2 { margin-bottom:1.5rem; }
.about__p { font-size:.9rem; margin-bottom:1rem; }

/* ══════════════════════════
   STIMMEN
══════════════════════════ */
.stimmen { padding:8rem 7%; max-width:1300px; margin:0 auto; }

.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.tc { background:rgba(7,7,8,.5); border:1px solid var(--border); border-left:3px solid var(--pink); padding:2.2rem 2rem; transition:background .3s; }
.tc:hover { background:var(--pink-xs); }

.tc__stars { color:var(--pink); letter-spacing:.1em; font-size:.85rem; margin-bottom:1rem; }
.tc p { font-size:.9rem; font-style:italic; color:rgba(253,250,251,.72); line-height:1.8; }

cite { display:block; margin-top:1.3rem; font-style:normal; font-family:var(--orb); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--pink); }

/* ══════════════════════════
   KONTAKT
══════════════════════════ */
.kontakt { padding:8rem 7%; background:rgba(7,7,8,.6); border-top:1px solid var(--border); }
.kontakt__wrap { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1.5fr; gap:6rem; align-items:start; }

.kontakt__info h2 { margin-bottom:1.2rem; }
.kontakt__sub { font-size:.88rem; margin-bottom:2rem; }

.kdeets { display:flex; flex-direction:column; gap:.9rem; }
.kdeet { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:rgba(253,250,251,.55); text-decoration:none; transition:color .3s; }
.kdeet svg { color:var(--pink); flex-shrink:0; }
.kdeet:hover { color:var(--pink); }

.kontakt__form { display:flex; flex-direction:column; gap:1.1rem; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

.fg { display:flex; flex-direction:column; gap:.4rem; }
.fg label { font-family:var(--orb); font-size:.55rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(253,250,251,.38); }

/* INPUT & TEXTAREA */
.fg input, .fg textarea {
  background: rgba(253,250,251,.03);
  border:1px solid var(--border);
  color:var(--white);
  padding:.8rem 1rem;

  font-family:var(--dm);
  font-size:.88rem;
  font-weight:400;

  outline:none;
  transition:border-color .3s, background .3s;
}

/* SELECT (Dropdown mit Pfeil) */
.fg select {
  background:
    linear-gradient(45deg, transparent 50%, var(--pink) 50%),
    linear-gradient(135deg, var(--pink) 50%, transparent 50%),
    rgba(253,250,251,.03);

  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    0 0;

  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;

  border:1px solid var(--border);
  color:var(--white);
  padding:.8rem 1rem;
  padding-right:2.5rem;

  font-family:var(--dm);
  font-size:.88rem;
  font-weight:400;

  outline:none;
  transition:border-color .3s, background .3s;
  appearance:none;
  cursor:pointer;
}

.fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--pink); background:rgba(193,23,138,.05); box-shadow:0 0 0 2px rgba(193,23,138,.2); }
.fg select option { background:var(--deep); }
.fg textarea { resize:vertical; min-height:130px; }

/* ══════════════════════════
   FOOTER
══════════════════════════ */
.footer { 
  background:var(--deep); 
  border-top:1px solid var(--border); 
  padding:0.7rem 7%; 
}
.footer__inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer__logo { font-family:var(--orb); font-size:.9rem; font-weight:900; letter-spacing:.12em; text-decoration:none; color:var(--white); }
.footer__logo span { color:var(--pink); }
.footer p { font-size:.75rem; color:rgba(253,250,251,.28); }
.footer nav { display:flex; gap:1.5rem; }
.footer a { font-size:.75rem; color:rgba(253,250,251,.28); text-decoration:none; transition:color .3s; }
.footer a:hover { color:var(--pink); }
.footer .nav__logo-img {
  height:27px;
  transform:none;
}

/* ══════════════════════════
   KEYFRAMES
══════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media (max-width:1100px) {
  .l2col { grid-template-columns:1fr; }
  .l2col__plus { width:100%; height:70px; flex-direction:row; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .lcol:first-child { border-right:none; border-bottom:1px solid var(--border); }
  .steps { grid-template-columns:repeat(3,1fr); }
  .step { border-bottom:1px solid var(--border); }
  .step:nth-child(3) { border-right:none; }
}

@media (max-width:900px) {
  .about__inner, .kontakt__wrap { grid-template-columns:1fr; gap:3rem; }
  .about__visual { height:240px; }
  .tgrid { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2) { border-right:none; }
  .step:nth-child(3) { border-right:1px solid var(--border); }

  .nav {
    height:72px;
  }

  .nav.scrolled {
    height:60px;
  }

  .nav__logo-img {
    height:52px;
    max-width:220px;
    transform:none;
  }

  .nav__links {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start;
    background:rgba(7,7,8,.97); padding:2rem 7%; gap:1.5rem;
    border-bottom:1px solid var(--border);
  }
  .nav__links.open { display:flex; }
  .nav__burger { display:flex; }
}

@media (max-width:640px) {
  .hero__inner { padding-top:100px; }
  .statement, .leistungen, .prozess, .about, .stimmen, .kontakt { padding:5rem 5%; }
  .tgrid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .step { border-right:none !important; }
  .frow { grid-template-columns:1fr; }
  .footer__inner { flex-direction:column; text-align:center; }
  .hero__kpi { gap:1.2rem; }

  .nav {
    height:64px;
    padding:0 5%;
  }

  .nav.scrolled {
    height:54px;
  }

  .nav__logo-img {
    height:44px;
    max-width:180px;
    transform:none;
  }
}
/* ══════════════════════════
   TRUST BADGES
══════════════════════════ */
.trust-badges {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.8rem;
}
.trust-badge {
  font-size: .82rem;
  color: rgba(253,250,251,.65);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ══════════════════════════
   FORM SUCCESS
══════════════════════════ */
.form__success {
  display: none;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: rgba(193,23,138,.1);
  border: 1px solid rgba(193,23,138,.4);
  border-left: 3px solid var(--pink);
  margin-top: .5rem;
}
.form__success.visible { display: flex; }
.form__success svg { color: var(--pink); flex-shrink: 0; margin-top: .1rem; }
.form__success strong { display: block; color: var(--white); font-size: .88rem; margin-bottom: .2rem; }
.form__success span { font-size: .82rem; color: var(--muted); }
/* ══════════════════════════
   LOGO RESPONSIVE
══════════════════════════ */
.nav__logo--icon { display: none; }
.nav__logo--full { display: block; }

@media (max-width: 768px) {
  .nav__logo--full { display: none; }
  .nav__logo--icon {
    display: block;
    height: 42px;
    width: auto;
    object-fit: contain;
  }
}